# Asper Design System

> High-contrast enterprise AI architecture defined by deep indigo foundations, hairline-thin display typography, and stark monochromatic precision.

**Source:** [https://asper.ai](https://asper.ai) | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Asper utilizes a "monochrome-plus" system where a deep indigo-purple (`#271f49`) acts as the functional black. The visual identity is anchored by the extreme contrast between **Helvetica Neue LT Thin** (weight 100) used for massive display headlines and **Helvetica Neue LT Bold** for structural emphasis. The interface is strictly structured on a white (`#ffffff`) or soft grey (`#f4f3f5`) canvas, using sharp 0px corners for layout containers and generous 30px pill-radii for interactive elements. Accent colors like blue (`#007bff`) and amber (`#f1ad32`) are reserved for specific product-suite indicators and primary call-to-actions, never for general decorative use.

## Signature DNA
1. **The Weight Gap** (The juxtaposition of 55px Helvetica Thin (100) against Bold (75) weights creates a technical, architectural hierarchy that feels engineered rather than designed.)
2. **Indigo Foundation** (Replacing pure black with `#271f49` for primary text and surfaces provides a subtle "midnight" depth to the enterprise-grade UI.)
3. **Pill-to-Sharp Contrast** (Interactive elements use a soft `{radius.panel}` of 30px, while structural sections and image containers maintain a strict `{radius.sharp}` of 0px.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.ink}` | `#212529` | Primary body text | 59 | 1.0 | `--bs-body-color` |
| `{color.midnight}` | `#271f49` | Primary brand color, headings, dark surfaces | 42 | 0.8 | Computed style |
| `{color.canvas}` | `#ffffff` | Page background | 8 | 1.0 | `--bs-body-bg` |
| `{color.surface-soft}` | `#f4f3f5` | Secondary section backgrounds | 2 | 1.0 | `--base-2` |
| `{color.border}` | `#dee2e6` | Default hairline dividers | 1 | 1.0 | `--bs-gray-300` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#007bff` | Primary action links, system blue | 8 | 1.0 | `--blue` |
| `{color.muted-indigo}` | `#686381` | Secondary descriptive text | 28 | 0.8 | Computed style |
| `{color.amber}` | `#f1ad32` | Primary CTA buttons, "Explore" actions | 8 | 0.6 | Computed style |
| `{color.lavender}` | `#b2a9d5` | Decorative text / sub-brand labels | 4 | 0.6 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Helvetica Neue LT W05 35 Thin | 100, 400 | Hero Display | Inter Thin (100) | Proprietary |
| Helvetica Neue LT W05 75 Bold | 400, 500 | Display Emphasis | Inter Bold (700) | Proprietary |
| Helvetica Neue LT W05 55 Roman | 400, 600 | Body, UI Labels | Inter Regular (400) | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-thin}` | 55px | 60px | normal | 100 | Hero headlines | `span` |
| `{type.display-bold}` | 55px | 60px | normal | 400 | Hero emphasis | `h1.head-level-1` |
| `{type.heading-md}` | 23px | 30px | normal | 400 | Section headers | `p.para.font-weight-bold-1` |
| `{type.heading-sm}` | 20px | 26px | normal | 600 | Case study titles | `div.case-title` |
| `{type.body}` | 16px | 25px | normal | 400 | Running prose | `p.para-level-2` |
| `{type.ui-label}` | 16px | 16px | normal | 400 | Navigation, UI | `header#masthead` |
| `{type.button}` | 15px | 500px | normal | 400 | CTA labels | `a#home-tab` |
| `{type.caption}` | 12px | 12px | normal | 400 | Small annotations | `p` |

### Principles
1. **Weight Pairing:** Never use Medium weights for headlines; always pair Thin (100) with Bold (75) to maximize visual tension.
2. **Indigo over Black:** Use `#271f49` for all primary headings to maintain brand warmth in high-contrast layouts.
3. **Tight Vertical Rhythm:** Display type uses a 1.09x line-height ratio (60px height on 55px size) to keep large text blocks cohesive.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 8 |
| `{space.sm}` | 20px | 10 |
| `{space.md}` | 30px | 8 |
| `{space.lg}` | 50px | 6 |
| `{space.xl}` | 75px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, images | 132 occurrences |
| `{radius.control}` | 10px | Form inputs | Observed in `Surface` components |
| `{radius.card}` | 15px | Content cards | Observed in `Surface` components |
| `{radius.panel}` | 30px | Buttons, primary pills | Observed in `Rounded Button` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{elev.flat}` | none | All cards and surfaces | Observed across 100% of pages |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and secondary call-to-action.
**Pages observed:** [https://asper.ai](https://asper.ai)
**Spec:** Background: transparent or `{color.amber}` (#f1ad32) / Text: `{color.midnight}` (#271f49) / Radius: 30px / Padding: 3px 30px 0px / Typography: `{type.button}`
**States observed:** Default | Hover: captured

#### Masthead Nav
**Role:** Global site navigation.
**Pages observed:** [https://asper.ai](https://asper.ai), [https://asper.ai/pricing](https://asper.ai/pricing)
**Spec:** Background: `{color.canvas}` (#ffffff) / Text: `{color.ink}` (#212529) / Height: 80px (approx) / Typography: `{type.ui-label}` (16px)

### Tier 2: Patterns
#### Content Card
**Role:** Feature highlights and case studies.
**Pages observed:** [https://asper.ai](https://asper.ai)
**Spec:** Background: transparent / Radius: 15px / Padding: 0px / Border: none

#### Form Input
**Role:** Lead generation and contact.
**Pages observed:** [https://asper.ai](https://asper.ai)
**Spec:** Background: transparent / Border-bottom: 1px solid `{color.ink}` (#212529) / Radius: 0px / Typography: 20px Thin

### Tier 3: Surface-specific
#### Hero Section
**Role:** Primary landing introduction.
**Pages observed:** [https://asper.ai](https://asper.ai)
**Spec:** Background: `{color.canvas}` (#ffffff) / Typography: `{type.display-thin}` and `{type.display-bold}` / Padding-top: 107px

#### Leader Profile Card
**Role:** Executive team showcase.
**Pages observed:** [https://asper.ai](https://asper.ai)
**Spec:** Background: `{color.surface-soft}` (#f4f3f5) / Radius: 15px / Text-align: left

## Layout
| Property | Value |
|------|-------|
| Max-width | 1140px (standard Bootstrap container) |
| Section Gap | 75px - 107px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Headlines scale down; navigation collapses to hamburger menu; 2-column grids stack to 1-column. |
| Desktop | 1440px | Full 12-column grid; 107px section padding active. |

## Imagery & decoration
Asper uses high-quality photography of people in tech environments, often framed within geometric masks or floating against white space. Decorative elements include 3D isometric icons for "Why Asper" sections and product UI screenshots with `#271f49` sidebar treatments.

## Do's
- Use **Helvetica Neue LT Thin** for all primary H1 headlines.
- Set primary CTA buttons with a **30px border-radius**.
- Use `#271f49` (Midnight) for text that requires high authority.
- Maintain a **0px radius** on all full-width section containers.
- Ensure 100px+ of whitespace between major content bands.

## Don'ts
- **Wrong:** Using `#007bff` (Blue) for primary page headlines. **Right:** Use `#271f49`. **Reason:** Blue is a functional accent, not a brand voice color.
- **Wrong:** Applying drop shadows to cards. **Right:** Use flat backgrounds or subtle borders. **Reason:** The brand is strictly 2D/flat.
- **Wrong:** Rounding the corners of images. **Right:** Keep images at 0px radius. **Reason:** Sharp corners maintain the "architectural" feel.

## Similar brands
- IBM (Type-first, engineering focus)
- Palantir (Enterprise dark-indigo foundations)
- Stripe (High-contrast typography, clean canvas)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --asper-midnight: #271f49;
  --asper-amber: #f1ad32;
  --asper-ink: #212529;
  --asper-canvas: #ffffff;
  --asper-radius-pill: 30px;
  --asper-font-thin: "Helvetica Neue LT W05 35 Thin";
  --asper-font-bold: "Helvetica Neue LT W05 75 Bold";
}
```

## Agent prompt examples
- "Generate a hero section using Helvetica Neue Thin at 55px for the headline and a 30px rounded amber button for the CTA."
- "Create a feature grid where cards have a 15px border radius and use #271f49 for the titles."
- "Design a contact form with 0px radius inputs and 1px bottom borders using the Asper ink color."

## Known gaps
- Hover states for navigation items were not explicitly captured in the token data.
- The specific transition timing for button hover effects was not measured.
- Mobile-specific font size tokens for display type were inferred from screenshots rather than computed CSS.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | [https://asper.ai](https://asper.ai) | 1440px | 2026-06-06 |
| Pricing | [https://asper.ai/pricing](https://asper.ai/pricing) | 1440px | 2026-06-06 |
| Mobile Home | [https://asper.ai](https://asper.ai) | 390px | 2026-06-06 |