# Northwind design brief

Follow this brief for any interface, page or component built for Northwind. It records decisions made by the team, not suggestions. The live brand kit is at https://housestyle.rolln.ai/kit/demo.

## Direction

**Precise.** Crisp and engineered. Nothing decorative; every detail earns its place.

Keep the interface quiet and exact. Let alignment and type do the work, and add nothing for decoration.

- Clarity before personality.
- Fewer elements, used well.
- Every line and space is deliberate.

## Rules

- **Light or dark: Light.** Design light-first. A dark theme is optional and must be derived from the same scales.
- **Typeface: Geist.** Set everything in Geist, with Geist Mono for code, numbers and labels.
- **Accent color: Blue.** Blue is the only brand hue. Use it for primary actions, links and focus.
- **Neutral tone: Cool.** Use the cool gray scale for all neutral surfaces, borders and text.
- **Corners: Slightly rounded.** Round corners slightly: 4px on small controls, 6px on inputs and buttons, 8px on cards.
- **Spacing: Regular.** Use standard spacing: 44px table rows, 38px controls, 15px interface text.
- **Surfaces: Lines.** Separate surfaces with 1px borders. Do not use shadows.
- **Headline voice: Balanced.** Set headlines semibold with slightly tight tracking.
- **Use of color: Restrained.** Use the accent only for primary actions, links and focus. Surfaces stay neutral.
- **Landing page layout: Centered.** Open landing pages with a centered headline, a short lead, two buttons, and one wide visual below.
- **App layout: Sidebar.** Use a labeled left sidebar for app navigation, about 232px wide.
- **Imagery: The product.** Show the real product interface. Do not use stock photos or decorative illustration.
- **Conversation: Document.** Set assistant replies as plain text in a readable column, with no bubble. Put the person's message in a small muted bubble on the right.
- **Prompt box: Tool box.** Use a tall prompt box with a row of tools under the text: attach, search, model and send.
- **AI presence: Plain.** Give AI features no special styling. No sparkle icons, gradients or glow; say what they do in plain words.
- **Charts: Fine lines.** Draw charts with thin lines and dashed hairline grids. One series takes the accent; the rest are grays. No fills.

## Typography

- Headings: Geist, weight 600, letter-spacing -0.028em, line-height 1.06.
- Body and interface text: Geist, 15px in apps and 18px for lead paragraphs.
- Code, numbers in tables and small labels: Geist Mono.
- Sizes: display 62px, h1 44px, h2 32px, h3 20px, small 13px.
- Load only these families: Geist, Geist Mono. Stylesheet: https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap

## Color

- Mode: light. Background #ffffff, surface #ffffff, text #080b10, muted text #50545b, border #e0e5ed.
- Accent #196bd8 with #ffffff text on it. Hover #0953b1. Soft accent #e4effe with #033e89 text.
- Status: success #15803d, warning #b45309, danger #b91c1c. Always pair a status color with a label or icon.
- Use the accent and neutral scales below for anything else. Do not introduce new hues.

## Shape, space and depth

- Radius: 4px small, 6px medium, 8px large; buttons 6px.
- Spacing scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px. Controls are 38px tall, table rows 44px, page sections have 104px of vertical padding.
- Borders are 1px. Shadows: none.

## Components

- Buttons: primary is solid accent; secondary is a surface with a 1px border; ghost has no fill. One primary button per view.
- Inputs: surface fill, strong border, accent border with a soft ring on focus, danger border with a short message on error.
- Cards: surface fill with the border and shadow rules above. Badges use soft fills with a status dot.
- Tables: quiet header row, mono right-aligned numbers, status as a badge.

## AI and data

- Conversations: Set assistant replies as plain text in a readable column, with no bubble. Put the person's message in a small muted bubble on the right.
- Prompt box: Use a tall prompt box with a row of tools under the text: attach, search, model and send.
- AI features: Give AI features no special styling. No sparkle icons, gradients or glow; say what they do in plain words.
- Show what the assistant did before its answer (sources read, tools run) in one quiet line, and cite sources with numbered chips.
- Charts: Draw charts with thin lines and dashed hairline grids. One series takes the accent; the rest are grays. No fills.
- Chart series colors, in this order: #196bd8, #9ca1a9, #cfd4dc, #6f747a, #e0e5ed. Label series directly or with a legend; never rely on color alone.

## How this was decided

4 people compared options side by side, one decision at a time.

The team was divided on these, so treat them as open to change:

- Overall direction: Precise 2, Technical 1, Friendly 1.
- Surfaces: Soft shadows 2, Lines 2.
- Landing page layout: Centered 2, Split 2.
- Conversation: Document 2, Rows 1, Bubbles 1.
- AI presence: Spark 2, Plain 2.
- Charts: Soft fills 2, Fine lines 2.

## Tokens

```css
/* Northwind design tokens. Generated by House Style. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #eff4fc;
  --color-border: #e0e5ed;
  --color-border-strong: #cfd4dc;
  --color-text: #080b10;
  --color-text-muted: #50545b;
  --color-text-subtle: #6f747a;
  --color-accent: #196bd8;
  --color-accent-hover: #0953b1;
  --color-on-accent: #ffffff;
  --color-accent-soft: #e4effe;
  --color-accent-soft-text: #033e89;
  --color-accent-text: #0953b1;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;
  --accent-50: #f4f8ff;
  --accent-100: #e4effe;
  --accent-200: #c9defd;
  --accent-300: #a4c8fc;
  --accent-400: #71a9fb;
  --accent-500: #3587fb;
  --accent-600: #196bd8;
  --accent-700: #0953b1;
  --accent-800: #033e89;
  --accent-900: #032b62;
  --accent-950: #01173b;
  --neutral-50: #f7faff;
  --neutral-100: #eff4fc;
  --neutral-200: #e0e5ed;
  --neutral-300: #cfd4dc;
  --neutral-400: #9ca1a9;
  --neutral-500: #6f747a;
  --neutral-600: #50545b;
  --neutral-700: #3b3f45;
  --neutral-800: #23272c;
  --neutral-900: #14171d;
  --neutral-950: #080b10;
  --font-heading: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-display: 62px;
  --text-h1: 44px;
  --text-h2: 32px;
  --text-h3: 20px;
  --text-lead: 18px;
  --text-body: 15px;
  --text-small: 13px;
  --heading-weight: 600;
  --heading-tracking: -0.028em;
  --heading-leading: 1.06;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-button: 6px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --size-control: 38px;
  --size-row: 44px;
  --size-section: 104px;
  --border-width: 1px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --chart-1: #196bd8;
  --chart-2: #9ca1a9;
  --chart-3: #cfd4dc;
  --chart-4: #6f747a;
  --chart-5: #e0e5ed;
}
```