Developer infrastructure made invisible. Geist with -2.4px tracking, shadow-as-border philosophy, multi-layer shadow stacks, ligatures everywhere.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
1---2name: Geistlab3description: "Developer infrastructure made invisible. Geist with -2.4px tracking, shadow-as-border philosophy, multi-layer shadow stacks, ligatures everywhere."4tags: [developer, minimal, premium, saas, modern]5colors:6 primary: "#171717"7 secondary: "#4d4d4d"8 tertiary: "#171717"9 neutral: "#fafafa"10 surface: "#ffffff"11typography:12 display: Geist13 body: Geist14 mono: "Geist Mono"15 scale:16 hero: "3rem / 1 / 600 / -2.88px"17 h1: "2.5rem / 1.2 / 600 / -2.4px"18 h2: "2rem / 1.25 / 600 / -1.28px"19 body: "1.125rem / 1.56 / 400 / 0"20radius:21 sm: 4px22 md: 6px23 lg: 8px24 pill: 9999px25shadows:26 card: "rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px, rgba(0,0,0,0.04) 0 8px 8px -8px, #fafafa 0 0 0 1px inset"27 button: "rgba(0,0,0,0.12) 0 0 0 1px"28borders:29 card: none30 divider: rgba(0,0,0,0.08)31buttons:32 primary:33 background: #17171734 color: #ffffff35 border: none36 shape: rounded37 padding: 8px 16px38 font: 500 / 0.875rem39 shadow: rgba(0,0,0,0.12) 0 0 0 1px40 secondary:41 background: #ffffff42 color: #17171743 border: none44 shape: rounded45 padding: 8px 16px46 font: 500 / 0.875rem47 shadow: rgba(235,235,235,1) 0 0 0 1px48 outline:49 background: transparent50 color: #17171751 border: 1px solid rgba(0,0,0,0.08)52 shape: rounded53 padding: 8px 16px54 font: 500 / 0.875rem55 ghost:56 background: #ebf5ff57 color: #0068d658 border: none59 shape: pill60 padding: 0 10px61 font: 500 / 0.75rem62charts:63 variant: "thin-bars"64 stroke_width: 1.565 fill_opacity: 0.0666 gridlines: true67 bar_gap: 14px68 highlight: single69 dot_marker: true70fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap"71dependencies: ["lucide-react"]72---73 74# Geistlab75 76## AI Build Instructions77 78> **Read this section before writing any code.** The rules below79> are non-negotiable. Every value used in the UI must come from this80> file's frontmatter — never substitute, approximate, or invent new81> colors, fonts, radii, or shadows. If a value is missing, ask the82> user before adding one.83 84### 1 · Your role85 86You are building UI for a project that has adopted **Geistlab** as its87design system. Treat `DESIGN.md` as the single source of truth.88Your job is to translate the user's product requirements into89components and pages that look like they were designed by the same90person who authored this file.91 92### 2 · Token compliance93 94- Pull every color, font family, radius, shadow, and spacing value95 from the frontmatter at the top of this file.96- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never97 hard-code hex values that bypass the system.98- When a token can be expressed as a CSS variable, declare it once99 in your global stylesheet and reference it everywhere downstream.100- The Google Fonts `<link>` is provided in the Typography section.101 Add it to `<head>` before any component renders.102 103### 3 · Component recipes104 105Use these recipes verbatim when building the corresponding component.106 107#### Buttons108 109Four variants are defined. Pick one — never blend variants or invent a fifth.110 111- **Primary** — rounded shape, bg `#171717`, text `#ffffff`, padding `8px 16px`, weight `500`, shadow `rgba(0,0,0,0.12) 0 0 0 1px`.112- **Secondary** — rounded shape, bg `#ffffff`, text `#171717`, padding `8px 16px`, weight `500`, shadow `rgba(235,235,235,1) 0 0 0 1px`.113- **Outline** — rounded shape, text `#171717`, border `1px solid rgba(0,0,0,0.08)`, padding `8px 16px`, weight `500`.114- **Ghost** — pill shape, bg `#ebf5ff`, text `#0068d6`, padding `0 10px`, weight `500`.115 116Reach for **primary** as the single dominant CTA per screen.117**Secondary** for the supporting action. **Outline** for tertiary118actions in toolbars. **Ghost** for inline links and table actions.119 120#### Cards121 122- Background: `#ffffff`123- Border: `none`124- Shadow: `rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px, rgba(0,0,0,0.04) 0 8px 8px -8px, #fafafa 0 0 0 1px inset`125- Radius: `radius.lg` (`8px`)126- Internal padding: `20px` for compact cards, `24–28px` for content cards.127 128#### Charts129 130- Bar/line variant: `thin-bars`131- Highlight strategy: `single` — emphasize a single bar/point per chart.132 133#### Typography pairings134 135- **Display (`Geist`)** — h1, h2, hero headlines, brand wordmarks.136- **Body (`Geist`)** — paragraphs, labels, button text, form inputs.137- **Mono (`Geist Mono`)** — code, eyebrows, metadata, numerals in tables.138 139### 4 · Hard constraints140 141Never do any of the following without explicit instruction from the user:142 143- Introduce a new color, font, radius, or shadow that isn't declared above.144- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).145- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.146- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.147- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.148 149### 5 · Before you finish — verify150 151Run through this checklist for every screen you produce:152 153- [ ] Every color used appears in the Colors table above.154- [ ] Headlines use the display font; body copy uses the body font.155- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).156- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.157- [ ] Cards and dividers use the declared border + shadow tokens.158- [ ] No values were invented; if you needed something missing, you stopped and asked.159 160---161 162## 1. Atmosphere163 164Geistlab is the visual thesis of developer infrastructure made invisible — a design system so restrained it borders on philosophical. The page is overwhelmingly white (`#ffffff`) with near-black (`#171717`) text, creating a gallery-like emptiness where every element earns its pixel. This isn't minimalism as decoration; it's minimalism as engineering principle. The system treats the interface like a compiler treats code — every unnecessary token is stripped away until only structure remains.165 166The Geist font family is the crown jewel. Geist Sans uses aggressive negative letter-spacing (-2.4px to -2.88px at display sizes), creating headlines that feel compressed, urgent, and engineered — like code that's been minified for production. At body sizes, the tracking relaxes but the geometric precision persists. Geist Mono completes the system as the monospace companion for code, terminal output, and technical labels. Both enable OpenType `"liga"` (ligatures) globally.167 168What distinguishes Geistlab from other monochrome design systems is its **shadow-as-border** philosophy. Instead of traditional CSS borders, Geistlab uses `box-shadow: 0 0 0 1px rgba(0,0,0,0.08)` — a zero-offset, zero-blur, 1px-spread shadow that creates a border-like line without the box model implications. The entire depth system is built on layered, multi-value shadow stacks where each layer serves a specific purpose: border, soft elevation, ambient depth, inner highlight.169 170**Signature moves**171- Geist Sans with extreme negative tracking (-2.4 to -2.88px at display) — text as compressed infrastructure172- Geist Mono for code and technical labels with `"liga"` globally173- **Shadow-as-border**: `box-shadow 0 0 0 1px` replaces traditional borders throughout174- Multi-layer shadow stacks (border + elevation + ambient + inner highlight) on cards175- Near-pure white canvas with `#171717` text — slight warmth prevents harshness176- Workflow accent colors: Ship Red (`#ff5b4f`), Preview Pink (`#de1d8d`), Develop Blue (`#0a72ef`)177- Pill badges (9999px) tinted blue — *only* for status, never for CTAs178 179## 2. Palette180 181### Primary182- **Geistlab Black** `#171717` — text, headings, dark surface (warm, not pure black)183- **Pure White** `#ffffff` — page, cards, button text on dark184- **True Black** `#000000` — console contexts only185 186### Workflow Accents187- **Ship Red** `#ff5b4f` — production deploy step188- **Preview Pink** `#de1d8d` — preview deploy step189- **Develop Blue** `#0a72ef` — development step190 191### Console / Code192- Console Blue `#0070f3` · Purple `#7928ca` · Pink `#eb367f`193 194### Interactive195- Link Blue `#0072f5`196- Focus Blue `hsla(212, 100%, 48%, 1)`197 198### Neutrals199- Gray 900 `#171717` · 600 `#4d4d4d` · 500 `#666666` · 400 `#808080`200- Gray 100 `#ebebeb` · 50 `#fafafa`201 202### Shadows203- Border `rgba(0,0,0,0.08) 0 0 0 1px` — the signature204- Card stack: `rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px, rgba(0,0,0,0.04) 0 8px 8px -8px, #fafafa 0 0 0 1px`205 206## 3. Typography207 208| Role | Font | Size | Weight | Leading | Tracking |209|------|------|------|--------|---------|----------|210| Display Hero | Sans | 48px | 600 | 1.00–1.17 | -2.4 to -2.88px |211| Section | Sans | 40px | 600 | 1.20 | -2.4px |212| Sub-heading L | Sans | 32px | 600 | 1.25 | -1.28px |213| Sub-heading | Sans | 32px | 400 | 1.50 | -1.28px |214| Card title | Sans | 24px | 600 | 1.33 | -0.96px |215| Body Large | Sans | 20px | 400 | 1.80 | normal |216| Body | Sans | 18px | 400 | 1.56 | normal |217| Body Small | Sans | 16px | 400 | 1.50 | normal |218| Body Medium | Sans | 16px | 500 | 1.50 | normal |219| Body Semibold | Sans | 16px | 600 | 1.50 | -0.32px |220| Button / Link | Sans | 14px | 500 | 1.43 | normal |221| Caption | Sans | 12px | 400–500 | 1.33 | normal |222| Mono Body | Mono | 16px | 400 | 1.50 | normal |223| Mono Small | Mono | 12px | 500 | 1.00 | uppercase |224 225**Three weights, strict roles.** 400 (body), 500 (UI), 600 (headings). No 700. Tracking compresses progressively with size: -2.88px at 48px, -1.28px at 32px, -0.32px at 16px, 0 at 14px.226 227## 4. Buttons228 229### Primary Dark230```css231background: #171717;232color: #ffffff;233padding: 8px 16px;234border-radius: 6px;235```236 237### Secondary White (Shadow-bordered)238- Background `#ffffff`, text `#171717`239- **No CSS border** — shadow-border `rgba(235,235,235,1) 0 0 0 1px` instead240- 6px radius, content-driven width241- Hover: dark surface; Focus: `2px solid var(--ds-focus-color)` + ring242 243### Pill Badge (status only)244- Background `#ebf5ff`, text `#0068d6`245- 9999px radius, 0×10 padding246- 12px weight 500247 248## 5. Cards249 250- Background: `#ffffff`251- **No CSS border** — shadow-border technique252- Radius: 8px standard, 12px featured/image253- Shadow stack: `rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px, rgba(0,0,0,0.04) 0 8px 8px -8px, #fafafa 0 0 0 1px inset`254- Hover: subtle shadow intensification255 256## 6. Charts257 258**Thin precise bars (3px)** with dashed gridlines — engineered, technical, as if rendered by a CLI tool. Single highlighted maximum bar. Line charts run at 1.5px stroke with a barely-visible 6% fill, ending in a dot marker — the live-deployment readout aesthetic.259 260## 7. Spacing261 262- Base: 8px263- Scale: `1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 32, 36, 40`264- Notable jump from 16 to 32 — no 20 or 24265 266## 8. Depth & elevation267 268| Level | Treatment | Use |269|-------|-----------|-----|270| 0 | Flat | Page, text |271| 1 | `rgba(0,0,0,0.08) 0 0 0 1px` | Shadow-border for most elements |272| 1b | `rgb(235,235,235) 0 0 0 1px` | Tabs, images |273| 2 | Ring + `rgba(0,0,0,0.04) 0 2px 2px` | Standard cards |274| 3 | Full 4-stack with inner highlight | Featured cards |275| Focus | `2px solid hsla(212,100%,48%,1)` | Keyboard focus |276 277**The most sophisticated shadow system in modern web design.** Each shadow layer has a distinct architectural purpose: border, ambient softness, distance depth, inner glow. Cards feel built, not floating.278 279## 9. Do's & don'ts280 281✅ **Do**282- Use Geist with negative tracking at display (-2.4 to -2.88px at 48px)283- Use shadow-as-border (`0 0 0 1px rgba(0,0,0,0.08)`) instead of CSS borders284- Enable `"liga"` on all Geist text — ligatures are structural285- Use the three-weight system: 400 / 500 / 600 only286- Apply workflow accents only in their workflow context287 288❌ **Don't**289- Use positive letter-spacing on Geist — always negative or zero290- Use weight 700 — 600 is the maximum291- Use traditional CSS `border` on cards — shadow-border only292- Use heavy shadows (>0.1 opacity) — whisper-level only293- Use pill radius (9999px) on action buttons — pills are for status badges294- Skip the inner `#fafafa` ring in card shadows — it's the glow that makes the system work295 296---297 298## Tokens299 300> Generated from the same source the live preview renders from.301> Treat the values below as the contract — never substitute approximations.302 303### Colors304 305| Role | Value |306|-----------|-------|307| primary | `#171717` |308| secondary | `#4d4d4d` |309| tertiary | `#171717` |310| neutral | `#fafafa` |311| surface | `#ffffff` |312 313### Typography314 315- **Display:** Geist316- **Body:** Geist317- **Mono:** Geist Mono318 319| Role | size / leading / weight / tracking |320|------|------------------------------------|321| Hero | 3rem / 1 / 600 / -2.88px |322| H1 | 2.5rem / 1.2 / 600 / -2.4px |323| H2 | 2rem / 1.25 / 600 / -1.28px |324| Body | 1.125rem / 1.56 / 400 / 0 |325 326### Radius327 328- sm: `4px`329- md: `6px`330- lg: `8px`331- pill: `9999px`332 333### Shadows334 335- **card:** `rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px, rgba(0,0,0,0.04) 0 8px 8px -8px, #fafafa 0 0 0 1px inset`336- **button:** `rgba(0,0,0,0.12) 0 0 0 1px`337 338### Borders339 340- **card:** `none`341- **divider:** `rgba(0,0,0,0.08)`342 343### Buttons344 345Four variants, each fully tokenized. The preview renders from these exact values.346 347#### Primary348 349| Property | Value |350|----------|-------|351| shape | `rounded` |352| background | `#171717` |353| color | `#ffffff` |354| border | `none` |355| padding | `8px 16px` |356| fontWeight | `500` |357| fontSize | `0.875rem` |358| shadow | `rgba(0,0,0,0.12) 0 0 0 1px` |359 360#### Secondary361 362| Property | Value |363|----------|-------|364| shape | `rounded` |365| background | `#ffffff` |366| color | `#171717` |367| border | `none` |368| padding | `8px 16px` |369| fontWeight | `500` |370| fontSize | `0.875rem` |371| shadow | `rgba(235,235,235,1) 0 0 0 1px` |372 373#### Outline374 375| Property | Value |376|----------|-------|377| shape | `rounded` |378| background | `transparent` |379| color | `#171717` |380| border | `1px solid rgba(0,0,0,0.08)` |381| padding | `8px 16px` |382| fontWeight | `500` |383| fontSize | `0.875rem` |384 385#### Ghost386 387| Property | Value |388|----------|-------|389| shape | `pill` |390| background | `#ebf5ff` |391| color | `#0068d6` |392| border | `none` |393| padding | `0 10px` |394| fontWeight | `500` |395| fontSize | `0.75rem` |396 397### Charts398 399| Property | Value |400|----------|-------|401| variant | `thin-bars` |402| strokeWidth | `1.5` |403| fillOpacity | `0.06` |404| gridlines | `true` |405| barGap | `14px` |406| highlight | `single` |407| dotMarker | `true` |408 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Geist"', 'serif'], sans: ['"Geist"', 'sans-serif'], mono: ['"Geist Mono"', 'monospace'], }, colors: { primary: '#171717', secondary: '#4d4d4d', accent: '#171717', neutral: '#fafafa', surface: '#ffffff', }, borderRadius: { sm: '4px', md: '6px', lg: '8px', }, }, },};A music platform that sounds like late-night radio looks. Deep charcoal surfaces with a faint vertical warmth, Instrument Serif italic for album titles, Inter for everything else, a single burnt-amber accent reserved for the now-playing state. Built for music streaming, label sites, and audio products that want warmth in the dark without leaning on neon.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.