# Miter Design System

> A crisp, architectural monochrome system that relies on stark black and white to establish a structural, engineered feel.

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

## TL;DR
Miter is a highly structural, blueprint-like design system that leans heavily on its monochrome foundation of `#000000` and `#ffffff`. The interface avoids soft consumer tech aesthetics, opting instead for hard edges (0px to 2px border radii) and flat surfaces without drop shadows. Typography pairs the engineered sans-serif Denim and DenimWD for display with Inter for utility, utilizing tight negative tracking on large headings to reinforce a solid, constructed voice.

## Signature DNA
1. **Architectural Monochrome:** The core UI relies almost entirely on `#000000` and `#ffffff`, creating a high-contrast foundation that feels like a technical schematic.
2. **Engineered Typography:** DenimWD and Denim drive headings with tight negative tracking (up to -0.88px at 88px sizes), giving a solid, structural voice.
3. **Hard Edges & Flat Planes:** A dominance of 0px and 2px border radii across surfaces and cards, combined with an absolute lack of drop shadows, ensures the interface feels built and precise.

## Colors

### Foundation
| Token | Hex / Value | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-black` | `#000000` | Primary text, dominant achromatic | High | High | Declared token |
| `background` | `#ffffff` | Page background | High | High | Computed |
| `--color-midnight-70` | `#260f14` | Dark surface/accent | Low | High | Declared token |
| `--tw-ring-offset-color` | `#ffffff` | Focus offset | Low | High | Declared token |

### Accent
| Token | Hex / Value | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--swiper-theme-color` | `#007aff` | Interactive accent | Low | High | Declared token |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| **Inter** | 400, 500 | Body, utility | Inter | OFL |
| **DenimWD** | 400, 500, 600 | Display, headings | Roboto Condensed | Commercial |
| **Denim** | 400 | Headings | Roboto | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-xl` | 88px | 88px | -0.88px | 400 | Large metric callouts | `span.rolling-number.relative` |
| `display-lg` | 68px | 68px | -0.68px | 400 | Hero h1 | `h1.text-68px` |
| `display-md` | 62px | 62px | -0.62px | 500 | Secondary hero | `h2.text-62px.font-medium` |
| `display-sm` | 44px | 48.4px | -0.44px | 400 | Section headings | `h2.text-44px` |
| `heading-lg` | 32px | 38.4px | -0.32px | 400 | Sub-section headings | `div.font-heading-alt.text-32px` |
| `heading-sm` | 26px | 31.2px | normal | 400 | Card titles | `div.text-26px.font-heading-alt` |
| `body-lg` | 18px | 26.1px | 0.18px | 400 | Lead paragraphs | `p.text-18px.mt-4` |
| `body` | 16px | 24px | normal | 400 | Default body | `header.transition-[translate,.color]` |
| `body-sm` | 15px | 22.512px | normal | 400 | Navigation | `nav.group.mx-auto` |
| `caption` | 12px | 11.4px | 1.2px | 400 | Eyebrows, small labels | `h2.opacity-50.text-subheading-small` |

### Principles
- **Negative tracking on display:** Denim and DenimWD pull tighter as they scale up (-0.88px at 88px) to create solid, block-like headlines.
- **Wide tracking on caps:** Captions and eyebrows use wide tracking (1.2px to 1.4px) to create structural, technical labels.
- **Inter for utility:** Inter handles all dense reading and interactive elements, ensuring legibility at small sizes.

## Spacing
**Base unit:** custom

| Token | Value | Occurrences |
|---|---|---|
| `spacing-xs` | 4px | 3 |
| `spacing-sm` | 12px | 77 |
| `spacing-md` | 16px | 21 |
| `spacing-lg` | 24px | 19 |
| `spacing-xl` | 32px | 7 |
| `spacing-xxl` | 40px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `sharp` | 0px | Default for surfaces, panels, and layout blocks | 700 occurrences |
| `input` | 2px | Form inputs, standard cards, buttons | 57 occurrences |
| `card-soft` | 4px | Slightly softer elevated cards | 6 occurrences |
| `pill` | 9999px | Specific badges | 2 occurrences |

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

## Components

### Tier 1: Foundational

#### Surface
**Role:** Base layout containers and structural blocks.
**Pages observed:** https://miter.com, https://miter.com/about
**Spec:** Background `oklch(1 0 0)` / Text `oklch(0.2053 0.0392 7.3)` / Border `0px` / Radius `0px` / Padding `0px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Text Input
**Role:** Form entry fields.
**Pages observed:** https://miter.com, https://miter.com/about
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `oklch(0.2053 0.0392 7.3)` / Border `1px oklch(0.9219 0 0)` / Radius `2px` / Padding `12px 16px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Rounded Button
**Role:** Secondary actions and toggles.
**Pages observed:** https://miter.com, https://miter.com/about
**Spec:** Background `oklab(0.2053 0.0388823 0.00498093 / 0.05)` / Text `oklch(0.2053 0.0392 7.3)` / Border `1px rgba(0, 0, 0, 0)` / Radius `2px` / Padding `12px 16px` / Shadow `none`
**States observed:** Default | Disabled: not captured

### Tier 2: Patterns

#### Feature Card (Solid)
**Role:** High-contrast feature highlights.
**Pages observed:** https://miter.com, https://miter.com/about
**Spec:** Background `oklch(0.44 0.2308 298.18)` / Text `oklch(1 0 0)` / Border `0px` / Radius `2px` / Padding `14px 18px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Feature Card (Subtle)
**Role:** Standard content grouping.
**Pages observed:** https://miter.com, https://miter.com/pricing
**Spec:** Background `oklab(0.2053 0.0388823 0.00498093 / 0.05)` / Text `oklch(0.2053 0.0392 7.3)` / Border `0px` / Radius `2px` / Padding `12px 18px` / Shadow `none`
**States observed:** Default | Disabled: not captured

### Tier 3: Surface-specific

#### Footer
**Role:** Global site footer.
**Pages observed:** https://miter.com, https://miter.com/about
**Spec:** Background `oklch(1 0 0)` / Text `oklch(0.2053 0.0392 7.3)` / Border `0px` / Radius `0px` / Padding `0px` / Shadow `none`
**States observed:** Default | Disabled: not captured

## Layout
| Property | Value |
|---|---|
| Max-width | Not captured in source |
| Grid | Not captured in source |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Not captured in source |

## Imagery & decoration
Miter avoids photographic fluff, relying instead on isometric, architectural line-art blocks with stippled shading. These graphics reinforce the construction and engineering themes of the product. The UI itself remains strictly flat, allowing these dimensional illustrations to stand out.

## Do's
- Use `0px` and `2px` border radii to maintain a sharp, structural interface.
- Stick to `#000000` for primary text to ensure maximum contrast and authority.
- Apply tight negative tracking to DenimWD display headings to create solid typographic blocks.
- Use wide tracking (1.2px) on all-caps captions to create technical, blueprint-style labels.
- Keep all surfaces completely flat; rely on borders and background fills for separation.

## Don'ts
- **Wrong:** Using a 16px border radius on a card. **Right:** Using a 2px border radius. **Reason:** Large radii introduce a soft, consumer feel that conflicts with Miter's engineered aesthetic.
- **Wrong:** Applying a drop shadow to a floating panel. **Right:** Using a 1px solid border. **Reason:** The system is strictly flat; depth is implied through isometric illustration, not UI shadows.
- **Wrong:** Using `#007aff` as a primary text color. **Right:** Using `#000000` for text. **Reason:** Saturated colors are reserved strictly for interactive accents or specific illustrative fills, never for core typography.

## Similar brands
- Vercel (monochrome foundation, technical typography)
- Linear (high-contrast, flat surfaces, engineered feel)
- Stripe (in its more technical, developer-facing documentation)

## Quick start

**CSS Variables**
```css
:root {
  --color-black: #000000;
  --color-midnight-70: #260f14;
  --swiper-theme-color: #007aff;
  --tw-ring-offset-color: #ffffff;
  
  --font-display: 'DenimWD', sans-serif;
  --font-heading: 'Denim', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --radius-sharp: 0px;
  --radius-input: 2px;
}
```

## Agent prompt examples
1. "Create a feature card using a 2px border radius, a subtle `oklab(0.2053 0.0388823 0.00498093 / 0.05)` background, and no shadow. The title should use DenimWD at 26px."
2. "Build a hero section with a stark `#ffffff` background. The main headline should be 68px DenimWD with -0.68px letter spacing in `#000000`."
3. "Design a text input field with a 2px radius, a 1px border using `oklch(0.9219 0 0)`, and Inter 16px text."

## Known gaps
Hover, focus, and active states for components were not captured. Mobile-specific layout breakpoints and grid max-widths were not extracted in the source evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://miter.com | Desktop | 2026-06-06T05:03:44.561Z |
| Pricing | https://miter.com/pricing | Desktop | 2026-06-06T05:03:44.561Z |
| About | https://miter.com/about | Desktop | 2026-06-06T05:03:44.561Z |