---
version: alpha
name: Atlas
description: Premium fintech restraint — a near-black canvas with mirror-steel neutrals, a single warm-gold accent reserved for the card and key CTAs, tight tracking on a clean grotesque sans, generous whitespace, and soft hairline borders that read like brushed metal.
colors:
  # Canvas + ink
  background: "#0a0a0b"
  surface: "#121214"
  surface-soft: "#1a1a1d"
  ink: "#f5f5f4"
  ink-secondary: "#a3a3a0"
  ink-muted: "#6b6b69"

  # Accent — warm gold, the only saturated color, mirrors the steel card's etched warmth
  primary: "#c9a861"
  primary-soft: "#2a2519"
  on-primary: "#0a0a0b"

  # Steel neutrals
  steel-100: "#e6e6e4"
  steel-300: "#b8b8b5"
  steel-500: "#8a8a87"
  steel-700: "#3a3a3d"

  # Borders + lines (flattened over the dark canvas)
  border: "#26262a"
  border-soft: "#1c1c20"

  # Status
  success: "#5fb37a"
  on-ink: "#0a0a0b"

typography:
  display-hero:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.56px
  card-title:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.2px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 1.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 140px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.steel-100}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.steel-700}"

  badge:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 32px
    borderColor: "{colors.border-soft}"
---

# Atlas Design System

## Overview

Atlas builds a premium steel charge card and travel-rewards platform, and its visual identity is engineered to match the object it sells: cold, precise, and quietly luxurious. The site lives almost entirely on a near-black canvas (`{colors.background}`), letting product photography of mirror-finished steel cards carry the warmth. Where most fintech sites reach for bright gradients and primary blues, Atlas reaches for restraint — the palette is overwhelmingly achromatic, built from steel neutrals that echo brushed and polished metal.

The single point of saturation is a warm gold accent (`{colors.primary}`), pulled from the warm tone of the card's laser-etched detailing. It appears sparingly — on the primary CTA, on small badges, on a focus ring — never as decoration. This discipline is the whole point: gold reads as precious only because it is scarce. Everything else is `{colors.ink}` text, steel-gray secondary copy (`{colors.ink-secondary}`), and hairline borders (`{colors.border}`) that suggest the seam of a machined edge rather than a drawn line.

Typography is a clean geometric-humanist grotesque (Manrope as the closest open analog) with tight negative tracking at display sizes — enough to feel engineered without tipping into Vercel-grade compression. A monospace label voice (`{typography.mono-label}`) appears in uppercase for eyebrows and technical captions, reinforcing the precision-instrument feel. Spacing is generous: large vertical rhythm between sections so each claim about the card gets room to breathe, the way a luxury object gets negative space in a gallery.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with bright off-white ink (`{colors.ink}`) — high contrast, gallery dark mode
- A single warm-gold accent (`{colors.primary}`) reserved for the card, primary CTAs, and focus — never decorative
- Steel-neutral grays evoking brushed and mirror-finished metal
- Hairline borders (`{colors.border}`) as machined seams instead of heavy dividers
- Clean grotesque sans with tight negative tracking at display sizes
- Uppercase monospace labels (`{typography.mono-label}`) for eyebrows and technical captions
- Pill-radius buttons; soft `{rounded.lg}`–`{rounded.xl}` cards
- Generous vertical whitespace — luxury pacing

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Near-black page canvas. Reads black but carries a faint warmth.
- **Surface** (`{colors.surface}`): Card and panel surface, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Feature cards, raised panels.
- **Ink** (`{colors.ink}`): Primary text and headings — bright off-white.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and description copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled states, fine print.

### Accent
- **Atlas Gold** (`{colors.primary}`): The sole saturated color. Primary CTA, badges, focus ring, key highlights.
- **Gold Soft** (`{colors.primary-soft}`): Tinted dark background behind gold badges and pills.
- **On Primary** (`{colors.on-primary}`): Near-black text on the gold CTA.

### Steel Neutrals
- **Steel 100** (`{colors.steel-100}`): Brightest neutral — hover fill, light metal accents.
- **Steel 300** (`{colors.steel-300}`): Mid-light steel for secondary labels on dark.
- **Steel 500** (`{colors.steel-500}`): Mid steel.
- **Steel 700** (`{colors.steel-700}`): Dark steel, hover borders.

### Borders & Lines
- **Border** (`{colors.border}`): Standard hairline border — the machined-seam line.
- **Border Soft** (`{colors.border-soft}`): Subtler divider for nav and inner sections.

### Status
- **Success** (`{colors.success}`): Confirmations, positive states.

## Typography

### Font Family
- **Primary**: `Manrope`, with fallbacks `Inter, Arial, sans-serif` — a clean geometric-humanist grotesque.
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — uppercase technical labels.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero — headline impact with tight tracking |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, large supporting copy |
| `card-title` | Feature card headings |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text |
| `body-medium` | Emphasized body, nav links |
| `button-ui` | Buttons, links |
| `caption` | Metadata, badges, fine print |
| `mono-label` | Uppercase eyebrows and technical captions |

### Principles
- **Tight but legible tracking**: Negative letter-spacing increases with size (-1.68px at 56px), giving headlines an engineered density without sacrificing the humanist warmth.
- **Two-weight discipline**: 400 for reading, 500–600 for headings and UI. No heavy black weights.
- **Mono as instrument voice**: Uppercase `{typography.mono-label}` with positive tracking signals precision and reinforces the hardware association.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.4xl}`, `{spacing.5xl}`) for luxury vertical pacing between sections.

### Grid & Container
- Max content width approximately 1200px, centered.
- Hero: centered single column with a large steel-card render as the focal object.
- Feature sections: 2–3 column card grids on dark surfaces.
- Full-bleed product imagery framed by generous margins.

### Whitespace Philosophy
- **Object in a gallery**: Each card and claim gets surrounding negative space, so the product reads as precious.
- **Dark calm**: The near-black canvas plus generous spacing creates a low-noise, high-focus environment.
- **Restraint as luxury**: Color is withheld; spacing and contrast do the heavy lifting.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, canvas only | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, inputs, panels |
| Raised (Level 2) | `{colors.surface-soft}` fill + hairline border | Feature cards |
| Focus | `2px solid {colors.primary}` outline/border | Keyboard focus, active inputs |

**Shadow Philosophy**: Atlas avoids heavy drop shadows on the dark canvas — depth comes from surface-value steps (`{colors.background}` → `{colors.surface}` → `{colors.surface-soft}`) and hairline borders, the way machined metal panels stack by tone and seam rather than cast shadow.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved, full-bleed media |
| `xs` | 4px | Small inline elements |
| `sm` | 8px | Compact controls |
| `md` | 12px | Inputs, list items |
| `lg` | 16px | Standard cards |
| `xl` | 24px | Feature cards, large panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Atlas Gold fill, near-black text, pill radius. The single high-emphasis CTA; hover lifts to steel-white.
- **`button-secondary`** — Surface fill with hairline border, ink text. Hover deepens the border to steel.

### Pills & Badges
- **`badge`** — Gold-soft tinted background, gold text, pill radius. For status and category tags.

### Cards
- **`card`** — Surface fill, hairline border, `{rounded.lg}`.
- **`card-feature`** — Raised surface-soft fill, `{rounded.xl}`, more padding for hero feature blocks.

### Inputs
- **`input`** — Surface fill, hairline border, `{rounded.md}`. Focus swaps the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Near-black sticky header, ink links, soft-border bottom. Gold pill CTA right-aligned.

## Do's and Don'ts

### Do
- Keep the canvas near-black and let steel product imagery carry warmth
- Reserve gold (`{colors.primary}`) for the primary CTA, small badges, and focus only
- Use hairline borders (`{colors.border}`) for separation instead of heavy shadows
- Use tight negative tracking at display sizes
- Step surface values for depth on the dark canvas
- Use uppercase mono labels for eyebrows and technical captions

### Don't
- Don't introduce a second saturated accent — gold is the only color
- Don't use gold as a large fill or background — it must stay scarce
- Don't drop bright text below `{colors.ink-secondary}` for primary body on dark
- Don't add bright drop shadows on the dark canvas
- Don't use heavy black font weights — 600 is the ceiling
- Don't set primary to the page background

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced section padding |
| Tablet | 600–1024px | 2-column grids begin, larger gutters |
| Desktop | 1024–1400px | Full multi-column layout, max content width |
| Large Desktop | >1400px | Centered, generous side margins |

### Touch Targets
- Buttons use comfortable padding (14px vertical) for >44px targets
- Nav links spaced for tap comfort
- Badges keep 12px horizontal padding

### Collapsing Strategy
- Hero: 56px headline scales down, maintains proportional negative tracking
- Navigation: horizontal links → hamburger menu, gold CTA persists
- Feature cards: 3-column → 2-column → single column
- Section spacing: 140px → ~64px on mobile
- Product card renders: maintain aspect ratio, center on mobile

### Image Behavior
- Steel card renders dominate the hero at all sizes
- Product photography keeps consistent framing margins
- Full-bleed sections stay edge-to-edge

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Atlas Gold `{colors.primary}` with near-black text `{colors.on-primary}`
- Background: Near-black `{colors.background}`
- Heading text: Off-white `{colors.ink}`
- Body text: Steel `{colors.ink-secondary}`
- Border: hairline `1px solid {colors.border}`
- Focus ring: Atlas Gold `{colors.primary}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline at 56px Manrope weight 600, line-height 1.05, letter-spacing -1.68px, color `{colors.ink}`. Subtitle at 19px weight 400, color `{colors.ink-secondary}`. Gold pill CTA (`{colors.primary}` fill, near-black text, 14px 28px padding) plus a secondary pill (surface fill, 1px `{colors.border}`)."
- "Design a feature card: `{colors.surface-soft}` fill, 1px `{colors.border}`, `{rounded.xl}` radius, 32px padding. Title 22px Manrope weight 600 `{colors.ink}`, body 16px weight 400 `{colors.ink-secondary}`. Optional uppercase mono eyebrow in `{colors.primary}`."
- "Build a badge: `{colors.primary-soft}` background, `{colors.primary}` text, pill radius, 4px 12px padding, 13px weight 500."
- "Create navigation: near-black sticky header, ink links at 15px Manrope weight 500, soft-border bottom, gold pill CTA 'Apply' right-aligned."

### Iteration Guide
1. Gold is scarce — if more than the CTA, a badge, and focus uses it, pull it back
2. Depth comes from surface-value steps and hairlines, never bright shadows
3. Letter-spacing scales with size: -1.68px at 56px, -1.2px at 40px, normal at body
4. Keep body copy at `{colors.ink-secondary}` or brighter on the dark canvas
5. Uppercase mono for eyebrows; grotesque sans for everything else

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Atlas. Brand names and trademarks belong to their respective owners.