Design System — ROKIRI

Logo

Na tmavém — primární použití

Na panelu (--panel)

Na zlaté (--gold) — pouze výjimečně

Na bílé — monochrome verze

› Pravidlo: Logo se používá vždy jako SVG inline nebo soubor. Nikdy jako rastrovaný PNG. Minimální výška 24px.

Barvy

Pozadí & povrchy

--ink

#0e0f12

Ink — hlavní pozadí

Canvas celého webu. Všechny sekce, nav po scrollu.

--panel

#17181c

Panel — karty

Karty, service boxy, jobcard, package. Vyvýšená vrstva nad inkem.

--panel-2

#1e2025

Panel-2 — hover stav

Hover stav karet a interaktivních panelů.

--line

#2a2b30

Line — ohraničení

Jemné separátory, rámečky, dashed linky v procesech a kartách.

Text

--steel

#d2d3d6

Steel — primární text

Hlavní barva těla textu, body copy, odstavce.

--steel-dim

#85868c

Steel-dim — sekundární text

Popisky, meta texty, placeholdery, sekundární info.

#fff

#ffffff

Bílá — nadpisy

H1, H2, H3, logo, důrazné hodnoty v kartách.

Akcent

--gold

#ffce07

Gold — hlavní akcent ⚡

CTA tlačítka, eyebrow, ikonky, ceny, čísla v trust sekci, logo tečka. Primární vizuální akcent.

--gold-soft

#ffda3d

Gold-soft — hover

Hover stav primary tlačítka a dalších akcentových prvků.

--ok

#52c98b

OK — status zelená

Kladné statusy v jobcard — "Termíny volné", potvrzení.

⚡ Pravidlo: Žlutá (#ffce07) = vždy akcent nebo CTA. Nikdy pro dekorativní pozadí sekcí. Bílá = nadpisy a hodnoty. Steel-dim = sekundární kontext.

Typografie

Kanit — display font (nadpisy, logo, trust čísla)

Kanit — přehled řezů

Regular 400 · opacity 100 % — H2, H3 SemiBold 600 · opacity 100 % Bold 700 · opacity 100 % Black 900 · opacity 100 % — H1, trust

Italic

Regular Italic · em v hero SemiBold Italic Bold Italic Black Italic

Nunito Sans — tělo textu

Nunito Sans — váhy

Light 300 · opacity 45 % — pouze výjimečně Regular 400 · opacity 82 % — základní text (--steel) Medium 500 · opacity 82 % SemiBold 600 · opacity 100 % — silnější akcenty

IBM Plex Mono — kódy, tagy, ceny

Regular 400 · eyebrow, ceny Medium 500 · tagy, labels SemiBold 600 · btn-primary

Typografická škála & třídy

Token	Třída	Hodnota	Font · opacity	Ukázka	Kde se používá
--fs-hero	.h1	clamp(46px, 6.4vw, 76px)	Kanit 900 uppercase · lh .98 opacity 100 %	Interiér auta	Hero H1, trust čísla (ČB, 24H…)
--fs-xl	.h2	clamp(30px, 4vw, 44px)	Kanit 700 uppercase · lh 1.1 opacity 100 %	Služby	Section H2 (Služby, Ceník, Kontakt)
--fs-lg	.h3	20px	Kanit 600 uppercase · lh 1.2 opacity 100 %	Čalounění a sedačky	Service H3, package H3
--fs-md	.h4	17px	Kanit 700 uppercase · lh 1.3 opacity 75 %	Detail koberečků a mezer	H4 nadpisy, perex (alternativa Nunito 17px)
--fs-base	—	16px	Nunito Sans 400 lh 1.55 · opacity 82 %	Zaměřuju se výhradně na interiér. Exteriér neřeším.	Základní text, service p, section head p, formuláře
--fs-min	—	14px MINIMUM	IBM Plex Mono 400 lh 1.4 · opacity 53 %	— České Budějovice	Eyebrow, nav links, btn text, labels, tagy, price desc, footer

⚡ Žádný element na webu nesmí mít font-size menší než --fs-min (14px). Při změně škály uprav vždy jen :root v index.html.

Spacing

8px· gap mezi ikonou a textem, drobné mezery

14px· gap v nav-links, eyebrow margin-bottom

18px· field margin-bottom, service icon margin-bottom

24px· wrap padding (mobil), section-head gap

32px· footer padding, nav-links gap

48px· section-head margin-bottom, contact-grid gap

88px· section padding (top/bottom)

115px / 96px· hero padding top / bottom

Tlačítka

Na tmavém pozadí (--ink / hero)

Zobrazit ceník .btn-primary Background #ffce07 · text #14110c · Mono 600 · 14px · Primární CTA — vždy jedna na stránce/sekci

Domluvit termín .btn-ghost Border + text #fff · hover: gold · Sekundární akce vedle primary

⚡ Pravidla tlačítek: Max jedno .btn-primary v sekci. Ghost vždy jen jako doprovod k primary. Border-radius: 2px — žádná kulatá tlačítka. Text UPPERCASE, Mono font.

Komponenty

Eyebrow

České Budějovice

Co děláme

Zakázkový list

Mono 14px · spacing .12em · UPPERCASE · žlutá · linka vlevo 18px · margin-bottom 14px · vždy před H2

Trust sekce — čísla

ČB

Působím v Českých Budějovicích

24H

Reakce na poptávku

100%

Zaměřeno jen na interiér

Kanit 900 · --fs-hero · gold · lh .98 · popis: IBM Plex Sans --fs-base · steel-dim

Service karta

Základní čištění

Vysátí, palubní deska, dveřní výplně, skla zevnitř.

Péče o kůži

Čištění a impregnace pravé kůže — sedačky, volant.

Odstranění pachů

Ozonizace kabiny — cigareta, zvíře, vlhko.

Grid gap 1px (background = --line) · Panel bg · hover: panel-2 · ikona gold 26px · H3 Kanit 600 UPPERCASE --fs-lg · p --fs-base steel-dim

Ceník — price line

Hloubkové čištění čalounění Látka / kombinace, bez přemočení

od 990 Kč

Péče o pravou kůži Čištění + impregnace, Colourlock

od 890 Kč

Name: white --fs-base · desc: steel-dim --fs-min · dots: dotted --line · price: Mono gold --fs-base

Jobcard / Kontakt karta

JménoTadeáš Kuba

Telefon734 141 424

Instagram@rokiri_com

StavTermíny volné

Tag (data-tag): absolut top-right · gold bg · dark text · Mono --fs-min 600 · Řádky: flex space-between · dashed border · Mono --fs-min

Token přehled

Všechny tokeny jsou definovány v :root v index.html. Stačí změnit jednu hodnotu — propaguje se všude.

/* Barvy */

--ink: #0e0f12

--panel: #17181c

--panel-2: #1e2025

--line: #2a2b30

--steel: #d2d3d6

--steel-dim: #85868c

--gold: #ffce07

--gold-soft: #ffda3d

--ok: #52c98b

/* Fonty */

--display: 'Kanit', sans-serif

--body: 'IBM Plex Sans', sans-serif

--mono: 'IBM Plex Mono', monospace

/* Typografická škála */

--fs-min: 14px /* absolutní minimum */

--fs-base: 16px /* základní text */

--fs-md: 17px /* perex, hero p */

--fs-lg: 20px /* service h3 */

--fs-xl: clamp(30px, 4vw, 44px) /* section h2 */

--fs-hero: clamp(46px, 6.4vw, 76px) /* hero h1, trust nums */