---
version: alpha
name: Your Brand
description: One line on how the product should feel.
colors:
  primary: "#2F6FEB"
  on-primary: "#FFFFFF"
  surface: "#FAFAFA"
  surface-container: "#FFFFFF"
  on-surface: "#18181B"
  on-surface-variant: "#71717A"
  outline: "#E4E4E7"
  error: "#B42318"
  on-error: "#FFFFFF"
  success: "#1F7A45"
  on-success: "#FFFFFF"
typography:
  h1:
    fontFamily: Inter
    fontSize: 2.5rem
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  h2:
    fontFamily: Inter
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: 1.25
  body-md:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: Inter
    fontSize: 0.75rem
    fontWeight: 600
    letterSpacing: 0.06em
  mono:
    fontFamily: JetBrains Mono
    fontSize: 0.875rem
    fontWeight: 400
rounded:
  sm: 6px
  md: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: 12px
  button-primary-hover:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: 12px
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: 12px
  caption:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface-variant}"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-success}"
    rounded: "{rounded.full}"
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-error}"
    rounded: "{rounded.full}"
---

## Overview

Two or three sentences on the personality of the product: who uses it, where, and what it should feel like. An agent reads this first, so lead with what matters most.

## Colors

| Token | Hex | Role |
|-------|-----|------|
| primary | #2F6FEB | The one thing to click: primary buttons, links, focus |
| on-primary | #FFFFFF | Text and icons on primary |
| surface | #FAFAFA | Page background |
| surface-container | #FFFFFF | Cards, inputs, panels |
| on-surface | #18181B | Headlines and body text |
| on-surface-variant | #71717A | Supporting copy and labels |
| outline | #E4E4E7 | Borders and dividers |
| error | #B42318 | Errors and destructive actions |
| success | #1F7A45 | Confirmations |

Use primary sparingly: one primary action per screen.

## Typography

Inter for everything readable, JetBrains Mono for numbers and code. Headlines are tight and bold; body text is relaxed and never smaller than 16px.

## Layout

- **Max width:** 1200px for app screens, 720px for reading
- **Spacing:** use the spacing scale only (4, 8, 16, 32, 64)
- **Grid:** 12 columns on desktop, 4 on mobile, 16px gutters

## Elevation & Depth

Mostly flat. Separate surfaces with the outline color, not shadows. Use one soft shadow only for things that float: menus, dialogs, toasts.

## Shapes

Small radius (6px) for buttons and inputs, medium (12px) for cards, full for badges and avatars. Never mix rounded and square corners on the same screen.

## Components

- **Primary button:** primary fill, on-primary label, darkens to on-surface on hover
- **Secondary button:** surface-container fill, on-surface label, 1px outline
- **Card:** surface-container fill, 1px outline, 24px padding
- **Input:** surface-container fill, 1px outline, primary focus ring
- **Badges:** success or error fill, full radius, label type

## Do's and Don'ts

- Do keep one primary action per screen.
- Do write labels in sentence case.
- Don't use pure black (#000000) for text; use on-surface.
- Don't add gradients or glows unless this file says so.