Design Tokens — Component Library

Color

Semua nilai warna adalah CSS custom properties. Tidak ada hardcode hex di luar token.css.

Text — Light bg

--color-primary zinc-900 ✓ copied

#18181B

--color-secondary zinc-600 ✓ copied

#52525B

--color-tertiary zinc-500 ✓ copied

#71717A

Text — Dark bg

--color-primary-dark zinc-50 ✓ copied

#FAFAFA

--color-secondary-dark zinc-300 ✓ copied

#D4D4D8

--color-tertiary-dark zinc-400 ✓ copied

#A1A1AA

Accent Dark (d1–d8)

--color-accent-d1 blue-black ✓ copied

#020617

--color-accent-d2 cyan-950 ✓ copied

#082F49

--color-accent-d3 sky-900 ✓ copied

#0C4A6E

--color-accent-d4 blue-950 ✓ copied

#172554

--color-accent-d5 blue-900 ✓ copied

#1E3A8A

--color-accent-d6 blue-800 ✓ copied

#1E40AF

--color-accent-d7 blue-700 ✓ copied

#1D4ED8

--color-accent-d8 blue-600 ✓ copied

#2563EB

Accent Bright (b1–b8)

--color-accent-b1 blue-500 ✓ copied

#3B82F6

--color-accent-b2 blue-400 ✓ copied

#60A5FA

--color-accent-b3 sky-400 ✓ copied

#38BDF8

--color-accent-b4 sky-500 ✓ copied

#0EA5E9

--color-accent-b5 cyan-400 ✓ copied

#22D3EE

--color-accent-b6 cyan-300 ✓ copied

#67E8F9

--color-accent-b7 sky-300 ✓ copied

#7DD3FC

--color-accent-b8 sky-200 ✓ copied

#BAE6FD

Background Dark (d1–d6)

--color-bg-d1 100% dark ✓ copied

#000000

--color-bg-d2 96% dark ✓ copied

#0A0A0A

--color-bg-d3 92% dark ✓ copied

#141414

--color-bg-d4 88% dark ✓ copied

#1F1F1F

--color-bg-d5 84% dark ✓ copied

#292929

--color-bg-d6 80% dark ✓ copied

#333333

Background Bright (b1–b6)

--color-bg-b1 100% light ✓ copied

#FFFFFF

--color-bg-b2 96% light ✓ copied

#F5F5F5

--color-bg-b3 92% light ✓ copied

#EBEBEB

--color-bg-b4 88% light ✓ copied

#E0E0E0

--color-bg-b5 84% light ✓ copied

#D6D6D6

--color-bg-b6 80% light ✓ copied

#CCCCCC

Semantic

--color-success green-500 ✓ copied

#22C55E

--color-warning yellow-500 ✓ copied

#EAB308

--color-error red-500 ✓ copied

#EF4444

--color-info blue-500 ✓ copied

#3B82F6

Typography

Font family, ukuran, line-height, letter-spacing, dan font-weight.

Font Family

--font-display H1–H3, blockquote ✓ copied

"Inter", system-ui, sans-serif

--font-sans H4–H6, UI, label ✓ copied

"DM Sans", system-ui, sans-serif

--font-body Body, paragraph ✓ copied

"Inter", system-ui, sans-serif

--font-serif Accent / editorial ✓ copied

"DM Serif Display", Georgia, serif

--font-mono Code, kbd, pre ✓ copied

"JetBrains Mono", Menlo, monospace

Font Size — Heading

--text-h1 36px → 61px ✓ copied

clamp(2.25rem, 5vw, 3.815rem)

--text-h2 30px → 49px ✓ copied

clamp(1.875rem, 4vw, 3.052rem)

--text-h3 24px → 39px ✓ copied

clamp(1.5rem, 3vw, 2.441rem)

--text-h4 20px → 31px ✓ copied

clamp(1.25rem, 2.5vw, 1.953rem)

--text-h5 18px → 25px ✓ copied

clamp(1.125rem, 2vw, 1.563rem)

--text-h6 16px → 20px ✓ copied

clamp(1rem, 1.5vw, 1.25rem)

Font Size — Body

--text-body-xl 20px — intro / hero subtitle ✓ copied

1.25rem

--text-body-lg 18px — lead paragraph ✓ copied

1.125rem

--text-body 16px — default ✓ copied

1rem

--text-body-sm 14px — secondary / helper ✓ copied

0.875rem

--text-body-xs 13px — compact UI ✓ copied

0.8125rem

Font Size — UI & Code

--text-blockquote 20px → 24px ✓ copied

clamp(1.25rem, 2vw, 1.5rem)

--text-caption 12px ✓ copied

0.75rem

--text-overline 11px ✓ copied

0.6875rem

--text-xs 10px — micro labels ✓ copied

0.625rem

--text-code 14px ✓ copied

0.875rem

--text-code-sm 13px ✓ copied

0.8125rem

Line Height

--leading-h1 Display heading ✓ copied

1.1

--leading-h2 ✓ copied

1.15

--leading-h3 ✓ copied

1.2

--leading-h4 ✓ copied

1.3

--leading-h5 ✓ copied

1.35

--leading-h6 ✓ copied

1.4

--leading-body Longform — readability ✓ copied

1.75

--leading-ui Form, button, compact ✓ copied

1.4

--leading-code Code blocks ✓ copied

1.65

Letter Spacing

--tracking-display H1 — tight ✓ copied

-0.03em

--tracking-h2 ✓ copied

-0.025em

--tracking-h3 ✓ copied

-0.02em

--tracking-body Default ✓ copied

0

--tracking-overline Wide — overline/label ✓ copied

0.1em

--tracking-code Code ✓ copied

-0.01em

Font Weight

--weight-display DM Serif — regular sudah elegan ✓ copied

400

--weight-heading-sans DM Sans H4–H6 semibold ✓ copied

600

--weight-body Default ✓ copied

400

--weight-body-medium Emphasis ✓ copied

500

--weight-bold Bold ✓ copied

700

--weight-mono Code default ✓ copied

400

--weight-mono-bold Code emphasis ✓ copied

600

Spacing & Layout

Container width, gutter, dan vertical rhythm. Semua fluid dengan clamp().

Container

--width-wrapper Max-width konten utama ✓ copied

1280px

--width-prose Lebar ideal kolom bacaan ✓ copied

70ch

--width-narrow Artikel, form, page pendek ✓ copied

860px

Gutter & Rhythm

--spacing-gutter Horizontal padding inline ✓ copied

clamp(1rem, 5vw, 4rem)

--spacing-section-y Vertical section padding ✓ copied

clamp(3rem, 8vw, 6rem)

--spacing-section-gap Gap antar section ✓ copied

clamp(2rem, 5vw, 4rem)

--spacing-grid-gap Gap antar grid item ✓ copied

clamp(1rem, 2vw, 1.5rem)

Border Radius

Token radius diurutkan dari terkecil ke terbesar. --radius-sm diutamakan untuk komponen UI (input, badge, button, card).

--radius-xs Chip, tag kecil ✓ copied

0.25rem / 4px

--radius-sm PREFERRED Input, badge — preferred ✓ copied

0.375rem / 6px

--radius-md Card, button ✓ copied

0.75rem / 12px

--radius-lg Modal, panel ✓ copied

1.25rem / 20px

--radius-xl Hero card ✓ copied

2rem / 32px

--radius-full Pill, avatar ✓ copied

9999px / ∞

Shadow

Box-shadow scale dari xs (hampir datar) ke xl (floating).

--shadow-xs Subtle lift ✓ copied

0 1px 2px 0 rgb(0 0 0 / 0.05)

--shadow-sm Input, chip ✓ copied

0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06)

--shadow-md Card, dropdown ✓ copied

0 4px 16px -2px rgb(0 0 0 / 0.1), 0 2px 6px -2px rgb(0 0 0 / 0.07)

--shadow-lg Modal, panel ✓ copied

0 20px 40px -8px rgb(0 0 0 / 0.14), 0 8px 16px -4px rgb(0 0 0 / 0.08)

--shadow-xl Floating overlay ✓ copied

0 32px 64px -12px rgb(0 0 0 / 0.18)

--shadow-inner Pressed, inset input ✓ copied

inset 0 2px 4px 0 rgb(0 0 0 / 0.06)

Z-Index

Stack layer terurut. Gunakan token ini — jangan pakai angka arbitrary.

--z-below Di belakang konten normal ✓ copied

-1

--z-base Default stacking ✓ copied

0

--z-raised Card hover, elevated element ✓ copied

10

--z-dropdown Dropdown, select menu ✓ copied

1000

--z-sticky Sticky header / sidebar ✓ copied

1020

--z-fixed Fixed navbar ✓ copied

1030

--z-modal-bg Modal backdrop ✓ copied

1040

--z-modal Modal dialog ✓ copied

1050

--z-popover Popover, floating panel ✓ copied

1060

--z-toast Toast notification ✓ copied

1100

--z-tooltip Tooltip — always on top ✓ copied

1200

Transition

Duration dan easing. Hover pada baris easing untuk preview animasi.

Duration

--duration-fast Micro — hover, toggle ✓ copied

150ms

--duration-base Default — majority of UI ✓ copied

250ms

--duration-slow Expand, reveal ✓ copied

400ms

--duration-slower Page transition, skeleton ✓ copied

600ms

Easing

--easing-default Standar — masuk & keluar halus ✓ copied

cubic-bezier(0.4, 0, 0.2, 1)

--easing-in Accelerate — elemen keluar layar ✓ copied

cubic-bezier(0.4, 0, 1, 1)

--easing-out Decelerate — elemen masuk layar ✓ copied

cubic-bezier(0, 0, 0.2, 1)

--easing-spring Overshoot — playful, bounce ✓ copied

cubic-bezier(0.34, 1.56, 0.64, 1)