developer · minimal · premium · saas · modern

Geistlab.

Developer infrastructure made invisible. Geist with -2.4px tracking, shadow-as-border philosophy, multi-layer shadow stacks, ligatures everywhere.

01 · Preview

The kitchen sink.

Geistlab.app

ProductPricingDocsAbout

Sign inGet started

developer · minimal · premium

Build with Geistlab.

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.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

01 · Color

Palette

primary

#171717

secondary

#4D4D4D

tertiary

#171717

neutral

#FAFAFA

surface

#FFFFFF

02 · Typography

Type scale

display

The quick brown fox

h1

A major section heading

h2

A subsection title

body

Body copy in the system's body font.

03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →

Disabled

04 · Inputs

Form controls

Email

iris@studio.com

Password

••••••••••••

Bio

Designing for long-form publications. Based in Kyoto.

05 · Choices

Select & toggle

Plan

Starter

Free forever

Pro

$18 / month

Team

$48 / month

Toggles

Public profile

Require two-factor

Auto-accept invites

06 · Tags & badges

Labeling

NeutralAccentSolidWith dot

NEWBETAv2.0LIVE

07 · Cards

Cards

Feature

Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →

Metric

24,810

▲ +12.4% vs last week

08 · Navigation

Tabs & breadcrumb

Overview

Analytics

Members

Workspace/Projects/Heritage System

09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px

2px

5px

8px · base

10px

12px

14px

16px

18px

20px

21px

10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm

4px

md

6px

lg

8px

pill

9999px

11 · Elevation

Depth & elevation

00 · Flat

Elevation 00

01 · Low

Elevation 01

02 · Medium

Elevation 02

03 · High

Elevation 03

12 · Data

Charts

Weekly revenue

$48,210

M

T

W

T

F

S

S

Active sessions

2,184

02 · The file

DESIGN.md

markdown

1---
2name: Geistlab
3description: "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: Geist
13  body:    Geist
14  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: 4px
22  md: 6px
23  lg: 8px
24  pill: 9999px
25shadows:
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:    none
30  divider: rgba(0,0,0,0.08)
31buttons:
32  primary:
33    background: #171717
34    color: #ffffff
35    border: none
36    shape: rounded
37    padding: 8px 16px
38    font: 500 / 0.875rem
39    shadow: rgba(0,0,0,0.12) 0 0 0 1px
40  secondary:
41    background: #ffffff
42    color: #171717
43    border: none
44    shape: rounded
45    padding: 8px 16px
46    font: 500 / 0.875rem
47    shadow: rgba(235,235,235,1) 0 0 0 1px
48  outline:
49    background: transparent
50    color: #171717
51    border: 1px solid rgba(0,0,0,0.08)
52    shape: rounded
53    padding: 8px 16px
54    font: 500 / 0.875rem
55  ghost:
56    background: #ebf5ff
57    color: #0068d6
58    border: none
59    shape: pill
60    padding: 0 10px
61    font: 500 / 0.75rem
62charts:
63  variant: "thin-bars"
64  stroke_width: 1.5
65  fill_opacity: 0.06
66  gridlines: true
67  bar_gap: 14px
68  highlight: single
69  dot_marker: true
70fonts_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# Geistlab
75 
76## AI Build Instructions
77 
78> **Read this section before writing any code.** The rules below
79> are non-negotiable. Every value used in the UI must come from this
80> file's frontmatter — never substitute, approximate, or invent new
81> colors, fonts, radii, or shadows. If a value is missing, ask the
82> user before adding one.
83 
84### 1 · Your role
85 
86You are building UI for a project that has adopted **Geistlab** as its
87design system. Treat `DESIGN.md` as the single source of truth.
88Your job is to translate the user's product requirements into
89components and pages that look like they were designed by the same
90person who authored this file.
91 
92### 2 · Token compliance
93 
94- Pull every color, font family, radius, shadow, and spacing value
95  from the frontmatter at the top of this file.
96- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
97  hard-code hex values that bypass the system.
98- When a token can be expressed as a CSS variable, declare it once
99  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 recipes
104 
105Use these recipes verbatim when building the corresponding component.
106 
107#### Buttons
108 
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 tertiary
118actions in toolbars. **Ghost** for inline links and table actions.
119 
120#### Cards
121 
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#### Charts
129 
130- Bar/line variant: `thin-bars`
131- Highlight strategy: `single` — emphasize a single bar/point per chart.
132 
133#### Typography pairings
134 
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 constraints
140 
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 — verify
150 
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. Atmosphere
163 
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 infrastructure
172- Geist Mono for code and technical labels with `"liga"` globally
173- **Shadow-as-border**: `box-shadow 0 0 0 1px` replaces traditional borders throughout
174- Multi-layer shadow stacks (border + elevation + ambient + inner highlight) on cards
175- Near-pure white canvas with `#171717` text — slight warmth prevents harshness
176- Workflow accent colors: Ship Red (`#ff5b4f`), Preview Pink (`#de1d8d`), Develop Blue (`#0a72ef`)
177- Pill badges (9999px) tinted blue — *only* for status, never for CTAs
178 
179## 2. Palette
180 
181### Primary
182- **Geistlab Black** `#171717` — text, headings, dark surface (warm, not pure black)
183- **Pure White** `#ffffff` — page, cards, button text on dark
184- **True Black** `#000000` — console contexts only
185 
186### Workflow Accents
187- **Ship Red** `#ff5b4f` — production deploy step
188- **Preview Pink** `#de1d8d` — preview deploy step
189- **Develop Blue** `#0a72ef` — development step
190 
191### Console / Code
192- Console Blue `#0070f3` · Purple `#7928ca` · Pink `#eb367f`
193 
194### Interactive
195- Link Blue `#0072f5`
196- Focus Blue `hsla(212, 100%, 48%, 1)`
197 
198### Neutrals
199- Gray 900 `#171717` · 600 `#4d4d4d` · 500 `#666666` · 400 `#808080`
200- Gray 100 `#ebebeb` · 50 `#fafafa`
201 
202### Shadows
203- Border `rgba(0,0,0,0.08) 0 0 0 1px` — the signature
204- 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. Typography
207 
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. Buttons
228 
229### Primary Dark
230```css
231background: #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` instead
240- 6px radius, content-driven width
241- Hover: dark surface; Focus: `2px solid var(--ds-focus-color)` + ring
242 
243### Pill Badge (status only)
244- Background `#ebf5ff`, text `#0068d6`
245- 9999px radius, 0×10 padding
246- 12px weight 500
247 
248## 5. Cards
249 
250- Background: `#ffffff`
251- **No CSS border** — shadow-border technique
252- Radius: 8px standard, 12px featured/image
253- 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 intensification
255 
256## 6. Charts
257 
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. Spacing
261 
262- Base: 8px
263- 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 24
265 
266## 8. Depth & elevation
267 
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'ts
280 
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 borders
284- Enable `"liga"` on all Geist text — ligatures are structural
285- Use the three-weight system: 400 / 500 / 600 only
286- Apply workflow accents only in their workflow context
287 
288❌ **Don't**
289- Use positive letter-spacing on Geist — always negative or zero
290- Use weight 700 — 600 is the maximum
291- Use traditional CSS `border` on cards — shadow-border only
292- Use heavy shadows (>0.1 opacity) — whisper-level only
293- Use pill radius (9999px) on action buttons — pills are for status badges
294- Skip the inner `#fafafa` ring in card shadows — it's the glow that makes the system work
295 
296---
297 
298## Tokens
299 
300> Generated from the same source the live preview renders from.
301> Treat the values below as the contract — never substitute approximations.
302 
303### Colors
304 
305| Role      | Value |
306|-----------|-------|
307| primary   | `#171717` |
308| secondary | `#4d4d4d` |
309| tertiary  | `#171717` |
310| neutral   | `#fafafa` |
311| surface   | `#ffffff` |
312 
313### Typography
314 
315- **Display:** Geist
316- **Body:** Geist
317- **Mono:** Geist Mono
318 
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### Radius
327 
328- sm: `4px`
329- md: `6px`
330- lg: `8px`
331- pill: `9999px`
332 
333### Shadows
334 
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### Borders
339 
340- **card:** `none`
341- **divider:** `rgba(0,0,0,0.08)`
342 
343### Buttons
344 
345Four variants, each fully tokenized. The preview renders from these exact values.
346 
347#### Primary
348 
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#### Secondary
361 
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#### Outline
374 
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#### Ghost
386 
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### Charts
398 
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

03 · How to use it

Wire it into your agent.

markdown

# 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.

04 · Required setup

Three snippets.

Google Fonts link

html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" />

Install dependencies

bash

npm install lucide-react

Tailwind config

// tailwind.config.js
export 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',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Maison Folio

Design-agency editorial: a single oversized Bodoni Moda display at 7rem, a single ink, an off-white canvas. The signature is the radical scale gap — hero 7rem, body 1rem, nothing in between except a mono eyebrow.

editorialagencyserifoversizedminimal

Maison.app

ProductPricingDocsAbout