---
name: Cognition
description: "This site is a masterclass in restrained, premium design for technical products, using typography and whitespace to build authority."
version: alpha

colors:
  background: "#F7F6F5"
  primary: "#000000"
  secondary: "#191919"
  tertiary: "#2200FF"
  neutral: "#8E8E8E"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: geometric-sans
    fontSize: 20px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.12px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

An autonomous software engineer that expands human capacity.

*An architectural blueprint for the future of software development.*

## Colors

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

- **Background (`#F7F6F5`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#191919`)** — uses `ink-soft` token
- **Accent (`#2200FF`)** — uses `accent` token
- **Muted (`#8E8E8E`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Generous whitespace with 64px horizontal padding for main containers.

## Elevation & Depth

- Borders: Subtle 1px borders using rgba(0,0,0,0.1)

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Black filled with white text for primary actions, outlined or text-based for secondary.
- **card:** Clean layout for articles, typically featuring a title and a date.
- **chip:** Simple tags or metadata labels in small monospaced fonts.
- **input:** Minimal, borderless text inputs for simple forms.
- **hero:** A large, centered text block with a wide margin and a secondary background block.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```