# Cognition Design System

> A brutalist architectural blueprint rendered in high-contrast ink and warm parchment.

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

## TL;DR
Cognition employs a high-contrast, monochrome aesthetic that mimics technical documentation and architectural drafts. The interface is built on a warm, off-white canvas `#f7f6f5` using sharp, zero-radius geometry and 1px black borders. Typography is the primary driver of hierarchy, pairing the geometric sans **nbInternational** for headlines with the high-legibility serif **stkBureauSerif** for long-form body copy. While the system is strictly achromatic in its structural elements, a vibrant electric blue `#2200ff` serves as the singular functional accent for interactive states and primary signals.

## Signature DNA
1. **The Architectural Grid** (Vertical and horizontal 1px lines define section boundaries and content zones, creating a "drafting table" feel across all pages.)
2. **Sharp Geometry** (A strict `0px` border radius policy applied to all buttons, cards, and input fields, rejecting the rounded "pill" conventions of modern SaaS.)
3. **Typographic Contrast** (The interplay between the technical, sans-serif `nbInternational` and the more traditional, academic `stkBureauSerif` creates an atmosphere of "engineered intelligence.")

## Family Map
Cognition currently operates as a single-brand entity. No sub-brands are captured in the current topology.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--color-background` | `#f7f6f5` | Page background and primary surface | 23 | 1 | Computed Style |
| `--color-black` | `#000000` | Primary text, 1px borders, and input backgrounds | 262 | 1 | CSS Variable |
| `--color-text-secondary` | `#191919` | Secondary body text and button surfaces | 66 | 1 | CSS Variable |
| `--color-white` | `#ffffff` | High-elevation surfaces and ring offsets | 12 | 1 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--color-accent` | `#2200ff` | Interactive links and primary brand signals | 54 | 1 | CSS Variable |
| `Brand Assets` | `#a2d1ce` | Decorative only (not used in UI) | 0 | 0.9 | Brand Page |
| `Purple` | `#3969ca` | Decorative only (not used in UI) | 0 | 0.9 | Brand Page |
| `Green` | `#21c19a` | Decorative only (not used in UI) | 0 | 0.9 | Brand Page |
| `Blue` | `#0294de` | Decorative only (not used in UI) | 0 | 0.9 | Brand Page |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| `nbInternational` | 400 | Headlines, Navigation, UI Labels | Inter | Proprietary |
| `stkBureauSerif` | 400 | Body copy, Paragraphs | EB Garamond | Proprietary |
| `GeistMono` | 400 | Code, Captions, Technical metadata | Geist Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `heading-xl` | 36px | 39.6px | -0.72px | 400 | Page Hero | `h1.text-text-primary` |
| `body-lg` | 16px | 24px | normal | 400 | Primary Body | `span.items-start` |
| `body-md` | 15px | 22.5px | normal | 400 | Secondary Body | `p.text-text-primary.font-body` |
| `nav-link` | 15px | 19.5px | normal | 400 | Navigation | `a.font-heading` |
| `caption-mono` | 12px | 15.6px | -0.12px | 400 | Technical labels | `span.font-mono` |
| `caption-sm` | 10px | 15px | normal | 400 | Legal/Footer | `p.font-body.text-[10px]` |

### Principles
1. **Headlines use Sans-Serif.** All structural headings use `nbInternational` to maintain a technical, modern feel.
2. **Body uses Serif.** Long-form reading is always handled by `stkBureauSerif` for an editorial, authoritative tone.
3. **Strict 400 Weight.** The system relies on size and typeface changes for hierarchy rather than bolding; almost all observed text is weight 400.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `--spacing-1` | 4px | 19 |
| `--spacing-2` | 8px | 30 |
| `--spacing-8` | 32px | 3 |
| `--spacing-12` | 48px | 4 |
| `--spacing-24` | 96px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `sharp` | 0px | All buttons, cards, and inputs | 327 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | none | All UI elements | Component array |

## Components

### Tier 1: Foundational

#### Surface
**Role:** The base container for content blocks and interactive regions.
**Pages observed:** All
**Spec:** Background: transparent / Text: `#000000` / Border: 1px `#000000` / Radius: `0px` / Padding: `1px 8px 0px`
**States observed:** Default captured.

#### Button (Primary)
**Role:** Main call to action (e.g., "Explore roles").
**Pages observed:** Home
**Spec:** Background: `#191919` / Text: `#ffffff` / Border: 0px / Radius: `0px` / Typography: `nbInternational` 15px
**States observed:** Default captured.

### Tier 2: Patterns

#### Navigation (Sidebar)
**Role:** Persistent site-wide navigation.
**Pages observed:** All
**Spec:** Background: transparent / Text: `#000000` / Border-right: 1px `#000000` (implied by grid lines)
**States observed:** Active state uses `--color-accent` (`#2200ff`) for the indicator.

#### Footer
**Role:** Site-wide utility and legal links.
**Pages observed:** All
**Spec:** Background: `#f7f6f5` / Text: `#000000` / Border-top: 1px `rgba(0, 0, 0, 0.06)` / Padding: `32px 0px 96px`
**States observed:** Default captured.

### Tier 3: Surface-specific

#### Article Card
**Role:** Blog and research post previews.
**Pages observed:** Home
**Spec:** Background: transparent / Radius: `0px` / Typography: `stkBureauSerif` 16px for titles.
**States observed:** Default captured.

#### Logo Grid
**Role:** Social proof and partner display.
**Pages observed:** Home
**Spec:** Grayscale filter applied to all partner logos; 5-column layout on desktop.

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1440px |
| Sidebar Width | ~200px |
| Section Padding | 96px (vertical) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Sidebar collapses to "Menu" trigger; Logo grid shifts to 2-up or 3-up. |
| Desktop | 1440px | Full sidebar visible; 5-column logo grid. |

## Imagery & decoration
Cognition uses high-contrast, grainy photography and technical diagrams. Visuals often feature 3D-rendered "blocks" or "nodes" in black and white, reinforcing the machine-learning and engineering focus. It avoids soft gradients, rounded icons, and multi-colored illustrations.

## Do's
- Use `#f7f6f5` for all primary page backgrounds to maintain the "parchment" warmth.
- Apply `0px` border radius to every interactive element without exception.
- Use `nbInternational` for all UI labels and navigation items.
- Reserve `#2200ff` exclusively for interactive signals and primary accents.
- Use 1px black lines to separate major layout sections.

## Don'ts
- **Wrong:** Using a pill-shaped button. **Right:** Use a `0px` radius rectangle. **Reason:** The brand identity is built on sharp, architectural geometry.
- **Wrong:** Using `#21c19a` (Green) for a "Success" button. **Right:** Use black or the primary accent. **Reason:** Decorative brand colors are not for UI use.
- **Wrong:** Bolding `stkBureauSerif` for emphasis. **Right:** Increase size or switch to `nbInternational`. **Reason:** The system relies on typeface contrast over weight variation.

## Similar brands
- **The New York Times** (Typographic authority and serif usage)
- **Linear** (Technical precision and monochrome focus)
- **Vercel** (Geometric rigor and high-contrast UI)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-background: #f7f6f5;
  --color-accent: #2200ff;
  --color-text-primary: #000000;
  --color-text-secondary: #191919;
  --radius-none: 0px;
  --font-heading: "nbInternational", sans-serif;
  --font-body: "stkBureauSerif", serif;
  --font-mono: "GeistMono", monospace;
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-brand-bg: #f7f6f5;
  --color-brand-accent: #2200ff;
  --font-heading: "nbInternational";
  --font-body: "stkBureauSerif";
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using the Cognition system: #191919 background, white text, 0px border radius, using nbInternational at 15px."
- "Create a content section on a #f7f6f5 background, separated by a 1px black top border, with a heading in 36px nbInternational."
- "Design a card component with a 1px black border, 0px radius, and padding of 16px, using stkBureauSerif for the body text."

## Known gaps
- Hover and Active states for primary buttons were not explicitly captured in the computed styles.
- The specific mobile breakpoint for the sidebar transition is inferred from common patterns as the exact trigger width was not in the evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|-------------|--------------|
| Home | https://cognition.ai | 1440x900 | 2026-06-06 |
| Pricing | https://cognition.ai/pricing | 1440x900 | 2026-06-06 |
| About | https://cognition.ai/about | 1440x900 | 2026-06-06 |