design.md
Back to directory
enterprise · admin · dashboard · minimal · saas

Atlas Admin.

An enterprise admin tool that respects density. Cool bone-grey surfaces, Inter for prose and IBM Plex Mono with tabular numerals for every figure, a single steel-blue accent reserved for the active module pane border. Built for B2B internal tools, ops dashboards, and admin consoles where information density is the feature, not the bug.

01 · Preview

The kitchen sink.

Atlas.app
ProductPricingDocsAbout
Sign inGet started
enterprise · admin · dashboard

Build with Atlas Admin.

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
#0F1419
secondary
#5A626C
tertiary
#0F1419
neutral
#E6E9ED
surface
#F1F3F6
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
3px
md
5px
lg
7px
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.

ArchetypeMaterial

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: "Atlas Admin"
3description: "An enterprise admin tool that respects density. Cool bone-grey surfaces, Inter for prose and IBM Plex Mono with tabular numerals for every figure, a single steel-blue accent reserved for the active module pane border. Built for B2B internal tools, ops dashboards, and admin consoles where information density is the feature, not the bug."
4tags: [enterprise, admin, dashboard, minimal, saas]
5colors:
6  primary:   "#0f1419"
7  secondary: "#5a626c"
8  tertiary:  "#0f1419"
9  neutral:   "#e6e9ed"
10  surface:   "#f1f3f6"
11typography:
12  display: Inter
13  body:    Inter
14  mono:    "IBM Plex Mono"
15  scale:
16    hero: "2.75rem / 1.08 / 700 / -0.025em"
17    h1:   "1.875rem / 1.18 / 600 / -0.018em"
18    h2:   "1.25rem / 1.3 / 600 / -0.012em"
19    body: "0.875rem / 1.55 / 400 / 0"
20radius:
21  sm: 3px
22  md: 5px
23  lg: 7px
24  pill: 9999px
25shadows:
26  card:   "rgba(15,20,25,0.04) 0 1px 2px"
27  button: none
28borders:
29  card:    "1px solid rgba(15,20,25,0.08)"
30  divider: rgba(15,20,25,0.08)
31buttons:
32  primary:
33    background: #0f1419
34    color: #f1f3f6
35    border: none
36    shape: rounded
37    padding: 8px 16px
38    font: 600 / 0.8125rem
39  secondary:
40    background: #ffffff
41    color: #0f1419
42    border: 1px solid rgba(15,20,25,0.14)
43    shape: rounded
44    padding: 8px 16px
45    font: 500 / 0.8125rem
46  outline:
47    background: transparent
48    color: #0f1419
49    border: 1px solid rgba(15,20,25,0.18)
50    shape: rounded
51    padding: 8px 16px
52    font: 500 / 0.8125rem
53  ghost:
54    background: transparent
55    color: #5a626c
56    border: none
57    shape: rounded
58    padding: 8px 12px
59    font: 500 / 0.8125rem
60charts:
61  variant: "thin-bars"
62  stroke_width: 1.25
63  fill_opacity: 0.05
64  gridlines: true
65  bar_gap: 6px
66  highlight: single
67  dot_marker: false
68fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Atlas Admin
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 **Atlas Admin** 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 `#0f1419`, text `#f1f3f6`, padding `8px 16px`, weight `600`.
110- **Secondary** — rounded shape, bg `#ffffff`, text `#0f1419`, border `1px solid rgba(15,20,25,0.14)`, padding `8px 16px`, weight `500`.
111- **Outline** — rounded shape, text `#0f1419`, border `1px solid rgba(15,20,25,0.18)`, padding `8px 16px`, weight `500`.
112- **Ghost** — rounded shape, text `#5a626c`, padding `8px 12px`, 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: `#f1f3f6`
121- Border: `1px solid rgba(15,20,25,0.08)`
122- Shadow: `rgba(15,20,25,0.04) 0 1px 2px`
123- Radius: `radius.lg` (`7px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill.
129 
130#### Charts
131 
132- Bar/line variant: `thin-bars`
133- Highlight strategy: `single` — emphasize a single bar/point per chart.
134 
135#### Typography pairings
136 
137- **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks.
138- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
139- **Mono (`IBM Plex 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## 1. Atmosphere
165 
166Atlas Admin is an enterprise admin tool that respects density. The page surface is cool bone-grey `#f1f3f6` with cards lifted to pure white — every surface differing by 1-2% lightness. Inter handles prose at the small body size (14px) that admin consoles actually need to fit dense data; IBM Plex Mono with tabular numerals carries every ID, count, percentage, timestamp. Chrome is hairlines at 8% ink. The single accent is muted steel-blue `#3a5a7e` that appears only on the active module pane left border, the active sidebar item, and the focus ring. Status colors (success/warn/error) are reserved for actual status — never for UI accents.
167 
168The discipline is in the density: 14px body so an ops table actually fits a screen, mono numerals for column alignment, and one steel-blue that reads as "you are here" without ever shouting.
169 
170**Signature moves**
171- 14px body in Inter — admin consoles need density, not marketing spacing
172- IBM Plex Mono with `font-variant-numeric: tabular-nums` on every ID, count, timestamp, percentage
173- Steel-blue `#3a5a7e` only on active module pane border + active sidebar item + focus ring
174- Boxed tabs (5px radius, 1px hairline) — the tmux-pane voice for module switching
175- Cool bone-grey `#f1f3f6` page → pure white card — tonal-shift, no shadow drama
176 
177## 2. Palette
178 
179### Surfaces
180- **Bone Grey** `#f1f3f6` — page background (cool fine off-white)
181- **Card** `#ffffff` — elevated surface, primary card
182- **Header** `#e6e9ed` — table headers, sidebar background
183 
184### Ink
185- **Ink** `#0f1419` — text, headings, primary CTA fill (cool near-black, slight blue undertone)
186- **Ink 60** `#5a626c` — secondary text, mono labels
187- **Hairline** `rgba(15,20,25,0.08)` — every divider, every card edge
188 
189### Accent
190- **Steel** `#3a5a7e` — active module pane border, active sidebar item, focus ring
191- **Steel Soft** `rgba(58,90,126,0.10)` — hovered sidebar item, focus ring background
192 
193### Status (semantic only — never UI accent)
194- Success `#1f7a4d` · Warn `#b3801f` · Error `#a3331f` — used only on actual status badges
195 
196## 3. Typography
197 
198| Role | Font | Size | Weight | Leading | Tracking |
199|------|------|------|--------|---------|----------|
200| Hero | Inter | 44px | 700 | 1.08 | -0.025em |
201| H1 / Page Title | Inter | 30px | 600 | 1.18 | -0.018em |
202| H2 / Section | Inter | 20px | 600 | 1.3 | -0.012em |
203| Body | Inter | 14px | 400 | 1.55 | 0 |
204| UI / Button | Inter | 13px | 500 | 1.4 | 0 |
205| ID / Count / Metric | IBM Plex Mono | 13px | 500 | 1.0 | 0 tabular-nums |
206| Label | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase |
207| Timestamp | IBM Plex Mono | 12px | 500 | 1.0 | 0 tabular-nums |
208| Big KPI | IBM Plex Mono | 24px | 600 | 1.0 | 0 tabular-nums |
209 
210The 14px body is deliberately small — admin consoles must fit dense tables. Plex Mono for every numeric or ID string keeps columns pixel-aligned.
211 
212## 4. Buttons
213 
214### Primary (Ink Compact)
215```css
216background: #0f1419;
217color: #f1f3f6;
218padding: 8px 16px;
219border-radius: 5px;
220font-weight: 600;
221```
222 
223The 8px vertical padding is tight on purpose — admin actions live in toolbars and table rows where height matters.
224 
225### Secondary (Card White)
226- Pure white, 1px hairline at 14% ink, ink text — same compact size
227 
228### Outline & Ghost
229- Outline: transparent, 1px hairline at 18% ink
230- Ghost: no border, ink-60, hover lifts to ink
231 
232## 5. Cards
233 
234```css
235background: #ffffff;
236border: 1px solid rgba(15,20,25,0.08);
237border-radius: 7px;
238box-shadow: rgba(15,20,25,0.04) 0 1px 2px;
239```
240 
241The single 1px shadow is the maximum lift. The active module pane adds a 2px steel left border — the "you are here" indicator, borrowed from a tmux/zellij active pane.
242 
243## 6. Charts
244 
245Thin precise bars (3px wide, 6px gap) with dashed gridlines at 8% ink — used for daily-throughput and queue-depth charts. One bar in steel, others in 22% ink. Line charts at 1.25px ink with a 5% steel fill. Y-axis labels in IBM Plex Mono uppercase 11px aligned to the right.
246 
247## 7. Tabs
248 
249Boxed tabs with 5px radius and 1px hairline at 8% ink. Active = white background, 1px steel border, ink text. Inactive = transparent, ink-60. Reads like a tmux pane selector — module switching, not nav.
250 
251## 8. Spacing
252 
253- Base 4px (table-row aware)
254- Scale: `4, 8, 12, 16, 20, 24, 32, 40, 56, 80`
255- Section padding: 56px desktop, 24px mobile — admin density
256 
257## 9. Do's & don'ts
258 
259✅ **Do**
260- Use 14px body — admin consoles need density, not marketing spacing
261- Use IBM Plex Mono with tabular-nums on every ID, count, percentage, timestamp
262- Reserve steel for active module pane border + active sidebar item + focus ring
263- Hold status colors (success/warn/error) to actual status badges only — never as UI accent
264 
265❌ **Don't**
266- Use 16px+ body — admin tables become wasteful and require more scroll
267- Use a second UI accent — steel alone, on three specific surfaces
268- Use bright color for status — muted versions only (success `#1f7a4d`, never `#22c55e`)
269- Add card shadows beyond the 1px lift — the cool tonal step is the only depth
270 
271---
272 
273## Tokens
274 
275> Generated from the same source the live preview renders from.
276> Treat the values below as the contract — never substitute approximations.
277 
278### Colors
279 
280| Role      | Value |
281|-----------|-------|
282| primary   | `#0f1419` |
283| secondary | `#5a626c` |
284| tertiary  | `#0f1419` |
285| neutral   | `#e6e9ed` |
286| surface   | `#f1f3f6` |
287 
288### Typography
289 
290- **Display:** Inter
291- **Body:** Inter
292- **Mono:** IBM Plex Mono
293 
294| Role | size / leading / weight / tracking |
295|------|------------------------------------|
296| Hero | 2.75rem / 1.08 / 700 / -0.025em |
297| H1   | 1.875rem / 1.18 / 600 / -0.018em |
298| H2   | 1.25rem / 1.3 / 600 / -0.012em |
299| Body | 0.875rem / 1.55 / 400 / 0 |
300 
301### Radius
302 
303- sm: `3px`
304- md: `5px`
305- lg: `7px`
306- pill: `9999px`
307 
308### Shadows
309 
310- **card:** `rgba(15,20,25,0.04) 0 1px 2px`
311- **button:** `none`
312 
313### Borders
314 
315- **card:** `1px solid rgba(15,20,25,0.08)`
316- **divider:** `rgba(15,20,25,0.08)`
317 
318### Buttons
319 
320Four variants, each fully tokenized. The preview renders from these exact values.
321 
322#### Primary
323 
324| Property | Value |
325|----------|-------|
326| shape | `rounded` |
327| background | `#0f1419` |
328| color | `#f1f3f6` |
329| border | `none` |
330| padding | `8px 16px` |
331| fontWeight | `600` |
332| fontSize | `0.8125rem` |
333 
334#### Secondary
335 
336| Property | Value |
337|----------|-------|
338| shape | `rounded` |
339| background | `#ffffff` |
340| color | `#0f1419` |
341| border | `1px solid rgba(15,20,25,0.14)` |
342| padding | `8px 16px` |
343| fontWeight | `500` |
344| fontSize | `0.8125rem` |
345 
346#### Outline
347 
348| Property | Value |
349|----------|-------|
350| shape | `rounded` |
351| background | `transparent` |
352| color | `#0f1419` |
353| border | `1px solid rgba(15,20,25,0.18)` |
354| padding | `8px 16px` |
355| fontWeight | `500` |
356| fontSize | `0.8125rem` |
357 
358#### Ghost
359 
360| Property | Value |
361|----------|-------|
362| shape | `rounded` |
363| background | `transparent` |
364| color | `#5a626c` |
365| border | `none` |
366| padding | `8px 12px` |
367| fontWeight | `500` |
368| fontSize | `0.8125rem` |
369 
370### Charts
371 
372| Property | Value |
373|----------|-------|
374| variant | `thin-bars` |
375| strokeWidth | `1.25` |
376| fillOpacity | `0.05` |
377| gridlines | `true` |
378| barGap | `6px` |
379| highlight | `single` |
380| dotMarker | `false` |
381 
382---
383 
384## Pro tokens
385 
386> Production-fidelity tokens. States, density, motion, elevation,
387> content rules and a measured WCAG contract — derived from the
388> resting tokens unless explicitly authored.
389 
390### States
391 
392#### Button
393 
394- **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)`
395- **focus** — outline: `2px solid rgba(15, 20, 25, 0.5)`, outline-offset: `2px`
396- **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)`
397- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
398- **loading** — opacity: `0.7`
399- **selected** — bg: `#0f1419`, color: `#f1f3f6`
400 
401#### Input
402 
403- **hover** — border: `1px solid rgba(15, 20, 25, 0.5)`
404- **focus** — border: `1.5px solid #0f1419`, shadow: `0 0 0 4px rgba(15, 20, 25, 0.15)`
405- **disabled** — bg: `rgba(15, 20, 25, 0.04)`, opacity: `0.4`
406- **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)`
407 
408#### Card
409 
410- **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)`
411- **selected** — bg: `rgba(15, 20, 25, 0.04)`, border: `1.5px solid #0f1419`
412- **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9`
413 
414#### Tab
415 
416- **hover** — bg: `rgba(15, 20, 25, 0.06)`, color: `#0f1419`
417- **focus** — outline: `2px solid rgba(15, 20, 25, 0.5)`, outline-offset: `2px`
418- **selected** — color: `#0f1419`, border: `0 0 2px 0 solid #0f1419`
419 
420### Density
421 
422| Mode | padding × | row × | body | radius × | Use for |
423|------|-----------|-------|------|----------|---------|
424| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
425| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
426| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
427 
428### Motion
429 
430**Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way.
431 
432```css
433transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
434```
435 
436| Token | Value |
437|-------|-------|
438| duration.instant | `80ms` |
439| duration.fast | `160ms` |
440| duration.base | `240ms` |
441| duration.slow | `380ms` |
442| easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` |
443| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
444| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
445| easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` |
446 
447### Elevation
448 
449Five-level scale, system-specific recipe.
450 
451| Level | Shadow | Recipe |
452|-------|--------|--------|
453| level0 | `none` | Flat — hairline border separates. |
454| level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. |
455| level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. |
456| level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. |
457| level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. |
458 
459### Content
460 
461- **measure:** `68ch` (max line length for body prose)
462- **paragraph spacing:** `1.2em`
463- **list indent:** `1.5em`
464- **list gap:** `0.5em`
465- **link:** color `#0f1419`, underline `hover`
466- **blockquote:** border `3px solid rgba(15, 20, 25, 0.6)`, padding `0.5em 0 0.5em 1.25em`
467- **code:** background `rgba(15, 20, 25, 0.06)`, color `#0f1419`
468 
469### Accessibility (WCAG 2.1)
470 
471**Overall:** AA
472 
473| Pair | Ratio | Required | Grade | Suggested fix |
474|------|-------|----------|-------|---------------|
475| Body text on surface | 16.65:1 | AA | AAA | — |
476| Body text on canvas | 15.2:1 | AA | AAA | — |
477| Muted text on surface | 5.56:1 | AA | AA | — |
478| Accent on surface | 16.65:1 | AA-Large | AAA | — |
479| Accent on canvas | 15.2:1 | AA-Large | AAA | — |
480
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=Inter:wght@400;500;600;700&family=IBM+Plex+Mono: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: ['"Inter"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"IBM Plex Mono"', 'monospace'],
      },
      colors: {
        primary:   '#0f1419',
        secondary: '#5a626c',
        accent:    '#0f1419',
        neutral:   '#e6e9ed',
        surface:   '#f1f3f6',
      },
      borderRadius: {
        sm: '3px',
        md: '5px',
        lg: '7px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

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.

gradientwarmminimalpremiummodern
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

Twilight Mail

Luxury productivity. Deep purple hero against pristine white, non-standard variable weight 460/540, ultra-tight 0.96 leading, warm cream CTAs, lavender as the only accent.

consumerpremiumminimaleditorial
Twilight.app
ProductPricingDocsAbout
Sign inGet started
consumer · premium · minimal

Build with Twilight Mail.

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