design.md
Back to directory
ai · saas · minimal · premium · modern

Signal AI.

Modern AI product surface without the clichés. Geist sans across the board, Geist Mono for prompts and metrics, very fine off-white surfaces with a 1px white inset highlight, a single muted electric-indigo accent reserved for the assistant's response state. Built for AI-first products that want to feel premium without leaning on rainbow gradients.

01 · Preview

The kitchen sink.

Signal.app
ProductPricingDocsAbout
Sign inGet started
ai · saas · minimal

Build with Signal AI.

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
#0D0F12
secondary
#646973
tertiary
#0D0F12
neutral
#EEF0F3
surface
#F7F8FA
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
5px
md
8px
lg
12px
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 · Pro tokens

The states behind the resting style.

ArchetypeDark Luxury

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected
Account
sam@studio.com
dragging

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Signal AI"
3description: "Modern AI product surface without the clichés. Geist sans across the board, Geist Mono for prompts and metrics, very fine off-white surfaces with a 1px white inset highlight, a single muted electric-indigo accent reserved for the assistant's response state. Built for AI-first products that want to feel premium without leaning on rainbow gradients."
4tags: [ai, saas, minimal, premium, modern]
5colors:
6  primary:   "#0d0f12"
7  secondary: "#646973"
8  tertiary:  "#0d0f12"
9  neutral:   "#eef0f3"
10  surface:   "#f7f8fa"
11typography:
12  display: Geist
13  body:    Geist
14  mono:    "Geist Mono"
15  scale:
16    hero: "3.5rem / 1.04 / 600 / -0.035em"
17    h1:   "2.25rem / 1.14 / 600 / -0.025em"
18    h2:   "1.5rem / 1.3 / 600 / -0.018em"
19    body: "0.9375rem / 1.6 / 400 / -0.005em"
20radius:
21  sm: 5px
22  md: 8px
23  lg: 12px
24  pill: 9999px
25shadows:
26  card:   "rgba(255,255,255,0.85) 0 1px 0 inset, rgba(13,15,18,0.04) 0 1px 2px, rgba(13,15,18,0.04) 0 0 0 1px"
27  button: "rgba(255,255,255,0.10) 0 1px 0 inset, rgba(13,15,18,0.18) 0 1px 2px"
28borders:
29  card:    "1px solid rgba(13,15,18,0.06)"
30  divider: rgba(13,15,18,0.08)
31buttons:
32  primary:
33    background: #0d0f12
34    color: #f7f8fa
35    border: 1px solid rgba(0,0,0,0.4)
36    shape: rounded
37    padding: 9px 18px
38    font: 500 / 0.8125rem
39    shadow: rgba(255,255,255,0.10) 0 1px 0 inset, rgba(13,15,18,0.18) 0 1px 2px
40  secondary:
41    background: #ffffff
42    color: #0d0f12
43    border: 1px solid rgba(13,15,18,0.10)
44    shape: rounded
45    padding: 9px 18px
46    font: 500 / 0.8125rem
47    shadow: rgba(13,15,18,0.04) 0 1px 2px
48  outline:
49    background: transparent
50    color: #0d0f12
51    border: 1px solid rgba(13,15,18,0.16)
52    shape: rounded
53    padding: 9px 18px
54    font: 500 / 0.8125rem
55  ghost:
56    background: transparent
57    color: #646973
58    border: none
59    shape: rounded
60    padding: 9px 14px
61    font: 500 / 0.8125rem
62charts:
63  variant: line
64  stroke_width: 1.75
65  fill_opacity: 0.08
66  gridlines: false
67  bar_gap: 10px
68  highlight: single
69  dot_marker: true
70fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap"
71dependencies: ["lucide-react"]
72---
73 
74# Signal AI
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 **Signal AI** 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 `#0d0f12`, text `#f7f8fa`, border `1px solid rgba(0,0,0,0.4)`, padding `9px 18px`, weight `500`, shadow `rgba(255,255,255,0.10) 0 1px 0 inset, rgba(13,15,18,0.18) 0 1px 2px`.
112- **Secondary** — rounded shape, bg `#ffffff`, text `#0d0f12`, border `1px solid rgba(13,15,18,0.10)`, padding `9px 18px`, weight `500`, shadow `rgba(13,15,18,0.04) 0 1px 2px`.
113- **Outline** — rounded shape, text `#0d0f12`, border `1px solid rgba(13,15,18,0.16)`, padding `9px 18px`, weight `500`.
114- **Ghost** — rounded shape, text `#646973`, padding `9px 14px`, 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: `#f7f8fa`
123- Border: `1px solid rgba(13,15,18,0.06)`
124- Shadow: `rgba(255,255,255,0.85) 0 1px 0 inset, rgba(13,15,18,0.04) 0 1px 2px, rgba(13,15,18,0.04) 0 0 0 1px`
125- Radius: `radius.lg` (`12px`)
126- Internal padding: `20px` for compact cards, `24–28px` for content cards.
127 
128#### Tabs
129 
130Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color.
131 
132#### Charts
133 
134- Bar/line variant: `line`
135- No gridlines — let the bars/lines carry the data.
136- Highlight strategy: `single` — emphasize a single bar/point per chart.
137 
138#### Typography pairings
139 
140- **Display (`Geist`)** — h1, h2, hero headlines, brand wordmarks.
141- **Body (`Geist`)** — paragraphs, labels, button text, form inputs.
142- **Mono (`Geist Mono`)** — code, eyebrows, metadata, numerals in tables.
143 
144### 4 · Hard constraints
145 
146Never do any of the following without explicit instruction from the user:
147 
148- Introduce a new color, font, radius, or shadow that isn't declared above.
149- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
150- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
151- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
152- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
153 
154### 5 · Before you finish — verify
155 
156Run through this checklist for every screen you produce:
157 
158- [ ] Every color used appears in the Colors table above.
159- [ ] Headlines use the display font; body copy uses the body font.
160- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
161- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
162- [ ] Cards and dividers use the declared border + shadow tokens.
163- [ ] No values were invented; if you needed something missing, you stopped and asked.
164 
165---
166 
167## 1. Atmosphere
168 
169Signal AI is a modern AI product surface that refuses the clichés of its category. No rainbow gradient, no purple-pink mesh, no shimmering "thinking" animation. The page is fine off-white `#f7f8fa` with cards lifted to pure white, each card carrying a 1px white inset highlight at its top edge — the catch-light that makes the surface read as physical, not flat. Geist handles every text role; Geist Mono carries prompts, model names, latency metrics, and token counts. The single accent is muted electric-indigo `#5567ff` that appears only when the assistant is responding — the avatar dot, the streaming caret, the active model pill in the dropdown. Idle, the system is greyscale.
170 
171The discipline is in the absence: no glow, no animation chrome, no second color. The accent earns its meaning by being reserved for one specific state.
172 
173**Signature moves**
174- Indigo `#5567ff` only on the assistant-response state — avatar dot, streaming caret, active model pill
175- 1px white inset highlight on every card and primary button — the physical catch-light
176- Geist Mono with 0.04em uppercase tracking for every model name, latency, and token count
177- Pill tabs only in the prompt composer (model selector); section tabs are pill too — consistency
178- Off-white `#f7f8fa` page → pure white card — the tonal step is the only depth
179 
180## 2. Palette
181 
182### Surfaces
183- **Page** `#f7f8fa` — primary background (cool fine off-white)
184- **Card** `#ffffff` — elevated surface
185- **Bone** `#eef0f3` — secondary surfaces, code blocks, table headers
186 
187### Ink
188- **Ink** `#0d0f12` — text, headings, primary CTA fill
189- **Ink 60** `#646973` — secondary text, mono labels
190- **Hairline** `rgba(13,15,18,0.06)` — every card edge
191 
192### Accent
193- **Indigo** `#5567ff` — assistant-response state (avatar dot, streaming caret, active model pill, focus ring)
194- **Indigo Soft** `rgba(85,103,255,0.10)` — hovered model pill, focus ring background
195 
196## 3. Typography
197 
198| Role | Font | Size | Weight | Leading | Tracking |
199|------|------|------|--------|---------|----------|
200| Hero | Geist | 56px | 600 | 1.04 | -0.035em |
201| H1 | Geist | 36px | 600 | 1.14 | -0.025em |
202| H2 | Geist | 24px | 600 | 1.3 | -0.018em |
203| Body | Geist | 15px | 400 | 1.6 | -0.005em |
204| UI / Button | Geist | 13px | 500 | 1.4 | 0 |
205| Prompt / Code | Geist Mono | 13px | 400 | 1.55 | 0 |
206| Metric Label | Geist Mono | 11px | 500 | 1.0 | 0.04em uppercase |
207| Latency / Tokens | Geist Mono | 12px | 500 | 1.0 | 0 tabular-nums |
208 
209Geist Mono carries the technical voice — anything a model touches (prompt, response chunk, latency in ms, token count, model name) lives in mono.
210 
211## 4. Buttons
212 
213### Primary (Ink with Inset Highlight)
214```css
215background: #0d0f12;
216color: #f7f8fa;
217padding: 9px 18px;
218border-radius: 8px;
219border: 1px solid rgba(0,0,0,0.4);
220box-shadow:
221  rgba(255,255,255,0.10) 0 1px 0 inset,
222  rgba(13,15,18,0.18) 0 1px 2px;
223```
224 
225The inset white highlight is the entire signature — without it the button reads as flat black. The dark border at 40% black above the inset is what gives the catch-light something to bend over.
226 
227### Secondary (Card White)
228- Pure white, 1px hairline at 10% ink, ink text — small 1px shadow
229 
230### Outline & Ghost
231- Outline: transparent, 1px hairline at 16% ink
232- Ghost: no border, ink-60, hover lifts to ink
233 
234## 5. Cards
235 
236```css
237background: #ffffff;
238border: 1px solid rgba(13,15,18,0.06);
239border-radius: 12px;
240box-shadow:
241  rgba(255,255,255,0.85) 0 1px 0 inset,
242  rgba(13,15,18,0.04) 0 1px 2px,
243  rgba(13,15,18,0.04) 0 0 0 1px;
244```
245 
246The 1px white inset highlight at the top is the catch-light — it sells the surface as physical glass rather than flat fill. The 1px outline shadow doubles the edge for crispness on retina.
247 
248The active assistant card adds a 1px indigo top border — that is the only place indigo appears on a card edge.
249 
250## 6. Charts
251 
252Line charts at 1.75px ink with an 8% indigo fill, ending in an indigo dot marker. The line is the primary chart variant — bars are reserved for token-usage breakdowns. NO gridlines. Y-axis labels in Geist Mono uppercase 11px aligned to the right edge.
253 
254## 7. Tabs
255 
256Pill tabs in a tinted track. Active = white background with the same 1px inset highlight as cards, 1px indigo border, indigo text. Inactive = transparent, ink-60. The active pill carries its own catch-light — that's the consistency move.
257 
258## 8. Spacing
259 
260- Base 4px
261- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 80`
262- Section padding: 80px desktop, 40px mobile
263 
264## 9. Do's & don'ts
265 
266✅ **Do**
267- Reserve indigo for the assistant-response state — avatar dot, streaming caret, active model pill
268- Keep the 1px white inset highlight on every card and primary button — that's the physical catch-light
269- Put every prompt, latency, token count, and model name in Geist Mono
270- Hold the off-white page → pure white card tonal step
271 
272❌ **Don't**
273- Use a rainbow / purple-pink gradient — the entire category does this; you do not
274- Add an animated "thinking" shimmer — the indigo caret IS the response state
275- Use Geist Mono for prose body — mono is reserved for technical strings
276- Add a second accent color — indigo alone, on the assistant-response state only
277 
278---
279 
280## Tokens
281 
282> Generated from the same source the live preview renders from.
283> Treat the values below as the contract — never substitute approximations.
284 
285### Colors
286 
287| Role      | Value |
288|-----------|-------|
289| primary   | `#0d0f12` |
290| secondary | `#646973` |
291| tertiary  | `#0d0f12` |
292| neutral   | `#eef0f3` |
293| surface   | `#f7f8fa` |
294 
295### Typography
296 
297- **Display:** Geist
298- **Body:** Geist
299- **Mono:** Geist Mono
300 
301| Role | size / leading / weight / tracking |
302|------|------------------------------------|
303| Hero | 3.5rem / 1.04 / 600 / -0.035em |
304| H1   | 2.25rem / 1.14 / 600 / -0.025em |
305| H2   | 1.5rem / 1.3 / 600 / -0.018em |
306| Body | 0.9375rem / 1.6 / 400 / -0.005em |
307 
308### Radius
309 
310- sm: `5px`
311- md: `8px`
312- lg: `12px`
313- pill: `9999px`
314 
315### Shadows
316 
317- **card:** `rgba(255,255,255,0.85) 0 1px 0 inset, rgba(13,15,18,0.04) 0 1px 2px, rgba(13,15,18,0.04) 0 0 0 1px`
318- **button:** `rgba(255,255,255,0.10) 0 1px 0 inset, rgba(13,15,18,0.18) 0 1px 2px`
319 
320### Borders
321 
322- **card:** `1px solid rgba(13,15,18,0.06)`
323- **divider:** `rgba(13,15,18,0.08)`
324 
325### Buttons
326 
327Four variants, each fully tokenized. The preview renders from these exact values.
328 
329#### Primary
330 
331| Property | Value |
332|----------|-------|
333| shape | `rounded` |
334| background | `#0d0f12` |
335| color | `#f7f8fa` |
336| border | `1px solid rgba(0,0,0,0.4)` |
337| padding | `9px 18px` |
338| fontWeight | `500` |
339| fontSize | `0.8125rem` |
340| shadow | `rgba(255,255,255,0.10) 0 1px 0 inset, rgba(13,15,18,0.18) 0 1px 2px` |
341 
342#### Secondary
343 
344| Property | Value |
345|----------|-------|
346| shape | `rounded` |
347| background | `#ffffff` |
348| color | `#0d0f12` |
349| border | `1px solid rgba(13,15,18,0.10)` |
350| padding | `9px 18px` |
351| fontWeight | `500` |
352| fontSize | `0.8125rem` |
353| shadow | `rgba(13,15,18,0.04) 0 1px 2px` |
354 
355#### Outline
356 
357| Property | Value |
358|----------|-------|
359| shape | `rounded` |
360| background | `transparent` |
361| color | `#0d0f12` |
362| border | `1px solid rgba(13,15,18,0.16)` |
363| padding | `9px 18px` |
364| fontWeight | `500` |
365| fontSize | `0.8125rem` |
366 
367#### Ghost
368 
369| Property | Value |
370|----------|-------|
371| shape | `rounded` |
372| background | `transparent` |
373| color | `#646973` |
374| border | `none` |
375| padding | `9px 14px` |
376| fontWeight | `500` |
377| fontSize | `0.8125rem` |
378 
379### Charts
380 
381| Property | Value |
382|----------|-------|
383| variant | `line` |
384| strokeWidth | `1.75` |
385| fillOpacity | `0.08` |
386| gridlines | `false` |
387| barGap | `10px` |
388| highlight | `single` |
389| dotMarker | `true` |
390 
391---
392 
393## Pro tokens
394 
395> Production-fidelity tokens. States, density, motion, elevation,
396> content rules and a measured WCAG contract — derived from the
397> resting tokens unless explicitly authored.
398 
399### States
400 
401#### Button
402 
403- **hover** — shadow: `0 0 24px -4px rgba(13, 15, 18, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)`
404- **focus** — outline: `1.5px solid #0d0f12`, outline-offset: `3px`
405- **active** — transform: `translateY(1px)`, filter: `brightness(0.92)`
406- **disabled** — opacity: `0.35`, filter: `saturate(0.4)`
407- **loading** — opacity: `0.6`
408- **selected** — bg: `#0d0f12`, color: `#0A0A0A`
409 
410#### Input
411 
412- **hover** — border: `1px solid rgba(13, 15, 18, 0.5)`
413- **focus** — border: `1px solid #0d0f12`, shadow: `0 0 0 3px rgba(13, 15, 18, 0.2)`
414- **disabled** — opacity: `0.35`
415- **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)`
416 
417#### Card
418 
419- **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(13, 15, 18, 0.18)`, transform: `translateY(-2px)`
420- **selected** — border: `1px solid #0d0f12`, shadow: `0 0 0 1px #0d0f12`
421- **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85`
422 
423#### Tab
424 
425- **hover** — color: `#0d0f12`
426- **focus** — outline: `1.5px solid #0d0f12`, outline-offset: `2px`
427- **selected** — color: `#0d0f12`, border: `0 0 1.5px 0 solid #0d0f12`
428 
429### Density
430 
431| Mode | padding × | row × | body | radius × | Use for |
432|------|-----------|-------|------|----------|---------|
433| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
434| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
435| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
436 
437### Motion
438 
439**Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele.
440 
441```css
442transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1);
443```
444 
445| Token | Value |
446|-------|-------|
447| duration.instant | `100ms` |
448| duration.fast | `180ms` |
449| duration.base | `280ms` |
450| duration.slow | `450ms` |
451| easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` |
452| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
453| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
454| easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` |
455 
456### Elevation
457 
458Five-level scale, system-specific recipe.
459 
460| Level | Shadow | Recipe |
461|-------|--------|--------|
462| level0 | `none` | Flat — Hairline mit Accent-Hauch. |
463| level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. |
464| level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. |
465| level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(13, 15, 18, 0.25)` | Sheet — Accent-Halo. |
466| level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(13, 15, 18, 0.4)` | Modal — voller Accent-Rim, dramatisch. |
467 
468### Content
469 
470- **measure:** `66ch` (max line length for body prose)
471- **paragraph spacing:** `1.3em`
472- **list indent:** `1.5em`
473- **list gap:** `0.5em`
474- **link:** color `#0d0f12`, underline `hover`
475- **blockquote:** border `2px solid #0d0f12`, padding `0.8em 1.2em`
476- **code:** background `rgba(13, 15, 18, 0.12)`, color `#0d0f12`
477 
478### Accessibility (WCAG 2.1)
479 
480**Overall:** AA
481 
482| Pair | Ratio | Required | Grade | Suggested fix |
483|------|-------|----------|-------|---------------|
484| Body text on surface | 18.06:1 | AA | AAA | — |
485| Body text on canvas | 16.81:1 | AA | AAA | — |
486| Muted text on surface | 5.19:1 | AA | AA | — |
487| Accent on surface | 18.06:1 | AA-Large | AAA | — |
488| Accent on canvas | 16.81:1 | AA-Large | AAA | — |
489
04 · 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.
05 · Required setup

Three snippets.

Google Fonts link

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

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Geist"', 'serif'],
        sans:    ['"Geist"', 'sans-serif'],
        mono:    ['"Geist Mono"', 'monospace'],
      },
      colors: {
        primary:   '#0d0f12',
        secondary: '#646973',
        accent:    '#0d0f12',
        neutral:   '#eef0f3',
        surface:   '#f7f8fa',
      },
      borderRadius: {
        sm: '5px',
        md: '8px',
        lg: '12px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Coinblue Exchange

Crypto-grade trust on white. Saturated brand blue, ultra-tight 1.00 line-height display, distinctive 56px radius pill CTAs, alternating white/near-black sections.

fintechsaasminimaltrustworthymodern
Coinblue.app
ProductPricingDocsAbout
Sign inGet started
fintech · saas · minimal

Build with Coinblue Exchange.

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

Studio Margaux

A design-studio identity built on asymmetric oversized typography. Cream surfaces, Fraunces at extreme display scale paired with Inter Tight for body, an inked black block reserved for the studio mark and the single primary CTA, and an italic serif accent line that breaks every layout. Built for design agencies, art-direction portfolios, and creative studios that lead with type instead of imagery.

editorialagencywarmpremiumasymmetric
Studio.app
ProductPricingDocsAbout
Sign inGet started
editorial · agency · warm

Build with Studio Margaux.

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