Elevante — Design Tokens Styleguide

Vizuální přehled všech designových tokenů. Tato stránka slouží grafikovi jako referenční podklad pro přípravu styleguide v Figmě a pro nové projekty — hodnoty zde uvedené přímo odpovídají CSS proměnným v theme.less a tokens.less.

theme.less brand-specifické, mění se per projekt tokens.less primitives, sdílené napříč projekty

Colors

Barvy přes všechny kategorie. Najetí myší zvýrazní řádek. Vše theme pokud není označeno jinak.

Brand

Primary
--color-primary
#003b88
Primary Hover
--color-primary-hover
#0049a8
Secondary
--color-secondary
#09E0C7
Secondary Hover
--color-secondary-hover
#07b3a0

Text — na světlém

Text (body)
--color-text
#050505
Heading
--color-heading
#343434
Muted
--color-text-muted
#7f7f7f
Subtle
--color-text-subtle
#9f9f9f

Text — na tmavém (inverted)

Inverted
--color-text-inverted
#ffffff
Muted Inverted
--color-text-muted-inverted
#D7D7D7
Subtle Inverted
--color-text-subtle-inverted
rgba(255,255,255,0.5)

Backgrounds

Bg (.bg)
--color-bg
#ffffff
Bg Alt (.bg-alt)
--color-bg-alt
#F9FAFE
Bg Accent
--color-bg-accent
#D6DDE6
Bg Inverse
--color-bg-inverse
= --color-primary
Bg Footer
--color-bg-footer
#001530

Borders

Border
--color-border
= --gray-300
Border Light
--color-border-light
= --gray-200
Border Primary
--color-border-primary
rgba(0,59,136,0.6)

Status

Success
--color-success
#22c55e
Warning
--color-warning
#f59e0b
Error
--color-error
#ef4444

Gray scale tokens

--gray-50
#f9fafb
--gray-100
#f3f4f6
--gray-200
#e5e7eb
--gray-300
#d1d5db
--gray-400
#9ca3af
--gray-500
#6b7280
--gray-600
#4b5563
--gray-700
#374151
--gray-800
#1f2937
--gray-900
#111827

Typography

Font families · heading shorthandy · text styly · atomární size/weight/leading tokens. Preview vlevo, hodnota vpravo.

Font families

PreviewTokenValue
Heading Aa Bb 123--font-family-headingMontserrat, system-ui
Body Aa Bb 123 — Lorem ipsum dolor--font-family-bodyMontserrat, system-ui

Heading shorthandy

PreviewTokenValue (weight · size · leading)
Heading XL--heading-xl700 · 32–70px · 1.1
Heading LG--heading-lg700 · 28–40px · 1.2
Heading MD--heading-md700 · 24–32px · 1.3
Heading SM--heading-sm700 · 20–24px · 1.3

Text shorthandy (lead, caption)

PreviewTokenValue
Lead — větší úvodní odstavec--text-lead300 · 20–24px · 1.1
Lead SM — menší lead--text-lead-sm400 · 20px · 1.3
Caption — popisky, meta info--text-caption300 · 14px · 1.3
Caption XS--text-caption-xs400 · 12px · 1.3

Atomic — font sizes tokens

PreviewTokenValue (px)
Aa Bb — text-xxs--text-xxs10px
Aa Bb — text-xs--text-xs12px
Aa Bb — text-sm--text-sm14px
Aa Bb — text-base (body default)--text-base16px
Aa Bb — text-lg--text-lg18px
Aa Bb — text-xl--text-xl20px
Aa Bb — text-2xl--text-2xlclamp(20, fluid, 24)
Aa Bb — text-3xl--text-3xlclamp(24, fluid, 32)
Aa Bb — text-4xl--text-4xlclamp(28, fluid, 40)
Aa Bb — text-5xl--text-5xlclamp(32, fluid, 70)

Atomic — font weights tokens

PreviewTokenValue
Aa Bb — Light--font-light300
Aa Bb — Normal--font-normal400
Aa Bb — Medium--font-medium500
Aa Bb — Semibold--font-semibold600
Aa Bb — Bold--font-bold700
Aa Bb — Extra Bold--font-extra-bold800
Aa Bb — Black--font-black900

Atomic — line heights tokens

PreviewTokenValue
Lorem ipsum dolor sit amet, consectetur adipiscing. Sed do eiusmod tempor incididunt ut labore.
--leading-tight1.1
Lorem ipsum dolor sit amet, consectetur adipiscing. Sed do eiusmod tempor incididunt ut labore.
--leading-snug1.2
Lorem ipsum dolor sit amet, consectetur adipiscing. Sed do eiusmod tempor incididunt ut labore.
--leading-normal1.3
Lorem ipsum dolor sit amet, consectetur adipiscing. Sed do eiusmod tempor incididunt ut labore.
--leading-relaxed1.5

Spacing · Radius · Shadows tokens

Spacing scale

Bar (px)TokenValue
--space-44px (0.25rem)
--space-66px (0.375rem)
--space-88px (0.5rem)
--space-1212px (0.75rem)
--space-1616px (1rem)
--space-2020px (1.25rem)
--space-2424px (1.5rem)
--space-2828px (1.75rem)
--space-3232px (2rem)
--space-4040px (2.5rem)
--space-4848px (3rem)
--space-6060px (3.75rem)
--space-6464px (4rem)
--space-7272px (4.5rem)
--space-8080px (5rem)

Border Radius

PreviewTokenValue
--radius-sm4px
--radius-md8px
--radius-lg12px
--radius-full9999px (pill)

Shadows

PreviewTokenValue
--shadow-sm0 1px 2px rgba(0,0,0,.05)
--shadow-md0 4px 6px rgba(0,0,0,.07)
--shadow-lg0 10px 15px rgba(0,0,0,.1)

Buttons

Tlačítka kombinují size × type × variant. Všechny barvy přes --btn-* proměnné v theme — lze přepsat inline stylem nebo class modifikátorem.

Sizes — Primary (default)

SM
MD
LG

Types (color variants) — Contained

Primary
--color-primary → hover: --color-primary-hover
Secondary
--color-secondary → hover: --color-secondary-hover
Dark
--black → hover: --gray-900
Light
--white → hover: --gray-100 (pro tmavé pozadí)

Variants — Outlined

Primary
Secondary
Dark

Variants — Ghosted (text only)

Primary
Secondary

Block (100% width)

Token přehled

Shared:
--btn-radius: var(--radius-sm) — 4px
--btn-font-weight: 500 (medium)
--btn-letter-spacing: 1.68px
--btn-gap: 6px (mezi ikonou a textem)

Per size:
--btn-py-sm / --btn-px-sm: 6 / 16 px · font 14px
--btn-py-md / --btn-px-md: 12 / 20 px · font 14px
--btn-py-lg / --btn-px-lg: 12 / 24 px · font 18px

Per type (color override):
--btn-bg, --btn-bg-hover, --btn-color, --btn-border, --btn-border-hover

Forms & Links

Form inputs

Links

Toto je odkaz, na hover přebarví na primary-hover.

Tmavá sekce s inverted odkazem.

Tokens

--input-bgvar(--color-bg-alt) — pozadí inputu
--input-bordervar(--color-border) — border default
--input-focusvar(--color-primary) — focus border
--color-linkvar(--color-primary)
--color-link-hovervar(--color-primary-hover)
--color-link-invertedvar(--color-text-inverted) — na tmavém

Transitions · Z-Index · Breakpoints tokens

Transitions

--duration-fast150ms
--duration-normal250ms
--easecubic-bezier(.4,0,.2,1)

Z-Index scale

--z-content1
--z-header10
--z-dropdown100
--z-sticky200
--z-modal300
--z-tooltip400

Breakpoints

@bp-xs480px
@bp-sm640px
@bp-md768px
@bp-lg1024px
@bp-xl1280px

Container & Inner Padding

Containery (.inner-*) drží šířku obsahu centrované. Žluté šrafy = padding (--inner-px horizontal, --inner-py vertical).

viewport / 1680px reference
↕ --inner-py
.inner-xl  /  --inner-xl  =  1680px
.inner-lg  /  --inner-lg  =  1480px
.inner  /  --inner  =  1280px (DEFAULT)
.inner-sm  /  --inner-sm  =  1070px
↕ --inner-py
container (modrá intenzita = velikost)
--inner-px / --inner-py

Tokens & responsive padding

ContainerTokenValue
.inner-sm--inner-sm1070px
.inner DEFAULT--inner1280px
.inner-lg--inner-lg1480px
.inner-xl--inner-xl1680px
Breakpoint--inner-px--inner-py
xs < 640px20px32px
sm ≥ 640px32px40px
md ≥ 768px32px48px
lg ≥ 1024px32px60px

Utility třídy shared/utils

Třídy, které se dají zapsat přímo do obsahu v administraci (pole „třída“ u bloku, nebo do HTML v editoru). Kombinují se libovolně: class="mb-32 text-center bg-alt"

Responzivní předpony — před název třídy se dá dát breakpoint a platí od něj nahoru: sm- od 640 px · md- od 768 px · lg- od 1024 px.
Příklad: class="py-20 md-py-32 lg-py-48" = 20 px na mobilu, 32 px od tabletu, 48 px od desktopu.
Píše se vždy jako předpona (md-mb-24), ne dovnitř názvu.

Mezery — margin, padding, gap

Vnější mezera = margin (m), vnitřní = padding (p), mezera mezi položkami = gap.

TřídaCo dělá
m-* p-*ze všech čtyř stran
mt-* mb-* ml-* mr-*nahoře / dole / vlevo / vpravo (stejně pt- pb- pl- pr-)
mx-* my-*vodorovně / svisle (stejně px- py-)
mx-autovystředí blok, který má šířku
gap-*mezera mezi položkami ve flex / grid
sectionstandardní svislé odsazení sekce (responzivní, řídí ho téma)

Za pomlčku doplň stupeň:

0 · 4 · 6 · 8 · 12 · 16 · 20 · 24 · 28 · 32 · 40 · 48 · 56 · 60 · 64 · 72 · 80 · 96 · 128

Zobrazení a skrývání

TřídaCo dělá
hiddenúplně skryje
block inline inline-blocktyp zobrazení
flex gridkontejner pro řazení položek vedle sebe
mobile-onlyjen na mobilu (do 767 px)
tablet-upod tabletu nahoru (768 px+)
desktop-upjen na desktopu (1024 px+)
Skrytí na mobilu a zobrazení od tabletu: class="hidden md-block"
Naopak jen na mobilu: class="block md-hidden"

Text

TřídaCo dělá
text-left text-center text-rightzarovnání
t-xs … t-5xlvelikost písma — t-xs t-sm t-md t-lg t-xl t-2xl t-3xl t-4xl t-5xl
fw-l fw-n fw-m fw-sb fw-b fw-bktloušťka — light, normal, medium, semibold, bold, black
lh-t lh-s lh-n lh-rřádkování — tight, snug, normal, relaxed
line-clamp-1 … line-clamp-5ořízne text na daný počet řádků a doplní „…“
nowrapzakáže zalomení řádku
lead big caption smallhotové textové styly z typografie
hsmallmalý popisek nad nadpisem (verzálky, prostrkané)

Barvy

Barvy se berou z tématu projektu — v jiném webu vypadají jinak, názvy zůstávají stejné.

TřídaCo dělá
bg bg-alt bg-accent bg-inversepozadí — základní, střídavé, zvýrazněné, tmavé
bg-primary bg-secondarypozadí v hlavní / doplňkové barvě značky
text-light text-muted text-subtlesvětlý (na tmavém), méně důležitý, potlačený
text-primary text-secondarytext v barvě značky
text-success text-warning text-errorzelená / oranžová / červená
border-light border-primary border-success …barva rámečku (nutné i border)
Na tmavé sekci vždy spolu s pozadím i barvu textu: class="bg-inverse text-light"

Rámečky a zaoblení

TřídaCo dělá
border border-2 border-0rámeček 1 px / 2 px / žádný
border-t border-b border-l border-rjen jedna strana (též border-x, border-y)
rounded-sm rounded-md rounded-lgzaoblené rohy
rounded-fullúplně kulaté (pilulka, kolečko)
rounded-t rounded-b rounded-l rounded-rzaoblení jen na jedné straně
rounded-0zruší zaoblení

Obrázky a poměr stran

TřídaCo dělá
ratio-16-9 ratio-4-3 ratio-3-2 ratio-1-1 ratio-21-9pevný poměr stran (na šířku / čtverec)
ratio-9-16 ratio-3-4 ratio-2-3 ratio-7-6poměr na výšku
obj-coverobrázek vyplní rám a ořízne se — nejčastější volba
obj-containobrázek se vejde celý, zbydou prázdná místa

Rozložení vedle sebe

Nejdřív dej rodiči flex, pak řeš zarovnání.

TřídaCo dělá
flexpoložky vedle sebe
flex-colpoložky pod sebou
flex-wrappovolí zalomení do dalšího řádku
justify-start justify-center justify-endvodorovné zarovnání
justify-between justify-around justify-evenlyrozprostření mezer
items-start items-center items-endsvislé zarovnání
flex-1položka vyplní zbylé místo

Šířka obsahu

TřídaCo dělá
innerstandardní šířka obsahu — výchozí volba
inner-smužší, na dlouhý text a články
inner-lg inner-xlširší, na galerie a velké mřížky
max-w-sm … max-w-6xlomezení šířky jednoho bloku (ne celé sekce)

Text do sloupců

Sloupce se dají řetězit přes breakpointy: md-cols-2 lg-cols-3 lg-cols-gap-48

TřídaCo dělá
cols-1 … cols-5rozlije text do sloupců
cols-gap-24mezera mezi sloupci (stupně jako u mezer)
cols-gap-normalvrátí výchozí mezeru, když ji téma přepsalo

Přetečení a tabulky

TřídaCo dělá
table-responsivena obal široké tabulky — na mobilu půjde posouvat do stran
of-hiddenschová, co přeteče
of-x-autovodorovné posouvání, když se obsah nevejde

Tlačítka a odkaz s ikonou

TřídaCo dělá
btnzáklad — vždy musí být
btn-primary btn-secondaryhlavní / doplňková barva
btn-outlined btn-ghostedjen obrys / jen text
btn-sm btn-md btn-lgvelikost (btn-md je výchozí)
btn-blockpřes celou šířku
icontext icontext-lftmidtext s ikonou vlevo; ikona se zadá stylem --icon a --size

Animace

Používat střídmě — na jedné stránce ideálně jeden druh.

TřídaCo dělá
hover-liftnadzvedne se při najetí myší
load-pop load-slidenaskočí při načtení
floating pulse spinplovoucí / pulzující / rotující
anim-fast anim-slowzrychlí / zpomalí animaci
delay-1 delay-2 delay-3zpoždění startu
staggerpoložky uvnitř naskakují postupně za sebou
Když si nejste jistí — raději nechte blok bez třídy. Výchozí vzhled je nastavený tak, aby fungoval sám o sobě; třídy jsou na výjimky, ne na běžný obsah.

Zdroje: theme.less · tokens.less · typography.less · shared/utils/*.less