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

Zdroje: theme.less · tokens.less · typography.less