Design Md Author

{
  "type": "object",
  "properties": {
    "product_name": {
      "type": "string"
    },
    "reference_url": {
      "type": "string"
    },
    "brief": {
      "type": "string"
    },
    "vibe": {
      "type": "string"
    }
  },
  "required": [
    "product_name"
  ]
}

{
  "type": "object",
  "properties": {
    "design_md": {
      "type": "string",
      "description": "Full Markdown DESIGN.md document."
    }
  },
  "required": [
    "design_md"
  ]
}

product_name: "Northwind"
reference_url: "https://linear.app"
vibe: "calm, monochrome, dense, keyboard-first"

# Northwind — DESIGN.md

## Overview
Northwind is a keyboard-first issue tracker for small product teams. The
design is calm, monochrome, and dense — fewer pixels, more signal.

## Brand Voice
- Direct, lowercase, never exclamatory.
- Do: "23 issues open." Don't: "You have 23 amazing issues!"

## Color
| Token            | Light    | Dark     |
|------------------|----------|----------|
| bg.canvas        | #FBFBFD  | #0B0B0F  |
| bg.surface       | #FFFFFF  | #14141A  |
| fg.default       | #0B0B0F  | #ECECEE  |
| fg.muted         | #6B6B73  | #8A8A93  |
| accent.primary   | #5E6AD2  | #7A86F0  |
| border.subtle    | #ECECEE  | #23232B  |

## Typography
Inter (UI), JetBrains Mono (code). Fallbacks: system-ui, monospace.

| Style   | Size  | Line | Weight |
|---------|-------|------|--------|
| h1      | 28px  | 34px | 600    |
| body    | 14px  | 20px | 400    |
| caption | 12px  | 16px | 500    |

## Spacing & Layout
Base 4px. Scale: 4, 8, 12, 16, 24, 32, 48. Max content width 1200px.
Breakpoints: sm 640, md 768, lg 1024, xl 1280.

## Radii & Elevation
Radii: 4, 6, 8. Shadows: sm `0 1px 2px rgba(0,0,0,.06)`,
md `0 4px 12px rgba(0,0,0,.08)`.

## Motion
Durations: 120ms (micro), 200ms (default), 320ms (page).
Easing: `cubic-bezier(.2,.8,.2,1)`. Respect `prefers-reduced-motion`.

## Iconography & Imagery
Lucide icons, 1.5px stroke, 16px default. No illustrations; use empty-state
glyphs only.

## Components
### Button
Variants: primary, secondary, ghost, danger. Sizes: sm (28px), md (32px).
States: default `bg=accent.primary fg=#fff`, hover `+4% lightness`,
active `-4%`, focus `2px accent.primary ring`, disabled `opacity .5`.

### Input
32px tall, 1px border.subtle, focus ring matches Button.

## Patterns
Empty states: monochrome glyph + 1 sentence + 1 primary action.

## Accessibility
WCAG AA contrast minimum. 2px focus ring on all interactives. 44px min hit
target on touch.

## Don'ts
- No gradients, no drop shadows on text, no emoji in product UI.

_Generated DESIGN.md — drop at project root._

product_name: "Ember"
brief: "B2C journaling app for late-night writers."
vibe: "warm, paper-like, serif headings, soft contrast"

# Ember — DESIGN.md

## Overview
Ember is a journaling app for late-night writers. The design feels like
warm paper under a desk lamp: soft contrast, serif headings, generous
spacing.

## Brand Voice
Quiet, second-person, never gamified. Do: "Saved." Don't: "Streak +1 🔥".

## Color
| Token          | Light   | Dark    |
|----------------|---------|---------|
| bg.canvas      | #FAF6EE | #1A1714 |
| fg.default     | #2A2520 | #EFE8DC |
| accent.primary | #B5532A | #E07A48 |
| border.subtle  | #E7DFD0 | #2C2620 |

## Typography
Headings: "Source Serif 4". Body: "Inter".

| Style | Size | Line | Weight |
|-------|------|------|--------|
| h1    | 32px | 40px | 500    |
| body  | 17px | 28px | 400    |

## Spacing & Layout
Base 8px. Scale: 8, 16, 24, 40, 64. Single column, max 680px reading width.

## Radii & Elevation
Radii: 8, 12. Shadows reserved for floating menus only.

## Motion
200ms ease-out across the board. Page transitions cross-fade.

## Iconography & Imagery
Phosphor icons, regular weight. No stock photography.

## Components
### Button
Variants: primary (accent.primary bg), text. Sizes: md (40px).
States: hover `bg darken 6%`, focus `2px accent.primary ring`,
disabled `opacity .4`.

### Editor
No toolbar; markdown shortcuts only. Caret color = accent.primary.

## Patterns
Empty state: a single faint serif prompt centered on the page.

## Accessibility
Contrast ≥ 4.5:1 for body. Focus visible at all times.

## Don'ts
- No streaks, badges, confetti, or notifications-by-default.

_Generated DESIGN.md — drop at project root._