# Momentic Design System

> A stark, high-contrast monochrome foundation punctuated by electric blue actions and sharp, brutalist geometry.

**Source:** https://momentic.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Momentic relies on a stark, high-contrast monochrome foundation driven by pure black (`#000000`) and near-black (`#191919`) against stark white and off-white (`#f9f9f9`, `#efefef`) canvases. The system employs a strict `0px` border radius for almost all structural elements, creating a sharp, brutalist architectural feel. Against this grayscale austerity, a vibrant electric blue (`#0084ff`) is deployed aggressively for primary actions and interactive states. Typography creates tension by mixing the geometric precision of Suisse Intl for headings with the pragmatic legibility of Inter for body copy, occasionally dropping in Georgia for editorial display moments.

## Signature DNA
1. **Sharp Architectural Geometry:** The vast majority of surfaces and containers use a strict `0px` border radius. Rounding (`8px`) is reserved exclusively for interactive controls (buttons) and specific feature cards, making interactive elements pop against the sharp grid.
2. **Electric Blue Isolation:** `--base-color-brand--blue` (`#0084ff`) is the sole dominant chromatic color, used for primary CTAs, links, and active states. It stands out sharply because the rest of the UI is strictly achromatic.
3. **Typographic Tension:** The system pairs the neo-grotesque structure of Suisse Intl (used with tight negative tracking up to `-1.76px`) with the utilitarian Inter, and unexpectedly introduces Georgia at 48px for specific editorial display moments.

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--base-color-brand--black` | `#191919` | Primary text, dark surfaces, borders | 170 | 1.0 | `css_variable` |
| `color-white` | `#ffffff` | Surface backgrounds, button text | 126 | 0.8 | `computed_style` |
| `color-off-white` | `#f9f9f9` | Subtle alternating section backgrounds | 14 | 0.8 | `computed_style` |
| `color-pure-black` | `#000000` | High-contrast text, borders | 12 | 0.8 | `computed_style` |
| `--base-color-brand--dark-gray` | `#62676a` | Secondary text | 6 | 1.0 | `css_variable` |
| `--base-color-brand--transparent-black` | `#222222` | Muted dark text | 5 | 1.0 | `css_variable` |
| `--base-color-brand--light-gray` | `#efefef` | Secondary button backgrounds | 2 | 1.0 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--base-color-brand--blue` | `#0084ff` | Primary CTAs, active text, highlights | 51 | 1.0 | `css_variable` |
| `color-accent-mint` | `#00db9d` | Accent surface backgrounds | 9 | 0.6 | `computed_style` |
| `color-accent-ice` | `#e5f0ff` | Soft feature card backgrounds | 7 | 0.6 | `computed_style` |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Suisse Intl** | 400, 500 | Primary display and headings | Inter / Roboto | Commercial |
| **Inter** | 300, 400, 500, 600 | Body, UI labels, small headings | Inter | OFL |
| **Georgia** | 600 | Editorial display | PT Serif | System |
| **DM Mono** | 400, 500 | Captions, technical labels | Space Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-lg` | 48px | 24px | normal | 600 | Editorial display (Georgia) | `div.text-size-24px.text-weight-semibold` |
| `display-md` | 44px | 44px | -1.76px | 500 | Primary hero headings | `h2.heading-48px.text-weight-medium` |
| `display-sm` | 40px | 44px | -1.6px | 400 | Secondary hero headings | `h2.heading-40px.text-weight-medium` |
| `heading-lg` | 24px | 33.6px | -0.96px | 500 | Section headings | `h3.heading-24px.text-weight-medium` |
| `heading-md` | 20px | 26px | -0.2px | 500 | Card headings | `h3.cs-item_header` |
| `body-lg` | 19px | 26.88px | normal | 400 | Intro body copy | `p` |
| `body-md` | 16px | 24px | normal | 400 | Default body | `div.nav.nav` |
| `button-text` | 16px | 16px | -0.32px | 500 | CTA labels | `a.button.is-cta` |
| `body-sm` | 14px | 19.6px | normal | 500 | Footer links | `a.footer-link.w-inline-block` |
| `caption-mono` | 12px | 12px | 1.44px | 500 | Technical labels, uppercase | `div.mono-12px.text-style-allcaps` |

### Principles
- **Aggressive negative tracking on display:** Suisse Intl is tracked tightly (-1.6px to -1.76px) at large sizes to create dense, solid headline blocks.
- **Monospace for technical authority:** DM Mono is used with wide tracking (1.44px) at 12px for uppercase technical labels, reinforcing the developer-tool aesthetic.
- **Tight button line-heights:** Button text uses a 1:1 line-height (16px size / 16px LH) with slight negative tracking (-0.32px) to keep the label perfectly centered and compact.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `spacing-xs` | 6px | 7 |
| `spacing-sm` | 8px | 19 |
| `spacing-md` | 12px | 13 |
| `spacing-lg` | 14px | 3 |
| `spacing-xl` | 16px | 10 |
| `spacing-2xl` | 20px | 12 |
| `spacing-3xl` | 24px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-sharp` | 0px | Structural surfaces, layout containers, accent blocks | 274 occurrences |
| `radius-input` | 4px | Small internal cards | 6 occurrences |
| `radius-control` | 8px | Primary buttons, feature cards | 17 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | `none` | All surfaces and components | `shadow: "none"` strictly enforced across all 13 observed components. |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Start for free").
**Pages observed:** https://momentic.ai
**Spec:** Background `#0084ff` / Text `#ffffff` / Border `transparent` / Radius `8px` / Padding `12px 16px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover (not captured) | Focus (not captured)

#### Secondary Button
**Role:** Alternative actions.
**Pages observed:** https://momentic.ai
**Spec:** Background `#efefef` / Text `rgba(0, 0, 0, 0.64)` / Border `transparent` / Radius `8px` / Padding `12px 16px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover (not captured) | Focus (not captured)

### Tier 2: Patterns

#### Feature Card (Soft)
**Role:** Highlighting specific product capabilities.
**Pages observed:** https://momentic.ai
**Spec:** Background `#e5f0ff` / Text `#0084ff` / Border `transparent` / Radius `8px` / Padding `8px` / Typography `16px` / Shadow `none`
**States observed:** Default

#### Outlined Surface
**Role:** Structural container for content blocks.
**Pages observed:** https://momentic.ai
**Spec:** Background `transparent` / Text `#191919` / Border `1px solid #e4e4e4` (computed from rgb(228, 228, 228)) / Radius `0px` / Padding `0px` / Typography `16px` / Shadow `none`
**States observed:** Default

### Tier 3: Surface-specific

#### Light Content Block
**Role:** Alternating section backgrounds to break up white space.
**Pages observed:** https://momentic.ai
**Spec:** Background `#f9f9f9` / Text `#191919` / Border `transparent` / Radius `0px` / Padding `20px` / Typography `16px` / Shadow `none`
**States observed:** Default

#### Mint Accent Surface
**Role:** High-contrast decorative or highlight block.
**Pages observed:** https://momentic.ai
**Spec:** Background `#00db9d` / Text `#191919` / Border `transparent` / Radius `0px` / Padding `0px` / Typography `16px` / Shadow `none`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Container | Max-width not explicitly captured, but relies on generous padding. |
| Grid | Not explicitly captured. |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | (Not explicitly captured in JSON, but standard stacking applies). |

## Imagery & decoration
Momentic avoids decorative shadows, gradients, or soft atmospheric effects. The brand relies on stark, flat color blocking, sharp lines, and high-contrast typography. The only "decoration" comes from the stark contrast of the electric blue (`#0084ff`) or mint (`#00db9d`) against the grayscale canvas.

## Do's
- **Do** use `0px` border radius for all major layout containers and structural surfaces.
- **Do** reserve `#0084ff` strictly for primary interactive elements and active states.
- **Do** apply tight negative letter-spacing (`-1.6px` to `-1.76px`) to large Suisse Intl headings.
- **Do** use DM Mono with wide tracking (`1.44px`) for small, uppercase technical labels.
- **Do** keep all components completely flat (`shadow: none`).

## Don'ts
- **Don't** apply border radius to layout containers or background sections (Wrong: `8px` radius on a section / Right: `0px` radius / Reason: Kills the sharp, architectural brand feel).
- **Don't** use shadows for elevation (Wrong: `box-shadow: 0 4px 12px rgba(0,0,0,0.1)` / Right: `box-shadow: none` / Reason: The system is strictly flat).
- **Don't** use the electric blue for body text or non-interactive headings (Wrong: `#0084ff` paragraph text / Right: `#191919` paragraph text / Reason: Dilutes the effectiveness of the primary CTA color).

## Similar brands
- Vercel (monochrome foundation, sharp geometry, monospace accents)
- Linear (high contrast, tight typography, developer-focused)
- Raycast (utilitarian, flat, highly legible)

## Quick start

**CSS Variables:**
```css
:root {
  --base-color-brand--black: #191919;
  --base-color-brand--blue: #0084ff;
  --base-color-brand--dark-gray: #62676a;
  --base-color-brand--transparent-black: #222222;
  --base-color-brand--light-gray: #efefef;
  
  --color-white: #ffffff;
  --color-off-white: #f9f9f9;
  --color-pure-black: #000000;
  --color-accent-mint: #00db9d;
  --color-accent-ice: #e5f0ff;
  
  --radius-sharp: 0px;
  --radius-input: 4px;
  --radius-control: 8px;
}
```

## Agent prompt examples
1. "Create a primary CTA button using the Momentic brand tokens. It should have a `#0084ff` background, `#ffffff` text, `8px` border radius, and use Inter at 16px with a 16px line-height and `-0.32px` letter spacing. Ensure there is no box-shadow."
2. "Build a feature highlight card. The background must be `#e5f0ff` with `#0084ff` text. Apply an `8px` border radius and `8px` of padding. Do not add any borders or shadows."
3. "Design a technical section header. Use DM Mono at 12px, uppercase, with `1.44px` letter spacing. The text color should be `#62676a`."

## Known gaps
- Hover, focus, and active states for interactive components were not captured in the computed style evidence.
- Specific grid column counts and container max-widths were not extracted.
- The exact usage rules for the Georgia display font versus Suisse Intl are inferred from limited occurrences.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://momentic.ai | Desktop | 2026-06-06T05:00:51.582Z |