design.md
Back to directory
metallic · premium · cool · minimal · hardware

Argent Machined.

Cool brushed silver on a slate canvas. The metallic surface appears only on the primary CTA and one hero badge — everywhere else is graphite ink and quiet steel hairlines. Premium hardware, machined.

01 · Preview

The kitchen sink.

Argent.app
ProductPricingDocsAbout
Sign inGet started
metallic · premium · cool

Build with Argent Machined.

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
#13171C
secondary
#5C6670
tertiary
#C8CDD3
neutral
#E6E8EC
surface
#F2F3F6
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.

ArchetypeDark Luxury

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: "Argent Machined"
3description: "Cool brushed silver on a slate canvas. The metallic surface appears only on the primary CTA and one hero badge — everywhere else is graphite ink and quiet steel hairlines. Premium hardware, machined."
4tags: [metallic, premium, cool, minimal, hardware]
5colors:
6  primary:   "#13171C"
7  secondary: "#5C6670"
8  tertiary:  "#C8CDD3"
9  neutral:   "#E6E8EC"
10  surface:   "#F2F3F6"
11typography:
12  display: "Space Grotesk"
13  body:    Inter
14  mono:    "IBM Plex Mono"
15  scale:
16    hero: "4.5rem / 1.02 / 600 / -0.04em"
17    h1:   "2.75rem / 1.08 / 600 / -0.03em"
18    h2:   "1.5rem / 1.3 / 600 / -0.015em"
19    body: "1rem / 1.6 / 400 / -0.005em"
20radius:
21  sm: 4px
22  md: 6px
23  lg: 8px
24shadows:
25  card:   "0 0 0 1px rgba(19, 23, 28, 0.06), 0 6px 18px -10px rgba(19, 23, 28, 0.12)"
26  button: "0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)"
27borders:
28  card:    "1px solid rgba(19, 23, 28, 0.08)"
29  divider: "rgba(19, 23, 28, 0.10)"
30buttons:
31  primary:
32    background: linear-gradient(180deg, #EEF1F5 0%, #C8CDD3 50%, #9AA1AB 100%)
33    color: #13171C
34    border: 1px solid rgba(19, 23, 28, 0.18)
35    shape: rounded
36    padding: 12px 22px
37    font: 600 / 0.9375rem / -0.01em
38    shadow: 0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)
39  secondary:
40    background: #13171C
41    color: #F2F3F6
42    border: 1px solid #13171C
43    shape: rounded
44    padding: 12px 22px
45    font: 500 / 0.9375rem / -0.005em
46  outline:
47    background: transparent
48    color: #13171C
49    border: 1px solid rgba(19, 23, 28, 0.22)
50    shape: rounded
51    padding: 11px 21px
52    font: 500 / 0.9375rem / -0.005em
53  ghost:
54    background: transparent
55    color: #5C6670
56    border: none
57    shape: rounded
58    padding: 11px 6px
59    font: 500 / 0.9375rem / -0.005em
60    hover: underline
61charts:
62  variant: "rounded-bars"
63  stroke_width: 2
64  gridlines: false
65  bar_radius: 3px
66  bar_gap: 8px
67  highlight: all
68  axis_color: "#5C6670"
69  palette: ["#13171C", "#5C6670", "#9AA1AB", "#C8CDD3"]
70fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
71dependencies: ["lucide-react"]
72---
73 
74# Argent Machined
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 **Argent Machined** 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 `linear-gradient(180deg, #EEF1F5 0%, #C8CDD3 50%, #9AA1AB 100%)`, text `#13171C`, border `1px solid rgba(19, 23, 28, 0.18)`, padding `12px 22px`, weight `600`, shadow `0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)`.
112- **Secondary** — rounded shape, bg `#13171C`, text `#F2F3F6`, border `1px solid #13171C`, padding `12px 22px`, weight `500`.
113- **Outline** — rounded shape, text `#13171C`, border `1px solid rgba(19, 23, 28, 0.22)`, padding `11px 21px`, weight `500`.
114- **Ghost** — rounded shape, text `#5C6670`, padding `11px 6px`, 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: `#F2F3F6`
123- Border: `1px solid rgba(19, 23, 28, 0.08)`
124- Shadow: `0 0 0 1px rgba(19, 23, 28, 0.06), 0 6px 18px -10px rgba(19, 23, 28, 0.12)`
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: `3px`
132- No gridlines — let the bars/lines carry the data.
133- Highlight strategy: `all` — emphasize a single bar/point per chart.
134- Use the declared palette in order: `#13171C`, `#5C6670`, `#9AA1AB`, `#C8CDD3`.
135 
136#### Typography pairings
137 
138- **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks.
139- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
140- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.
141 
142### 4 · Hard constraints
143 
144Never do any of the following without explicit instruction from the user:
145 
146- Introduce a new color, font, radius, or shadow that isn't declared above.
147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
151 
152### 5 · Before you finish — verify
153 
154Run through this checklist for every screen you produce:
155 
156- [ ] Every color used appears in the Colors table above.
157- [ ] Headlines use the display font; body copy uses the body font.
158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
160- [ ] Cards and dividers use the declared border + shadow tokens.
161- [ ] No values were invented; if you needed something missing, you stopped and asked.
162 
163---
164 
165## Overview
166Argent Machined is the cool counterpart to warm metallic systems: brushed silver on a slate canvas, graphite ink, quiet steel hairlines. The metallic surface is rationed — it appears only on the primary CTA and a hero badge, never on cards or backgrounds. Everywhere else is restraint.
167 
168The system is built for premium hardware product pages: audio equipment, watches, automotive interfaces, professional electronics. Anything where the product is the protagonist and the page is its plinth.
169 
170## The Metallic Recipe
171Brushed silver is a vertical 3-stop gradient with a top-edge gloss and a bottom-edge shadow. Together they simulate directional light hitting a machined surface:
172 
173```css
174.argent-metal {
175  background: linear-gradient(180deg, #EEF1F5 0%, #C8CDD3 50%, #9AA1AB 100%);
176  border: 1px solid rgba(19, 23, 28, 0.18);
177  box-shadow:
178    inset 0 1px 0 rgba(255, 255, 255, 0.55),   /* top-edge gloss */
179    inset 0 -1px 0 rgba(19, 23, 28, 0.18),     /* bottom-edge shadow */
180    0 6px 14px -6px rgba(19, 23, 28, 0.30);    /* ambient drop */
181  border-radius: 8px;
182}
183```
184 
185The 50% mid-stop is the key — it creates the brushed-band that reads as metal rather than just "grey gradient." Without it the surface dies.
186 
187## Color
188- **Graphite #13171C** — primary text.
189- **Steel #5C6670** — secondary text, axis labels.
190- **Silver #C8CDD3** — metallic mid-stop, used in the primary CTA.
191- **Slate #E6E8EC** — page canvas. Cool but not sterile.
192- **Surface #F2F3F6** — card surface, one notch lighter than canvas.
193 
194Three neutrals, one "accent" (which is itself a neutral). The system has no chromatic color at all.
195 
196## Typography
197- **Display: Space Grotesk 600** at 4.5rem with -4% tracking. The neo-grotesque feels engineered.
198- **Body: Inter 400** at 1rem with 1.6 leading.
199- **Mono: IBM Plex Mono 500** for spec callouts (S/N, dimensions, weight).
200 
201| Role | Font | Size | Weight | Tracking |
202|------|------|------|--------|----------|
203| Hero | Space Grotesk | 4.5rem | 600 | -0.04em |
204| H1 | Space Grotesk | 2.75rem | 600 | -0.03em |
205| H2 | Space Grotesk | 1.5rem | 600 | -0.015em |
206| Body | Inter | 1rem | 400 | -0.005em / 1.6 |
207| Spec | IBM Plex Mono | 0.8125rem | 500 | 0 |
208 
209## Geometry
210- **Radii: 4 / 6 / 8.** Machined edges. Never pill, never sharp, never soft.
211- **Section gap: 96px** desktop, 64px mobile.
212- **12-column grid** with 24px gutters.
213 
214## Buttons
215- **Primary** — brushed silver gradient with top gloss + bottom shadow. Graphite label at 600. Reads as a machined toggle.
216- **Secondary** — solid graphite, surface label. The dark inverse.
217- **Outline** — bare hairline rectangle.
218- **Ghost** — bare steel label, hover underline.
219 
220Primary and secondary always appear together as a pair, in that order. Never two primaries.
221 
222## Cards
223Surface cards on slate, 1px graphite hairline at 8% opacity, soft 6px corner radius, low cool ambient shadow. Padding 28px. Cards never use the metallic gradient — that surface belongs only to the primary CTA.
224 
225## Charts & Data
226Multi-bar histogram in three steps of grey (graphite → steel → silver), 3px corner radius, 8px gap, no gridlines. Axis labels in steel at 11px. The chart reads like a measurement readout, not a marketing graphic.
227 
228## Do's and Don'ts
229- ✅ Metallic surface only on the primary CTA + one hero badge. Anywhere else cheapens it.
230- ✅ The 50% mid-stop in the gradient is mandatory — it is what makes it read as metal.
231- ✅ Top-edge gloss + bottom-edge shadow inset. Without both, the metal looks like a flat grey button.
232- ✅ Pair primary (silver) + secondary (graphite) — that contrast is the system's signature.
233- ❌ No warm tints. The system is strictly cool — slate, graphite, silver.
234- ❌ No chromatic accent. There is no blue, no green, no anything.
235- ❌ No metallic backgrounds or large metallic surfaces. The metal is jewelry, not wallpaper.
236- ❌ No pill shape. Machined hardware does not round to a pill.
237 
238---
239 
240## Tokens
241 
242> Generated from the same source the live preview renders from.
243> Treat the values below as the contract — never substitute approximations.
244 
245### Colors
246 
247| Role      | Value |
248|-----------|-------|
249| primary   | `#13171C` |
250| secondary | `#5C6670` |
251| tertiary  | `#C8CDD3` |
252| neutral   | `#E6E8EC` |
253| surface   | `#F2F3F6` |
254 
255### Typography
256 
257- **Display:** Space Grotesk
258- **Body:** Inter
259- **Mono:** IBM Plex Mono
260 
261| Role | size / leading / weight / tracking |
262|------|------------------------------------|
263| Hero | 4.5rem / 1.02 / 600 / -0.04em |
264| H1   | 2.75rem / 1.08 / 600 / -0.03em |
265| H2   | 1.5rem / 1.3 / 600 / -0.015em |
266| Body | 1rem / 1.6 / 400 / -0.005em |
267 
268### Radius
269 
270- sm: `4px`
271- md: `6px`
272- lg: `8px`
273 
274### Shadows
275 
276- **card:** `0 0 0 1px rgba(19, 23, 28, 0.06), 0 6px 18px -10px rgba(19, 23, 28, 0.12)`
277- **button:** `0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)`
278 
279### Borders
280 
281- **card:** `1px solid rgba(19, 23, 28, 0.08)`
282- **divider:** `rgba(19, 23, 28, 0.10)`
283 
284### Buttons
285 
286Four variants, each fully tokenized. The preview renders from these exact values.
287 
288#### Primary
289 
290| Property | Value |
291|----------|-------|
292| shape | `rounded` |
293| background | `linear-gradient(180deg, #EEF1F5 0%, #C8CDD3 50%, #9AA1AB 100%)` |
294| color | `#13171C` |
295| border | `1px solid rgba(19, 23, 28, 0.18)` |
296| padding | `12px 22px` |
297| fontWeight | `600` |
298| fontSize | `0.9375rem` |
299| tracking | `-0.01em` |
300| shadow | `0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)` |
301 
302#### Secondary
303 
304| Property | Value |
305|----------|-------|
306| shape | `rounded` |
307| background | `#13171C` |
308| color | `#F2F3F6` |
309| border | `1px solid #13171C` |
310| padding | `12px 22px` |
311| fontWeight | `500` |
312| fontSize | `0.9375rem` |
313| tracking | `-0.005em` |
314 
315#### Outline
316 
317| Property | Value |
318|----------|-------|
319| shape | `rounded` |
320| background | `transparent` |
321| color | `#13171C` |
322| border | `1px solid rgba(19, 23, 28, 0.22)` |
323| padding | `11px 21px` |
324| fontWeight | `500` |
325| fontSize | `0.9375rem` |
326| tracking | `-0.005em` |
327 
328#### Ghost
329 
330| Property | Value |
331|----------|-------|
332| shape | `rounded` |
333| background | `transparent` |
334| color | `#5C6670` |
335| border | `none` |
336| padding | `11px 6px` |
337| fontWeight | `500` |
338| fontSize | `0.9375rem` |
339| tracking | `-0.005em` |
340| hoverHint | `underline` |
341 
342### Charts
343 
344| Property | Value |
345|----------|-------|
346| variant | `rounded-bars` |
347| strokeWidth | `2` |
348| gridlines | `false` |
349| barRadius | `3px` |
350| barGap | `8px` |
351| highlight | `all` |
352| axisColor | `#5C6670` |
353| palette | `#13171C`, `#5C6670`, `#9AA1AB`, `#C8CDD3` |
354 
355---
356 
357## Pro tokens
358 
359> Production-fidelity tokens. States, density, motion, elevation,
360> content rules and a measured WCAG contract — derived from the
361> resting tokens unless explicitly authored.
362 
363### States
364 
365#### Button
366 
367- **hover** — shadow: `0 0 24px -4px rgba(200, 205, 211, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)`
368- **focus** — outline: `1.5px solid #C8CDD3`, outline-offset: `3px`
369- **active** — transform: `translateY(1px)`, filter: `brightness(0.92)`
370- **disabled** — opacity: `0.35`, filter: `saturate(0.4)`
371- **loading** — opacity: `0.6`
372- **selected** — bg: `#C8CDD3`, color: `#0A0A0A`
373 
374#### Input
375 
376- **hover** — border: `1px solid rgba(200, 205, 211, 0.5)`
377- **focus** — border: `1px solid #C8CDD3`, shadow: `0 0 0 3px rgba(200, 205, 211, 0.2)`
378- **disabled** — opacity: `0.35`
379- **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)`
380 
381#### Card
382 
383- **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(200, 205, 211, 0.18)`, transform: `translateY(-2px)`
384- **selected** — border: `1px solid #C8CDD3`, shadow: `0 0 0 1px #C8CDD3`
385- **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85`
386 
387#### Tab
388 
389- **hover** — color: `#C8CDD3`
390- **focus** — outline: `1.5px solid #C8CDD3`, outline-offset: `2px`
391- **selected** — color: `#C8CDD3`, border: `0 0 1.5px 0 solid #C8CDD3`
392 
393### Density
394 
395| Mode | padding × | row × | body | radius × | Use for |
396|------|-----------|-------|------|----------|---------|
397| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
398| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
399| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
400 
401### Motion
402 
403**Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele.
404 
405```css
406transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1);
407```
408 
409| Token | Value |
410|-------|-------|
411| duration.instant | `100ms` |
412| duration.fast | `180ms` |
413| duration.base | `280ms` |
414| duration.slow | `450ms` |
415| easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` |
416| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
417| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
418| easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` |
419 
420### Elevation
421 
422Five-level scale, system-specific recipe.
423 
424| Level | Shadow | Recipe |
425|-------|--------|--------|
426| level0 | `none` | Flat — Hairline mit Accent-Hauch. |
427| level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. |
428| level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. |
429| level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(200, 205, 211, 0.25)` | Sheet — Accent-Halo. |
430| level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(200, 205, 211, 0.4)` | Modal — voller Accent-Rim, dramatisch. |
431 
432### Content
433 
434- **measure:** `66ch` (max line length for body prose)
435- **paragraph spacing:** `1.3em`
436- **list indent:** `1.5em`
437- **list gap:** `0.5em`
438- **link:** color `#C8CDD3`, underline `hover`
439- **blockquote:** border `2px solid #C8CDD3`, padding `0.8em 1.2em`
440- **code:** background `rgba(200, 205, 211, 0.12)`, color `#C8CDD3`
441 
442### Accessibility (WCAG 2.1)
443 
444**Overall:** FAIL
445 
446| Pair | Ratio | Required | Grade | Suggested fix |
447|------|-------|----------|-------|---------------|
448| Body text on surface | 16.22:1 | AA | AAA | — |
449| Body text on canvas | 14.67:1 | AA | AAA | — |
450| Muted text on surface | 5.27:1 | AA | AA | — |
451| Accent on surface | 1.44:1 | AA-Large | FAIL | `#616c79` → 4.82:1 (AA) |
452| Accent on canvas | 1.3:1 | AA-Large | FAIL | `#5c6673` → 4.75:1 (AA) |
453
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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+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: ['"Space Grotesk"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"IBM Plex Mono"', 'monospace'],
      },
      colors: {
        primary:   '#13171C',
        secondary: '#5C6670',
        accent:    '#C8CDD3',
        neutral:   '#E6E8EC',
        surface:   '#F2F3F6',
      },
      borderRadius: {
        sm: '4px',
        md: '6px',
        lg: '8px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Linen Press

Warm bone minimalism with a serif voice. Fraunces display headlines paired with Inter body, a single cognac accent reserved for active states, and generous hairline-only chrome. The quiet end of editorial — built for studios, journals, and brands that whisper.

editorialminimalpremiumwarmmodern
Linen.app
ProductPricingDocsAbout
Sign inGet started
editorial · minimal · premium

Build with Linen Press.

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

Duotone Press

A two-color press operation: warm bone and persimmon, nothing else. Bricolage Grotesque for display at oversized scale, Newsreader for body, sharp 0px corners, every accent and every CTA in the same persimmon. Built for editorial sites, indie magazines, and brands that want one disciplined color move and zero decoration.

editorialduotonewarmminimalbold
Duotone.app
ProductPricingDocsAbout
Sign inGet started
editorial · duotone · warm

Build with Duotone Press.

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