Billboard-scale fintech. Geometric grotesque at -2.72px tracking, universal pill buttons with generous padding, zero shadows — depth through dark/light alternation only.
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: "Stadium Bank"3description: "Billboard-scale fintech. Geometric grotesque at -2.72px tracking, universal pill buttons with generous padding, zero shadows — depth through dark/light alternation only."4tags: [fintech, minimal, premium, bold, modern]5colors:6 primary: "#191c1f"7 secondary: "#505a63"8 tertiary: "#191c1f"9 neutral: "#f4f4f4"10 surface: "#ffffff"11typography:12 display: "Space Grotesk"13 body: Inter14 mono: "JetBrains Mono"15 scale:16 hero: "5.5rem / 1 / 500 / -2.72px"17 h1: "3rem / 1 / 500 / -1.5px"18 h2: "2.5rem / 1.21 / 500 / -0.48px"19 body: "1rem / 1.5 / 400 / 0.24px"20radius:21 sm: 8px22 md: 12px23 lg: 20px24 pill: 9999px25shadows:26borders:27 card: none28 divider: "#c9c9cd"29buttons:30 primary:31 background: #191c1f32 color: #ffffff33 border: none34 shape: pill35 padding: 14px 32px36 font: display / 50037 secondary:38 background: #f4f4f439 color: #00000040 border: none41 shape: pill42 padding: 14px 34px43 font: display / 50044 outline:45 background: transparent46 color: #191c1f47 border: 2px solid #191c1f48 shape: pill49 padding: 12px 30px50 font: display / 50051 ghost:52 background: rgba(244,244,244,0.1)53 color: #191c1f54 border: 2px solid #191c1f55 shape: pill56 padding: 12px 26px57 font: display / 50058charts:59 variant: bars60 stroke_width: 261 fill_opacity: 062 gridlines: false63 bar_radius: "4px 4px 0 0"64 bar_gap: 10px65 highlight: single66 dot_marker: false67fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap"68dependencies: ["lucide-react"]69---70 71# Stadium Bank72 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 **Stadium Bank** 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 `#191c1f`, text `#ffffff`, padding `14px 32px`, weight `500`.109- **Secondary** — pill shape, bg `#f4f4f4`, text `#000000`, padding `14px 34px`, weight `500`.110- **Outline** — pill shape, text `#191c1f`, border `2px solid #191c1f`, padding `12px 30px`, weight `500`.111- **Ghost** — pill shape, bg `rgba(244,244,244,0.1)`, text `#191c1f`, border `2px solid #191c1f`, padding `12px 26px`, 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: `#ffffff`120- Border: `none`121- Radius: `radius.lg` (`20px`)122- Internal padding: `20px` for compact cards, `24–28px` for content cards.123 124#### Charts125 126- Bar/line variant: `bars`127- Bar radius: `4px 4px 0 0`128- No gridlines — let the bars/lines carry the data.129- Highlight strategy: `single` — emphasize a single bar/point per chart.130 131#### Typography pairings132 133- **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks.134- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.135- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.136 137### 4 · Hard constraints138 139Never do any of the following without explicit instruction from the user:140 141- Introduce a new color, font, radius, or shadow that isn't declared above.142- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).143- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.144- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.145- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.146 147### 5 · Before you finish — verify148 149Run through this checklist for every screen you produce:150 151- [ ] Every color used appears in the Colors table above.152- [ ] Headlines use the display font; body copy uses the body font.153- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).154- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.155- [ ] Cards and dividers use the declared border + shadow tokens.156- [ ] No values were invented; if you needed something missing, you stopped and asked.157 158---159 160## 1. Atmosphere161 162Stadium Bank is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on a geometric grotesque that creates billboard-scale headlines at 88–136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.163 164The marketing surface is remarkably restrained — near-black (`#191c1f`) and pure white (`#ffffff`) dominate. The colorful semantic tokens (teal, blue, deep-pink, brown) are reserved for the product interface, not the marketing page. The result is a binary that lets typography and whitespace carry the entire story.165 166What distinguishes Stadium Bank is its **pill-everything button system**. Every button uses 9999px radius — primary dark, secondary light, outlined, and ghost on dark. The padding is generous (14px 32–34px), creating large, confident touch targets. Combined with Inter for body text at positive letter-spacing (0.16–0.24px), the result feels both premium and accessible.167 168**Signature moves**169- Geometric grotesque at weight 500 — never bold, authority comes from size + tracking170- Aggressive negative tracking: -2.72px at 88px, -1.5px at 48px171- Universal pill buttons (9999px) with generous 14×32 padding172- Inter body at +0.16–0.24px tracking — airy, well-spaced reading173- **Zero shadows** — depth from color contrast and whitespace only174- Tight display line-heights (1.00) with relaxed body (1.50–1.56)175- Dark/light section alternation as the primary depth mechanism176 177## 2. Palette178 179### Primary180- **Stadium Dark** `#191c1f` — primary surface, button background, near-black text181- **Pure White** `#ffffff` — page surface, label on dark182- **Light Surface** `#f4f4f4` — secondary button, subtle surface183 184### Brand185- **Stadium Blue** `#494fdf` — primary brand blue186- **Action Blue** `#4f55f1` — header accent187- **Link Blue** `#376cd5` — link text188 189### Semantic190- Danger `#e23b4a` · Deep Pink `#e61e49`191- Warning `#ec7e00` · Yellow `#b09000`192- Teal `#00a87e` · Light Green `#428619` · Green Text `#006400`193- Light Blue `#007bc2` · Brown `#936d62`194 195### Neutrals196- Mid Slate `#505a63` — secondary text197- Cool Gray `#8d969e` — tertiary198- Gray Tone `#c9c9cd` — borders, dividers199 200## 3. Typography201 202| Role | Size | Weight | Leading | Tracking |203|------|------|--------|---------|----------|204| Display Mega | 136px | 500 | 1.00 | -2.72px |205| Display Hero | 80px | 500 | 1.00 | -0.8px |206| Section | 48px | 500 | 1.21 | -0.48px |207| Sub-heading | 40px | 500 | 1.20 | -0.4px |208| Card title | 32px | 500 | 1.19 | -0.32px |209| Feature title | 24px | 400 | 1.33 | normal |210| Nav / UI | 20px | 500 | 1.40 | normal |211| Body Large | 18px | 400 | 1.56 | -0.09px |212| Body | 16px | 400 | 1.50 | +0.24px |213| Body Semibold | 16px | 600 | 1.50 | +0.16px |214| Body Bold Link | 16px | 700 | 1.50 | +0.24px |215 216**Weight 500 is the display default.** No bold for headings — authority comes from size and aggressive negative tracking, not weight stacks. The contrast: compressed display, airy body. Inter's body tracking is *positive* (+0.16–0.24px), creating an unmistakable reading rhythm.217 218## 4. Buttons219 220### Primary Dark Pill221```css222background: #191c1f;223color: #ffffff;224padding: 14px 32px;225border-radius: 9999px;226```227Hover: opacity 0.85.228 229### Secondary Light Pill230- Background `#f4f4f4`, text `#000000`231- 14px 34px padding, 9999px radius232 233### Outlined Pill234- Transparent background, `#191c1f` text235- `2px solid #191c1f`, 9999px radius236 237### Ghost on Dark238- `rgba(244,244,244,0.1)` background, `#f4f4f4` text239- `2px solid #f4f4f4`, 9999px radius240 241## 5. Cards242 243- Background: `#ffffff` or `#f4f4f4`244- **No border, no shadow** — flat surfaces only245- Radius: 12px (small) or 20px (cards)246- Containment via dark/light section alternation247 248## 6. Charts249 250Big confident bars, single highlighted maximum bar in stadium dark. **No gridlines** — flat by design, just like the rest of the system. The chart card itself has no border or shadow — it sits as a plain block on its section background.251 252## 7. Spacing253 254- Base: 8px255- Scale: `4, 6, 8, 14, 16, 20, 24, 32, 40, 48, 80, 88, 120`256- Section vertical: 80–120px257 258## 8. Depth & elevation259 260| Level | Treatment | Use |261|-------|-----------|-----|262| 0 | Flat | Everything |263| Focus | `0 0 0 0.125rem` ring | Accessibility only |264 265**Zero-shadow philosophy.** Stadium Bank uses no drop shadows anywhere. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.266 267## 9. Do's & don'ts268 269✅ **Do**270- Use weight 500 for all display headings — never bold271- Apply 9999px radius to *every* button — pill is universal272- Use generous button padding (14×32 minimum)273- Keep marketing surfaces to near-black + white binary274- Apply positive letter-spacing (+0.16–0.24px) on Inter body275 276❌ **Don't**277- Use shadows — Stadium Bank is flat by design278- Use weight 700 for display — 500 is the ceiling279- Use small buttons — generous padding is intentional280- Apply semantic colors (teal, deep pink, etc.) to marketing surfaces281- Use rectangular CTAs — pills only282 283---284 285## Tokens286 287> Generated from the same source the live preview renders from.288> Treat the values below as the contract — never substitute approximations.289 290### Colors291 292| Role | Value |293|-----------|-------|294| primary | `#191c1f` |295| secondary | `#505a63` |296| tertiary | `#191c1f` |297| neutral | `#f4f4f4` |298| surface | `#ffffff` |299 300### Typography301 302- **Display:** Space Grotesk303- **Body:** Inter304- **Mono:** JetBrains Mono305 306| Role | size / leading / weight / tracking |307|------|------------------------------------|308| Hero | 5.5rem / 1 / 500 / -2.72px |309| H1 | 3rem / 1 / 500 / -1.5px |310| H2 | 2.5rem / 1.21 / 500 / -0.48px |311| Body | 1rem / 1.5 / 400 / 0.24px |312 313### Radius314 315- sm: `8px`316- md: `12px`317- lg: `20px`318- pill: `9999px`319 320### Shadows321 322 323### Borders324 325- **card:** `none`326- **divider:** `#c9c9cd`327 328### Buttons329 330Four variants, each fully tokenized. The preview renders from these exact values.331 332#### Primary333 334| Property | Value |335|----------|-------|336| shape | `pill` |337| background | `#191c1f` |338| color | `#ffffff` |339| border | `none` |340| padding | `14px 32px` |341| fontFamily | `display` |342| fontWeight | `500` |343 344#### Secondary345 346| Property | Value |347|----------|-------|348| shape | `pill` |349| background | `#f4f4f4` |350| color | `#000000` |351| border | `none` |352| padding | `14px 34px` |353| fontFamily | `display` |354| fontWeight | `500` |355 356#### Outline357 358| Property | Value |359|----------|-------|360| shape | `pill` |361| background | `transparent` |362| color | `#191c1f` |363| border | `2px solid #191c1f` |364| padding | `12px 30px` |365| fontFamily | `display` |366| fontWeight | `500` |367 368#### Ghost369 370| Property | Value |371|----------|-------|372| shape | `pill` |373| background | `rgba(244,244,244,0.1)` |374| color | `#191c1f` |375| border | `2px solid #191c1f` |376| padding | `12px 26px` |377| fontFamily | `display` |378| fontWeight | `500` |379 380### Charts381 382| Property | Value |383|----------|-------|384| variant | `bars` |385| strokeWidth | `2` |386| fillOpacity | `0` |387| gridlines | `false` |388| barRadius | `4px 4px 0 0` |389| barGap | `10px` |390| highlight | `single` |391| dotMarker | `false` |392 # 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=Space+Grotesk:wght@400;500;600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Space Grotesk"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#191c1f', secondary: '#505a63', accent: '#191c1f', neutral: '#f4f4f4', surface: '#ffffff', }, borderRadius: { sm: '8px', md: '12px', lg: '20px', }, }, },};A precision dark dev-tool surface. Near-black background, every divider a single 1px hairline at 8% white, Inter Display for headings and Geist Mono for IDs and timestamps with tabular-nums, a single electric mint accent reserved for active status pills and the primary CTA. Built for infrastructure dashboards, observability tools, and developer-platform marketing pages where the chrome itself reads as a precision instrument.
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.
Light glass. Pale daylight canvas with a soft mesh aurora behind it; cards float as frosted panes with a 28px backdrop-blur and faint inset highlight. Depth without the weight of dark mode.
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.