# Conversity Design System

> High-contrast monochrome precision anchored on a warm, desaturated parchment canvas.

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

## TL;DR
Conversity utilizes a "monochrome-plus-warmth" system where pure black `#000000` and deep ink `#111111` provide structural weight against a desaturated, warm-neutral background `#f6f4ee`. The typography is exclusively **Inter**, relying on extreme scale shifts—ranging from 12px captions to 98px display headers—rather than typeface variety to establish hierarchy. UI elements are characterized by high-radius "pill" geometry for actions and soft-cornered cards for content containment. The palette is strictly achromatic, using tonal shifts in the `#e8e4da` range for hairlines and secondary surfaces to maintain a premium, archival feel.

## Signature DNA
1. **Extreme Typographic Contrast** (Inter 700 at 98px with -5.88px tracking creates a massive, tight visual anchor on the homepage hero, contrasted immediately with 19px body text).
2. **The Parchment Canvas** (The use of `--bg: #f6f4ee` instead of pure white provides a "physical" quality that makes the black ink elements feel stamped rather than rendered).
3. **Pill-to-Card Geometry** (Interactive elements are consistently 999px pills, while layout containers use a 20px-28px radius, creating a clear distinction between "action" and "content").

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--text` | `#111111` | Primary text, borders, and button backgrounds | 57 | 1 | Computed Style |
| `--bg` | `#f6f4ee` | Page background (parchment) | 39 | 1 | Declared Token |
| `--card` | `#ffffff` | Surface background for elevated content | 33 | 1 | CSS Variable |
| `--line` | `#e8e4da` | Default hairline dividers and card borders | 39 | 1 | CSS Variable |
| `--soft` | `#f1ede3` | Secondary button backgrounds and soft surfaces | 12 | 1 | CSS Variable |
| `--muted` | `#6b6b6b` | Secondary body text and de-emphasized labels | 51 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--shadow` | `#000000` | High-contrast button text on light pills | 12 | 1 | CSS Variable |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Inter | 400, 500, 600, 700 | All roles (Display, Body, UI) | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 98px | 90.16px | -5.88px | 700 | Hero H1 | `h1` |
| `{type.display.xl}` | 54px | 54px | -2.7px | 700 | Pricing values | `div.price` |
| `{type.display.lg}` | 40px | 36.8px | 1.6px | 400 | Section callouts | `span` |
| `{type.body.lg}` | 19px | 31.35px | normal | 400 | Hero subtext | `p.sub` |
| `{type.body.md}` | 18px | normal | -0.36px | 600 | Card titles | `div.ch-name` |
| `{type.body.sm}` | 15px | 24px | normal | 400 | Standard prose | `p` |
| `{type.ui.label}` | 14px | normal | 1.96px | 700 | Section headers | `h2` |
| `{type.ui.pill}` | 13px | normal | normal | 500 | Action labels | `button.pill` |
| `{type.caption}` | 12px | normal | 1.92px | 400 | Metadata labels | `div.card-label` |

### Principles
1. **Tight Display Tracking:** Large headers (98px) use aggressive negative tracking (-5.88px) to create a "locked" wordmark feel.
2. **Spaced Metadata:** Small captions (12px) use wide tracking (1.92px) to maintain legibility and signal "technical" or "secondary" status.
3. **Achromatic Hierarchy:** Importance is signaled through weight (700 vs 400) and scale, never through color shifts.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 4px | 3 |
| `{space.sm}` | 12px | 12 |
| `{space.md}` | 16px | 12 |
| `{space.lg}` | 24px | 6 |
| `{space.xl}` | 32px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Page-level containers | 69 occurrences |
| `{radius.card}` | 20px | Standard content cards | `radius: 20px` |
| `{radius.panel}` | 28px | Elevated pricing/feature panels | `radius: 28px` |
| `{radius.pill}` | 999px | All buttons and interactive tags | `radius: 999px` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | None | Default card state | Card component spec |
| Floating | `rgba(0, 0, 0, 0.06) 0px 12px 40px 0px` | Featured cards and pricing tiers | 6 occurrences |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main call-to-action (e.g., "Buy Now")
**Pages observed:** All
**Spec:** Background: `#111111` | Text: `#ffffff` | Border: `#111111` | Radius: `999px` | Padding: `0px 20px` | Typography: `15px/600`
**States observed:** Default | Hover: Not captured

#### Secondary Pill Button
**Role:** Alternative actions (e.g., "Other Options")
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#111111` | Border: `#111111` | Radius: `999px` | Padding: `0px 20px` | Typography: `15px/600`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Content Card
**Role:** Standard grouping for feature info
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#111111` | Border: `1px solid #e8e4da` | Radius: `20px` | Padding: `22px`
**States observed:** Default

#### Soft Action Pill
**Role:** Low-priority utility buttons (e.g., "Submit Offer")
**Pages observed:** pricing, about
**Spec:** Background: `#f1ede3` | Text: `#000000` | Border: `1px solid #e8e4da` | Radius: `999px` | Padding: `0px 16px` | Typography: `13px/500`
**States observed:** Default

### Tier 3: Surface-specific

#### Featured Panel
**Role:** High-emphasis pricing or hero cards
**Pages observed:** homepage
**Spec:** Background: `#ffffff` | Text: `#111111` | Border: `1px solid #e8e4da` | Radius: `28px` | Padding: `28px` | Shadow: `0px 12px 40px rgba(0,0,0,0.06)`
**States observed:** Default

#### Language Selector
**Role:** Utility navigation
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#111111` | Border: `1px solid #111111` | Radius: `999px` | Padding: `7px 12px` | Typography: `12px/400`
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max-width | 1440px (desktop) |
| Card Padding | 22px - 28px |
| Section Gap | 44px |

## Do's
- Use `#f6f4ee` for the main body background to avoid "digital glare."
- Apply `-5.88px` letter-spacing to Inter 700 when used at sizes above 90px.
- Ensure all primary buttons use the `999px` pill radius.
- Use `#e8e4da` for all 1px hairlines to maintain soft contrast.
- Maintain a minimum of 22px internal padding for all card components.

## Don'ts
- **Wrong:** Using a saturated blue for a primary CTA. **Right:** Use `#111111`. **Reason:** Conversity is a monochrome parent brand; color is reserved for potential sub-brands.
- Do not use a border radius smaller than 20px for content cards.
- Do not use pure white `#ffffff` as a page-level background.
- Do not mix Inter with other font families.
- Do not use drop shadows on standard content cards; reserve shadows for Featured Panels only.

## Similar brands
- **Linear** (Achromatic precision, high-contrast type)
- **Standard Projects** (Editorial layout, warm-neutral canvases)
- **Vercel** (Monochrome UI, heavy reliance on Inter/Geist scale)

## Quick start

```css
/* CSS Variables */
:root {
  --bg: #f6f4ee;
  --text: #111111;
  --muted: #6b6b6b;
  --line: #e8e4da;
  --card: #ffffff;
  --soft: #f1ede3;
  --radius-card: 20px;
  --radius-pill: 999px;
}
```

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence runner.
- Mobile-specific breakpoint transitions for the 98px display type were not explicitly defined in the token set.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|------|------|------|
| Homepage | https://conversity.com | 1440x900 | 2026-06-06 |
| Pricing | https://conversity.com/pricing | 1440x900 | 2026-06-06 |
| About | https://conversity.com/about | 390x844 | 2026-06-06 |