design.md
Back to directory
coding · light · developer · premium · warm

Citrine IDE.

Premium IDE light theme. Warm paper canvas, three syntax-color tokens (amber, teal, plum) used semantically, JetBrains Mono for structure, IBM Plex Sans for body, refined 4-6px corners. Editor-aesthetic with warmth.

01 · Preview

The kitchen sink.

Citrine.app
ProductPricingDocsAbout
Sign inGet started
coding · light · developer

Build with Citrine IDE.

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
#1A1814
secondary
#5F574B
tertiary
#B57A1A
neutral
#FAF6EC
surface
#FFFCF4
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
4px
md
6px
lg
8px
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.

ArchetypeTerminal

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: "Citrine IDE"
3description: "Premium IDE light theme. Warm paper canvas, three syntax-color tokens (amber, teal, plum) used semantically, JetBrains Mono for structure, IBM Plex Sans for body, refined 4-6px corners. Editor-aesthetic with warmth."
4tags: [coding, light, developer, premium, warm]
5colors:
6  primary:   "#1A1814"
7  secondary: "#5F574B"
8  tertiary:  "#B57A1A"
9  neutral:   "#FAF6EC"
10  surface:   "#FFFCF4"
11typography:
12  display: "JetBrains Mono"
13  body:    "IBM Plex Sans"
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "3.75rem / 1.05 / 500 / -0.035em"
17    h1:   "2.25rem / 1.1 / 500 / -0.03em"
18    h2:   "1.25rem / 1.3 / 500 / -0.012em"
19    body: "1rem / 1.65 / 400 / -0.003em"
20radius:
21  sm: 4px
22  md: 6px
23  lg: 8px
24shadows:
25  card:   "0 0 0 1px rgba(26, 24, 20, 0.08)"
26  button: "0 2px 0 0 #8A5A10"
27borders:
28  card:    "1px solid rgba(26, 24, 20, 0.08)"
29  divider: "rgba(26, 24, 20, 0.12)"
30buttons:
31  primary:
32    background: #B57A1A
33    color: #FFFCF4
34    border: 1px solid #B57A1A
35    shape: rounded
36    padding: 10px 20px
37    font: mono / 500 / 0.8125rem / -0.005em
38    shadow: 0 2px 0 0 #8A5A10
39  secondary:
40    background: #FFFCF4
41    color: #1A1814
42    border: 1px solid rgba(181, 122, 26, 0.40)
43    shape: rounded
44    padding: 10px 20px
45    font: mono / 500 / 0.8125rem / -0.005em
46  outline:
47    background: transparent
48    color: #1A1814
49    border: 1px solid rgba(26, 24, 20, 0.18)
50    shape: rounded
51    padding: 10px 20px
52    font: mono / 500 / 0.8125rem / -0.005em
53  ghost:
54    background: transparent
55    color: #0F8A82
56    border: none
57    shape: rounded
58    padding: 10px 4px
59    font: mono / 500 / 0.8125rem / -0.005em
60    hover: underline
61charts:
62  variant: "rounded-bars"
63  stroke_width: 1.5
64  gridlines: true
65  bar_radius: 2px
66  bar_gap: 8px
67  highlight: all
68  axis_color: "#5F574B"
69  palette: ["#B57A1A", "#0F8A82", "#7A2E5A"]
70fonts_url: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
71dependencies: ["lucide-react"]
72---
73 
74# Citrine IDE
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 **Citrine IDE** 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 `#B57A1A`, text `#FFFCF4`, border `1px solid #B57A1A`, padding `10px 20px`, weight `500`, shadow `0 2px 0 0 #8A5A10`.
112- **Secondary** — rounded shape, bg `#FFFCF4`, text `#1A1814`, border `1px solid rgba(181, 122, 26, 0.40)`, padding `10px 20px`, weight `500`.
113- **Outline** — rounded shape, text `#1A1814`, border `1px solid rgba(26, 24, 20, 0.18)`, padding `10px 20px`, weight `500`.
114- **Ghost** — rounded shape, text `#0F8A82`, padding `10px 4px`, 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: `#FFFCF4`
123- Border: `1px solid rgba(26, 24, 20, 0.08)`
124- Shadow: `0 0 0 1px rgba(26, 24, 20, 0.08)`
125- Radius: `radius.lg` (`8px`)
126- Internal padding: `20px` for compact cards, `24–28px` for content cards.
127 
128#### Charts
129 
130- Bar/line variant: `rounded-bars`
131- Bar radius: `2px`
132- Highlight strategy: `all` — emphasize a single bar/point per chart.
133- Use the declared palette in order: `#B57A1A`, `#0F8A82`, `#7A2E5A`.
134 
135#### Typography pairings
136 
137- **Display (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks.
138- **Body (`IBM Plex Sans`)** — paragraphs, labels, button text, form inputs.
139- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
140 
141### 4 · Hard constraints
142 
143Never do any of the following without explicit instruction from the user:
144 
145- Introduce a new color, font, radius, or shadow that isn't declared above.
146- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
147- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
148- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
149- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
150 
151### 5 · Before you finish — verify
152 
153Run through this checklist for every screen you produce:
154 
155- [ ] Every color used appears in the Colors table above.
156- [ ] Headlines use the display font; body copy uses the body font.
157- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
158- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
159- [ ] Cards and dividers use the declared border + shadow tokens.
160- [ ] No values were invented; if you needed something missing, you stopped and asked.
161 
162---
163 
164## Overview
165Citrine IDE is a premium light theme borrowed from the editor world. The canvas is warm paper (a faint warm tint sets it apart from bone or pure white). Type is **JetBrains Mono** for all structure — display, headings, buttons, table headers — and **IBM Plex Sans** for body. The whole page reads as a structured editor pane.
166 
167The system uses **three syntax-token colors as a semantic palette**: amber (string), teal (function/identifier), plum (keyword). The amber is the chromatic accent, the teal is for ghost/link semantics, and plum appears only in charts and code-block highlights.
168 
169For developer documentation that wants warmth, AI coding tools, premium code-snippet platforms, design-engineering portfolios.
170 
171## Color
172- **Ink #1A1814** — primary text. Deep warm graphite.
173- **Mid Graphite #5F574B** — secondary text, inline-code default color.
174- **Amber #B57A1A** — string token + primary CTA + chromatic accent.
175- **Teal #0F8A82** — function/identifier token + ghost-button label + link.
176- **Plum #7A2E5A** — keyword token + chart third-bar.
177- **Paper #FAF6EC** — page canvas (warm).
178- **Surface #FFFCF4** — card / editor pane.
179 
180The three syntax colors aren't decoration — they carry semantic meaning across charts, code blocks, and interactive elements.
181 
182## Typography
183- **Display: JetBrains Mono 500** at 3.75rem with -3.5% tracking. Restrained — the page reads as an editor.
184- **Body: IBM Plex Sans 400** at 1rem with 1.65 leading.
185 
186| Role | Font | Size | Weight | Tracking |
187|------|------|------|--------|----------|
188| Hero | JetBrains Mono | 3.75rem | 500 | -0.035em |
189| H1 | JetBrains Mono | 2.25rem | 500 | -0.03em |
190| H2 | JetBrains Mono | 1.25rem | 500 | -0.012em |
191| Body | IBM Plex Sans | 1rem | 400 | -0.003em / 1.65 |
192| Button | JetBrains Mono | 0.8125rem | 500 | -0.005em |
193 
194Body copy is the only proportional type. Everything structural is mono.
195 
196## Geometry
197- **Radii: 4 / 6 / 8.** Editor-pane geometry. Never pill, never soft.
198- **4px subgrid.**
199- **Section gap: 96px** desktop, 64px mobile.
200 
201## Buttons
202- **Primary** — warm amber fill with a **2px darker-amber bottom border** (`box-shadow: 0 2px 0 0 #8A5A10`). The bottom border reads as an "active tab" indicator — the system's signature.
203- **Secondary** — surface paper with a 40% amber hairline. Mono label.
204- **Outline** — bare warm-graphite hairline at 18%.
205- **Ghost** — bare teal label. Hover underline.
206 
207The bottom-border on primary is non-negotiable — it is what makes the button read as an editor element rather than a generic CTA.
208 
209## Cards
210Surface paper on the warm canvas, 1px ink hairline at 8% opacity, 6px corners, **no drop shadow**. Padding 24-32px. Editor-pane wireframes.
211 
212## Code Blocks
213Code blocks use the surface color with a 1px hairline; syntax tokens map to the three palette colors (amber/teal/plum) plus warm graphite for default. `Inline code` uses warm graphite on a faint amber-tinted background.
214 
215## Charts & Data
216Three-bar histogram in amber, teal, plum — the same syntax-token semantic. Gridlines on (developer tool — readability beats minimalism). 2px corner radius, 8px gap. Axis labels in mid-graphite mono at 11px.
217 
218## Do's and Don'ts
219- ✅ Mono for display and structure. Proportional only for body.
220- ✅ The 2px bottom border on primary CTA is the system's signature — keep it.
221- ✅ Three syntax-token colors used semantically (amber=string, teal=function, plum=keyword).
222- ✅ Warm canvas — not bone, not pure white. The warmth distinguishes it.
223- ❌ No second display font. JetBrains Mono carries all structure.
224- ❌ No pill buttons. No soft corners.
225- ❌ No drop shadows on cards. The bottom-border on primary is the only "shadow."
226- ❌ No oversized hero. The page is an editor, not a billboard.
227 
228---
229 
230## Tokens
231 
232> Generated from the same source the live preview renders from.
233> Treat the values below as the contract — never substitute approximations.
234 
235### Colors
236 
237| Role      | Value |
238|-----------|-------|
239| primary   | `#1A1814` |
240| secondary | `#5F574B` |
241| tertiary  | `#B57A1A` |
242| neutral   | `#FAF6EC` |
243| surface   | `#FFFCF4` |
244 
245### Typography
246 
247- **Display:** JetBrains Mono
248- **Body:** IBM Plex Sans
249- **Mono:** JetBrains Mono
250 
251| Role | size / leading / weight / tracking |
252|------|------------------------------------|
253| Hero | 3.75rem / 1.05 / 500 / -0.035em |
254| H1   | 2.25rem / 1.1 / 500 / -0.03em |
255| H2   | 1.25rem / 1.3 / 500 / -0.012em |
256| Body | 1rem / 1.65 / 400 / -0.003em |
257 
258### Radius
259 
260- sm: `4px`
261- md: `6px`
262- lg: `8px`
263 
264### Shadows
265 
266- **card:** `0 0 0 1px rgba(26, 24, 20, 0.08)`
267- **button:** `0 2px 0 0 #8A5A10`
268 
269### Borders
270 
271- **card:** `1px solid rgba(26, 24, 20, 0.08)`
272- **divider:** `rgba(26, 24, 20, 0.12)`
273 
274### Buttons
275 
276Four variants, each fully tokenized. The preview renders from these exact values.
277 
278#### Primary
279 
280| Property | Value |
281|----------|-------|
282| shape | `rounded` |
283| background | `#B57A1A` |
284| color | `#FFFCF4` |
285| border | `1px solid #B57A1A` |
286| padding | `10px 20px` |
287| fontFamily | `mono` |
288| fontWeight | `500` |
289| fontSize | `0.8125rem` |
290| tracking | `-0.005em` |
291| shadow | `0 2px 0 0 #8A5A10` |
292 
293#### Secondary
294 
295| Property | Value |
296|----------|-------|
297| shape | `rounded` |
298| background | `#FFFCF4` |
299| color | `#1A1814` |
300| border | `1px solid rgba(181, 122, 26, 0.40)` |
301| padding | `10px 20px` |
302| fontFamily | `mono` |
303| fontWeight | `500` |
304| fontSize | `0.8125rem` |
305| tracking | `-0.005em` |
306 
307#### Outline
308 
309| Property | Value |
310|----------|-------|
311| shape | `rounded` |
312| background | `transparent` |
313| color | `#1A1814` |
314| border | `1px solid rgba(26, 24, 20, 0.18)` |
315| padding | `10px 20px` |
316| fontFamily | `mono` |
317| fontWeight | `500` |
318| fontSize | `0.8125rem` |
319| tracking | `-0.005em` |
320 
321#### Ghost
322 
323| Property | Value |
324|----------|-------|
325| shape | `rounded` |
326| background | `transparent` |
327| color | `#0F8A82` |
328| border | `none` |
329| padding | `10px 4px` |
330| fontFamily | `mono` |
331| fontWeight | `500` |
332| fontSize | `0.8125rem` |
333| tracking | `-0.005em` |
334| hoverHint | `underline` |
335 
336### Charts
337 
338| Property | Value |
339|----------|-------|
340| variant | `rounded-bars` |
341| strokeWidth | `1.5` |
342| gridlines | `true` |
343| barRadius | `2px` |
344| barGap | `8px` |
345| highlight | `all` |
346| axisColor | `#5F574B` |
347| palette | `#B57A1A`, `#0F8A82`, `#7A2E5A` |
348 
349---
350 
351## Pro tokens
352 
353> Production-fidelity tokens. States, density, motion, elevation,
354> content rules and a measured WCAG contract — derived from the
355> resting tokens unless explicitly authored.
356 
357### States
358 
359#### Button
360 
361- **hover** — bg: `rgba(181, 122, 26, 0.15)`, color: `#B57A1A`, border: `1px solid #B57A1A`
362- **focus** — outline: `1px dashed #B57A1A`, outline-offset: `2px`
363- **active** — bg: `#B57A1A`, color: `#FFFCF4`
364- **disabled** — opacity: `0.35`
365- **loading** — opacity: `0.6`
366- **selected** — bg: `#B57A1A`, color: `#FFFCF4`
367 
368#### Input
369 
370- **hover** — border: `1px solid rgba(181, 122, 26, 0.5)`
371- **focus** — bg: `rgba(181, 122, 26, 0.05)`, border: `1px solid #B57A1A`
372- **disabled** — opacity: `0.35`
373- **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444`
374 
375#### Card
376 
377- **hover** — border: `1px solid #B57A1A`
378- **selected** — bg: `rgba(181, 122, 26, 0.05)`, border: `1px solid #B57A1A`
379- **dragging** — opacity: `0.7`
380 
381#### Tab
382 
383- **hover** — color: `#B57A1A`
384- **focus** — outline: `1px dashed #B57A1A`, outline-offset: `1px`
385- **selected** — bg: `rgba(181, 122, 26, 0.1)`, color: `#B57A1A`
386 
387### Density
388 
389| Mode | padding × | row × | body | radius × | Use for |
390|------|-----------|-------|------|----------|---------|
391| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
392| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
393| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
394 
395### Motion
396 
397**Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms.
398 
399```css
400transition: all 120ms linear;
401```
402 
403| Token | Value |
404|-------|-------|
405| duration.instant | `0ms` |
406| duration.fast | `60ms` |
407| duration.base | `120ms` |
408| duration.slow | `200ms` |
409| easing.standard | `linear` |
410| easing.decelerate | `linear` |
411| easing.accelerate | `linear` |
412| easing.spring | `steps(2, end)` |
413 
414### Elevation
415 
416Five-level scale, system-specific recipe.
417 
418| Level | Shadow | Recipe |
419|-------|--------|--------|
420| level0 | `none` | Flat — the stroke carries the hierarchy. |
421| level1 | `none` | Border tone lifts the surface. |
422| level2 | `0 0 0 1px rgba(181, 122, 26, 0.5)` | Ring outline — popover. |
423| level3 | `0 0 0 1px #B57A1A, 0 12px 32px -16px rgba(181, 122, 26, 0.4)` | Sheet with accent ring + glow. |
424| level4 | `0 0 0 1px #B57A1A, 0 24px 64px -20px rgba(181, 122, 26, 0.5)` | Modal with accent ring + glow. |
425 
426### Content
427 
428- **measure:** `78ch` (max line length for body prose)
429- **paragraph spacing:** `1em`
430- **list indent:** `1.25em`
431- **list gap:** `0.35em`
432- **link:** color `#B57A1A`, underline `always`
433- **blockquote:** border `1px solid rgba(181, 122, 26, 0.5)`, padding `0.7em 1em`
434- **code:** background `rgba(181, 122, 26, 0.12)`, color `#B57A1A`
435 
436### Accessibility (WCAG 2.1)
437 
438**Overall:** AA-Large
439 
440| Pair | Ratio | Required | Grade | Suggested fix |
441|------|-------|----------|-------|---------------|
442| Body text on surface | 17.29:1 | AA | AAA | — |
443| Body text on canvas | 16.43:1 | AA | AAA | — |
444| Muted text on surface | 6.94:1 | AA | AA | — |
445| Accent on surface | 3.55:1 | AA-Large | AA-Large | — |
446| Accent on canvas | 3.38:1 | AA-Large | AA-Large | — |
447
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=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Sans: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: ['"JetBrains Mono"', 'serif'],
        sans:    ['"IBM Plex Sans"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1A1814',
        secondary: '#5F574B',
        accent:    '#B57A1A',
        neutral:   '#FAF6EC',
        surface:   '#FFFCF4',
      },
      borderRadius: {
        sm: '4px',
        md: '6px',
        lg: '8px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Solflare Bloom

A low-sun grainy gradient that runs deep ember to marigold with real fractal-noise grain. Cream surface, Inter Tight display in heavy 800, generous slabs of negative space, and the gradient burns through exactly the primary CTA, the featured tile, and the active chart bar. A warm, restrained bloom — never sunset cliché.

grainygradientwarmmodernlight
Solflare.app
ProductPricingDocsAbout
Sign inGet started
grainy · gradient · warm

Build with Solflare Bloom.

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

Graphite Shell

A developer tool that finally feels warm. Graphite surfaces (never black, never grey), JetBrains Mono for everything technical, Inter for prose, a single sage-green accent reserved for the active state. Built for CLIs, infra dashboards, and dev portals that want to look serious without looking like a 90s terminal.

developerdarkminimalmoderntechnical
Graphite.app
ProductPricingDocsAbout
Sign inGet started
developer · dark · minimal

Build with Graphite Shell.

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