# Paradigmai Design System

> A precision instrument for data; stark monochrome grids anchored by delicate, editorial display typography.

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

## TL;DR
Paradigmai operates on a strict, high-contrast monochrome canvas (`#ffffff` to `#080b12`) that evokes a technical, spreadsheet-native environment. The visual voltage comes from the juxtaposition of brutalist, 0px-radius grid layouts against the highly refined, editorial `Atacama VAR` serif at a signature weight of 317. Color is almost entirely absent, with `#848a9c` serving as the primary structural grid color and occasional blue accents (`#0a33ff`, `#7f90ce`) reserved for interactive or atmospheric moments. The system relies on 1px borders and subtle inset shadows rather than deep elevation.

## Signature DNA
1. **Editorial Display on Technical Canvas:** `Atacama VAR` at weight 317 for display headings (`48px`, `-2.4px` tracking) creates an unexpected editorial elegance atop a dense, data-heavy UI.
2. **Absolute Grid Structure:** 0px border radius is used overwhelmingly (858 occurrences) alongside 1px `#848a9c` borders to create a strict, spreadsheet-like layout.
3. **Achromatic Dominance:** The interface relies heavily on pure white (`#ffffff`) and near-black (`#080b12`), using color only for semantic tags or isolated interactive elements.

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-black` | `#080b12` | Surface bg, text, border | 769 | 1.0 | `css_variable:--color-black` |
| `--color-white` | `#ffffff` | Surface bg, text, border | 177 | 1.0 | `css_variable:--color-white` |
| `--pd-color-slate-800` | `#2b2b2c` | Primary text, icons | 55 | 1.0 | `css_variable:--pd-color-slate-800` |
| `--pd-color-slate-100` | `#f6f6f8` | Secondary surface, text | 28 | 1.0 | `css_variable:--pd-color-slate-100` |
| `--pd-color-slate-600` | `#7e7e81` | Muted text, inactive icons | 23 | 1.0 | `css_variable:--pd-color-slate-600` |
| `--pd-color-slate-200` | `#f0f0f2` | Tertiary surface | 11 | 1.0 | `css_variable:--pd-color-slate-200` |
| `--pd-color-slate-500` | `#b7b7bb` | Subtle text | 11 | 1.0 | `css_variable:--pd-color-slate-500` |
| `--pd-color-slate-700` | `#515152` | Secondary text | 9 | 1.0 | `css_variable:--pd-color-slate-700` |
| `--color-surface-darker-gray` | `#e3e5e9` | Darker surface bg | 7 | 1.0 | `css_variable:--color-surface-darker-gray` |
| `--pd-color-slate-900` | `#07070a` | Headline text | 6 | 1.0 | `css_variable:--pd-color-slate-900` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-border-grid` | `#848a9c` | Primary grid borders, text | 101 | 1.0 | `css_variable:--color-border-grid` |
| `--color-blue` | `#0a33ff` | Button bg, border | 6 | 1.0 | `css_variable:--color-blue` |
| `button-bg-primary` | `#7f90ce` | Primary CTA background | 3 | 0.6 | `computed_style` |
| `--pd-color-pink-300` | `#ffe6f7` | Surface bg (decorative) | 1 | 1.0 | `css_variable:--pd-color-pink-300` |
| `--pd-color-purple-300` | `#f3e8ff` | Surface bg (decorative) | 1 | 1.0 | `css_variable:--pd-color-purple-300` |
| `--pd-color-accent-subtle` | `#e2efff` | Surface bg (decorative) | 1 | 1.0 | `css_variable:--pd-color-accent-subtle` |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--pd-color-success-dark` | `#03350f` | Success text | 9 | 1.0 | `css_variable:--pd-color-success-dark` |
| `--pd-color-success-subtle` | `#e4f3e2` | Success background | 8 | 1.0 | `css_variable:--pd-color-success-subtle` |
| `--pd-color-warning-dark` | `#423301` | Warning text | 5 | 1.0 | `css_variable:--pd-color-warning-dark` |
| `--pd-color-warning-subtle` | `#faeed1` | Warning background | 5 | 1.0 | `css_variable:--pd-color-warning-subtle` |
| `--pd-color-red-900` | `#580101` | Error text | 3 | 1.0 | `css_variable:--pd-color-red-900` |
| `--pd-color-alert-subtle` | `#ffe4e5` | Error background | 3 | 1.0 | `css_variable:--pd-color-alert-subtle` |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `Atacama VAR` | 317, 370, 400 | Display headings | `Playfair Display` | Commercial |
| `PP Neue Montreal` | 400, 450, 500, 550 | Section headings, body | `Inter` | Commercial |
| `Inter` | 400, 500, 600 | Data tables, captions | `Inter` | OFL |
| `Suisse Intl` | 400 | Secondary body | `Helvetica Neue` | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-lg` | 48px | 48px | -2.4px | 317 | Hero h1 | `h1.HeroSection_title__r1ung` |
| `display-md` | 44px | 48.4px | -2.64px | 370 | Section h2 | `h2.FragmentedWorkflowSection_heading__wrCbI` |
| `heading-sm` | 24px | 24px | normal | 500 | Pricing tiers | `h3.PlanColumn_price__9auNx` |
| `body-lg` | 18px | 25.2px | normal | 400 | FAQ text | `span.FAQSection_question_text__Er0sO` |
| `body-md` | 16px | 24px | normal | 400 | Problem text | `span.FragmentedWorkflowSection_problem_text__GgaUY` |
| `body-sm` | 14px | 22.4px | normal | 500 | Buttons | `a.Button_button__8B4nB.body` |
| `data-cell` | 13px | normal | normal | 500 | Grid headers | `th.ParadigmGrid_th__pkvv1` |
| `caption` | 12px | 18px | normal | 400 | Card subtitles | `p.WorkflowsIllustration_card_subtitle__nU496` |
| `caption-sm` | 11px | normal | -0.22px | 500 | Prompt animation | `th.ColumnPromptAnimation_th__0ofCJ` |

### Principles
- **Editorial Display:** `Atacama VAR` must remain at weight 317 or 370. Never bold it. The extreme negative tracking (-2.4px) is required for the signature look.
- **Data Density:** Use `Inter` at 13px and 11px for all spreadsheet/grid data to maximize legibility in dense views.
- **Tight Leading:** Display typography uses 1:1 or 1:1.1 line-height to maintain structural compactness.

## Spacing
**Base unit:** 2px
| Token | Value | Occurrences |
|---|---|---|
| `space-2` | 2px | 26 |
| `space-4` | 4px | 28 |
| `space-6` | 6px | 35 |
| `space-8` | 8px | 43 |
| `space-12` | 12px | 35 |
| `space-14` | 14px | 67 |
| `space-16` | 16px | 24 |
| `space-24` | 24px | 36 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Structural grids, main surfaces | 858 occurrences |
| `radius-sm` | 2px | Small inputs, inner cards | 55 occurrences |
| `radius-md` | 4px | Standard cards, inputs | 64 occurrences |
| `radius-xl` | 50px | Floating panels | 39 occurrences |
| `radius-pill` | 999px | Badges | 1 occurrence |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-none` | `none` | Default grid cells | 858+ occurrences |
| `shadow-sm` | `rgba(0, 0, 0, 0.06) 0px 1px 3px 0px` | Standard cards | 27 occurrences |
| `shadow-inset` | `rgb(255, 255, 255) 0px 0px 24px 0px inset` | Dark mode inner glow | 98 occurrences |

## Components

### Tier 1: Foundational

#### Surface Grid
**Role:** The primary structural background for data tables.
**Pages observed:** https://paradigmai.com
**Spec:** Background `#ffffff` / Text `#080b12` / Border `#848a9c` (1px) / Radius `0px` / Padding `0px` / Shadow `none`
**States observed:** Default

#### Surface Base
**Role:** Standard page background.
**Pages observed:** https://paradigmai.com, https://paradigmai.com/pricing
**Spec:** Background `#ffffff` / Text `#080b12` / Border `0px` / Radius `0px` / Padding `0px` / Shadow `none`
**States observed:** Default

### Tier 2: Patterns

#### Elevated Card
**Role:** Floating UI elements above the grid.
**Pages observed:** https://paradigmai.com
**Spec:** Background `#ffffff` / Text `#080b12` / Border `0px` / Radius `4px` / Padding `12px` / Shadow `rgba(0, 0, 0, 0.06) 0px 1px 3px 0px`
**States observed:** Default

#### Flat Card
**Role:** Secondary nested containers.
**Pages observed:** https://paradigmai.com
**Spec:** Background `#e3e5e9` / Text `#080b12` / Border `0px` / Radius `2px` / Padding `0px` / Shadow `none`
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Inset Surface
**Role:** Inner panels on dark hero sections.
**Pages observed:** https://paradigmai.com
**Spec:** Background `rgba(255, 255, 255, 0.04)` / Text `#080b12` / Border `0px` / Radius `0px` / Padding `0px` / Shadow `rgb(255, 255, 255) 0px 0px 24px 0px inset`
**States observed:** Default

#### Muted Surface
**Role:** Alternating section backgrounds.
**Pages observed:** https://paradigmai.com
**Spec:** Background `#f6f7f8` / Text `#080b12` / Border `0px` / Radius `0px` / Padding `0px` / Shadow `none`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Grid | Strict 1px borders (`#848a9c`) forming spreadsheet-like tables |
| Container | Centered, max-width constrained |

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

## Imagery & decoration
Paradigmai avoids lifestyle photography entirely. The brand relies on the UI itself—specifically the spreadsheet grid—as the primary visual motif. Atmospheric depth is achieved through subtle blue radial gradients behind the stark grid, contrasting the rigid lines with soft, machine-like glows.

## Do's
- Use `0px` border radius for all primary structural elements to maintain the spreadsheet aesthetic.
- Use `Atacama VAR` at weight 317 for main headings.
- Keep the color palette strictly monochrome (`#ffffff` to `#080b12`), using `#848a9c` for grid lines.
- Use `Inter` for dense data tables to ensure legibility.
- Apply `rgba(0, 0, 0, 0.06) 0px 1px 3px 0px` sparingly, only for floating cards.

## Don'ts
- **Wrong:** Using `Atacama VAR` at weight 700. **Right:** Using `Atacama VAR` at weight 317. **Reason:** The brand relies on delicate, editorial display typography; heavy weights destroy this contrast.
- **Wrong:** Applying `8px` border radius to grid cells. **Right:** Applying `0px` border radius. **Reason:** The technical, instrument-like feel requires sharp corners.
- **Wrong:** Using `#0a33ff` as a section background. **Right:** Using `#ffffff` or `#080b12`. **Reason:** Saturated colors are reserved strictly for small interactive accents or semantic tags.

## Similar brands
- Linear
- Vercel
- Stripe (Terminal/Docs)

## Quick start

```css
:root {
  --color-black: #080b12;
  --color-white: #ffffff;
  --color-border-grid: #848a9c;
  --color-blue: #0a33ff;
  
  --pd-color-slate-800: #2b2b2c;
  --pd-color-slate-100: #f6f6f8;
  --pd-color-slate-600: #7e7e81;
  
  --font-display: "Atacama VAR", serif;
  --font-heading: "PP Neue Montreal", sans-serif;
  --font-body: "Inter", sans-serif;
  
  --shadow-sm: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px;
  --shadow-inset: rgb(255, 255, 255) 0px 0px 24px 0px inset;
}
```

## Agent prompt examples
1. "Create a data table using `--color-border-grid` for 1px borders, `0px` border radius, and `Inter` at 13px for the cell contents."
2. "Build a hero section with a `#080b12` background, an inset panel using `--shadow-inset`, and an `Atacama VAR` heading at 48px with -2.4px letter spacing."
3. "Design a pricing card with a `4px` border radius, `--shadow-sm`, and a primary CTA button using `#7f90ce`."

## Known gaps
Hover, focus, and active states for interactive components were not captured in the source data. Mobile-specific typography scaling and layout shifts are also absent from the evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://paradigmai.com | Desktop | 2026-06-06T05:00:17.370Z |
| Pricing | https://paradigmai.com/pricing | Desktop | 2026-06-06T05:00:17.370Z |
| About | https://paradigmai.com/about | Desktop | 2026-06-06T05:00:17.370Z |