# Cognition · Design system migration spec

> Source: https://www.cognition.ai  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in restrained, premium design for technical products, using typography and whitespace to build authority.

## 1. Identity DNA

Cognition's design language operates like an architectural blueprint for software itself—a precise, monochromatic framework where structure precedes ornament. The system builds authority through restraint, using scale and negative space to articulate its engineering-first philosophy.

**One-liner:** An autonomous software engineer that expands human capacity.
**Keywords:** autonomous · engineering · collaboration · human-capacity
**Analogy:** An architectural blueprint for the future of software development.

## 2. Color

The palette is deliberately austere: a strict monochrome of deep ink on a light neutral ground, punctuated only by a single, vibrant electric blue accent reserved for primary interactions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F6F5` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#191919` | secondary text |
| `--muted` | `#8E8E8E` | placeholder |
| `--accent` | `#2200FF` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochrome with a single, bold electric blue accent for primary interactions.

This disciplined approach ensures the accent color carries maximum communicative weight without visual competition.

## 3. Typography

Typography establishes a clear dialectic: a transitional-serif for high-impact, authoritative headlines, and a geometric-sans for the legible, functional body copy and interface elements.

- **Display:** transitional-serif
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Hero headlines |
| heading | 20px | 1.2 | 400 | 0px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Paragraph text |
| caption | 12px | 1.3 | 400 | -0.12px | Metadata, tags |

**Type rules:**
- Use transitional-serif for large, high-impact headlines.
- Use geometric-sans for body copy and UI elements.
- Maintain a consistent font-weight of 400 across all elements.

## 4. Spacing

Spacing follows a generous, rhythmic structure, with expansive horizontal padding defining main content containers to create a calm, focused reading environment.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace with 64px horizontal padding for main containers.

## 5. Surfaces

Surfaces are defined by sharp geometry and minimal depth, relying on subtle, 1px borders for separation rather than shadows or elevation. The effect is flat, precise, and engineered.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Subtle 1px borders using rgba(0,0,0,0.1)

## 6. Layout

The layout skeleton is a clean 12-column grid, anchored by a persistent left-side navigation on desktop. This structure provides a stable, predictable framework for content to flow within.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A clean 12-column grid with a persistent left-side navigation bar on desktop.

## 7. Motion & Interaction

Motion philosophy is one of understated utility, with smooth opacity transitions guiding element appearances and subtle hover states confirming interactivity. All transitions use a consistent timing curve for a sense of calm precision.

- **Durations:** micro 100ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity transitions for element appearances.
  - Subtle hover states for interactive elements.

- **Hover:** Subtle color shifts or opacity changes.
- **Click:** Immediate feedback with minimal delay.
- **Transition:** All properties transition smoothly using a standard cubic-bezier curve.
- **Keyboard:** Full keyboard accessibility for navigation and interaction.

## 8. Voice & Don'ts

The editorial voice is authoritative and collaborative, making bold, direct statements about engineering's future while avoiding technical jargon and hype-driven language.

- **Tone:** Authoritative yet collaborative, focusing on the future of engineering.
- **Headline style:** Bold, direct statements about the product's core capabilities.
- **CTA style:** Clear, action-oriented phrases like 'Explore roles'.
- **Avoid:** Overly technical jargon / Hype-driven marketing language / Intrusive pop-ups

### Don'ts
- ❌ Don't use multiple high-chroma colors — screenshot shows a predominantly black and white palette with one blue accent.
- ❌ Don't use rounded corners on primary elements — screenshot shows sharp, square edges on buttons and cards.
- ❌ Don't use heavy drop shadows — screenshot shows a flat, clean design with minimal depth.
- ❌ Don't use a complex background — screenshot shows a solid, light neutral background (#F7F6F5).
- ❌ Don't use bold font weights — screenshot shows a consistent 400 font-weight across all text.
- ❌ Don't use sans-serif for headlines — screenshot shows a transitional-serif used for the main hero text.

The system deliberately avoids visual multiplicity, rounded corners, heavy shadows, and bold font weights, choosing instead to build hierarchy through scale, typeface, and stark contrast.

## System Prompt (paste into AI tool)

```
This design system is for a premium AI developer tool focused on autonomous software engineering. It uses a transitional-serif for display headlines, a geometric-sans for body text, and a monospaced font for code elements. The color palette is strictly monochromatic (ink #000000 on bg #F7F6F5) with a single high-chroma electric blue accent (#2200FF) used sparingly for interactive states. Key critical donts: Never use multiple accent colors, avoid all rounded corners on primary components, and never use bold font weights; the design relies on size and font-family for hierarchy. Maintain generous whitespace and a clean, editorial feel that emphasizes the product's technical sophistication and authority.
```