# Mswjs Design System

> High-contrast technical canvas where deep obsidian surfaces meet vibrant signal orange accents and razor-sharp monospace annotations.

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

## TL;DR
Mswjs employs a "Dark Mode by Default" aesthetic, utilizing a foundation of near-black surfaces (`#000000`, `#171717`) and neutral borders (`#262626`). The primary brand voltage is carried by a high-saturation orange (`#ff6a33`), used for critical CTAs, syntax highlighting, and text emphasis. Typography is a strict pairing of **Inter** for high-density UI and **Mono Lisa** for code-centric content, emphasizing its identity as a developer tool. Layouts rely on generous vertical rhythm (up to 192px gaps) and sharp-edged or subtly rounded (`8px`) containers.

## Signature DNA
1. **The Signal Orange Accent** (The use of `#ff6a33` against dark backgrounds for primary actions and semantic emphasis, visible across all landing pages).
2. **Code-as-Hero** (Large-scale code blocks using **Mono Lisa** at 14px with `#262626` borders, treated as primary visual content rather than secondary documentation).
3. **Achromatic Depth** (Layering `#000000` page floors with `#171717` surfaces and `#404040` controls to create hierarchy without color).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.canvas}` | `#000000` | Primary page background | 4 | 1 | Computed |
| `{colors.surface}` | `#171717` | Elevated section background | 5 | 0.6 | Computed |
| `{colors.ink-white}` | `#ffffff` | Primary text and icons | 154 | 1 | Computed |
| `{colors.ink-muted}` | `#a3a3a3` | Secondary text and descriptions | 53 | 0.8 | Computed |
| `{colors.border-dim}` | `#262626` | Default component borders | 22 | 0.8 | Computed |
| `{colors.border-mid}` | `#404040` | Interactive borders and button fills | 14 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#ff6a33` | Primary CTA, links, and syntax | 21 | 1 | `--primary` |
| `{colors.syntax-red}` | `#f97583` | Code highlighting (keywords) | 12 | 0.8 | Computed |
| `{colors.syntax-blue}` | `#3b82f6` | Focus rings (decorative_only) | 2 | 1 | `--tw-ring-color` |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{colors.success}` | `#16a34a` | Success states and positive diffs |
| `{colors.warning}` | `#eab308` | Warning indicators |
| `{colors.error}` | `#ef4444` | Error states and 404 accents |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| **Inter** | 400, 500, 600, 700, 800, 900 | UI, Headings, Body | Inter (Google Fonts) | SIL OFL |
| **Mono Lisa** | 400, 500, 700 | Code, Technical labels | JetBrains Mono | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 60px | 60px | -1.5px | 900 | Hero H1 | `h1.mb-8.font-black` |
| `{type.display-xl}` | 48px | 48px | -1.2px | 800 | Secondary Hero | `h1.mb-5` |
| `{type.heading-lg}` | 36px | 40px | -0.9px | 800 | Section Head | `h2.mb-8.capitalize` |
| `{type.heading-md}` | 24px | 36px | normal | 500 | Sub-section | `p.text-xl.md:text-2xl` |
| `{type.heading-sm}` | 20px | 28px | -0.5px | 700 | Card Title | `h3` |
| `{type.body-lg}` | 18px | 28px | normal | 400 | Intro text | `li:nth-of-type(1)` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default body | `section.max-w-screen-md` |
| `{type.mono-sm}` | 14px | 21px | normal | 400 | Code blocks | `pre` |

### Principles
1. **Black-weight Headings**: Primary titles use weight 900 with aggressive negative tracking (-1.5px) to ground the page.
2. **Monospace for Logic**: Any content representing machine output or configuration must use **Mono Lisa**.
3. **Tight Leading on Display**: Display sizes use 1.0x line-height to maintain visual density.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 4px | 19 |
| `{space.sm}` | 8px | 10 |
| `{space.base}` | 16px | 24 |
| `{space.xl}` | 40px | 21 |
| `{space.section}` | 96px | 4 |
| `{space.hero}` | 192px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section dividers | 250 occurrences |
| `{radius.md}` | 8px | Buttons, Surface cards | `Rounded Button` component |
| `{radius.lg}` | 12px | Pricing/Feature cards | `Card` component |
| `{radius.pill}` | 9999px | Badges, Search bar | `Pill Button` component |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | None | Default state | Most components |
| Floating | `0 20px 25px -5px rgba(0,0,0,0.1)` | Hovered feature cards | `Card` component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary action (e.g., "Getting Started")
**Pages observed:** https://mswjs.io, https://mswjs.io/pricing
**Spec:** Background `{colors.border-mid}` (rgba(64, 64, 64, 0.4)) / Text `#ffffff` / Border 1px `#404040` / Radius 8px / Padding 12px 24px / Typography 18px 700
**States observed:** Default | Hover: captured

#### Pill Button
**Role:** Secondary action or outline CTA
**Pages observed:** https://mswjs.io
**Spec:** Background transparent / Text `{colors.primary}` (#ff6a33) / Border 1px `#ff6a33` / Radius 9999px / Padding 4px 16px / Typography 16px
**States observed:** Default: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** https://mswjs.io
**Spec:** Background `{colors.surface}` (#171717) / Text `#ffffff` / Border 2px `{colors.border-dim}` (#383838) / Radius 12px / Padding 20px / Shadow `rgba(0,0,0,0.1) 0px 20px 25px -5px`
**States observed:** Default | Hover: captured

#### Code Block
**Role:** Displaying technical implementation
**Pages observed:** https://mswjs.io
**Spec:** Background `#000000` / Text `#ffffff` / Border 1px `{colors.border-mid}` (#404040) / Radius 12px / Font `{type.mono-sm}` (14px)
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Testimonial Card
**Role:** Social proof
**Pages observed:** https://mswjs.io
**Spec:** Background transparent / Text `{colors.ink-white}` / Border 1px `{colors.border-dim}` (#262626) / Radius 8px / Padding 2px 12px
**States observed:** Default: captured

#### Status Badge
**Role:** Inline labels (e.g., "ASSERT", "XHR")
**Pages observed:** https://mswjs.io
**Spec:** Background `{colors.success}` (#22c55e) / Text `#ffffff` / Radius 9999px / Padding 0px / Font 16px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1280px (estimated from 1440px viewport) |
| Section Padding | 96px to 192px |
| Grid | 3-column (Feedback section) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked 1-column layout, H1 reduces to 48px |
| Desktop | 1440px | Multi-column grids, 60px display type |

## Imagery & decoration
- **Syntax Highlighting**: Uses a specific palette (`#f97583`, `#ff6a33`, `#86efac`) to decorate the UI through code.
- **Logos**: Grayscale logo wall for partners using `{colors.ink-muted}` (#a3a3a3).
- **Avoids**: Soft gradients, drop shadows on text, and rounded corners exceeding 12px (except pills).

## Do's
- Use `#ff6a33` for the single primary action on any page.
- Set code snippets in **Mono Lisa** with a 1.5x line height.
- Maintain a minimum 96px vertical gap between major landing sections.
- Use `#171717` for cards sitting on the `#000000` canvas.
- Apply negative letter-spacing (-1.2px to -1.5px) to headings above 36px.

## Don'ts
- **Wrong**: Using `#ff6a33` as a background for large sections. **Right**: Use it only for accents/CTAs. **Reason**: High-saturation orange causes eye strain on dark backgrounds.
- **Wrong**: Using Inter for code blocks. **Right**: Use Mono Lisa. **Reason**: Brand identity relies on monospace for technical accuracy.
- **Wrong**: Labeling `#3b82f6` (Blue) as the primary brand color. **Right**: It is a decorative/ring color only. **Reason**: The primary brand color is `#ff6a33`.

## Similar brands
- Vercel (monochrome + high contrast)
- Supabase (dark mode + vibrant accent)
- Railway (technical aesthetic + sharp geometry)

## Quick start

### CSS Custom Properties
```css
:root {
  --primary: #ff6a33;
  --canvas: #000000;
  --surface: #171717;
  --border: #262626;
  --text-main: #ffffff;
  --text-muted: #a3a3a3;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Mono Lisa', monospace;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #ff6a33;
  --color-canvas: #000000;
  --color-surface: #171717;
  --font-inter: "Inter";
  --font-mono: "Mono Lisa";
  --radius-control: 8px;
}
```

## Known gaps
- Hover states for secondary navigation links were not explicitly captured in the computed style array.
- Mobile-specific menu transition timing was not captured.

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