# DESIGN.md

> A machine-readable design identity for {Brand Name}.
> Built on the [getdesign.md](https://getdesign.md/) spec — drop this file into your repo so coding agents can build matching UI.

## 1 · Brand at a glance

| | |
|---|---|
| **Brand name** | {Your brand name} |
| **One-line description** | {What you make, in one sentence} |
| **Audience** | {Who you're building for} |
| **Tone** | {3 adjectives — e.g. precise, playful, generous} |
| **Anti-tone** | {3 adjectives to avoid — e.g. corporate, ironic, cold} |
| **Reference brands** | {2–4 brands whose feel you admire} |

---

## 2 · Visual identity

### Background

- **Default surface**: `{hsl/hex}` — describe the role (e.g. "page canvas, full-bleed").
- **Card / panel surface**: `{hsl/hex}`.
- **Inverted surface (CTA wells, modal overlays)**: `{hsl/hex}`.

### Foreground

- **Primary text**: `{hsl/hex}`.
- **Secondary text**: `{hsl/hex}`.
- **Tertiary / disabled text**: `{hsl/hex}`.

### Highlight color

Pick **one** highlight color. Use it sparingly — for buttons, focus rings, brand glow, status indicators. Avoid using more than one accent hue.

- **Highlight**: `{hsl/hex}` — describe when it's allowed (e.g. "primary CTAs, active-state underlines, focus rings only").

### Borders & dividers

- **Default rule**: `{hsl/hex / opacity}` — 1px hairline.
- **Strong rule (section breaks)**: `{hsl/hex / opacity}`.
- **No double borders.** No shadows. No backdrop-blur.

---

## 3 · Typography

| Role | Family | Weight / Variant | Size scale | Notes |
|---|---|---|---|---|
| Display headline | {e.g. Bungee} | {700} | 44 / 64 / 80 px | Used once per page max — hero only. |
| Section headline | {e.g. Inter Tight} | {600} | 28 / 36 / 52 px | One per section. |
| Body | {e.g. DM Sans} | {400 / 500} | 14 / 16 / 18 px | Line-height 1.6. Default text color is primary. |
| Label / overline | {e.g. Space Mono} | {400} | 10 / 11 px | All-caps, tracking 0.24em. Used as eyebrows. |
| Code / data | {e.g. JetBrains Mono} | {400 / 500} | 12 / 14 px | Tabular numerals on. |

**Type rules:**
- Headlines reserve color for one accent word per heading.
- Body copy is always primary text color — never the highlight.
- All-caps is reserved for labels under 12px.

---

## 4 · Spatial system

- **Base unit**: 4px. All spacing snaps to multiples of 4.
- **Section padding**: 64 / 96 / 128px (mobile / tablet / desktop).
- **Container max-width**: {1280 / 1480 / 1680}px.
- **Grid**: 12-column on desktop, 4-column on mobile, 24px gutter.
- **Radius**: {0 / 2 / 6 / 12}px — pick one. Sharp corners (≤2px) and pill (≥999px) only.

---

## 5 · Components

### Buttons

- **Primary**: solid highlight, 12 / 18px padding, 13px label, 0.06em tracking, regular weight. No glow on default; subtle glow on hover.
- **Ghost**: 1px border at 22% foreground, no fill. Hover swaps border to highlight.
- **Sizes**: small (h-9), default (h-11), large (h-13).

### Chips / tags

- Flat. 1px border at 32% highlight. Background = secondary surface. Label in mono, 10px, uppercase, tracking 0.18em.

### Cards

- 1px hairline border at 20% highlight. Background = card surface. No shadow.
- Hover: border to 60% highlight. No transform.

### Inputs

- 1px border, transparent background, 14px label.
- Focus: border to highlight, no glow.

---

## 6 · Imagery & motion

- **Imagery direction**: {e.g. "atmospheric portraits, deep blue cast, high contrast"}.
- **Aspect ratios used**: 4/5 (portraits), 16/9 (wide), 3/4 (landing thumbnails), 1/1 (avatars).
- **Motion**: animations are reserved for state transitions (hover, focus, route change). No infinite loops. Respect `prefers-reduced-motion`.

---

## 7 · Voice

- **Sentence length**: short. Two short sentences beat one long one.
- **Verbs**: concrete. "Open the catalog" beats "Discover our suite of tools".
- **Jargon**: domain terms are fine; corporate jargon is not.
- **Numbers**: tabular-nums on, oxford comma on, em-dash for parentheticals.

---

## 8 · Don'ts

- No more than one highlight color per surface.
- No mixing display fonts. One display family, one body family.
- No backdrop-blur, no neumorphism, no soft drop-shadows.
- No icon + emoji + chip clutter inside a single label.
- No dark-pattern affordances (auto-renew defaults, hidden cancel, fake urgency).

---

*Generated from the [getdesign.md](https://getdesign.md/) starter template via Hadogen Production Studio.*