# Sorted Design System

> Deep forest-green canvases punctuated by a high-contrast pastel palette and geometric wireframe motifs.

**Source:** [https://sorted.co](https://sorted.co) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Sorted utilizes a "Dark Mode by default" architecture, where the primary canvas is a deep midnight teal (#002121). This heavy base is balanced by a sophisticated secondary palette of desaturated pastels—mint (#d5f0e8), lavender (#d6d5f0), and sand (#f3e6ce)—used as full-width section backgrounds to create a rhythmic, alternating scroll. Typography is anchored by **Satochi**, a geometric sans-serif that maintains high legibility across large display sizes (44px-48px) and dense UI lists. The system avoids traditional shadows, relying instead on 1px borders and distinct color blocks to define hierarchy.

## Signature DNA
1. **The Alternating Block Rhythm** (Full-width sections transition sharply between the deep primary #002121 and pastel accents like #d5f0e8 or #d6d5f0, creating a high-contrast "storyboard" effect as the user scrolls.)
2. **Geometric Wireframe Decoration** (Technical illustrations and icons use thin-gauge white or mint lines to form 3D isometric shapes and grids, reinforcing a "structured" brand identity.)
3. **Pill-Shaped Containment** (Interactive elements and specific content containers use a consistent 10px or 9999px radius, softening the otherwise rigid geometric layout.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas.dark}` | `#002121` | Primary page background / Dark section floor | 6 | 1 | Computed Style |
| `{color.canvas.light}` | `#ffffff` | Light section floor / Card background | 84 | 1 | Computed Style |
| `{color.ink.light}` | `#eafafd` | Primary text on dark backgrounds | 621 | 0.8 | Computed Style |
| `{color.ink.dark}` | `#0d2d2d` | Primary text on light backgrounds | 216 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.accent.mint}` | `#d5f0e8` | Section background (Content Strategy) | 6 | 1 | Brand Page |
| `{color.accent.lavender}` | `#d6d5f0` | Section background (Market Research) | 6 | 1 | Brand Page |
| `{color.accent.sand}` | `#f3e6ce` | Section background (Sales Strategy) | 6 | 1 | Brand Page |
| `{color.accent.gold}` | `#ffdc97` | High-emphasis text / Bragging stats | 27 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Satochi | 400, 500, 700 | All headings and body | Satoshi (Fontshare) | Proprietary |
| WistiaPlayerInter | 500 | Video player UI | Inter | Proprietary |
| Arial | 400 | Fallback / Legacy | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 48px | 48px | normal | 400 | Hero icon labels | `span.bdt-ep-advanced-icon-box-icon-wrap` |
| `{type.display.lg}` | 44px | 48.4px | -1.188px | 700 | Primary Page Headers | `h1.elementor-heading-title` |
| `{type.heading.lg}` | 38px | 45.6px | -1.026px | 700 | Section Headers | `h2.elementor-heading-title` |
| `{type.heading.md}` | 32px | 38.4px | -0.864px | 700 | Sub-section Headers | `h3.elementor-heading-title` |
| `{type.heading.sm}` | 24px | 33.6px | -0.648px | 700 | Card Titles | `h4.elementor-heading-title` |
| `{type.body.lg}` | 20px | 26px | normal | 700 | Bold UI labels | `div.elementor-heading-title` |
| `{type.body.md}` | 18px | 27px | normal | 400 | Standard list text | `span.elementor-icon-list-text` |
| `{type.body.sm}` | 16px | 24px | normal | 400 | Default paragraph | `div.elementor-element` |

### Principles
1. **Tight Heading Tracking:** Large display type (32px+) uses negative letter-spacing (approx -2% to -3%) to maintain a compact, editorial feel.
2. **Weight-Based Hierarchy:** Bold (700) is reserved strictly for headers and primary labels; body copy stays at 400.
3. **Contrast-Driven Legibility:** Text color flips between #eafafd (on dark) and #0d2d2d (on light) to ensure maximum readability against the alternating background blocks.

## Spacing
**Base unit:** 8px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 66 |
| `{space.sm}` | 16px | 3 |
| `{space.md}` | 24px | 36 |
| `{space.lg}` | 40px | 27 |
| `{space.xl}` | 64px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 783 occurrences |
| `{radius.sm}` | 4px | Small UI surfaces | 3 occurrences |
| `{radius.md}` | 10px | Content cards / Interactive surfaces | 138 occurrences |
| `{radius.pill}` | 9999px | Buttons / Stat badges | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | Standard cards and sections | 100% of components |
| Bordered | 1px solid | Defining card boundaries on light backgrounds | `border: rgb(234, 250, 253)` |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Navigation and Global CTA
**Pages observed:** All
**Spec:** Background: `#002121` | Text: `#eeeeee` | Border: `1px solid rgba(255,255,255,0.3)` | Radius: `9999px` | Typography: `25px Satochi`
**States observed:** Default | Hover: Not captured

#### Surface (Dark)
**Role:** Primary layout container for hero and footer
**Pages observed:** All
**Spec:** Background: `#002121` | Text: `#eafafd` | Radius: `0px` | Padding: `0px 40px`
**States observed:** Default

### Tier 2: Patterns

#### Content Card
**Role:** Feature highlights and case study summaries
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#0d2d2d` | Border: `1px solid #eafafd` | Radius: `10px` | Padding: `24px`
**States observed:** Default

#### Stat Badge
**Role:** Displaying "Bragging" metrics and results
**Pages observed:** Homepage
**Spec:** Background: `transparent` | Text: `#ffdc97` | Typography: `20px Satochi Bold`
**States observed:** Default

### Tier 3: Surface-specific

#### Pastel Section Block
**Role:** Thematic content grouping (e.g., "What we've done")
**Pages observed:** All
**Spec:** Background: `{color.accent.*}` | Text: `#0d2d2d` | Radius: `0px` | Padding: `0px 40px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px |
| Section Vertical Gap | 80px - 120px |
| Grid System | Flex-based 3-column (desktop) / 1-column (mobile) |

## Do's
- Use `#002121` for the primary page entry point (Hero).
- Alternate background colors between dark foundation and pastel accents for every major scroll depth.
- Apply negative letter-spacing to any Satochi heading above 32px.
- Use 10px border radius for all internal content cards.
- Ensure all wireframe illustrations use `#ffffff` or `#d5f0e8` 1px strokes.

## Don'ts
- **Wrong:** Using a drop shadow on cards. **Right:** Use 1px borders or flat color changes. **Reason:** The brand relies on a flat, geometric aesthetic.
- **Wrong:** Using `#00d084` (Vivid Green) as a primary background. **Right:** Use `#d5f0e8` (Mint). **Reason:** Vivid tokens are for small indicators only; backgrounds must remain desaturated.
- **Wrong:** Setting body text in Satochi 700. **Right:** Use Satochi 400. **Reason:** Bold weight is reserved for structural hierarchy.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #002121;
  --color-mint: #d5f0e8;
  --color-lavender: #d6d5f0;
  --color-sand: #f3e6ce;
  --color-text-on-dark: #eafafd;
  --color-text-on-light: #0d2d2d;
  --font-main: 'Satochi', sans-serif;
  --radius-md: 10px;
  --radius-pill: 9999px;
}
```

## Known gaps
- Hover and Active states for the primary "Let's talk" button were not captured in the static crawl.
- Mobile-specific typography scaling for the 44px display size was not explicitly defined in the evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | `https://sorted.co` | 1440px | 2026-06-06 |
| Pricing | `https://sorted.co/pricing` | 1440px | 2026-06-06 |
| About | `https://sorted.co/about` | 390px | 2026-06-06 |