# Feather Design System

> High-contrast monochrome utility meets heavy grotesque typography on a stark white canvas.

**Source:** https://feather.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Feather utilizes a strict achromatic foundation, relying on pure black `#000000` and white `#ffffff` to establish a high-utility, developer-centric aesthetic. The system is anchored by **NHaasGroteskDSPro**, used at a heavy 800 weight for headings to create a brutalist, authoritative hierarchy. While the core is monochrome, a vibrant "Signal Blue" `#0070f3` is deployed as a functional accent for interactive states and documentation links. Geometry is predominantly sharp or minimally rounded, favoring 0px radii for primary containers and buttons.

## Signature DNA
1. **Heavy Grotesque Display** (NHaasGroteskDSPro at weight 800 with 1px tracking creates a dense, "ink-heavy" headline style seen on the homepage and age verification).
2. **Functional Blue Accent** (The use of `#0070f3` is strictly reserved for utility—links, borders on secondary surfaces, and focus states—contrasting against the black foundation).
3. **Sharp Container Geometry** (A default 0px border radius on primary buttons and modal containers establishes a rigid, non-decorative layout).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|-------|------|-------|-------|
| `{color.black}` | `#000000` | Primary text, heavy borders, brand mark | 17 | 1.0 | `--contrast` |
| `{color.white}` | `#ffffff` | Page background, primary surface | 12 | 1.0 | `background` |
| `{color.dark-gray}` | `#333333` | Secondary text, descriptive body | 6 | 0.6 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|-------|------|-------|-------|
| `{color.signal-blue}` | `#0070f3` | Interactive links, documentation borders | 6 | 0.6 | `resolved_primary` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|-------|------|-------|
| NHaasGroteskDSPro-75Bd | 400, 800 | Heading, Display | Helvetica Now | Proprietary |
| sf pro text | 400, 700 | Body, UI Labels | Inter | Proprietary |
| Menlo | 400 | Code, Technical info | JetBrains Mono | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 24px | 38.4px | 1px | 800 | Hero/Modal Headings | `a#over-age` |
| `{type.body-lg}` | 16px | 26.4px | normal | 700 | Emphasized Body | `strong` |
| `{type.body}` | 16px | 26.4px | normal | 400 | Standard Prose | `p.devinfo-container` |
| `{type.body-alt}` | 16px | 25.6px | 1px | 400 | Popup Content | `div.age-popup` |
| `{type.code}` | 15px | 24.288px | normal | 400 | Technical Snippets | `code` |
| `{type.ui-sm}` | 14px | 25.2px | normal | 400 | Notes/Captions | `div.note` |
| `{type.button}` | 14px | 25.2px | normal | 400 | Interactive Labels | `div.Surface` |

### Principles
1. **Heading Density:** All major headings must use weight 800 with positive 1px tracking to ensure a "stamped" appearance.
2. **Monospace for Metadata:** Use Menlo for system-generated IDs and technical data to distinguish from human-authored content.
3. **Blue for Action:** Text in `#0070f3` is always interactive; never use the accent color for static decorative elements.

## Spacing
**Base unit:** 8
| Token | Value | Occurrences |
|------|-------|-------|
| `{space.1}` | 8px | 5 |
| `{space.2}` | 16px | 4 |
| `{space.2.5}` | 20px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-------|------|
| `{radius.none}` | 0px | Primary buttons, Modals | 18 occurrences |
| `{radius.sm}` | 5px | Documentation surfaces | `div.Surface` |
| `{radius.md}` | 8px | Observed once (legacy) | `observed_once` |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All observed components | `shadow: none` |

## Components

### Tier 1: Foundational

#### Action Button (Primary)
**Role:** Critical user decisions (e.g., Age Verification)
**Pages observed:** `feather.com`
**Spec:** Background: transparent / Text: `#000000` / Border: 4px solid `#000000` / Radius: 0px / Padding: 8px 72px / Typography: 24px weight 800
**States observed:** Default: captured | Hover: not captured

#### Utility Link
**Role:** Navigation to external documentation or secondary info
**Pages observed:** `feather.com/pricing`, `feather.com/about`
**Spec:** Background: transparent / Text: `#0070f3` / Border: none / Typography: 14px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Documentation Card
**Role:** Highlighting technical errors or docs
**Pages observed:** `feather.com/pricing`, `feather.com/about`
**Spec:** Background: transparent / Text: `#0070f3` / Border: 1px solid `#0070f3` / Radius: 5px / Padding: 10.6px 21.3px
**States observed:** Default: captured

#### Info Container
**Role:** Displaying technical metadata (ID, Code)
**Pages observed:** `feather.com/about`
**Spec:** Background: `#ffffff` / Text: `#333333` / Border: 1px solid `#e5e5e5` (inferred) / Radius: 0px
**States observed:** Default: captured

## Layout
| Property | Value |
|------|-------|
| Max-width | 1440px (desktop) |
| Content Padding | 20px |

## Imagery & decoration
- **Iconography:** Uses literal, high-contrast silhouettes (e.g., the black feather mark).
- **Avoidance:** No gradients, no drop shadows, and no photographic backgrounds on primary UI layers.

## Do's
- Use `#000000` for all primary structural borders.
- Apply `NHaasGroteskDSPro` at weight 800 for any text larger than 20px.
- Use `Menlo` specifically for ID strings and error codes.
- Maintain a 0px border radius on all primary decision buttons.
- Ensure `#0070f3` is used only for links and documentation-related surfaces.

## Don'ts
- **Wrong:** Using a drop shadow on a modal. **Right:** Use a 4px black border. **Reason:** The system is strictly flat.
- **Wrong:** Using `#0070f3` for a primary "Submit" button. **Right:** Use `#000000` text/border. **Reason:** Blue is for utility/docs, not core brand actions.
- **Wrong:** Rounding button corners to 20px. **Right:** Keep at 0px. **Reason:** Sharp geometry is a core brand signature.

## Similar brands
- Vercel (Monochrome, Grotesque type, blue accents)
- Linear (High-contrast utility, strict geometry)
- Standard Projects (Brutalist typography, achromatic palette)

## Quick start

```css
:root {
  --feather-black: #000000;
  --feather-white: #ffffff;
  --feather-blue: #0070f3;
  --feather-gray: #333333;
  --font-heading: "NHaasGroteskDSPro-75Bd", sans-serif;
  --font-body: "sf pro text", sans-serif;
  --font-mono: "Menlo", monospace;
}
```

## Agent prompt examples
- "Generate a modal component using a 4px solid black border, 0px border radius, and a heading in NHaasGroteskDSPro weight 800."
- "Create a documentation link using #0070f3 text and a 1px border with 5px radius."
- "Design a technical info block using Menlo font at 15px with a white background and #333333 text."

## Known gaps
- Hover and Active states for primary buttons were not captured in the source.
- Mobile-specific navigation patterns were not fully detailed in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|------|------|------|
| Homepage | https://feather.com | 1440x900 | 2026-06-06 |
| Pricing | https://feather.com/pricing | 1440x900 | 2026-06-06 |
| About | https://feather.com/about | 1440x900 | 2026-06-06 |