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', }, }, },};Pure black void with frost-blue borders. Editorial serif hero, geometric sans sections, pill CTAs, and a multi-color accent system that performs against the dark.
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.
Modern AI product surface without the clichés. Geist sans across the board, Geist Mono for prompts and metrics, very fine off-white surfaces with a 1px white inset highlight, a single muted electric-indigo accent reserved for the assistant's response state. Built for AI-first products that want to feel premium without leaning on rainbow gradients.
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.