# Distributional Design System

> A high-contrast, brutalist-leaning dark canvas punctuated by sharp geometry, monospace utility, and neon chromatic accents.

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

## TL;DR
Distributional operates on a strict, sharp-edged dark mode foundation (`#1e1e1e`) with stark white (`#ffffff`) typography. The system relies entirely on 0px border radii, creating a rigid, technical aesthetic. Chromatic energy is delivered through highly saturated neon accents (primarily a vibrant pink `#ed77f8` and secondary blue `#6464f1`) used sparingly for CTAs and geometric background motifs. Typography pairs the structured Forma DJR Display for headings with Graphik for body copy and Forma DJR Mono for technical eyebrows and captions, reinforcing the developer-focused, analytical tone.

## Signature DNA
1. **Absolute Sharpness** (0px border radii across all components). Reinforces the technical, uncompromising precision of the product. Observed universally across buttons and surfaces.
2. **Neon on Dark** (High-contrast neon accents against a near-black canvas). Uses `#ed77f8` and `#6464f1` to draw focus without relying on soft gradients or shadows.
3. **Technical Monospace** (Forma DJR Mono used for eyebrows and captions). Wide tracking (1.28px at 13px) signals data-driven, machine-level context.

## Family Map
Not applicable (single-brand topology).

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--colors--background` / `--_color---neutral--black` | `#1e1e1e` | Main page background, dark buttons | 70 | 1.0 | computed_style |
| `--_color---neutral--dark-gray` | `#323233` | Borders, secondary dark surfaces | 20 | 1.0 | computed_style |
| `--_color---neutral--gray-stroke` | `#e1e1e3` | Light surfaces, grid lines | 7 | 1.0 | computed_style |
| `--_color---neutral--light-gray` | `#ececec` | Secondary light surfaces | 4 | 1.0 | computed_style |
| `--_color---neutral--off-white` | `#f5f5f7` | Button backgrounds | 1 | 1.0 | computed_style |
| (Undeclared) | `#ffffff` | Primary text, light surfaces | 745 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--_color---primary--primary` / `--colors--primary-accent` | `#ed77f8` | Primary CTA, geometric motifs | 2 | 1.0 | computed_style |
| `--_color---secondary--blue` | `#6464f1` | Secondary accents, large background blocks | 3 | 1.0 | computed_style |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Forma DJR Display | 500 | Display, Headings | Inter / Helvetica | Licensed |
| Graphik | 400 | Body | Roboto / Arial | Licensed |
| Forma DJR Mono | 500 | Eyebrows, Captions, Buttons | Space Mono / Roboto Mono | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-lg` | 80px | 80px | -0.8px | 500 | Primary hero | `h1` |
| `display-md` | 48px | 48px | -0.48px | 500 | Section headings | `h2` |
| `heading-lg` | 28px | 28px | normal | 500 | Sub-headings | `p.h4.u-mb-0` |
| `heading-sm` | 20px | 30px | normal | 400 | Large body | `div.paragraph-lg.u-opacity-0-6` |
| `heading-xs` | 20px | 28px | normal | 500 | Small headings | `h3.h5.u-text-center` |
| `body-md` | 16px | 25.6px | normal | 400 | Default body | `section.section.u-pb-0` |
| `body-sm` | 14px | 21.6px | normal | 400 | Small body | `p.paragraph-sm.u-opacity-0-6` |
| `mono-sm` | 13px | 15.36px | 1.28px | 500 | Eyebrows | `div.eyebrow` |
| `mono-xs` | 12px | 12px | 0.48px | 500 | Buttons, captions | `a.btn.w-inline-block` |

### Principles
1. **Negative tracking on display.** Forma DJR Display tightens at large sizes (-0.8px at 80px, -0.48px at 48px).
2. **Wide tracking on monospace.** Forma DJR Mono is tracked out (1.28px at 13px) for legibility in all-caps or technical contexts.
3. **Strict weight discipline.** Forma DJR Display is exclusively 500, Graphik is exclusively 400.

## Spacing
**Base unit:** Custom
| Token | Value | Occurrences |
|---|---|---|
| `space-1` | 6px | 9 |
| `space-2` | 9px | 9 |
| `space-3` | 12px | 9 |
| `space-4` | 14px | 5 |
| `space-5` | 16px | 11 |
| `space-6` | 19px | 9 |
| `space-7` | 24px | 6 |
| `space-8` | 40px | 10 |
| `space-9` | 56px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | All components, buttons, cards | 799 occurrences |

## Elevation
Not captured in source. (Zero shadows observed; depth is established via 1px borders and color contrast).

## Components
Not captured in source. (Evidence contains 0 components validated across multiple pages; 6 components were observed on single pages only and omitted per strict validation rules).

## Layout
Not captured in source.

## Responsive
Not captured in source.

## Imagery & decoration
The brand relies entirely on geometric, solid-color squares and grid-line backgrounds. Organic shapes, gradients, and soft shadows are strictly avoided. Visual interest is driven by abstract neon blocks (`#ed77f8`, `#6464f1`) intersecting with 1px grid lines (`#323233` or `#e1e1e3`).

## Do's
* Use 0px border radius for all interactive and container elements.
* Apply Forma DJR Mono with wide tracking (1.28px) for eyebrows and technical labels.
* Use `#ed77f8` exclusively for primary actions or high-emphasis geometric decoration.
* Maintain high contrast by placing white text (`#ffffff`) on the dark canvas (`#1e1e1e`).
* Tighten letter spacing on display headings (-0.8px at 80px).

## Don'ts
* **Wrong:** Applying a 4px border radius to a button. **Right:** 0px border radius. **Reason:** The brand's signature is absolute geometric sharpness.
* **Wrong:** Using `#6464f1` as the primary CTA background. **Right:** Using `#ed77f8` for primary CTAs. **Reason:** Blue is a secondary accent; pink is the primary action color.
* **Wrong:** Using `#85f78f` (secondary green) as the parent primary brand color. **Right:** Using `#ed77f8` or `#6464f1`. **Reason:** Green is a declared secondary token, not the resolved primary.
* **Wrong:** Adding drop shadows to cards. **Right:** Using 1px solid borders (`#323233`) to define surfaces. **Reason:** The system is strictly flat with no elevation depth.

## Similar brands
* Vercel (dark mode, monospace utility, high contrast)
* Linear (developer-focused, sharp UI, dark canvas)
* Stripe (developer-centric, precise typography)

## Quick start

```css
:root {
  --_color---neutral--black: #1e1e1e;
  --_color---neutral--dark-gray: #323233;
  --_color---neutral--gray-stroke: #e1e1e3;
  --_color---neutral--light-gray: #ececec;
  --_color---neutral--off-white: #f5f5f7;
  --_color---primary--primary: #ed77f8;
  --_color---secondary--blue: #6464f1;
  --color-white: #ffffff;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
1. "Create a primary CTA button using `#ed77f8` background, 0px border radius, and 12px Forma DJR Mono text."
2. "Build a feature card with a transparent background, 1px `#323233` border, 0px radius, and an eyebrow in 13px monospace."
3. "Generate a dark hero section with a `#1e1e1e` background, an 80px Forma DJR Display heading with -0.8px tracking, and a geometric `#6464f1` accent block."

## Known gaps
Hover, focus, and active states for interactive elements were not captured. Elevation shadows are absent from the evidence. Multi-page validated components did not meet the threshold for inclusion.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Distributional | https://distributional.com | Desktop | 2026-06-06T05:00:50.578Z |
| Distributional About | https://distributional.com/about | Desktop | 2026-06-06T05:00:50.578Z |