Apply this design system whenever building UI components, frontend pages, visual elements, layouts, or anything user-facing. Triggers on: React components, HTML/CSS, Tailwind styling, dark mode UI, dashboards, landing pages, modals, forms, and any visual/frontend work.
This design system is dark, minimal, and typographically rich. It prioritizes readability and breathing room over decoration. The aesthetic is inspired by editorial design — clean serif headings over a near-black canvas, with a single muted blue accent for interactive elements.
Core principles:
rgba(255,255,255, 0.06–0.20)), never solid gray| Token | Value | Usage |
|---|
bg-primary | #0a0a0a | Page background |
bg-surface | #111111 | Cards, elevated surfaces |
bg-elevated | #161616 | Modals, popovers |
| Token | Value | Usage |
|---|---|---|
text-primary | #e8e8e3 | Headings, primary content |
text-secondary | #999999 | Body text, descriptions |
text-muted | #555555 | Placeholders, inactive tabs |
text-dimmed | #444444 | Labels, metadata, captions |
| Token | Value | Usage |
|---|---|---|
accent | #5ba4c9 | Links, active states, section headings |
accent-hover | #74b5d6 | Hover state for accent elements |
| Token | Value | Usage |
|---|---|---|
border-subtle | rgba(255,255,255, 0.06) | Section dividers, card edges |
border-light | rgba(255,255,255, 0.10) | Input borders, button outlines |
border-hover | rgba(255,255,255, 0.20) | Hover state borders |
| Token | Value | Usage |
|---|---|---|
error | #f87171 | Error text |
error-muted | rgba(248,113,113, 0.8) | Error descriptions |
"Instrument Serif", Georgia, serif"Inter", system-ui, sans-serifLoad via Google Fonts:
Instrument Serif (regular, italic)
Inter (400, 500, 600)
| Role | Size | Weight | Font | Extra |
|---|---|---|---|---|
| Hero heading | text-5xl / sm:text-6xl | 400 | Serif | leading-[1.15] |
| Page title | text-3xl | 400 | Serif | leading-snug |
| Drawer title | text-2xl | 400 | Serif | — |
| Section heading | text-xs | 600 | Sans | uppercase tracking-widest, color: accent |
| Body | text-sm | 400 | Sans | leading-[1.85], color: text-secondary |
| Label/meta | text-[11px] | 500 | Sans | uppercase tracking-widest, color: text-dimmed |
| Button text | text-xs | 500 | Sans | — |
| Error | text-xs | 400 | Sans | color: red-400/80 |
text-[11px], text-xs) always gets uppercase tracking-widestleading-[1.85] for generous line heightitalic (serif italic)max-w-3xl (768px)max-w-md (448px)max-w-sm (384px)px-6py-5py-8py-28space-y-8space-y-4 to space-y-6gap-2gap-1.5mb-3| Token | Value | Usage |
|---|---|---|
sm | 4px / rounded-sm | Subtle rounding (highlight terms) |
md | 8px / rounded-md | Inputs, cards |
lg | 12px / rounded-lg | Larger containers |
full | 9999px / rounded-full | Buttons, tags, badges |
rounded-full (pill shape)rounded-fullrounded-md| Token | Value | Usage |
|---|---|---|
fast | 150ms ease | Color changes, hover states |
default | 200ms ease | General transitions |
slow | 300ms cubic-bezier(0.16, 1, 0.3, 1) | Slide-ins, drawers |
| Name | Duration | Usage |
|---|---|---|
fade-in | 0.3s ease-out | Content appearing |
fade-in-up | 0.5s ease-out | Article results loading in |
slide-in-right | 0.3s cubic-bezier(0.16, 1, 0.3, 1) | Drawer/sidebar opening |
i * 0.15s) with accent coloropacity 0.3–0.6, 1.8s ease-in-out infiniteopacity 0.5–1, 2s ease-in-out infiniterounded-full bg-[#e8e8e3] px-4 py-2 text-xs font-medium text-[#0a0a0a]
transition-opacity hover:opacity-80
gap-1.5rounded-full border border-white/10 px-3.5 py-1.5 text-xs text-[#777]
transition-colors hover:border-white/20 hover:text-[#aaa]
rounded-full p-2 text-[#555] transition-colors hover:text-[#999]
h-4 w-4rounded-full border border-white/[0.08] px-3 py-1 text-[11px] text-[#666]
Container: border-b border-white/10 (bottom border only)
Input: bg-transparent text-sm text-[#e8e8e3] placeholder-[#444] outline-none
cursor-pointer rounded-sm px-0.5 text-[#e8e8e3]
text-decoration: underline
text-decoration-color: rgba(255,255,255, 0.25)
text-underline-offset: 3px
text-decoration-thickness: 1px