design.md
Back to directory
minimal · gradient · light · premium · editorial

Mineral Dusk.

A single beautifully calibrated diagonal gradient runs across the page — cool slate into dusty mauve into champagne mist — while every other element stays restrained ink and hairlines. The gradient is the room.

01 · Preview

The kitchen sink.

Mineral.app
ProductPricingDocsAbout
Sign inGet started
minimal · gradient · light

Build with Mineral Dusk.

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
#1A1A22
secondary
#6B6B78
tertiary
#A88BA8
neutral
#E8E5EE
surface
#FDFCFA
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
6px
md
10px
lg
14px
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: "Mineral Dusk"
3description: "A single beautifully calibrated diagonal gradient runs across the page — cool slate into dusty mauve into champagne mist — while every other element stays restrained ink and hairlines. The gradient is the room."
4tags: [minimal, gradient, light, premium, editorial]
5colors:
6  primary:   "#1A1A22"
7  secondary: "#6B6B78"
8  tertiary:  "#A88BA8"
9  neutral:   "#E8E5EE"
10  surface:   "#FDFCFA"
11typography:
12  display: Fraunces
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5rem / 1 / 400 / -0.03em"
17    h1:   "3rem / 1.05 / 400 / -0.025em"
18    h2:   "1.625rem / 1.3 / 500 / -0.012em"
19    body: "1.0625rem / 1.7 / 400 / -0.003em"
20radius:
21  sm: 6px
22  md: 10px
23  lg: 14px
24shadows:
25  card:   "0 8px 32px -16px rgba(40, 35, 60, 0.10), 0 1px 2px rgba(40, 35, 60, 0.04)"
26  button: "0 4px 14px -6px rgba(26, 26, 34, 0.20)"
27borders:
28  card:    "1px solid rgba(26, 26, 34, 0.06)"
29  divider: "rgba(26, 26, 34, 0.06)"
30buttons:
31  primary:
32    background: #1A1A22
33    color: #FDFCFA
34    border: 1px solid #1A1A22
35    shape: rounded
36    padding: 13px 26px
37    font: 500 / 0.9375rem / -0.005em
38    shadow: 0 4px 14px -6px rgba(26, 26, 34, 0.20)
39  secondary:
40    background: #FDFCFA
41    color: #1A1A22
42    border: 1px solid rgba(26, 26, 34, 0.18)
43    shape: rounded
44    padding: 13px 26px
45    font: 500 / 0.9375rem / -0.005em
46  outline:
47    background: transparent
48    color: #1A1A22
49    border: 1px solid rgba(26, 26, 34, 0.25)
50    shape: rounded
51    padding: 12px 24px
52    font: 500 / 0.9375rem / -0.005em
53  ghost:
54    background: transparent
55    color: #6B6B78
56    border: none
57    shape: rounded
58    padding: 12px 4px
59    font: 500 / 0.9375rem / -0.005em
60    hover: underline
61charts:
62  variant: line
63  stroke_width: 1.5
64  gridlines: false
65  highlight: last
66  dot_marker: true
67  axis_color: "#6B6B78"
68  palette: ["#1A1A22", "#A88BA8", "#C9B89E"]
69fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300;9..144,400;9..144,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
70dependencies: ["lucide-react"]
71---
72 
73# Mineral Dusk
74 
75## AI Build Instructions
76 
77> **Read this section before writing any code.** The rules below
78> are non-negotiable. Every value used in the UI must come from this
79> file's frontmatter — never substitute, approximate, or invent new
80> colors, fonts, radii, or shadows. If a value is missing, ask the
81> user before adding one.
82 
83### 1 · Your role
84 
85You are building UI for a project that has adopted **Mineral Dusk** as its
86design system. Treat `DESIGN.md` as the single source of truth.
87Your job is to translate the user's product requirements into
88components and pages that look like they were designed by the same
89person who authored this file.
90 
91### 2 · Token compliance
92 
93- Pull every color, font family, radius, shadow, and spacing value
94  from the frontmatter at the top of this file.
95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
96  hard-code hex values that bypass the system.
97- When a token can be expressed as a CSS variable, declare it once
98  in your global stylesheet and reference it everywhere downstream.
99- The Google Fonts `<link>` is provided in the Typography section.
100  Add it to `<head>` before any component renders.
101 
102### 3 · Component recipes
103 
104Use these recipes verbatim when building the corresponding component.
105 
106#### Buttons
107 
108Four variants are defined. Pick one — never blend variants or invent a fifth.
109 
110- **Primary** — rounded shape, bg `#1A1A22`, text `#FDFCFA`, border `1px solid #1A1A22`, padding `13px 26px`, weight `500`, shadow `0 4px 14px -6px rgba(26, 26, 34, 0.20)`.
111- **Secondary** — rounded shape, bg `#FDFCFA`, text `#1A1A22`, border `1px solid rgba(26, 26, 34, 0.18)`, padding `13px 26px`, weight `500`.
112- **Outline** — rounded shape, text `#1A1A22`, border `1px solid rgba(26, 26, 34, 0.25)`, padding `12px 24px`, weight `500`.
113- **Ghost** — rounded shape, text `#6B6B78`, padding `12px 4px`, weight `500`.
114 
115Reach for **primary** as the single dominant CTA per screen.
116**Secondary** for the supporting action. **Outline** for tertiary
117actions in toolbars. **Ghost** for inline links and table actions.
118 
119#### Cards
120 
121- Background: `#FDFCFA`
122- Border: `1px solid rgba(26, 26, 34, 0.06)`
123- Shadow: `0 8px 32px -16px rgba(40, 35, 60, 0.10), 0 1px 2px rgba(40, 35, 60, 0.04)`
124- Radius: `radius.lg` (`14px`)
125- Internal padding: `20px` for compact cards, `24–28px` for content cards.
126 
127#### Charts
128 
129- Bar/line variant: `line`
130- No gridlines — let the bars/lines carry the data.
131- Highlight strategy: `last` — emphasize a single bar/point per chart.
132- Use the declared palette in order: `#1A1A22`, `#A88BA8`, `#C9B89E`.
133 
134#### Typography pairings
135 
136- **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks.
137- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
138- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
139 
140### 4 · Hard constraints
141 
142Never do any of the following without explicit instruction from the user:
143 
144- Introduce a new color, font, radius, or shadow that isn't declared above.
145- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
146- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
147- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
148- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
149 
150### 5 · Before you finish — verify
151 
152Run through this checklist for every screen you produce:
153 
154- [ ] Every color used appears in the Colors table above.
155- [ ] Headlines use the display font; body copy uses the body font.
156- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
157- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
158- [ ] Cards and dividers use the declared border + shadow tokens.
159- [ ] No values were invented; if you needed something missing, you stopped and asked.
160 
161---
162 
163## Overview
164Mineral Dusk is one beautifully calibrated diagonal gradient — cool slate at the top-left, dusty mauve through the middle, warm champagne mist at the bottom-right — that lives in the page background. Everything else is restrained: ink type in a high-contrast variable serif, paper cards, hairline borders, a solid-ink primary button.
165 
166The gradient is the room. The content sits in the room. Adding a second decorative element would make the room feel cluttered.
167 
168For premium content brands, design portfolios, photography platforms, boutique hospitality, editorial fashion.
169 
170## The Page Gradient
171A diagonal three-stop gradient covers the entire viewport background. Always the same direction (135°), always the same three stops:
172 
173```css
174body {
175  background: linear-gradient(
176    135deg,
177    #DDE0EA 0%,
178    #E8DCEA 45%,
179    #F1E6D8 100%
180  );
181  min-height: 100vh;
182}
183```
184 
185Stops chosen so each transition is barely perceptible — the gradient reads as a *room*, not a banner.
186 
187**Where it appears:**
188- The page background. Always.
189- A 1px diagonal divider above the footer (same gradient, 1px tall).
190 
191**Where it never appears:**
192- Buttons. Card fills. Borders. Text. Section bands.
193 
194## Color
195- **Ink #1A1A22** — primary text and primary CTA.
196- **Dusk #6B6B78** — secondary text.
197- **Mauve #A88BA8** — accent word in the hero (one per page).
198- **Slate base #E8E5EE** — gradient origin.
199- **Paper #FDFCFA** — card surface (sits over the gradient).
200 
201The gradient stops never appear as fills anywhere else.
202 
203## Typography
204- **Display: Fraunces 400** at 5rem with -3% tracking. Variable serif with optical-size sensitivity — the type carries the editorial weight.
205- **Body: Inter 400** at 1.0625rem with 1.7 leading.
206- **Italic Fraunces** for emphasis inside hero headlines (one phrase per hero).
207 
208| Role | Font | Size | Weight | Tracking |
209|------|------|------|--------|----------|
210| Hero | Fraunces | 5rem | 400 | -0.03em |
211| H1 | Fraunces | 3rem | 400 | -0.025em |
212| H2 | Fraunces | 1.625rem | 500 | -0.012em |
213| Body | Inter | 1.0625rem | 400 | -0.003em / 1.7 |
214 
215## Geometry
216- **Radii: 6 / 10 / 14.** Refined but never sharp.
217- **Section gap: 144px** desktop, 88px mobile. The gradient needs the page to breathe.
218- **Card padding: 36px** minimum.
219 
220## Buttons
221- **Primary** — solid ink, paper label, soft ink underglow. The button is the punctuation; the gradient is the sentence.
222- **Secondary** — paper, ink hairline at 18%.
223- **Outline** — transparent, ink hairline at 25%.
224- **Ghost** — bare dusk label, hover underline.
225 
226All four are gently rounded at 10-14px.
227 
228## Cards
229Paper surface (#FDFCFA) sits over the gradient — the gradient peeks at the corners and between cards. 1px ink hairline at 6%, soft 8px shadow at 10%. Radius 14px. Cards always have ≥ 24px gap so the gradient reads between them.
230 
231## Charts & Data
232A single 1.5px ink line over the paper card. No gridlines. Mauve dot at the latest reading.
233 
234## Do's and Don'ts
235- ✅ The gradient is always 135°, always the same three stops, always full-viewport.
236- ✅ Paper cards over the gradient — never solid-color sections that hide it.
237- ✅ Fraunces 400 for display — the optical-size variable axis is what makes the serif sing at large sizes.
238- ✅ Italic Fraunces on one accent phrase per hero, max.
239- ❌ No second gradient anywhere. Not on buttons, not on cards, not on accents.
240- ❌ No saturated chromatic accents. The mauve is the loudest element allowed.
241- ❌ No drop shadows beyond the soft ink-tinted card shadow.
242- ❌ No sharp radii. The system is refined, never aggressive.
243 
244---
245 
246## Tokens
247 
248> Generated from the same source the live preview renders from.
249> Treat the values below as the contract — never substitute approximations.
250 
251### Colors
252 
253| Role      | Value |
254|-----------|-------|
255| primary   | `#1A1A22` |
256| secondary | `#6B6B78` |
257| tertiary  | `#A88BA8` |
258| neutral   | `#E8E5EE` |
259| surface   | `#FDFCFA` |
260 
261### Typography
262 
263- **Display:** Fraunces
264- **Body:** Inter
265- **Mono:** JetBrains Mono
266 
267| Role | size / leading / weight / tracking |
268|------|------------------------------------|
269| Hero | 5rem / 1 / 400 / -0.03em |
270| H1   | 3rem / 1.05 / 400 / -0.025em |
271| H2   | 1.625rem / 1.3 / 500 / -0.012em |
272| Body | 1.0625rem / 1.7 / 400 / -0.003em |
273 
274### Radius
275 
276- sm: `6px`
277- md: `10px`
278- lg: `14px`
279 
280### Shadows
281 
282- **card:** `0 8px 32px -16px rgba(40, 35, 60, 0.10), 0 1px 2px rgba(40, 35, 60, 0.04)`
283- **button:** `0 4px 14px -6px rgba(26, 26, 34, 0.20)`
284 
285### Borders
286 
287- **card:** `1px solid rgba(26, 26, 34, 0.06)`
288- **divider:** `rgba(26, 26, 34, 0.06)`
289 
290### Buttons
291 
292Four variants, each fully tokenized. The preview renders from these exact values.
293 
294#### Primary
295 
296| Property | Value |
297|----------|-------|
298| shape | `rounded` |
299| background | `#1A1A22` |
300| color | `#FDFCFA` |
301| border | `1px solid #1A1A22` |
302| padding | `13px 26px` |
303| fontWeight | `500` |
304| fontSize | `0.9375rem` |
305| tracking | `-0.005em` |
306| shadow | `0 4px 14px -6px rgba(26, 26, 34, 0.20)` |
307 
308#### Secondary
309 
310| Property | Value |
311|----------|-------|
312| shape | `rounded` |
313| background | `#FDFCFA` |
314| color | `#1A1A22` |
315| border | `1px solid rgba(26, 26, 34, 0.18)` |
316| padding | `13px 26px` |
317| fontWeight | `500` |
318| fontSize | `0.9375rem` |
319| tracking | `-0.005em` |
320 
321#### Outline
322 
323| Property | Value |
324|----------|-------|
325| shape | `rounded` |
326| background | `transparent` |
327| color | `#1A1A22` |
328| border | `1px solid rgba(26, 26, 34, 0.25)` |
329| padding | `12px 24px` |
330| fontWeight | `500` |
331| fontSize | `0.9375rem` |
332| tracking | `-0.005em` |
333 
334#### Ghost
335 
336| Property | Value |
337|----------|-------|
338| shape | `rounded` |
339| background | `transparent` |
340| color | `#6B6B78` |
341| border | `none` |
342| padding | `12px 4px` |
343| fontWeight | `500` |
344| fontSize | `0.9375rem` |
345| tracking | `-0.005em` |
346| hoverHint | `underline` |
347 
348### Charts
349 
350| Property | Value |
351|----------|-------|
352| variant | `line` |
353| strokeWidth | `1.5` |
354| gridlines | `false` |
355| highlight | `last` |
356| dotMarker | `true` |
357| axisColor | `#6B6B78` |
358| palette | `#1A1A22`, `#A88BA8`, `#C9B89E` |
359 
360---
361 
362## Pro tokens
363 
364> Production-fidelity tokens. States, density, motion, elevation,
365> content rules and a measured WCAG contract — derived from the
366> resting tokens unless explicitly authored.
367 
368### States
369 
370#### Button
371 
372- **hover** — bg: `rgba(168, 139, 168, 0.92)`, shadow: `0 4px 20px -8px rgba(168, 139, 168, 0.4)`
373- **focus** — outline: `1.5px solid #A88BA8`, outline-offset: `4px`
374- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
375- **disabled** — opacity: `0.45`
376- **loading** — opacity: `0.7`
377- **selected** — bg: `#1A1A22`, color: `#FDFCFA`
378 
379#### Input
380 
381- **hover** — border: `1px solid #1A1A22`
382- **focus** — border: `1px solid #A88BA8`, shadow: `0 1px 0 0 #A88BA8`
383- **disabled** — opacity: `0.45`
384- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
385 
386#### Card
387 
388- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
389- **selected** — border: `1px solid #1A1A22`
390 
391#### Tab
392 
393- **hover** — color: `#1A1A22`
394- **focus** — outline: `1.5px solid #A88BA8`, outline-offset: `3px`
395- **selected** — color: `#A88BA8`, border: `0 0 2px 0 solid #A88BA8`
396 
397### Density
398 
399| Mode | padding × | row × | body | radius × | Use for |
400|------|-----------|-------|------|----------|---------|
401| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
402| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
403| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
404 
405### Motion
406 
407**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
408 
409```css
410transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
411```
412 
413| Token | Value |
414|-------|-------|
415| duration.instant | `80ms` |
416| duration.fast | `180ms` |
417| duration.base | `320ms` |
418| duration.slow | `500ms` |
419| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
420| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
421| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
422| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
423 
424### Elevation
425 
426Five-level scale, system-specific recipe.
427 
428| Level | Shadow | Recipe |
429|-------|--------|--------|
430| level0 | `none` | Hairline only — typical editorial resting state. |
431| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
432| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
433| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
434| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
435 
436### Content
437 
438- **measure:** `60ch` (max line length for body prose)
439- **paragraph spacing:** `1.5em`
440- **list indent:** `1.75em`
441- **list gap:** `0.55em`
442- **link:** color `#A88BA8`, underline `always`
443- **blockquote:** border `4px solid #A88BA8`, padding `0.4em 0 0.4em 1.5em`
444- **code:** background `rgba(26, 26, 34, 0.06)`, color `#1A1A22`
445 
446### Accessibility (WCAG 2.1)
447 
448**Overall:** FAIL
449 
450| Pair | Ratio | Required | Grade | Suggested fix |
451|------|-------|----------|-------|---------------|
452| Body text on surface | 16.86:1 | AA | AAA | — |
453| Body text on canvas | 13.89:1 | AA | AAA | — |
454| Muted text on surface | 5.12:1 | AA | AA | — |
455| Accent on surface | 2.96:1 | AA-Large | FAIL | `#8c698c` → 4.54:1 (AA) |
456| Accent on canvas | 2.44:1 | AA-Large | FAIL | `#7b5c7b` → 4.61:1 (AA) |
457
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=Fraunces:opsz,wght,SOFT@9..144,300;9..144,400;9..144,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Fraunces"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1A1A22',
        secondary: '#6B6B78',
        accent:    '#A88BA8',
        neutral:   '#E8E5EE',
        surface:   '#FDFCFA',
      },
      borderRadius: {
        sm: '6px',
        md: '10px',
        lg: '14px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Frostlite

Light glass. Pale daylight canvas with a soft mesh aurora behind it; cards float as frosted panes with a 28px backdrop-blur and faint inset highlight. Depth without the weight of dark mode.

glasslightminimalpremiumsaasmodern
Frostlite.app
ProductPricingDocsAbout
Sign inGet started
glass · light · minimal

Build with Frostlite.

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

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