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.
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.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
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: Inter14 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: 0px22 md: 2px23 lg: 4px24shadows: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: #E6FF5533 color: #0E1B3D34 border: 1.5px solid #0E1B3D35 shape: sharp36 padding: 13px 26px37 font: display / 700 / 0.9375rem / -0.01em38 shadow: 3px 3px 0 0 #0E1B3D39 suffix: arrow40 secondary:41 background: #0E1B3D42 color: #FFFFFF43 border: 1.5px solid #0E1B3D44 shape: sharp45 padding: 13px 26px46 font: display / 600 / 0.9375rem / -0.01em47 outline:48 background: #FFFFFF49 color: #0E1B3D50 border: 1.5px solid #0E1B3D51 shape: sharp52 padding: 12px 24px53 font: display / 600 / 0.9375rem / -0.01em54 ghost:55 background: transparent56 color: #0E1B3D57 border: none58 shape: sharp59 padding: 12px 4px60 font: display / 600 / 0.9375rem / -0.01em61 hover: underline62charts:63 variant: bars64 stroke_width: 065 gridlines: false66 bar_radius: 0px67 bar_gap: 8px68 highlight: last69 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 & Citron76 77## AI Build Instructions78 79> **Read this section before writing any code.** The rules below80> are non-negotiable. Every value used in the UI must come from this81> file's frontmatter — never substitute, approximate, or invent new82> colors, fonts, radii, or shadows. If a value is missing, ask the83> user before adding one.84 85### 1 · Your role86 87You are building UI for a project that has adopted **Ink & Citron** as its88design system. Treat `DESIGN.md` as the single source of truth.89Your job is to translate the user's product requirements into90components and pages that look like they were designed by the same91person who authored this file.92 93### 2 · Token compliance94 95- Pull every color, font family, radius, shadow, and spacing value96 from the frontmatter at the top of this file.97- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never98 hard-code hex values that bypass the system.99- When a token can be expressed as a CSS variable, declare it once100 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 recipes105 106Use these recipes verbatim when building the corresponding component.107 108#### Buttons109 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 tertiary119actions in toolbars. **Ghost** for inline links and table actions.120 121#### Cards122 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#### Charts130 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 pairings138 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 constraints144 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 — verify154 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## Overview167Ink & 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 Colors177```css178--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## Typography196- **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## Geometry208- **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## Buttons213- **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## Cards221Paper 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 & Data224Citron 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'ts227- ✅ 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## Tokens239 240> Generated from the same source the live preview renders from.241> Treat the values below as the contract — never substitute approximations.242 243### Colors244 245| Role | Value |246|-----------|-------|247| primary | `#0E1B3D` |248| secondary | `#3A4566` |249| tertiary | `#E6FF55` |250| neutral | `#F2F3F8` |251| surface | `#FFFFFF` |252 253### Typography254 255- **Display:** Space Grotesk256- **Body:** Inter257- **Mono:** Space Mono258 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### Radius267 268- sm: `0px`269- md: `2px`270- lg: `4px`271 272### Shadows273 274- **card:** `4px 4px 0 0 #0E1B3D`275- **button:** `3px 3px 0 0 #0E1B3D`276 277### Borders278 279- **card:** `1.5px solid #0E1B3D`280- **divider:** `#0E1B3D`281 282### Buttons283 284Four variants, each fully tokenized. The preview renders from these exact values.285 286#### Primary287 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#### Secondary303 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#### Outline317 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#### Ghost331 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### Charts346 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 # 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.<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" />npm install lucide-react// tailwind.config.jsexport 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', }, }, },};A government document made beautiful. Source Serif 4 hero, 3px black borders that read as legal-page rules, IBM Plex Mono for clause numbers and timestamps, a single mustard-stamp accent that lives only on the approval seal and the active filing tab. Built for legal tech, civic, and document-heavy products.
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.
A printed quarterly that happens to live on the web. Soft blush-bone surfaces, Fraunces 600 italic display headlines, Geist Mono for marginalia, a single deep plum accent on drop caps and pull-quote bars. Built for journals, newsletters, and slow-content brands that want warmth without preciousness.
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.