Обзор Токены Компоненты Типографика Скачать

Now viewing BrandOS · powered by UI8Kit + brandos.brand.css

brandos ui8kit resta authfly

Live tweaks

Cycle presets and token axes on top of the active brand. Refresh resets to brand defaults.

Preset

Radius

Density

Depth

Motion

BrandOS · Foundations

Дизайн-токены

Seven canonical surfaces every screen, component and variant of BrandOS is built from.

01 — Color

Semantic, theme-aware roles.

Canvas

--background

Body text

--foreground

Primary

--primary

Secondary

--secondary

Muted

--muted

Accent

--accent

Destructive

--destructive

Border

--border

02 — Typography

Display and body pairing.

Display

--font-display

Body

--font-sans

Technical

--font-mono

03 — Spacing

Density rhythm.

Step 1

0.25rem

Step 2

0.5rem

Step 4

1rem

Step 6

1.5rem

Step 8

2rem

Step 12

3rem

04 — Radius

Shape language.

--radius-sm

--radius-md

--radius-lg

--radius-xl

05 — Shadow

Depth ladder.

--shadow-sm

--shadow-md

--shadow-lg

06 — Motion

Transition timing.

Fast

--motion-fast

Normal

--motion-normal

Slow

--motion-slow

07 — Surfaces

Base, elevated and overlay.

Base

--background

Elevated

--card

Overlay

--popover