Design System — v 1.0

Tokeny

Jedyne źródło prawdy dla koloru i typografii. Zdefiniowane raz w globals.css — aktualizują cały system.

Kolory

Tokeny Kolorów

Jedyne źródło prawdy. Zdefiniowane w globals.css jako zmienne CSS. Zakaz surowych palet Tailwinda.

Background

--background

Foreground

--foreground

Primary

--primary

Secondary

--secondary

Muted

--muted

Accent

--accent

Destructive

--destructive

Border

--border

Ring

--ring

Input

--input

Card

--card

Sidebar

--sidebar

Typografia

Skala Typograficzna

Skala typograficzna zdefiniowana przez prymitywy Heading i Text.

Heading

Heading h1 — Extrabold

size="h1" → text-4xl md:text-5xl lg:text-6xl font-extrabold

Heading h2 — Semibold

size="h2" → text-3xl md:text-4xl font-semibold

Heading h3 — Semibold

size="h3" → text-2xl md:text-3xl font-semibold

Heading h4 — Medium

size="h4" → text-xl font-medium leading-tight

Heading h5 — Medium

size="h5" → text-lg font-medium leading-tight

Text

Text lead — Wiodący akapit, większy i spokojniejszy.

variant="lead" → text-lg md:text-xl text-muted-foreground

Text body — Domyślny akapit. Używany do większości treści na stronie. Czytelny i spokojny.

variant="body" → text-base text-foreground leading-relaxed

Text small — Etykieta

variant="small" → text-sm font-medium leading-none

Text muted — Drugorzędny, pomocniczy, tło narracyjne.

variant="muted" → text-sm text-muted-foreground

Text mono — const designSystem = "prfct.dev"

variant="mono" → text-sm font-mono text-foreground