design.md
Back to directory
gradient · warm · minimal · premium · modern

Dawn Quartz.

A soft tonal gradient that stays in one hue. Quartz-pink shading down to bone-white across the page, Manrope for UI, Fraunces for display, graphite ink, a single muted plum accent reserved for the primary CTA and the active step indicator. Built for early-stage product pages, wellness brands, and onboarding flows that need warmth without sweetness.

01 · Preview

The kitchen sink.

Dawn.app
ProductPricingDocsAbout
Sign inGet started
gradient · warm · minimal

Build with Dawn Quartz.

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
#1F1A22
secondary
#6F6770
tertiary
#1F1A22
neutral
#F0E8EB
surface
#F7EEF0
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
12px
lg
18px
pill
9999px
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.

ArchetypeSoft

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: "Dawn Quartz"
3description: "A soft tonal gradient that stays in one hue. Quartz-pink shading down to bone-white across the page, Manrope for UI, Fraunces for display, graphite ink, a single muted plum accent reserved for the primary CTA and the active step indicator. Built for early-stage product pages, wellness brands, and onboarding flows that need warmth without sweetness."
4tags: [gradient, warm, minimal, premium, modern]
5colors:
6  primary:   "#1f1a22"
7  secondary: "#6f6770"
8  tertiary:  "#1f1a22"
9  neutral:   "#f0e8eb"
10  surface:   "#f7eef0"
11typography:
12  display: Fraunces
13  body:    Manrope
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5.5rem / 1 / 400 / -0.035em"
17    h1:   "3.25rem / 1.08 / 400 / -0.025em"
18    h2:   "1.75rem / 1.22 / 500 / -0.012em"
19    body: "1.0625rem / 1.65 / 400 / -0.005em"
20radius:
21  sm: 6px
22  md: 12px
23  lg: 18px
24  pill: 9999px
25shadows:
26  card:   "rgba(31,26,34,0.04) 0 1px 2px, rgba(31,26,34,0.04) 0 8px 24px -10px"
27  button: none
28borders:
29  card:    "1px solid rgba(31,26,34,0.08)"
30  divider: rgba(31,26,34,0.10)
31buttons:
32  primary:
33    background: #6b3550
34    color: #f7eef0
35    border: none
36    shape: rounded
37    padding: 12px 24px
38    font: 600 / 0.875rem
39  secondary:
40    background: rgba(255,255,255,0.65)
41    color: #1f1a22
42    border: 1px solid rgba(31,26,34,0.10)
43    shape: rounded
44    padding: 12px 24px
45    font: 500 / 0.875rem
46  outline:
47    background: transparent
48    color: #1f1a22
49    border: 1px solid rgba(31,26,34,0.18)
50    shape: rounded
51    padding: 12px 24px
52    font: 500 / 0.875rem
53  ghost:
54    background: transparent
55    color: #6f6770
56    border: none
57    shape: rounded
58    padding: 12px 16px
59    font: 500 / 0.875rem
60charts:
61  variant: "thin-bars"
62  stroke_width: 1.5
63  fill_opacity: 0.08
64  gridlines: false
65  bar_gap: 5px
66  highlight: single
67  dot_marker: true
68fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=JetBrains+Mono:wght@400;500&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Dawn Quartz
73 
74## AI Build Instructions
75 
76> **Read this section before writing any code.** The rules below
77> are non-negotiable. Every value used in the UI must come from this
78> file's frontmatter — never substitute, approximate, or invent new
79> colors, fonts, radii, or shadows. If a value is missing, ask the
80> user before adding one.
81 
82### 1 · Your role
83 
84You are building UI for a project that has adopted **Dawn Quartz** as its
85design system. Treat `DESIGN.md` as the single source of truth.
86Your job is to translate the user's product requirements into
87components and pages that look like they were designed by the same
88person who authored this file.
89 
90### 2 · Token compliance
91 
92- Pull every color, font family, radius, shadow, and spacing value
93  from the frontmatter at the top of this file.
94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
95  hard-code hex values that bypass the system.
96- When a token can be expressed as a CSS variable, declare it once
97  in your global stylesheet and reference it everywhere downstream.
98- The Google Fonts `<link>` is provided in the Typography section.
99  Add it to `<head>` before any component renders.
100 
101### 3 · Component recipes
102 
103Use these recipes verbatim when building the corresponding component.
104 
105#### Buttons
106 
107Four variants are defined. Pick one — never blend variants or invent a fifth.
108 
109- **Primary** — rounded shape, bg `#6b3550`, text `#f7eef0`, padding `12px 24px`, weight `600`.
110- **Secondary** — rounded shape, bg `rgba(255,255,255,0.65)`, text `#1f1a22`, border `1px solid rgba(31,26,34,0.10)`, padding `12px 24px`, weight `500`.
111- **Outline** — rounded shape, text `#1f1a22`, border `1px solid rgba(31,26,34,0.18)`, padding `12px 24px`, weight `500`.
112- **Ghost** — rounded shape, text `#6f6770`, padding `12px 16px`, weight `500`.
113 
114Reach for **primary** as the single dominant CTA per screen.
115**Secondary** for the supporting action. **Outline** for tertiary
116actions in toolbars. **Ghost** for inline links and table actions.
117 
118#### Cards
119 
120- Background: `#f7eef0`
121- Border: `1px solid rgba(31,26,34,0.08)`
122- Shadow: `rgba(31,26,34,0.04) 0 1px 2px, rgba(31,26,34,0.04) 0 8px 24px -10px`
123- Radius: `radius.lg` (`18px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
129 
130#### Charts
131 
132- Bar/line variant: `thin-bars`
133- No gridlines — let the bars/lines carry the data.
134- Highlight strategy: `single` — emphasize a single bar/point per chart.
135 
136#### Typography pairings
137 
138- **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks.
139- **Body (`Manrope`)** — paragraphs, labels, button text, form inputs.
140- **Mono (`JetBrains 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## 1. Atmosphere
166 
167Dawn Quartz is a soft tonal gradient that stays in one hue. The page background runs from quartz-pink `#f7eef0` at the top down to bone-white `#fbf6f7` at the bottom — a 5% lightness shift across 100vh, single-hue, never sunset. Display headlines run in Fraunces 400 at 88px — the soft-modern serif sits warm on the quartz field. Body sits in Manrope at 17px on a 1.65 leading. The single accent is muted plum `#6b3550` — deep enough to read as ink-adjacent on the warm field, never pink, never burgundy. Plum appears only on the primary CTA, the active step indicator, and the focus ring.
168 
169The discipline is in the gradient: single-hue, low-amplitude, never two-color. The plum is what gives the system its signature — a muted wine-mark on a warm dawn field.
170 
171**Signature moves**
172- Single-hue tonal gradient: quartz `#f7eef0` → bone-white `#fbf6f7` across 100vh
173- Fraunces 400 at 88px for display — soft-modern serif, never bold
174- Plum `#6b3550` exclusively on primary CTA + active step indicator + focus ring
175- Glass secondary buttons (`rgba(255,255,255,0.65)`) — pick up the gradient through the white tint
176- Soft 12-18px radius — warm and reachable, never pill, never sharp
177 
178## 2. Palette
179 
180### Surfaces
181- **Quartz** `#f7eef0` — page top (warm pink-bone)
182- **Bone Wash** `#fbf6f7` — page bottom (the gradient endpoint)
183- **Quartz Lift** `#f0e8eb` — secondary surfaces
184- **Glass** `rgba(255,255,255,0.65)` — secondary button tint
185 
186### Ink
187- **Graphite** `#1f1a22` — text, headings (warm near-black, slight purple undertone)
188- **Ink 50** `#6f6770` — secondary text, mono labels
189 
190### Accent
191- **Plum** `#6b3550` — primary CTA, active step indicator, focus ring
192- **Plum Soft** `rgba(107,53,80,0.10)` — focus ring background, hovered step
193 
194## 3. Typography
195 
196| Role | Font | Size | Weight | Leading | Tracking |
197|------|------|------|--------|---------|----------|
198| Hero | Fraunces | 88px | 400 | 1.0 | -0.035em |
199| H1 | Fraunces | 52px | 400 | 1.08 | -0.025em |
200| H2 | Manrope | 28px | 500 | 1.22 | -0.012em |
201| Pull Quote | Fraunces (italic) | 24px | 400 | 1.4 | -0.008em |
202| Body | Manrope | 17px | 400 | 1.65 | -0.005em |
203| UI / Button | Manrope | 14px | 600 | 1.4 | 0 |
204| Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |
205| Number | JetBrains Mono | 13px | 500 | 1.0 | 0 tabular-nums |
206 
207Fraunces 400 only — bold breaks the soft-modern proportion. The optical-size axis lets the glyphs breathe at 88px without ever feeling display-pretentious.
208 
209## 4. Buttons
210 
211### Primary (Plum Rounded)
212```css
213background: #6b3550;
214color: #f7eef0;
215padding: 12px 24px;
216border-radius: 12px;
217font-weight: 600;
218```
219 
220The 12px radius is the warm-reachable shape — never pill (too brand-y), never sharp (too cold).
221 
222### Secondary (Glass)
223```css
224background: rgba(255,255,255,0.65);
225border: 1px solid rgba(31,26,34,0.10);
226```
227 
228The white tint picks up the quartz field underneath — secondary buttons read as soft frosted tiles, not as solid white.
229 
230### Outline & Ghost
231- Outline: transparent, 1px hairline at 18% graphite
232- Ghost: no border, ink-50, hover lifts to graphite
233 
234## 5. Cards
235 
236```css
237background: rgba(255,255,255,0.65);
238border: 1px solid rgba(31,26,34,0.08);
239border-radius: 18px;
240box-shadow: rgba(31,26,34,0.04) 0 1px 2px, rgba(31,26,34,0.04) 0 8px 24px -10px;
241```
242 
243Glass tint on the gradient = the quartz bleeds through. The 24px y-offset shadow at -10px spread is the soft-dawn lift — present, never heavy.
244 
245## 6. Charts
246 
247Thin precise bars (4px wide, 5px gap). One bar in plum, others in 22% graphite. Line charts at 1.5px graphite with an 8% plum fill, ending in a plum dot marker. NO gridlines.
248 
249## 7. Tabs
250 
251Underline 1.5px in plum for the active state. Inactive tabs are ink-50 in Manrope 600. Hover lifts to graphite.
252 
253## 8. Spacing
254 
255- Base 4px
256- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128`
257- Section padding: 96px desktop, 48px mobile
258 
259## 9. Do's & don'ts
260 
261✅ **Do**
262- Use the single-hue gradient: quartz → bone-white, 5% lightness shift, never sunset
263- Use Fraunces at 400 only — bold breaks the soft-modern proportion
264- Reserve plum for primary CTA + active step indicator + focus ring exclusively
265- Use glass secondary buttons that pick up the gradient through the white tint
266 
267❌ **Don't**
268- Use a two-hue gradient (peach→pink, purple→blue) — single-hue tonal only
269- Use Fraunces at 600+ — the soft-modern proportion needs 400
270- Use bright pink or burgundy for plum — `#6b3550` is muted wine, never neon, never red
271- Use solid white cards — the white tint that bleeds the gradient is the system's signature
272 
273---
274 
275## Tokens
276 
277> Generated from the same source the live preview renders from.
278> Treat the values below as the contract — never substitute approximations.
279 
280### Colors
281 
282| Role      | Value |
283|-----------|-------|
284| primary   | `#1f1a22` |
285| secondary | `#6f6770` |
286| tertiary  | `#1f1a22` |
287| neutral   | `#f0e8eb` |
288| surface   | `#f7eef0` |
289 
290### Typography
291 
292- **Display:** Fraunces
293- **Body:** Manrope
294- **Mono:** JetBrains Mono
295 
296| Role | size / leading / weight / tracking |
297|------|------------------------------------|
298| Hero | 5.5rem / 1 / 400 / -0.035em |
299| H1   | 3.25rem / 1.08 / 400 / -0.025em |
300| H2   | 1.75rem / 1.22 / 500 / -0.012em |
301| Body | 1.0625rem / 1.65 / 400 / -0.005em |
302 
303### Radius
304 
305- sm: `6px`
306- md: `12px`
307- lg: `18px`
308- pill: `9999px`
309 
310### Shadows
311 
312- **card:** `rgba(31,26,34,0.04) 0 1px 2px, rgba(31,26,34,0.04) 0 8px 24px -10px`
313- **button:** `none`
314 
315### Borders
316 
317- **card:** `1px solid rgba(31,26,34,0.08)`
318- **divider:** `rgba(31,26,34,0.10)`
319 
320### Buttons
321 
322Four variants, each fully tokenized. The preview renders from these exact values.
323 
324#### Primary
325 
326| Property | Value |
327|----------|-------|
328| shape | `rounded` |
329| background | `#6b3550` |
330| color | `#f7eef0` |
331| border | `none` |
332| padding | `12px 24px` |
333| fontWeight | `600` |
334| fontSize | `0.875rem` |
335 
336#### Secondary
337 
338| Property | Value |
339|----------|-------|
340| shape | `rounded` |
341| background | `rgba(255,255,255,0.65)` |
342| color | `#1f1a22` |
343| border | `1px solid rgba(31,26,34,0.10)` |
344| padding | `12px 24px` |
345| fontWeight | `500` |
346| fontSize | `0.875rem` |
347 
348#### Outline
349 
350| Property | Value |
351|----------|-------|
352| shape | `rounded` |
353| background | `transparent` |
354| color | `#1f1a22` |
355| border | `1px solid rgba(31,26,34,0.18)` |
356| padding | `12px 24px` |
357| fontWeight | `500` |
358| fontSize | `0.875rem` |
359 
360#### Ghost
361 
362| Property | Value |
363|----------|-------|
364| shape | `rounded` |
365| background | `transparent` |
366| color | `#6f6770` |
367| border | `none` |
368| padding | `12px 16px` |
369| fontWeight | `500` |
370| fontSize | `0.875rem` |
371 
372### Charts
373 
374| Property | Value |
375|----------|-------|
376| variant | `thin-bars` |
377| strokeWidth | `1.5` |
378| fillOpacity | `0.08` |
379| gridlines | `false` |
380| barGap | `5px` |
381| highlight | `single` |
382| dotMarker | `true` |
383 
384---
385 
386## Pro tokens
387 
388> Production-fidelity tokens. States, density, motion, elevation,
389> content rules and a measured WCAG contract — derived from the
390> resting tokens unless explicitly authored.
391 
392### States
393 
394#### Button
395 
396- **hover** — shadow: `0 8px 24px -10px rgba(31, 26, 34, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)`
397- **focus** — outline: `2px solid rgba(31, 26, 34, 0.4)`, outline-offset: `3px`
398- **active** — transform: `translateY(0) scale(0.98)`
399- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
400- **loading** — opacity: `0.65`
401- **selected** — bg: `rgba(31, 26, 34, 0.18)`, color: `#1f1a22`
402 
403#### Input
404 
405- **hover** — bg: `rgba(31, 26, 34, 0.03)`, border: `1px solid rgba(31, 26, 34, 0.4)`
406- **focus** — border: `1px solid rgba(31, 26, 34, 0.6)`, shadow: `0 0 0 4px rgba(31, 26, 34, 0.12)`
407- **disabled** — opacity: `0.4`
408- **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)`
409 
410#### Card
411 
412- **hover** — shadow: `0 16px 40px -16px rgba(31, 26, 34, 0.3)`, transform: `translateY(-3px)`
413- **selected** — bg: `rgba(31, 26, 34, 0.04)`, border: `1px solid rgba(31, 26, 34, 0.5)`
414- **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92`
415 
416#### Tab
417 
418- **hover** — bg: `rgba(31, 26, 34, 0.08)`, color: `#1f1a22`
419- **focus** — outline: `2px solid rgba(31, 26, 34, 0.4)`, outline-offset: `2px`
420- **selected** — bg: `rgba(31, 26, 34, 0.16)`, color: `#1f1a22`
421 
422### Density
423 
424| Mode | padding × | row × | body | radius × | Use for |
425|------|-----------|-------|------|----------|---------|
426| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
427| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
428| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
429 
430### Motion
431 
432**Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive.
433 
434```css
435transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
436```
437 
438| Token | Value |
439|-------|-------|
440| duration.instant | `120ms` |
441| duration.fast | `240ms` |
442| duration.base | `400ms` |
443| duration.slow | `600ms` |
444| easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` |
445| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
446| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
447| easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` |
448 
449### Elevation
450 
451Five-level scale, system-specific recipe.
452 
453| Level | Shadow | Recipe |
454|-------|--------|--------|
455| level0 | `none` | Flat — the tone separates, not the shadow. |
456| level1 | `0 2px 6px -2px rgba(31, 26, 34, 0.12)` | Soft tinted lift. |
457| level2 | `0 8px 24px -10px rgba(31, 26, 34, 0.2)` | Floating card — pastel-tinted shadow. |
458| level3 | `0 16px 48px -16px rgba(31, 26, 34, 0.28)` | Sheet — visible tinted glow. |
459| level4 | `0 32px 80px -24px rgba(31, 26, 34, 0.4)` | Modal — tinted wash, scrim required. |
460 
461### Content
462 
463- **measure:** `64ch` (max line length for body prose)
464- **paragraph spacing:** `1.35em`
465- **list indent:** `1.5em`
466- **list gap:** `0.6em`
467- **link:** color `#1f1a22`, underline `hover`
468- **blockquote:** border `2px solid rgba(31, 26, 34, 0.5)`, padding `0.9em 1.2em`
469- **code:** background `rgba(31, 26, 34, 0.1)`, color `#1f1a22`
470 
471### Accessibility (WCAG 2.1)
472 
473**Overall:** AA
474 
475| Pair | Ratio | Required | Grade | Suggested fix |
476|------|-------|----------|-------|---------------|
477| Body text on surface | 15:1 | AA | AAA | — |
478| Body text on canvas | 14.2:1 | AA | AAA | — |
479| Muted text on surface | 4.79:1 | AA | AA | — |
480| Accent on surface | 15:1 | AA-Large | AAA | — |
481| Accent on canvas | 14.2:1 | AA-Large | AAA | — |
482
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=Manrope:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=JetBrains+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: ['"Fraunces"', 'serif'],
        sans:    ['"Manrope"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1f1a22',
        secondary: '#6f6770',
        accent:    '#1f1a22',
        neutral:   '#f0e8eb',
        surface:   '#f7eef0',
      },
      borderRadius: {
        sm: '6px',
        md: '12px',
        lg: '18px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Arcade Night

Esports broadcast in dark mode. Near-black surfaces, sharp display serif paired with a square mono, knife-edge corners, a single high-voltage lime accent. Built for tournaments and launch events.

darkgamingeventboldpremium
Arcade.app
ProductPricingDocsAbout
Sign inGet started
dark · gaming · event

Build with Arcade Night.

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