/
design.md
Back to directory
minimal · serif · premium · modern · editorial

Linnea Serif.

Ultra-minimal modern serif. Pure off-white canvas, Fraunces variable serif tuned for warmth and optical size, one slate-blue accent. No shadows, no gradients — the serif itself is the system.

01 · Preview

The kitchen sink.

Linnea.app
ProductPricingDocsAbout
Sign inGet started
minimal · serif · premium

Build with Linnea Serif.

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
#16181D
secondary
#5E6470
tertiary
#9097A0
neutral
#F5F5F2
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
8px
md
12px
lg
16px
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: "Linnea Serif"
3description: "Ultra-minimal modern serif. Pure off-white canvas, Fraunces variable serif tuned for warmth and optical size, one slate-blue accent. No shadows, no gradients — the serif itself is the system."
4tags: [minimal, serif, premium, modern, editorial]
5colors:
6  primary:   "#16181D"
7  secondary: "#5E6470"
8  tertiary:  "#9097A0"
9  neutral:   "#F5F5F2"
10  surface:   "#FFFFFF"
11typography:
12  display: Fraunces
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.5rem / 1.05 / 400 / -0.025em"
17    h1:   "2.625rem / 1.1 / 400 / -0.022em"
18    h2:   "1.5rem / 1.3 / 500 / -0.012em"
19    body: "1.0625rem / 1.7 / 400 / -0.003em"
20radius:
21  sm: 8px
22  md: 12px
23  lg: 16px
24  pill: 9999px
25shadows:
26  card:   "0 0 0 1px rgba(22, 24, 29, 0.07)"
27  button: none
28borders:
29  card:    "1px solid rgba(22, 24, 29, 0.07)"
30  divider: "rgba(22, 24, 29, 0.10)"
31buttons:
32  primary:
33    background: #3C4B6B
34    color: #F5F5F2
35    border: 1px solid #3C4B6B
36    shape: rounded
37    padding: 12px 24px
38    font: 500 / 0.9375rem / -0.005em
39  secondary:
40    background: #FFFFFF
41    color: #16181D
42    border: 1px solid rgba(22, 24, 29, 0.14)
43    shape: rounded
44    padding: 12px 24px
45    font: 500 / 0.9375rem / -0.005em
46  outline:
47    background: transparent
48    color: #16181D
49    border: 1px solid rgba(22, 24, 29, 0.18)
50    shape: rounded
51    padding: 11px 23px
52    font: 500 / 0.9375rem / -0.005em
53  ghost:
54    background: transparent
55    color: #3C4B6B
56    border: none
57    shape: rounded
58    padding: 11px 4px
59    font: 500 / 0.9375rem / -0.005em
60    hover: underline
61charts:
62  variant: line
63  stroke_width: 1.5
64  gridlines: false
65  highlight: last
66  dot_marker: true
67  axis_color: "#5E6470"
68  palette: ["#3C4B6B"]
69fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
70dependencies: ["lucide-react"]
71---
72 
73# Linnea Serif
74 
75## AI Build Instructions
76 
77> **Read this section before writing any code.** The rules below
78> are non-negotiable. Every value used in the UI must come from this
79> file's frontmatter — never substitute, approximate, or invent new
80> colors, fonts, radii, or shadows. If a value is missing, ask the
81> user before adding one.
82 
83### 1 · Your role
84 
85You are building UI for a project that has adopted **Linnea Serif** as its
86design system. Treat `DESIGN.md` as the single source of truth.
87Your job is to translate the user's product requirements into
88components and pages that look like they were designed by the same
89person who authored this file.
90 
91### 2 · Token compliance
92 
93- Pull every color, font family, radius, shadow, and spacing value
94  from the frontmatter at the top of this file.
95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
96  hard-code hex values that bypass the system.
97- When a token can be expressed as a CSS variable, declare it once
98  in your global stylesheet and reference it everywhere downstream.
99- The Google Fonts `<link>` is provided in the Typography section.
100  Add it to `<head>` before any component renders.
101 
102### 3 · Component recipes
103 
104Use these recipes verbatim when building the corresponding component.
105 
106#### Buttons
107 
108Four variants are defined. Pick one — never blend variants or invent a fifth.
109 
110- **Primary** — rounded shape, bg `#3C4B6B`, text `#F5F5F2`, border `1px solid #3C4B6B`, padding `12px 24px`, weight `500`.
111- **Secondary** — rounded shape, bg `#FFFFFF`, text `#16181D`, border `1px solid rgba(22, 24, 29, 0.14)`, padding `12px 24px`, weight `500`.
112- **Outline** — rounded shape, text `#16181D`, border `1px solid rgba(22, 24, 29, 0.18)`, padding `11px 23px`, weight `500`.
113- **Ghost** — rounded shape, text `#3C4B6B`, padding `11px 4px`, weight `500`.
114 
115Reach for **primary** as the single dominant CTA per screen.
116**Secondary** for the supporting action. **Outline** for tertiary
117actions in toolbars. **Ghost** for inline links and table actions.
118 
119#### Cards
120 
121- Background: `#FFFFFF`
122- Border: `1px solid rgba(22, 24, 29, 0.07)`
123- Shadow: `0 0 0 1px rgba(22, 24, 29, 0.07)`
124- Radius: `radius.lg` (`16px`)
125- Internal padding: `20px` for compact cards, `24–28px` for content cards.
126 
127#### Charts
128 
129- Bar/line variant: `line`
130- No gridlines — let the bars/lines carry the data.
131- Highlight strategy: `last` — emphasize a single bar/point per chart.
132- Use the declared palette in order: `#3C4B6B`.
133 
134#### Typography pairings
135 
136- **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks.
137- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
138- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
139 
140### 4 · Hard constraints
141 
142Never do any of the following without explicit instruction from the user:
143 
144- Introduce a new color, font, radius, or shadow that isn't declared above.
145- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
146- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
147- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
148- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
149 
150### 5 · Before you finish — verify
151 
152Run through this checklist for every screen you produce:
153 
154- [ ] Every color used appears in the Colors table above.
155- [ ] Headlines use the display font; body copy uses the body font.
156- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
157- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
158- [ ] Cards and dividers use the declared border + shadow tokens.
159- [ ] No values were invented; if you needed something missing, you stopped and asked.
160 
161---
162 
163## Overview
164Linnea Serif is reduced to its barest elements. Pure cool off-white canvas. One variable serif — **Fraunces** — tuned for warmth via its optical-size and soft axes. One slate-blue accent. No shadows, no gradients, no decoration. The serif itself, with its optical contrast and humanist warmth, is the entire system.
165 
166For literary brands, premium SaaS that wants character without ornamentation, design journals, considered editorial sites.
167 
168## Color
169- **Ink #16181D** — primary text. Faint cool bias to sit naturally on the cool off-white.
170- **Mid Graphite #5E6470** — secondary text, axis labels.
171- **Soft Graphite #9097A0** — tertiary text, dividers.
172- **Off-white #F5F5F2** — page canvas. Distinctly not warm, distinctly not pure white.
173- **Paper #FFFFFF** — card surface, one notch above the canvas.
174- **Slate Blue #3C4B6B** — the only chromatic accent. Primary CTA, links, chart line.
175 
176The slate-blue is intentionally low-chroma — it sits in the cool off-white world without breaking it.
177 
178## Typography
179**Fraunces is the entire system.** Variable axes give it character without needing a second display family.
180 
181| Role | Font | Size | Weight | Tracking | opsz | SOFT |
182|------|------|------|--------|----------|------|------|
183| Hero | Fraunces | 4.5rem | 400 | -0.025em | 144 | 100 |
184| H1 | Fraunces | 2.625rem | 400 | -0.022em | 96 | 80 |
185| H2 | Fraunces | 1.5rem | 500 | -0.012em | 36 | 50 |
186| Body | Inter | 1.0625rem | 400 | -0.003em / 1.7 | — | — |
187 
188The hero uses Fraunces at the maximum 144 optical size with SOFT 100 — the letterforms become large, warm, and visibly humanist. Smaller sizes step the optical-size down so the serif stays crisp.
189 
190```css
191.linnea-hero {
192  font-family: "Fraunces", serif;
193  font-size: 4.5rem;
194  font-weight: 400;
195  letter-spacing: -0.025em;
196  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
197}
198```
199 
200## Geometry
201- **Radii: 8 / 12 / 16, plus pill.** Soft modern. Never sharp.
202- **No shadows.** A 1px ink hairline at 7% opacity is the only depth signal.
203- **Section gap: 128px** desktop, 80px mobile.
204- **12-column grid** with 28px gutters.
205 
206## Buttons
207- **Primary** — solid slate-blue, off-white label.
208- **Secondary** — surface paper, ink label, ink hairline at 14%.
209- **Outline** — bare ink hairline at 18%.
210- **Ghost** — bare slate-blue label, hover underline.
211 
212All buttons sit at 12px / 24px padding with 12px corners. Quiet and considered.
213 
214## Cards
215Surface paper on off-white, 1px ink hairline at 7% opacity, 12px corners, **no drop shadow**. Padding 32px. The hairline is the entire structure.
216 
217## Charts & Data
218Single slate-blue line at 1.5px stroke, no gridlines, end-of-line dot marker. Axis labels in mid-graphite Inter at 11px. The chart is a notation, not a visualization.
219 
220## Do's and Don'ts
221- ✅ Fraunces with variable axes (opsz + SOFT). The variable-axis tuning IS the system.
222- ✅ Display weight 400. Bold breaks the serif's warmth.
223- ✅ Cool off-white canvas. Never pure white, never warm bone.
224- ✅ One chromatic accent — slate blue. Used sparingly.
225- ❌ No drop shadows. Hairline only.
226- ❌ No second display font.
227- ❌ No bold weight. The serif speaks at 400.
228- ❌ No oversized hero. Restraint is the brand.
229 
230---
231 
232## Tokens
233 
234> Generated from the same source the live preview renders from.
235> Treat the values below as the contract — never substitute approximations.
236 
237### Colors
238 
239| Role      | Value |
240|-----------|-------|
241| primary   | `#16181D` |
242| secondary | `#5E6470` |
243| tertiary  | `#9097A0` |
244| neutral   | `#F5F5F2` |
245| surface   | `#FFFFFF` |
246 
247### Typography
248 
249- **Display:** Fraunces
250- **Body:** Inter
251- **Mono:** JetBrains Mono
252 
253| Role | size / leading / weight / tracking |
254|------|------------------------------------|
255| Hero | 4.5rem / 1.05 / 400 / -0.025em |
256| H1   | 2.625rem / 1.1 / 400 / -0.022em |
257| H2   | 1.5rem / 1.3 / 500 / -0.012em |
258| Body | 1.0625rem / 1.7 / 400 / -0.003em |
259 
260### Radius
261 
262- sm: `8px`
263- md: `12px`
264- lg: `16px`
265- pill: `9999px`
266 
267### Shadows
268 
269- **card:** `0 0 0 1px rgba(22, 24, 29, 0.07)`
270- **button:** `none`
271 
272### Borders
273 
274- **card:** `1px solid rgba(22, 24, 29, 0.07)`
275- **divider:** `rgba(22, 24, 29, 0.10)`
276 
277### Buttons
278 
279Four variants, each fully tokenized. The preview renders from these exact values.
280 
281#### Primary
282 
283| Property | Value |
284|----------|-------|
285| shape | `rounded` |
286| background | `#3C4B6B` |
287| color | `#F5F5F2` |
288| border | `1px solid #3C4B6B` |
289| padding | `12px 24px` |
290| fontWeight | `500` |
291| fontSize | `0.9375rem` |
292| tracking | `-0.005em` |
293 
294#### Secondary
295 
296| Property | Value |
297|----------|-------|
298| shape | `rounded` |
299| background | `#FFFFFF` |
300| color | `#16181D` |
301| border | `1px solid rgba(22, 24, 29, 0.14)` |
302| padding | `12px 24px` |
303| fontWeight | `500` |
304| fontSize | `0.9375rem` |
305| tracking | `-0.005em` |
306 
307#### Outline
308 
309| Property | Value |
310|----------|-------|
311| shape | `rounded` |
312| background | `transparent` |
313| color | `#16181D` |
314| border | `1px solid rgba(22, 24, 29, 0.18)` |
315| padding | `11px 23px` |
316| fontWeight | `500` |
317| fontSize | `0.9375rem` |
318| tracking | `-0.005em` |
319 
320#### Ghost
321 
322| Property | Value |
323|----------|-------|
324| shape | `rounded` |
325| background | `transparent` |
326| color | `#3C4B6B` |
327| border | `none` |
328| padding | `11px 4px` |
329| fontWeight | `500` |
330| fontSize | `0.9375rem` |
331| tracking | `-0.005em` |
332| hoverHint | `underline` |
333 
334### Charts
335 
336| Property | Value |
337|----------|-------|
338| variant | `line` |
339| strokeWidth | `1.5` |
340| gridlines | `false` |
341| highlight | `last` |
342| dotMarker | `true` |
343| axisColor | `#5E6470` |
344| palette | `#3C4B6B` |
345
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=Fraunces:opsz,wght,SOFT,WONK@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Fraunces"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#16181D',
        secondary: '#5E6470',
        accent:    '#9097A0',
        neutral:   '#F5F5F2',
        surface:   '#FFFFFF',
      },
      borderRadius: {
        sm: '8px',
        md: '12px',
        lg: '16px',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Soft Pastel SaaS

Lavender and cream, generous rounding, friendly and approachable.

saasplayfulminimalmodern
Soft.app
ProductPricingDocsAbout
Sign inGet started
saas · playful · minimal

Build with Soft Pastel SaaS.

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

Vestige Folio

Fashion editorial that doesn't shout. Off-bone surfaces, Playfair Display 400 for product names at oversized scale, Inter for body and UI, generous negative space, and a single muted oxblood accent reserved for the Add-to-Bag CTA. Built for fashion houses, jewellery brands, and high-end retail that wants the catalogue feel of a glossy quarterly.

editorialfashionecommercepremiumminimal
Vestige.app
ProductPricingDocsAbout
Sign inGet started
editorial · fashion · ecommerce

Build with Vestige Folio.

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