design.md
Back to directory
editorial · warm · premium · serif · minimal

Hemlock Paper.

A warm off-white paper system that earns trust through quiet. Cream-paper surfaces, EB Garamond at oversized scale for headlines paired with Inter for UI, generous reading line-heights, a single forest-green accent reserved for verified marks and the primary CTA. Built for advisory firms, professional services, premium brands, and editorial sites that want quiet European authority.

01 · Preview

The kitchen sink.

Hemlock.app
ProductPricingDocsAbout
Sign inGet started
editorial · warm · premium

Build with Hemlock Paper.

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
#1C1A14
secondary
#6B6759
tertiary
#1C1A14
neutral
#EBE4CF
surface
#F3ECD6
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
2px
md
3px
lg
4px
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.

ArchetypeEditorial

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

Tab

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

DESIGN.md

markdown
1---
2name: "Hemlock Paper"
3description: "A warm off-white paper system that earns trust through quiet. Cream-paper surfaces, EB Garamond at oversized scale for headlines paired with Inter for UI, generous reading line-heights, a single forest-green accent reserved for verified marks and the primary CTA. Built for advisory firms, professional services, premium brands, and editorial sites that want quiet European authority."
4tags: [editorial, warm, premium, serif, minimal]
5colors:
6  primary:   "#1c1a14"
7  secondary: "#6b6759"
8  tertiary:  "#1c1a14"
9  neutral:   "#ebe4cf"
10  surface:   "#f3ecd6"
11typography:
12  display: "EB Garamond"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "6.5rem / 0.98 / 400 / -0.035em"
17    h1:   "3.75rem / 1.06 / 400 / -0.022em"
18    h2:   "1.875rem / 1.22 / 500 / -0.012em"
19    body: "1.0625rem / 1.72 / 400 / -0.005em"
20radius:
21  sm: 2px
22  md: 3px
23  lg: 4px
24  pill: 9999px
25shadows:
26  card:   none
27  button: none
28borders:
29  card:    "1px solid rgba(28,26,20,0.12)"
30  divider: rgba(28,26,20,0.16)
31buttons:
32  primary:
33    background: #244232
34    color: #f3ecd6
35    border: none
36    shape: sharp
37    padding: 12px 24px
38    font: 500 / 0.8125rem / 0.14em
39    uppercase: true
40  secondary:
41    background: transparent
42    color: #1c1a14
43    border: 1px solid #1c1a14
44    shape: sharp
45    padding: 12px 24px
46    font: 500 / 0.8125rem / 0.14em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #1c1a14
51    border: 1px solid rgba(28,26,20,0.18)
52    shape: sharp
53    padding: 12px 24px
54    font: 500 / 0.8125rem / 0.14em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #6b6759
59    border: none
60    shape: sharp
61    padding: 12px 16px
62    font: 500 / 0.8125rem / 0.14em
63    uppercase: true
64charts:
65  variant: "thin-bars"
66  stroke_width: 1
67  fill_opacity: 0
68  gridlines: false
69  bar_gap: 12px
70  highlight: single
71  dot_marker: false
72fonts_url: "https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
73dependencies: ["lucide-react"]
74---
75 
76# Hemlock Paper
77 
78## AI Build Instructions
79 
80> **Read this section before writing any code.** The rules below
81> are non-negotiable. Every value used in the UI must come from this
82> file's frontmatter — never substitute, approximate, or invent new
83> colors, fonts, radii, or shadows. If a value is missing, ask the
84> user before adding one.
85 
86### 1 · Your role
87 
88You are building UI for a project that has adopted **Hemlock Paper** as its
89design system. Treat `DESIGN.md` as the single source of truth.
90Your job is to translate the user's product requirements into
91components and pages that look like they were designed by the same
92person who authored this file.
93 
94### 2 · Token compliance
95 
96- Pull every color, font family, radius, shadow, and spacing value
97  from the frontmatter at the top of this file.
98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
99  hard-code hex values that bypass the system.
100- When a token can be expressed as a CSS variable, declare it once
101  in your global stylesheet and reference it everywhere downstream.
102- The Google Fonts `<link>` is provided in the Typography section.
103  Add it to `<head>` before any component renders.
104 
105### 3 · Component recipes
106 
107Use these recipes verbatim when building the corresponding component.
108 
109#### Buttons
110 
111Four variants are defined. Pick one — never blend variants or invent a fifth.
112 
113- **Primary** — sharp shape, bg `#244232`, text `#f3ecd6`, padding `12px 24px`, weight `500`, uppercased.
114- **Secondary** — sharp shape, text `#1c1a14`, border `1px solid #1c1a14`, padding `12px 24px`, weight `500`, uppercased.
115- **Outline** — sharp shape, text `#1c1a14`, border `1px solid rgba(28,26,20,0.18)`, padding `12px 24px`, weight `500`, uppercased.
116- **Ghost** — sharp shape, text `#6b6759`, padding `12px 16px`, weight `500`, uppercased.
117 
118Reach for **primary** as the single dominant CTA per screen.
119**Secondary** for the supporting action. **Outline** for tertiary
120actions in toolbars. **Ghost** for inline links and table actions.
121 
122#### Cards
123 
124- Background: `#f3ecd6`
125- Border: `1px solid rgba(28,26,20,0.12)`
126- Shadow: `none`
127- Radius: `radius.lg` (`4px`)
128- Internal padding: `20px` for compact cards, `24–28px` for content cards.
129 
130#### Tabs
131 
132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
133 
134#### Charts
135 
136- Bar/line variant: `thin-bars`
137- No gridlines — let the bars/lines carry the data.
138- Highlight strategy: `single` — emphasize a single bar/point per chart.
139 
140#### Typography pairings
141 
142- **Display (`EB Garamond`)** — h1, h2, hero headlines, brand wordmarks.
143- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
144- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
145 
146### 4 · Hard constraints
147 
148Never do any of the following without explicit instruction from the user:
149 
150- Introduce a new color, font, radius, or shadow that isn't declared above.
151- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
152- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
153- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
154- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
155 
156### 5 · Before you finish — verify
157 
158Run through this checklist for every screen you produce:
159 
160- [ ] Every color used appears in the Colors table above.
161- [ ] Headlines use the display font; body copy uses the body font.
162- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
163- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
164- [ ] Cards and dividers use the declared border + shadow tokens.
165- [ ] No values were invented; if you needed something missing, you stopped and asked.
166 
167---
168 
169## 1. Atmosphere
170 
171Hemlock Paper is a warm off-white paper system that earns trust through quiet. The page surface is cream paper `#f3ecd6` — warmer than a clinical white-paper, calmer than parchment. Headlines run in EB Garamond 400 at 104px — the classical serif at scale, never bold. Body sits in Inter at 17px on a 1.72 leading — a generous reading rhythm that signals long-form respect. UI labels run in Inter 500 with 0.14em uppercase tracking — the engraved-foundry voice. The single accent is forest green `#244232` reserved for verified marks (a small filled square in front of a verified item), the primary CTA, and the active step in a process flow.
172 
173The discipline is in the proportion: huge classical serif on warm paper, generous body leading, and one forest-green mark per page that reads as a notary stamp. The system never lifts a card and never adds shadows.
174 
175**Signature moves**
176- EB Garamond 400 at 104px headlines — classical serif at scale, never bold
177- Warm cream paper `#f3ecd6` — never bright white, never beige
178- Forest green `#244232` exclusively on verified marks + primary CTA + active step
179- 17px Inter body on 1.72 leading — generous long-form reading rhythm
180- 0.14em uppercase tracking on UI labels — engraved-foundry voice
181- Sharp 2-4px corners — letterpress precision, no shadows anywhere
182 
183## 2. Palette
184 
185### Surfaces
186- **Cream Paper** `#f3ecd6` — page background (warm off-white)
187- **Cream Lift** `#ebe4cf` — secondary surfaces, footer
188- **Hairline** `rgba(28,26,20,0.12)` — every divider, every card edge
189 
190### Ink
191- **Ink** `#1c1a14` — text, headings (warm near-black)
192- **Ink 50** `#6b6759` — secondary text, mono captions
193 
194### Accent
195- **Forest** `#244232` — verified marks, primary CTA, active step indicator
196- **Forest Soft** `rgba(36,66,50,0.10)` — focus ring, hovered step
197 
198## 3. Typography
199 
200| Role | Font | Size | Weight | Leading | Tracking |
201|------|------|------|--------|---------|----------|
202| Hero | EB Garamond | 104px | 400 | 0.98 | -0.035em |
203| H1 | EB Garamond | 60px | 400 | 1.06 | -0.022em |
204| H2 | EB Garamond | 30px | 500 | 1.22 | -0.012em |
205| Pull Quote | EB Garamond (italic) | 26px | 400 | 1.4 | -0.008em |
206| Body | Inter | 17px | 400 | 1.72 | -0.005em |
207| UI / Button | Inter | 13px | 500 | 1.4 | 0.14em uppercase |
208| Caption / Date | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |
209| Reference Number | JetBrains Mono | 13px | 500 | 1.0 | 0.04em tabular-nums |
210 
211EB Garamond at 400 only — bold breaks the classical proportion. Italic reserved for pull quotes and the verified-by line.
212 
213## 4. Buttons
214 
215### Primary (Forest — Engage)
216```css
217background: #244232;
218color: #f3ecd6;
219padding: 12px 24px;
220border-radius: 3px;
221text-transform: uppercase;
222letter-spacing: 0.14em;
223font-weight: 500;
224```
225 
226The forest-green on warm paper reads as a wax-stamped notary mark, not a marketing CTA.
227 
228### Secondary (Ink Outline)
229- Transparent, 1px solid ink, ink text — same near-sharp shape, same wide tracking
230 
231### Outline & Ghost
232- Outline: transparent, 1px hairline at 18% ink
233- Ghost: no border, ink-50 uppercase
234 
235## 5. Cards (rare)
236 
237The system prefers hairline-divided sections over cards. When a card is needed, it is sharp 4px corners with a 1px hairline at 12% ink — never lifted, never shadowed. Practice-area cards may add a 1px ink top border (3px wide) — the only chrome.
238 
239## 6. Charts
240 
241Thin precise bars (3px wide, 12px gap). One bar in forest, others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for performance breakdowns and read as inscribed exhibits.
242 
243## 7. Tabs
244 
245Underline 1px in ink for the active state. Inactive tabs are ink-50 in Inter 500 uppercase 0.14em. The active label often switches to EB Garamond italic at the same size — that is the rhythm change.
246 
247## 8. Spacing
248 
249- Base 8px
250- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200`
251- Section padding: 160px desktop, 80px mobile — long-form rhythm
252 
253## 9. Do's & don'ts
254 
255✅ **Do**
256- Use EB Garamond at 400 only — anything heavier breaks the classical proportion
257- Hold the warm cream paper surface — bright white reads as web app, beige reads as old textbook
258- Reserve forest green for verified marks + primary CTA + active step exclusively
259- Use 17px Inter body on 1.72 leading — long-form reading respect
260 
261❌ **Don't**
262- Use stock photography of pillars, trees, or "trust" imagery — the typography earns it
263- Use EB Garamond at 600+ — bold breaks the classical proportion
264- Use a second accent — forest alone, on three specific surfaces
265- Add shadows or lifted cards — hairlines and breathing room carry the layout
266 
267---
268 
269## Tokens
270 
271> Generated from the same source the live preview renders from.
272> Treat the values below as the contract — never substitute approximations.
273 
274### Colors
275 
276| Role      | Value |
277|-----------|-------|
278| primary   | `#1c1a14` |
279| secondary | `#6b6759` |
280| tertiary  | `#1c1a14` |
281| neutral   | `#ebe4cf` |
282| surface   | `#f3ecd6` |
283 
284### Typography
285 
286- **Display:** EB Garamond
287- **Body:** Inter
288- **Mono:** JetBrains Mono
289 
290| Role | size / leading / weight / tracking |
291|------|------------------------------------|
292| Hero | 6.5rem / 0.98 / 400 / -0.035em |
293| H1   | 3.75rem / 1.06 / 400 / -0.022em |
294| H2   | 1.875rem / 1.22 / 500 / -0.012em |
295| Body | 1.0625rem / 1.72 / 400 / -0.005em |
296 
297### Radius
298 
299- sm: `2px`
300- md: `3px`
301- lg: `4px`
302- pill: `9999px`
303 
304### Shadows
305 
306- **card:** `none`
307- **button:** `none`
308 
309### Borders
310 
311- **card:** `1px solid rgba(28,26,20,0.12)`
312- **divider:** `rgba(28,26,20,0.16)`
313 
314### Buttons
315 
316Four variants, each fully tokenized. The preview renders from these exact values.
317 
318#### Primary
319 
320| Property | Value |
321|----------|-------|
322| shape | `sharp` |
323| background | `#244232` |
324| color | `#f3ecd6` |
325| border | `none` |
326| padding | `12px 24px` |
327| fontWeight | `500` |
328| fontSize | `0.8125rem` |
329| tracking | `0.14em` |
330| uppercase | `true` |
331 
332#### Secondary
333 
334| Property | Value |
335|----------|-------|
336| shape | `sharp` |
337| background | `transparent` |
338| color | `#1c1a14` |
339| border | `1px solid #1c1a14` |
340| padding | `12px 24px` |
341| fontWeight | `500` |
342| fontSize | `0.8125rem` |
343| tracking | `0.14em` |
344| uppercase | `true` |
345 
346#### Outline
347 
348| Property | Value |
349|----------|-------|
350| shape | `sharp` |
351| background | `transparent` |
352| color | `#1c1a14` |
353| border | `1px solid rgba(28,26,20,0.18)` |
354| padding | `12px 24px` |
355| fontWeight | `500` |
356| fontSize | `0.8125rem` |
357| tracking | `0.14em` |
358| uppercase | `true` |
359 
360#### Ghost
361 
362| Property | Value |
363|----------|-------|
364| shape | `sharp` |
365| background | `transparent` |
366| color | `#6b6759` |
367| border | `none` |
368| padding | `12px 16px` |
369| fontWeight | `500` |
370| fontSize | `0.8125rem` |
371| tracking | `0.14em` |
372| uppercase | `true` |
373 
374### Charts
375 
376| Property | Value |
377|----------|-------|
378| variant | `thin-bars` |
379| strokeWidth | `1` |
380| fillOpacity | `0` |
381| gridlines | `false` |
382| barGap | `12px` |
383| highlight | `single` |
384| dotMarker | `false` |
385 
386---
387 
388## Pro tokens
389 
390> Production-fidelity tokens. States, density, motion, elevation,
391> content rules and a measured WCAG contract — derived from the
392> resting tokens unless explicitly authored.
393 
394### States
395 
396#### Button
397 
398- **hover** — bg: `rgba(28, 26, 20, 0.92)`, shadow: `0 4px 20px -8px rgba(28, 26, 20, 0.4)`
399- **focus** — outline: `1.5px solid #1c1a14`, outline-offset: `4px`
400- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
401- **disabled** — opacity: `0.45`
402- **loading** — opacity: `0.7`
403- **selected** — bg: `#1c1a14`, color: `#f3ecd6`
404 
405#### Input
406 
407- **hover** — border: `1px solid #1c1a14`
408- **focus** — border: `1px solid #1c1a14`, shadow: `0 1px 0 0 #1c1a14`
409- **disabled** — opacity: `0.45`
410- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
411 
412#### Card
413 
414- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
415- **selected** — border: `1px solid #1c1a14`
416 
417#### Tab
418 
419- **hover** — color: `#1c1a14`
420- **focus** — outline: `1.5px solid #1c1a14`, outline-offset: `3px`
421- **selected** — color: `#1c1a14`, border: `0 0 2px 0 solid #1c1a14`
422 
423### Density
424 
425| Mode | padding × | row × | body | radius × | Use for |
426|------|-----------|-------|------|----------|---------|
427| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
428| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
429| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
430 
431### Motion
432 
433**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
434 
435```css
436transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
437```
438 
439| Token | Value |
440|-------|-------|
441| duration.instant | `80ms` |
442| duration.fast | `180ms` |
443| duration.base | `320ms` |
444| duration.slow | `500ms` |
445| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
446| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
447| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
448| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
449 
450### Elevation
451 
452Five-level scale, system-specific recipe.
453 
454| Level | Shadow | Recipe |
455|-------|--------|--------|
456| level0 | `none` | Hairline only — typical editorial resting state. |
457| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
458| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
459| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
460| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
461 
462### Content
463 
464- **measure:** `60ch` (max line length for body prose)
465- **paragraph spacing:** `1.5em`
466- **list indent:** `1.75em`
467- **list gap:** `0.55em`
468- **link:** color `#1c1a14`, underline `always`
469- **blockquote:** border `4px solid #1c1a14`, padding `0.4em 0 0.4em 1.5em`
470- **code:** background `rgba(28, 26, 20, 0.06)`, color `#1c1a14`
471 
472### Accessibility (WCAG 2.1)
473 
474**Overall:** AA
475 
476| Pair | Ratio | Required | Grade | Suggested fix |
477|------|-------|----------|-------|---------------|
478| Body text on surface | 14.73:1 | AA | AAA | — |
479| Body text on canvas | 13.69:1 | AA | AAA | — |
480| Muted text on surface | 4.79:1 | AA | AA | — |
481| Accent on surface | 14.73:1 | AA-Large | AAA | — |
482| Accent on canvas | 13.69:1 | AA-Large | AAA | — |
483
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=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"EB Garamond"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1c1a14',
        secondary: '#6b6759',
        accent:    '#1c1a14',
        neutral:   '#ebe4cf',
        surface:   '#f3ecd6',
      },
      borderRadius: {
        sm: '2px',
        md: '3px',
        lg: '4px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Vinyl Noir

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.

musicdarkeditorialpremiummodern
Vinyl.app
ProductPricingDocsAbout
Sign inGet started
music · dark · editorial

Build with Vinyl Noir.

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

Monolith CLI

A premium command-line aesthetic that earned its calm. JetBrains Mono carries display, body, and labels at three sizes; warm off-white paper for surfaces; precise hairlines instead of cards; a single cobalt accent reserved for the cursor caret, the active path crumb, and the primary action. Built for developer-tool marketing pages, technical documentation hubs, and infra products that want to read as terminal-native without going dark.

codingminimalpremiumwarmmodern
Monolith.app
ProductPricingDocsAbout
Sign inGet started
coding · minimal · premium

Build with Monolith CLI.

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