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.
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.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
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: Inter13 body: Inter14 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: 3px22 md: 5px23 lg: 7px24 pill: 9999px25shadows:26 card: "rgba(15,20,25,0.04) 0 1px 2px"27 button: none28borders:29 card: "1px solid rgba(15,20,25,0.08)"30 divider: rgba(15,20,25,0.08)31buttons:32 primary:33 background: #0f141934 color: #f1f3f635 border: none36 shape: rounded37 padding: 8px 16px38 font: 600 / 0.8125rem39 secondary:40 background: #ffffff41 color: #0f141942 border: 1px solid rgba(15,20,25,0.14)43 shape: rounded44 padding: 8px 16px45 font: 500 / 0.8125rem46 outline:47 background: transparent48 color: #0f141949 border: 1px solid rgba(15,20,25,0.18)50 shape: rounded51 padding: 8px 16px52 font: 500 / 0.8125rem53 ghost:54 background: transparent55 color: #5a626c56 border: none57 shape: rounded58 padding: 8px 12px59 font: 500 / 0.8125rem60charts:61 variant: "thin-bars"62 stroke_width: 1.2563 fill_opacity: 0.0564 gridlines: true65 bar_gap: 6px66 highlight: single67 dot_marker: false68fonts_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 Admin73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Atlas Admin** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 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 recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 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 tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 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#### Tabs127 128Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill.129 130#### Charts131 132- Bar/line variant: `thin-bars`133- Highlight strategy: `single` — emphasize a single bar/point per chart.134 135#### Typography pairings136 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 constraints142 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 — verify152 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. Atmosphere165 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 spacing172- IBM Plex Mono with `font-variant-numeric: tabular-nums` on every ID, count, timestamp, percentage173- Steel-blue `#3a5a7e` only on active module pane border + active sidebar item + focus ring174- Boxed tabs (5px radius, 1px hairline) — the tmux-pane voice for module switching175- Cool bone-grey `#f1f3f6` page → pure white card — tonal-shift, no shadow drama176 177## 2. Palette178 179### Surfaces180- **Bone Grey** `#f1f3f6` — page background (cool fine off-white)181- **Card** `#ffffff` — elevated surface, primary card182- **Header** `#e6e9ed` — table headers, sidebar background183 184### Ink185- **Ink** `#0f1419` — text, headings, primary CTA fill (cool near-black, slight blue undertone)186- **Ink 60** `#5a626c` — secondary text, mono labels187- **Hairline** `rgba(15,20,25,0.08)` — every divider, every card edge188 189### Accent190- **Steel** `#3a5a7e` — active module pane border, active sidebar item, focus ring191- **Steel Soft** `rgba(58,90,126,0.10)` — hovered sidebar item, focus ring background192 193### Status (semantic only — never UI accent)194- Success `#1f7a4d` · Warn `#b3801f` · Error `#a3331f` — used only on actual status badges195 196## 3. Typography197 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. Buttons213 214### Primary (Ink Compact)215```css216background: #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 size227 228### Outline & Ghost229- Outline: transparent, 1px hairline at 18% ink230- Ghost: no border, ink-60, hover lifts to ink231 232## 5. Cards233 234```css235background: #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. Charts244 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. Tabs248 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. Spacing252 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 density256 257## 9. Do's & don'ts258 259✅ **Do**260- Use 14px body — admin consoles need density, not marketing spacing261- Use IBM Plex Mono with tabular-nums on every ID, count, percentage, timestamp262- Reserve steel for active module pane border + active sidebar item + focus ring263- Hold status colors (success/warn/error) to actual status badges only — never as UI accent264 265❌ **Don't**266- Use 16px+ body — admin tables become wasteful and require more scroll267- Use a second UI accent — steel alone, on three specific surfaces268- 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 depth270 271---272 273## Tokens274 275> Generated from the same source the live preview renders from.276> Treat the values below as the contract — never substitute approximations.277 278### Colors279 280| Role | Value |281|-----------|-------|282| primary | `#0f1419` |283| secondary | `#5a626c` |284| tertiary | `#0f1419` |285| neutral | `#e6e9ed` |286| surface | `#f1f3f6` |287 288### Typography289 290- **Display:** Inter291- **Body:** Inter292- **Mono:** IBM Plex Mono293 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### Radius302 303- sm: `3px`304- md: `5px`305- lg: `7px`306- pill: `9999px`307 308### Shadows309 310- **card:** `rgba(15,20,25,0.04) 0 1px 2px`311- **button:** `none`312 313### Borders314 315- **card:** `1px solid rgba(15,20,25,0.08)`316- **divider:** `rgba(15,20,25,0.08)`317 318### Buttons319 320Four variants, each fully tokenized. The preview renders from these exact values.321 322#### Primary323 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#### Secondary335 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#### Outline347 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#### Ghost359 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### Charts371 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 # 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.<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" />npm install lucide-react// tailwind.config.jsexport 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', }, }, },};Warm cream parchment canvas, humanist variable sans, opacity-driven gray scale, and the signature inset-shadow dark pill — quiet craft over cold tech.
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.
A multi-stop pastel gradient runs across the page — desaturated lavender, peach, seafoam, cream — every stop at ~25% chroma so it reads as soft sorbet rather than rainbow. Pure paper-white cards, ink text, hairlines. Calm and considered.
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.