design.md
Back to directory
bold · duotone · agency · modern · editorial

Ink & Citron.

Radical 2-color duotone. Deep ink-blue and acid citron, with no third hue. Every surface is one of the two colors or a tint thereof — the constraint is the personality.

01 · Preview

The kitchen sink.

Ink.app
ProductPricingDocsAbout
Sign inGet started→
bold · duotone · agency

Build with Ink & Citron.

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
#0E1B3D
secondary
#3A4566
tertiary
#E6FF55
neutral
#F2F3F8
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

Primary→SecondaryOutlineGhostText 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
0px
md
2px
lg
4px
pill
999px
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: "Ink & Citron"
3description: "Radical 2-color duotone. Deep ink-blue and acid citron, with no third hue. Every surface is one of the two colors or a tint thereof — the constraint is the personality."
4tags: [bold, duotone, agency, modern, editorial]
5colors:
6  primary:   "#0E1B3D"
7  secondary: "#3A4566"
8  tertiary:  "#E6FF55"
9  neutral:   "#F2F3F8"
10  surface:   "#FFFFFF"
11typography:
12  display: "Space Grotesk"
13  body:    Inter
14  mono:    "Space Mono"
15  scale:
16    hero: "6rem / 0.95 / 700 / -0.045em"
17    h1:   "3.5rem / 1 / 700 / -0.04em"
18    h2:   "1.75rem / 1.2 / 600 / -0.02em"
19    body: "1rem / 1.55 / 400 / -0.005em"
20radius:
21  sm: 0px
22  md: 2px
23  lg: 4px
24shadows:
25  card:   "4px 4px 0 0 #0E1B3D"
26  button: "3px 3px 0 0 #0E1B3D"
27borders:
28  card:    "1.5px solid #0E1B3D"
29  divider: "#0E1B3D"
30buttons:
31  primary:
32    background: #E6FF55
33    color: #0E1B3D
34    border: 1.5px solid #0E1B3D
35    shape: sharp
36    padding: 13px 26px
37    font: display / 700 / 0.9375rem / -0.01em
38    shadow: 3px 3px 0 0 #0E1B3D
39    suffix: arrow
40  secondary:
41    background: #0E1B3D
42    color: #FFFFFF
43    border: 1.5px solid #0E1B3D
44    shape: sharp
45    padding: 13px 26px
46    font: display / 600 / 0.9375rem / -0.01em
47  outline:
48    background: #FFFFFF
49    color: #0E1B3D
50    border: 1.5px solid #0E1B3D
51    shape: sharp
52    padding: 12px 24px
53    font: display / 600 / 0.9375rem / -0.01em
54  ghost:
55    background: transparent
56    color: #0E1B3D
57    border: none
58    shape: sharp
59    padding: 12px 4px
60    font: display / 600 / 0.9375rem / -0.01em
61    hover: underline
62charts:
63  variant: bars
64  stroke_width: 0
65  gridlines: false
66  bar_radius: 0px
67  bar_gap: 8px
68  highlight: last
69  axis_color: "#3A4566"
70  palette: ["#E6FF55", "#0E1B3D"]
71fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap"
72dependencies: ["lucide-react"]
73---
74 
75# Ink & Citron
76 
77## AI Build Instructions
78 
79> **Read this section before writing any code.** The rules below
80> are non-negotiable. Every value used in the UI must come from this
81> file's frontmatter — never substitute, approximate, or invent new
82> colors, fonts, radii, or shadows. If a value is missing, ask the
83> user before adding one.
84 
85### 1 · Your role
86 
87You are building UI for a project that has adopted **Ink & Citron** as its
88design system. Treat `DESIGN.md` as the single source of truth.
89Your job is to translate the user's product requirements into
90components and pages that look like they were designed by the same
91person who authored this file.
92 
93### 2 · Token compliance
94 
95- Pull every color, font family, radius, shadow, and spacing value
96  from the frontmatter at the top of this file.
97- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
98  hard-code hex values that bypass the system.
99- When a token can be expressed as a CSS variable, declare it once
100  in your global stylesheet and reference it everywhere downstream.
101- The Google Fonts `<link>` is provided in the Typography section.
102  Add it to `<head>` before any component renders.
103 
104### 3 · Component recipes
105 
106Use these recipes verbatim when building the corresponding component.
107 
108#### Buttons
109 
110Four variants are defined. Pick one — never blend variants or invent a fifth.
111 
112- **Primary** — sharp shape, bg `#E6FF55`, text `#0E1B3D`, border `1.5px solid #0E1B3D`, padding `13px 26px`, weight `700`, shadow `3px 3px 0 0 #0E1B3D`.
113- **Secondary** — sharp shape, bg `#0E1B3D`, text `#FFFFFF`, border `1.5px solid #0E1B3D`, padding `13px 26px`, weight `600`.
114- **Outline** — sharp shape, bg `#FFFFFF`, text `#0E1B3D`, border `1.5px solid #0E1B3D`, padding `12px 24px`, weight `600`.
115- **Ghost** — sharp shape, text `#0E1B3D`, padding `12px 4px`, weight `600`.
116 
117Reach for **primary** as the single dominant CTA per screen.
118**Secondary** for the supporting action. **Outline** for tertiary
119actions in toolbars. **Ghost** for inline links and table actions.
120 
121#### Cards
122 
123- Background: `#FFFFFF`
124- Border: `1.5px solid #0E1B3D`
125- Shadow: `4px 4px 0 0 #0E1B3D`
126- Radius: `radius.lg` (`4px`)
127- Internal padding: `20px` for compact cards, `24–28px` for content cards.
128 
129#### Charts
130 
131- Bar/line variant: `bars`
132- Bar radius: `0px`
133- No gridlines — let the bars/lines carry the data.
134- Highlight strategy: `last` — emphasize a single bar/point per chart.
135- Use the declared palette in order: `#E6FF55`, `#0E1B3D`.
136 
137#### Typography pairings
138 
139- **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks.
140- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
141- **Mono (`Space Mono`)** — code, eyebrows, metadata, numerals in tables.
142 
143### 4 · Hard constraints
144 
145Never do any of the following without explicit instruction from the user:
146 
147- Introduce a new color, font, radius, or shadow that isn't declared above.
148- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
149- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
150- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
151- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
152 
153### 5 · Before you finish — verify
154 
155Run through this checklist for every screen you produce:
156 
157- [ ] Every color used appears in the Colors table above.
158- [ ] Headlines use the display font; body copy uses the body font.
159- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
160- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
161- [ ] Cards and dividers use the declared border + shadow tokens.
162- [ ] No values were invented; if you needed something missing, you stopped and asked.
163 
164---
165 
166## Overview
167Ink & Citron is a radical 2-color duotone. Two colors do all the work:
168 
169- **Deep Ink #0E1B3D** — text, borders, secondary surfaces, hard shadows.
170- **Acid Citron #E6FF55** — the primary CTA, accent words, chart bars, the one thing that should grab the eye.
171 
172There is no third chromatic hue. The "neutral" off-white is tinted toward ink so the page never breaks the duotone. The constraint is the personality — when the system is followed strictly it reads as confident and modern; when a third color is introduced it falls apart.
173 
174For design-forward agencies, fashion-tech, music platforms, awards sites — anywhere the brief is "make it loud but smart."
175 
176## The Two Colors
177```css
178--ink:    #0E1B3D;
179--citron: #E6FF55;
180--paper:  #FFFFFF;     /* allowed neutral */
181--paper-tinted: #F2F3F8; /* page background, ink-tinted */
182```
183 
184Allowed combinations:
185- Citron block + ink label + hard ink shadow → primary CTA.
186- Ink block + paper label → secondary CTA, footer, dark sections.
187- Paper surface + ink hairline + ink type → cards, articles, body content.
188- Citron text on ink background → hero accent word only.
189 
190Forbidden combinations:
191- Any third hue.
192- Citron on paper as a fill (it's too aggressive at scale — citron is for actions and accents only).
193- Soft shadows. The shadow is always 3-4px hard-offset ink, never blurred.
194 
195## Typography
196- **Display: Space Grotesk 700** at 6rem with -4.5% tracking. Tight, geometric, confident.
197- **Body: Inter 400** at 1rem with 1.55 leading.
198- **Mono: Space Mono** for captions and code.
199 
200| Role | Font | Size | Weight | Tracking |
201|------|------|------|--------|----------|
202| Hero | Space Grotesk | 6rem | 700 | -0.045em |
203| H1 | Space Grotesk | 3.5rem | 700 | -0.04em |
204| H2 | Space Grotesk | 1.75rem | 600 | -0.02em |
205| Body | Inter | 1rem | 400 | -0.005em / 1.55 |
206 
207## Geometry
208- **Radii: 0 / 2 / 4.** The system reads as hard-edged. Pills and 12px+ radii break the personality.
209- **Borders: 1.5px solid ink.** Heavier than a hairline — the line is part of the composition.
210- **Hard shadows: 3-4px offset solid ink.** Never blurred. Reads as poster-print, not depth.
211 
212## Buttons
213- **Primary** — citron block, ink label, 1.5px ink border, 3px hard ink shadow. Mono-display label at 700.
214- **Secondary** — ink block, paper label, 1.5px ink border.
215- **Outline** — paper block, ink label, 1.5px ink border.
216- **Ghost** — bare ink label, hover underline.
217 
218All four are sharp (0-2px). All four use the display face for labels — the typography is part of the system's voice.
219 
220## Cards
221Paper surface, 1.5px solid ink border, 4px hard ink shadow. Radius 4px. Cards have weight — they sit on the page like printed cards on a table.
222 
223## Charts & Data
224Citron bars on a paper background, ink axis labels and baseline. No gridlines, no rounded corners, 8px gap. The chart is a graphic, not a subtle data viz.
225 
226## Do's and Don'ts
227- ✅ Two colors only — ink and citron. Every paint decision goes through this filter.
228- ✅ Hard offset shadows — 3-4px, solid ink, no blur. Ever.
229- ✅ Display face for buttons. The type is part of the brand.
230- ✅ Citron is for the primary CTA, one hero accent word, and chart bars. Three appearances per page max.
231- ❌ No third hue. No grey midtones beyond the ink-tinted paper.
232- ❌ No soft / blurred shadows. No glassmorphism. No gradients of any kind.
233- ❌ No pills. No radii above 4px.
234- ❌ No citron at large fill scale (full sections, full cards). It will fight the type.
235 
236---
237 
238## Tokens
239 
240> Generated from the same source the live preview renders from.
241> Treat the values below as the contract — never substitute approximations.
242 
243### Colors
244 
245| Role      | Value |
246|-----------|-------|
247| primary   | `#0E1B3D` |
248| secondary | `#3A4566` |
249| tertiary  | `#E6FF55` |
250| neutral   | `#F2F3F8` |
251| surface   | `#FFFFFF` |
252 
253### Typography
254 
255- **Display:** Space Grotesk
256- **Body:** Inter
257- **Mono:** Space Mono
258 
259| Role | size / leading / weight / tracking |
260|------|------------------------------------|
261| Hero | 6rem / 0.95 / 700 / -0.045em |
262| H1   | 3.5rem / 1 / 700 / -0.04em |
263| H2   | 1.75rem / 1.2 / 600 / -0.02em |
264| Body | 1rem / 1.55 / 400 / -0.005em |
265 
266### Radius
267 
268- sm: `0px`
269- md: `2px`
270- lg: `4px`
271 
272### Shadows
273 
274- **card:** `4px 4px 0 0 #0E1B3D`
275- **button:** `3px 3px 0 0 #0E1B3D`
276 
277### Borders
278 
279- **card:** `1.5px solid #0E1B3D`
280- **divider:** `#0E1B3D`
281 
282### Buttons
283 
284Four variants, each fully tokenized. The preview renders from these exact values.
285 
286#### Primary
287 
288| Property | Value |
289|----------|-------|
290| shape | `sharp` |
291| background | `#E6FF55` |
292| color | `#0E1B3D` |
293| border | `1.5px solid #0E1B3D` |
294| padding | `13px 26px` |
295| fontFamily | `display` |
296| fontWeight | `700` |
297| fontSize | `0.9375rem` |
298| tracking | `-0.01em` |
299| shadow | `3px 3px 0 0 #0E1B3D` |
300| suffix | `arrow` |
301 
302#### Secondary
303 
304| Property | Value |
305|----------|-------|
306| shape | `sharp` |
307| background | `#0E1B3D` |
308| color | `#FFFFFF` |
309| border | `1.5px solid #0E1B3D` |
310| padding | `13px 26px` |
311| fontFamily | `display` |
312| fontWeight | `600` |
313| fontSize | `0.9375rem` |
314| tracking | `-0.01em` |
315 
316#### Outline
317 
318| Property | Value |
319|----------|-------|
320| shape | `sharp` |
321| background | `#FFFFFF` |
322| color | `#0E1B3D` |
323| border | `1.5px solid #0E1B3D` |
324| padding | `12px 24px` |
325| fontFamily | `display` |
326| fontWeight | `600` |
327| fontSize | `0.9375rem` |
328| tracking | `-0.01em` |
329 
330#### Ghost
331 
332| Property | Value |
333|----------|-------|
334| shape | `sharp` |
335| background | `transparent` |
336| color | `#0E1B3D` |
337| border | `none` |
338| padding | `12px 4px` |
339| fontFamily | `display` |
340| fontWeight | `600` |
341| fontSize | `0.9375rem` |
342| tracking | `-0.01em` |
343| hoverHint | `underline` |
344 
345### Charts
346 
347| Property | Value |
348|----------|-------|
349| variant | `bars` |
350| strokeWidth | `0` |
351| gridlines | `false` |
352| barRadius | `0px` |
353| barGap | `8px` |
354| highlight | `last` |
355| axisColor | `#3A4566` |
356| palette | `#E6FF55`, `#0E1B3D` |
357 
358---
359 
360## Pro tokens
361 
362> Production-fidelity tokens. States, density, motion, elevation,
363> content rules and a measured WCAG contract — derived from the
364> resting tokens unless explicitly authored.
365 
366### States
367 
368#### Button
369 
370- **hover** — bg: `rgba(230, 255, 85, 0.92)`, shadow: `0 4px 20px -8px rgba(230, 255, 85, 0.4)`
371- **focus** — outline: `1.5px solid #E6FF55`, outline-offset: `4px`
372- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
373- **disabled** — opacity: `0.45`
374- **loading** — opacity: `0.7`
375- **selected** — bg: `#0E1B3D`, color: `#FFFFFF`
376 
377#### Input
378 
379- **hover** — border: `1px solid #0E1B3D`
380- **focus** — border: `1px solid #E6FF55`, shadow: `0 1px 0 0 #E6FF55`
381- **disabled** — opacity: `0.45`
382- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
383 
384#### Card
385 
386- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
387- **selected** — border: `1px solid #0E1B3D`
388 
389#### Tab
390 
391- **hover** — color: `#0E1B3D`
392- **focus** — outline: `1.5px solid #E6FF55`, outline-offset: `3px`
393- **selected** — color: `#E6FF55`, border: `0 0 2px 0 solid #E6FF55`
394 
395### Density
396 
397| Mode | padding × | row × | body | radius × | Use for |
398|------|-----------|-------|------|----------|---------|
399| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
400| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
401| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
402 
403### Motion
404 
405**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
406 
407```css
408transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
409```
410 
411| Token | Value |
412|-------|-------|
413| duration.instant | `80ms` |
414| duration.fast | `180ms` |
415| duration.base | `320ms` |
416| duration.slow | `500ms` |
417| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
418| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
419| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
420| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
421 
422### Elevation
423 
424Five-level scale, system-specific recipe.
425 
426| Level | Shadow | Recipe |
427|-------|--------|--------|
428| level0 | `none` | Hairline only — typical editorial resting state. |
429| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
430| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
431| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
432| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
433 
434### Content
435 
436- **measure:** `60ch` (max line length for body prose)
437- **paragraph spacing:** `1.5em`
438- **list indent:** `1.75em`
439- **list gap:** `0.55em`
440- **link:** color `#E6FF55`, underline `always`
441- **blockquote:** border `4px solid #E6FF55`, padding `0.4em 0 0.4em 1.5em`
442- **code:** background `rgba(14, 27, 61, 0.06)`, color `#0E1B3D`
443 
444### Accessibility (WCAG 2.1)
445 
446**Overall:** FAIL
447 
448| Pair | Ratio | Required | Grade | Suggested fix |
449|------|-------|----------|-------|---------------|
450| Body text on surface | 16.9:1 | AA | AAA | — |
451| Body text on canvas | 15.25:1 | AA | AAA | — |
452| Muted text on surface | 9.45:1 | AA | AAA | — |
453| Accent on surface | 1.12:1 | AA-Large | FAIL | `#6b7e00` → 4.56:1 (AA) |
454| Accent on canvas | 1.01:1 | AA-Large | FAIL | `#637400` → 4.7:1 (AA) |
455
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=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Space Grotesk"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"Space Mono"', 'monospace'],
      },
      colors: {
        primary:   '#0E1B3D',
        secondary: '#3A4566',
        accent:    '#E6FF55',
        neutral:   '#F2F3F8',
        surface:   '#FFFFFF',
      },
      borderRadius: {
        sm: '0px',
        md: '2px',
        lg: '4px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Halogen Editor

Dark-mode-native canvas where content emerges like starlight. Geometric variable sans, the signature 510 weight, semi-transparent white borders, and a single indigo-violet accent.

darkminimalengineeringsaasmodern
Halogen.app
ProductPricingDocsAbout
Sign inGet started
dark · minimal · engineering

Build with Halogen Editor.

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