/
design.md
Back to directory
metallic · dark · premium · hardware · modern

Gunmetal Forge.

Dark brushed metallic. Anthracite canvas with cool brushed-steel CTAs catching a polished top-edge highlight under directional light. Premium hardware in dark theme — pro tools, audio, automotive.

01 · Preview

The kitchen sink.

Gunmetal.app
ProductPricingDocsAbout
Sign inGet started
metallic · dark · premium

Build with Gunmetal Forge.

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
#E8EAEE
secondary
#8C95A0
tertiary
#B8C0CC
neutral
#181B20
surface
#22262D
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 · The file

DESIGN.md

markdown
1---
2name: "Gunmetal Forge"
3description: "Dark brushed metallic. Anthracite canvas with cool brushed-steel CTAs catching a polished top-edge highlight under directional light. Premium hardware in dark theme — pro tools, audio, automotive."
4tags: [metallic, dark, premium, hardware, modern]
5colors:
6  primary:   "#E8EAEE"
7  secondary: "#8C95A0"
8  tertiary:  "#B8C0CC"
9  neutral:   "#181B20"
10  surface:   "#22262D"
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(255, 255, 255, 0.05), 0 12px 32px -16px rgba(0, 0, 0, 0.55)"
26  button: "0 8px 20px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.40)"
27borders:
28  card:    "1px solid rgba(255, 255, 255, 0.06)"
29  divider: "rgba(255, 255, 255, 0.08)"
30buttons:
31  primary:
32    background: linear-gradient(180deg, #C8D0DC 0%, #8C95A0 50%, #4A525E 100%)
33    color: #181B20
34    border: 1px solid rgba(255, 255, 255, 0.22)
35    shape: rounded
36    padding: 12px 22px
37    font: 600 / 0.9375rem / -0.01em
38    shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.40)
39  secondary:
40    background: #22262D
41    color: #E8EAEE
42    border: 1px solid rgba(255, 255, 255, 0.10)
43    shape: rounded
44    padding: 12px 22px
45    font: 500 / 0.9375rem / -0.005em
46  outline:
47    background: transparent
48    color: #E8EAEE
49    border: 1px solid rgba(255, 255, 255, 0.16)
50    shape: rounded
51    padding: 11px 21px
52    font: 500 / 0.9375rem / -0.005em
53  ghost:
54    background: transparent
55    color: #B8C0CC
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: "#8C95A0"
69  palette: ["#B8C0CC", "#7E8794", "#4A525E"]
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# Gunmetal Forge
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 **Gunmetal Forge** 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, #C8D0DC 0%, #8C95A0 50%, #4A525E 100%)`, text `#181B20`, border `1px solid rgba(255, 255, 255, 0.22)`, padding `12px 22px`, weight `600`, shadow `0 8px 20px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.40)`.
112- **Secondary** — rounded shape, bg `#22262D`, text `#E8EAEE`, border `1px solid rgba(255, 255, 255, 0.10)`, padding `12px 22px`, weight `500`.
113- **Outline** — rounded shape, text `#E8EAEE`, border `1px solid rgba(255, 255, 255, 0.16)`, padding `11px 21px`, weight `500`.
114- **Ghost** — rounded shape, text `#B8C0CC`, 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: `#22262D`
123- Border: `1px solid rgba(255, 255, 255, 0.06)`
124- Shadow: `0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 32px -16px rgba(0, 0, 0, 0.55)`
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: `#B8C0CC`, `#7E8794`, `#4A525E`.
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
166Gunmetal Forge is the dark counterpart to brushed-metal systems. Anthracite canvas, polished-steel CTA, no chromatic color anywhere. The metallic surface is rationed — primary CTA + one hero badge — and on the dark canvas it catches a top-edge highlight that reads as directional light hitting machined steel.
167 
168For premium hardware product pages shipping a dark theme: audio equipment, automotive interfaces, professional watches, pro tools, defense / aerospace adjacent products.
169 
170## The Metallic Recipe
171The brushed-steel button is a vertical 3-stop gradient with a polished top-edge highlight + bottom-edge shadow. On the dark canvas the highlight reads as light catching a real surface:
172 
173```css
174.gunmetal-cta {
175  background: linear-gradient(180deg, #C8D0DC 0%, #8C95A0 50%, #4A525E 100%);
176  color: #181B20;
177  border: 1px solid rgba(255, 255, 255, 0.22);
178  border-radius: 6px;
179  box-shadow:
180    inset 0 1px 0 rgba(255, 255, 255, 0.45),  /* polished top-edge */
181    inset 0 -1px 0 rgba(0, 0, 0, 0.40),        /* bottom-edge shadow */
182    0 8px 20px -8px rgba(0, 0, 0, 0.55);       /* ambient drop */
183}
184```
185 
186The 50% mid-stop is the brushed band — without it the gradient reads as a flat grey button. The top-edge highlight at 45% white is the key on dark backgrounds; lower opacity dies, higher reads as plastic.
187 
188## Color
189- **Moonlight #E8EAEE** — primary text.
190- **Steel #8C95A0** — secondary text, axis labels.
191- **Polished Steel #B8C0CC** — metallic top-stop, ghost button label.
192- **Anthracite #181B20** — page canvas. Deep cool grey, not pure black.
193- **Gunmetal #22262D** — card surface, lifted from the canvas.
194 
195Three neutrals + two metal stops. No chromatic color at all.
196 
197## Typography
198- **Display: Space Grotesk 600** at 4.5rem with -4% tracking. Engineered neo-grotesque.
199- **Body: Inter 400** at 1rem with 1.6 leading.
200- **Mono: IBM Plex Mono 500** for spec callouts.
201 
202| Role | Font | Size | Weight | Tracking |
203|------|------|------|--------|----------|
204| Hero | Space Grotesk | 4.5rem | 600 | -0.04em |
205| H1 | Space Grotesk | 2.75rem | 600 | -0.03em |
206| H2 | Space Grotesk | 1.5rem | 600 | -0.015em |
207| Body | Inter | 1rem | 400 | -0.005em / 1.6 |
208| Spec | IBM Plex Mono | 0.8125rem | 500 | 0 |
209 
210## Geometry
211- **Radii: 4 / 6 / 8.** Machined edges. Never pill, never soft.
212- **Section gap: 96px** desktop, 64px mobile.
213- **12-column grid** with 24px gutters.
214 
215## Buttons
216- **Primary** — brushed steel gradient, anthracite label, polished top-edge highlight.
217- **Secondary** — gunmetal surface, moonlight label, white hairline at 10%.
218- **Outline** — bare hairline rectangle at 16% white.
219- **Ghost** — polished-steel label, hover underline.
220 
221Primary always pairs with secondary in that order. Never two primaries on the same screen.
222 
223## Cards
224Gunmetal surfaces on anthracite, 1px white hairline at 6% opacity, 6px corners, low cool ambient shadow. Padding 28px. Cards never use the metallic gradient — that surface belongs to the primary CTA only.
225 
226## Charts & Data
227Three-bar histogram in three steps of steel (polished → mid → dark), 3px corner radius, 8px gap, no gridlines. Axis labels in steel at 11px. The chart reads like a measurement readout on an instrument panel.
228 
229## Do's and Don'ts
230- ✅ Metallic surface only on primary CTA + one hero badge.
231- ✅ The 50% mid-stop in the gradient is mandatory — it is the brushed band.
232- ✅ Top-edge highlight at 45% white. Lower dies on the dark canvas.
233- ✅ No chromatic color. Steel + anthracite is the entire palette.
234- ❌ No metallic backgrounds. The metal is jewelry, not wallpaper.
235- ❌ No second chromatic accent.
236- ❌ No pill shape. Machined hardware doesn't round to a pill.
237- ❌ No warm tints. The system is strictly cool.
238 
239---
240 
241## Tokens
242 
243> Generated from the same source the live preview renders from.
244> Treat the values below as the contract — never substitute approximations.
245 
246### Colors
247 
248| Role      | Value |
249|-----------|-------|
250| primary   | `#E8EAEE` |
251| secondary | `#8C95A0` |
252| tertiary  | `#B8C0CC` |
253| neutral   | `#181B20` |
254| surface   | `#22262D` |
255 
256### Typography
257 
258- **Display:** Space Grotesk
259- **Body:** Inter
260- **Mono:** IBM Plex Mono
261 
262| Role | size / leading / weight / tracking |
263|------|------------------------------------|
264| Hero | 4.5rem / 1.02 / 600 / -0.04em |
265| H1   | 2.75rem / 1.08 / 600 / -0.03em |
266| H2   | 1.5rem / 1.3 / 600 / -0.015em |
267| Body | 1rem / 1.6 / 400 / -0.005em |
268 
269### Radius
270 
271- sm: `4px`
272- md: `6px`
273- lg: `8px`
274 
275### Shadows
276 
277- **card:** `0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 32px -16px rgba(0, 0, 0, 0.55)`
278- **button:** `0 8px 20px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.40)`
279 
280### Borders
281 
282- **card:** `1px solid rgba(255, 255, 255, 0.06)`
283- **divider:** `rgba(255, 255, 255, 0.08)`
284 
285### Buttons
286 
287Four variants, each fully tokenized. The preview renders from these exact values.
288 
289#### Primary
290 
291| Property | Value |
292|----------|-------|
293| shape | `rounded` |
294| background | `linear-gradient(180deg, #C8D0DC 0%, #8C95A0 50%, #4A525E 100%)` |
295| color | `#181B20` |
296| border | `1px solid rgba(255, 255, 255, 0.22)` |
297| padding | `12px 22px` |
298| fontWeight | `600` |
299| fontSize | `0.9375rem` |
300| tracking | `-0.01em` |
301| shadow | `0 8px 20px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.40)` |
302 
303#### Secondary
304 
305| Property | Value |
306|----------|-------|
307| shape | `rounded` |
308| background | `#22262D` |
309| color | `#E8EAEE` |
310| border | `1px solid rgba(255, 255, 255, 0.10)` |
311| padding | `12px 22px` |
312| fontWeight | `500` |
313| fontSize | `0.9375rem` |
314| tracking | `-0.005em` |
315 
316#### Outline
317 
318| Property | Value |
319|----------|-------|
320| shape | `rounded` |
321| background | `transparent` |
322| color | `#E8EAEE` |
323| border | `1px solid rgba(255, 255, 255, 0.16)` |
324| padding | `11px 21px` |
325| fontWeight | `500` |
326| fontSize | `0.9375rem` |
327| tracking | `-0.005em` |
328 
329#### Ghost
330 
331| Property | Value |
332|----------|-------|
333| shape | `rounded` |
334| background | `transparent` |
335| color | `#B8C0CC` |
336| border | `none` |
337| padding | `11px 6px` |
338| fontWeight | `500` |
339| fontSize | `0.9375rem` |
340| tracking | `-0.005em` |
341| hoverHint | `underline` |
342 
343### Charts
344 
345| Property | Value |
346|----------|-------|
347| variant | `rounded-bars` |
348| strokeWidth | `2` |
349| gridlines | `false` |
350| barRadius | `3px` |
351| barGap | `8px` |
352| highlight | `all` |
353| axisColor | `#8C95A0` |
354| palette | `#B8C0CC`, `#7E8794`, `#4A525E` |
355
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=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:   '#E8EAEE',
        secondary: '#8C95A0',
        accent:    '#B8C0CC',
        neutral:   '#181B20',
        surface:   '#22262D',
      },
      borderRadius: {
        sm: '4px',
        md: '6px',
        lg: '8px',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Onyx Quarterly

Premium dark editorial. Flat near-black canvas, oversized Fraunces variable serif at 6.5rem with opsz/SOFT axes, hairline rules between sections, one warm-cream accent for pull-words. The discipline of a printed quarterly, in the dark.

darkeditorialserifpremiummagazine
Onyx.app
ProductPricingDocsAbout
Sign inGet started→
dark · editorial · serif

Build with Onyx Quarterly.

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

Atrium Folio

An architecture studio's monograph rendered in HTML. Cormorant Garamond at oversized scale for project titles, Inter for body, concrete-grey surfaces with one warm terracotta accent reserved for the project number. Built for architecture firms, design studios, and portfolio sites where each project deserves its own page.

editorialportfoliopremiumwarmminimal
Atrium.app
ProductPricingDocsAbout
Sign inGet started
editorial · portfolio · premium

Build with Atrium 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