Dark-mode-native developer platform. Emerald (#3ecf8e) as identity marker, 1.00 line-height hero, depth from layered borders not shadows, mono uppercase labels.
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: "DBase Console"3description: "Dark-mode-native developer platform. Emerald (#3ecf8e) as identity marker, 1.00 line-height hero, depth from layered borders not shadows, mono uppercase labels."4tags: [developer, dark, minimal, saas]5colors:6 primary: "#fafafa"7 secondary: "#b4b4b4"8 tertiary: "#3ecf8e"9 neutral: "#171717"10 surface: "#0f0f0f"11typography:12 display: Manrope13 body: Manrope14 mono: "Source Code Pro"15 scale:16 hero: "4.5rem / 1 / 400 / 0"17 h1: "3rem / 1 / 400 / 0"18 h2: "2.25rem / 1.25 / 400 / 0"19 body: "1rem / 1.5 / 400 / 0"20radius:21 sm: 6px22 md: 8px23 lg: 16px24 pill: 9999px25shadows:26 button: "rgba(0,0,0,0.1) 0 4px 12px"27borders:28 card: "1px solid #2e2e2e"29 divider: "#242424"30buttons:31 primary:32 background: #0f0f0f33 color: #fafafa34 border: 1px solid #fafafa35 shape: pill36 padding: 10px 32px37 font: 50038 secondary:39 background: #0f0f0f40 color: rgba(250,250,250,0.8)41 border: 1px solid #2e2e2e42 shape: pill43 padding: 10px 32px44 font: 50045 outline:46 background: transparent47 color: #3ecf8e48 border: 1px solid rgba(62,207,142,0.3)49 shape: pill50 padding: 10px 32px51 font: 50052 ghost:53 background: transparent54 color: #b4b4b455 border: 1px solid transparent56 shape: rounded57 padding: 8px 12px58 font: 50059charts:60 variant: area61 stroke_width: 262 fill_opacity: 0.1863 gridlines: true64 highlight: all65 dot_marker: true66 axis_color: "#898989"67fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Source+Code+Pro:wght@400;500&display=swap"68dependencies: ["lucide-react"]69---70 71# DBase Console72 73## AI Build Instructions74 75> **Read this section before writing any code.** The rules below76> are non-negotiable. Every value used in the UI must come from this77> file's frontmatter — never substitute, approximate, or invent new78> colors, fonts, radii, or shadows. If a value is missing, ask the79> user before adding one.80 81### 1 · Your role82 83You are building UI for a project that has adopted **DBase Console** as its84design system. Treat `DESIGN.md` as the single source of truth.85Your job is to translate the user's product requirements into86components and pages that look like they were designed by the same87person who authored this file.88 89### 2 · Token compliance90 91- Pull every color, font family, radius, shadow, and spacing value92 from the frontmatter at the top of this file.93- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never94 hard-code hex values that bypass the system.95- When a token can be expressed as a CSS variable, declare it once96 in your global stylesheet and reference it everywhere downstream.97- The Google Fonts `<link>` is provided in the Typography section.98 Add it to `<head>` before any component renders.99 100### 3 · Component recipes101 102Use these recipes verbatim when building the corresponding component.103 104#### Buttons105 106Four variants are defined. Pick one — never blend variants or invent a fifth.107 108- **Primary** — pill shape, bg `#0f0f0f`, text `#fafafa`, border `1px solid #fafafa`, padding `10px 32px`, weight `500`.109- **Secondary** — pill shape, bg `#0f0f0f`, text `rgba(250,250,250,0.8)`, border `1px solid #2e2e2e`, padding `10px 32px`, weight `500`.110- **Outline** — pill shape, text `#3ecf8e`, border `1px solid rgba(62,207,142,0.3)`, padding `10px 32px`, weight `500`.111- **Ghost** — rounded shape, text `#b4b4b4`, border `1px solid transparent`, padding `8px 12px`, weight `500`.112 113Reach for **primary** as the single dominant CTA per screen.114**Secondary** for the supporting action. **Outline** for tertiary115actions in toolbars. **Ghost** for inline links and table actions.116 117#### Cards118 119- Background: `#0f0f0f`120- Border: `1px solid #2e2e2e`121- Radius: `radius.lg` (`16px`)122- Internal padding: `20px` for compact cards, `24–28px` for content cards.123 124#### Tabs125 126Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill.127Tabs are uppercased with `0.08em` tracking.128 129#### Charts130 131- Bar/line variant: `area`132- Highlight strategy: `all` — emphasize a single bar/point per chart.133 134#### Typography pairings135 136- **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks.137- **Body (`Manrope`)** — paragraphs, labels, button text, form inputs.138- **Mono (`Source Code Pro`)** — code, eyebrows, metadata, numerals in tables.139 140### 4 · Hard constraints141 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 — verify151 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## 1. Atmosphere164 165DBase Console is a dark-mode-native developer platform that channels the aesthetic of a premium code editor — deep blacks (`#0f0f0f`, `#171717`) with an emerald accent (`#3ecf8e`, `#00c573`) that reads as Postgres-green identity, never decoration. The system feels like it was born in a terminal window and matured into a marketing surface without losing its developer soul.166 167The display typography runs on a geometric sans with rounded terminals (humanizing the technical edge), compressed to a **1.00 line-height** at hero scale — text packed to its absolute minimum vertical space, dense and purposeful like a CLI command. A monospace companion (Source Code Pro) appears sparingly in **uppercase with 1.2px letter-spacing**, marking the "developer console" voice that ties marketing to product.168 169What distinguishes DBase Console is its **HSL+alpha layered border system**. Instead of shadows, depth is created through translucent border hierarchies — `#242424` (barely visible) → `#2e2e2e` (standard) → `#363936` (prominent), capped by an emerald `rgba(62,207,142,0.3)` for branded elevation. The brand color itself becomes the elevation signal.170 171**Signature moves**172- Dark-mode-native: never pure black, always `#0f0f0f` / `#171717`173- Emerald (`#3ecf8e`) as identity marker, used sparingly174- Hero line-height **1.00** — zero leading, terminal density175- Source Code Pro uppercase with 1.2px tracking — developer console labels176- Pill buttons (9999px) for primary CTAs, 6px radius for ghosts177- **Layered borders, not shadows** — depth from line not blur178- Weight 400 dominant; weight 500 only on nav and buttons179- HSL+alpha translucent layering for atmospheric depth180 181## 2. Palette182 183### Brand184- **DBase Green** `#3ecf8e` — logo, accent borders185- **Link Green** `#00c573` — interactive green186- **Emerald Border** `rgba(62,207,142,0.3)` — accent containment187 188### Neutral Scale (Dark)189- Near Black `#0f0f0f` · Page Dark `#171717`190- Border progression `#242424` → `#2e2e2e` → `#363636` → `#393939`191- Text scale: Mid `#898989` · Light `#b4b4b4` · Off-White `#fafafa`192 193### Surface & Overlay194- Glass Dark `rgba(41,41,41,0.84)`195- Slate Alpha `hsla(210,87.8%,16.1%,0.031)`196 197## 3. Typography198 199| Role | Font | Size | Weight | Leading | Tracking |200|------|------|------|--------|---------|----------|201| Display Hero | Display | 72px | 400 | **1.00** | 0 |202| Section | Display | 36px | 400 | 1.25 | 0 |203| Card title | Display | 24px | 400 | 1.33 | -0.16px |204| Sub-heading | Display | 18px | 400 | 1.56 | 0 |205| Body | Display | 16px | 400 | 1.50 | 0 |206| Nav / Button | Display | 14px | 500 | 1.00–1.43 | 0 |207| Caption | Display | 14px | 400–500 | 1.43 | 0 |208| Code Label | Mono | 12px | 400 | 1.33 | +1.2px UPPERCASE |209 210**Weight 400 dominates.** Hierarchy from size, not weight. Hero leading 1.00 is the signature — the terminal density.211 212## 4. Buttons213 214### Primary Pill (Dark)215```css216background: #0f0f0f;217color: #fafafa;218padding: 10px 32px;219border-radius: 9999px;220border: 1px solid #fafafa;221```222 223### Secondary Pill224- Same shape, border `1px solid #2e2e2e`, opacity 0.8225 226### Ghost227- Transparent, 6px radius, 1px transparent border228 229## 5. Cards230- Background `#171717` (or slightly lighter)231- Border `1px solid #2e2e2e`232- Radius 8–16px233- **No shadow** — border is the edge234 235## 6. Charts236**Emerald area chart with dashed gridlines and end-of-line dot marker** — a live-deploy/console aesthetic. The 18% fill opacity creates a glow rather than a fill. Axis labels in muted gray (`#898989`).237 238## 7. Spacing239- Base 8px240- Scale: `1, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 90, 96, 128`241- Section spacing 90–128px — cinematic dark-void pacing242 243## 8. Depth & elevation244 245| Level | Treatment | Use |246|-------|-----------|-----|247| 0 | Border `#2e2e2e` | Default |248| 1 | Border `#363636` | Hover |249| 2 | `rgba(0,0,0,0.1) 0 4px 12px` | Focus only |250| 3 | Border `rgba(62,207,142,0.3)` | Brand-elevated |251 252**Borders are the depth system.** Shadows are nearly invisible on dark canvas anyway.253 254## 9. Do's & don'ts255 256✅ **Do**257- Use `#0f0f0f` / `#171717` — never pure black258- Apply emerald (`#3ecf8e`) sparingly as identity marker259- Set hero line-height to 1.00 — the typographic signature260- Build depth through border hierarchy261- Use pill (9999px) for primary, 6px for ghost — no in-between262 263❌ **Don't**264- Add box-shadows — invisible on dark, breaks border depth265- Use bold (700) — system is 400 / 500 only266- Apply emerald to large backgrounds — borders/links/small accents only267- Lighten background above `#171717` — darkness is structural268- Increase hero leading above 1.00 — density is intentional269 270---271 272## Tokens273 274> Generated from the same source the live preview renders from.275> Treat the values below as the contract — never substitute approximations.276 277### Colors278 279| Role | Value |280|-----------|-------|281| primary | `#fafafa` |282| secondary | `#b4b4b4` |283| tertiary | `#3ecf8e` |284| neutral | `#171717` |285| surface | `#0f0f0f` |286 287### Typography288 289- **Display:** Manrope290- **Body:** Manrope291- **Mono:** Source Code Pro292 293| Role | size / leading / weight / tracking |294|------|------------------------------------|295| Hero | 4.5rem / 1 / 400 / 0 |296| H1 | 3rem / 1 / 400 / 0 |297| H2 | 2.25rem / 1.25 / 400 / 0 |298| Body | 1rem / 1.5 / 400 / 0 |299 300### Radius301 302- sm: `6px`303- md: `8px`304- lg: `16px`305- pill: `9999px`306 307### Shadows308 309- **button:** `rgba(0,0,0,0.1) 0 4px 12px`310 311### Borders312 313- **card:** `1px solid #2e2e2e`314- **divider:** `#242424`315 316### Buttons317 318Four variants, each fully tokenized. The preview renders from these exact values.319 320#### Primary321 322| Property | Value |323|----------|-------|324| shape | `pill` |325| background | `#0f0f0f` |326| color | `#fafafa` |327| border | `1px solid #fafafa` |328| padding | `10px 32px` |329| fontWeight | `500` |330 331#### Secondary332 333| Property | Value |334|----------|-------|335| shape | `pill` |336| background | `#0f0f0f` |337| color | `rgba(250,250,250,0.8)` |338| border | `1px solid #2e2e2e` |339| padding | `10px 32px` |340| fontWeight | `500` |341 342#### Outline343 344| Property | Value |345|----------|-------|346| shape | `pill` |347| background | `transparent` |348| color | `#3ecf8e` |349| border | `1px solid rgba(62,207,142,0.3)` |350| padding | `10px 32px` |351| fontWeight | `500` |352 353#### Ghost354 355| Property | Value |356|----------|-------|357| shape | `rounded` |358| background | `transparent` |359| color | `#b4b4b4` |360| border | `1px solid transparent` |361| padding | `8px 12px` |362| fontWeight | `500` |363 364### Charts365 366| Property | Value |367|----------|-------|368| variant | `area` |369| strokeWidth | `2` |370| fillOpacity | `0.18` |371| gridlines | `true` |372| highlight | `all` |373| dotMarker | `true` |374| axisColor | `#898989` |375 # 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=Manrope:wght@400;500;600&family=Source+Code+Pro:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Manrope"', 'serif'], sans: ['"Manrope"', 'sans-serif'], mono: ['"Source Code Pro"', 'monospace'], }, colors: { primary: '#fafafa', secondary: '#b4b4b4', accent: '#3ecf8e', neutral: '#171717', surface: '#0f0f0f', }, borderRadius: { sm: '6px', md: '8px', lg: '16px', }, }, },};A music platform that sounds like late-night radio looks. Deep charcoal surfaces with a faint vertical warmth, Instrument Serif italic for album titles, Inter for everything else, a single burnt-amber accent reserved for the now-playing state. Built for music streaming, label sites, and audio products that want warmth in the dark without leaning on neon.
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.