---
title: "Atlas Card design system"
variant: extended
source: https://atlascard.com/
captured_at: 2026-10-12
theme: dark
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/atlascard-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Atlas Card · Design System

> A monochrome stage for access and experience.

**Theme:** dark · **Industry:** fintech · **Source:** https://atlascard.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Atlas pairs a near-black canvas and restrained typography with cinematic imagery of its card, hotels, dining, and events. The long-scroll page sells access through spacious interludes and full-bleed visual showcases rather than dense product UI.

## North star

Keep the interface nearly black and typographically quiet, letting immersive experience photography provide the page’s richness.

## Overview

The page is anchored by a #000000 canvas that fills nearly every section, giving the imagery and copy a gallery-like setting. #f8f8f8 carries prominent text, while #808080 handles quieter supporting copy and small uppercase captions. The measured palette is deliberately restrained; warm browns, stone tones, and occasional vivid colors belong chiefly to photography, not the core interface palette. Sequel Sans families shape the large, calm headlines and readable body copy; ApercuMono Pro adds a compact, uppercase editorial accent. The layout alternates centered text interludes with large, immersive hotel, restaurant, and event imagery, separated by generous black space. Borders and CTA surfaces are subtle dark grays, with rounded pill-like buttons and minimal elevation. Recreate the contrast between quiet interface and richly detailed photography; do not promote image-derived colors into brand accents.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#000000` | `--color-midnight-canvas` | brand | Page canvas and recurring section background; the dominant interface color. |
| Quiet Graphite | `#808080` | `--color-quiet-graphite` | neutral | Muted supporting text and low-emphasis copy on black. |
| Soft Porcelain | `#f8f8f8` | `--color-soft-porcelain` | neutral | Primary headline and body text, plus light text on dark controls. |
| Button Charcoal | `#141414` | `--color-button-charcoal` | surface | Subtle button and section surface tone; also appears in a measured dark gradient. |
| Slate Hairline | `#525252` | `--color-slate-hairline` | neutral | Measured button border tone; use for restrained outlines against black. |
| Smoke Outline | `#606060` | `--color-smoke-outline` | neutral | Border on the waitlist action; a quiet control edge, not a vivid accent. |
| Coal Outline | `#3a3a3a` | `--color-coal-outline` | neutral | Border on the sign-in action, maintaining the subdued dark control treatment. |
| Near-Black Ink | `#0f0f0f` | `--color-near-black-ink` | neutral | Measured text color on a light CTA treatment; not a page-wide text color. |
| Pale Caption | `#cccccc` | `--color-pale-caption` | neutral | Rare secondary text tone; use sparingly for low-priority copy. |

### Semantic aliases

`--color-canvas` → `#000000` (Midnight Canvas) · `--color-text` → `#f8f8f8` (Soft Porcelain) · `--color-text-muted` → `#808080` (Quiet Graphite) · `--color-border` → `#525252` (Slate Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f8f8f8` | `#000000` | 19.77:1 | AAA |
| `#808080` | `#000000` | 5.32:1 | AA |

### Gradients

- `linear-gradient(in oklab, rgb(20, 20, 20) 0%, rgb(0, 0, 0) 100%)`
- `linear-gradient(173deg, rgb(255, 255, 255) -54.74%, rgba(255, 255, 255, 0) 230.93%)`
- `linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.09))`
- `linear-gradient(oklch(0.8861 0.0112 63.34), oklch(0.5759 0.0275 83.37))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sequel Sans Headline Book | `--font-body` | webfont | 400, 700 | Primary headlines and body copy | DM Sans |
| ApercuMono Pro Medium | `--font-mono` | webfont | 400 | Small uppercase captions and code-like labels | Space Mono |
| Sequel Sans Display Book | `--font-display` | webfont | 400 | Oversized display statement | DM Sans |
| Sequel Sans Headline | `--font-sequel-sans-headline` | webfont | 700 | Emphasized headline and button text | DM Sans |

- **Sequel Sans Headline Book:** Measured weight 400; clean sans-serif with restrained tracking and sentence-case headlines.
- **ApercuMono Pro Medium:** Compact monospaced accent; measured at 400 with uppercase treatment.
- **Sequel Sans Display Book:** Light, open display styling; measured display role uses 400 weight.
- **Sequel Sans Headline:** Measured 700 weight; reserve stronger weight for action labels or emphasis.

### Type scale — Golden Ratio (ratio ≈ 1.569, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 97px | 400 | 1.03 | 0 | — | Sequel Sans Display Book | Oversized hero or section statement. |
| h1 | 28px | 400 | 1.3 | -0.008em | — | Sequel Sans Headline Book | Primary section headline and introductory claim. |
| h2 | 24px | 400 | 1.3 | 0.008em | — | Sequel Sans Headline Book | Secondary feature-section heading. |
| h3 | 23px | 400 | 1.17 | 0 | — | Sequel Sans Headline Book | Experience, destination, or feature title. |
| body | 16px | 400 | 1.4 | 0 | — | Sequel Sans Headline Book | Explanatory copy and benefit descriptions. |
| caption | 12px | 400 | 1.67 | 0 | uppercase | ApercuMono Pro Medium | Small uppercase location and experience labels. |
| code | 12px | 400 | 1.67 | 0 | uppercase | ApercuMono Pro Medium | Monospaced uppercase metadata-style labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 3, 6, 8, 12, 16, 18, 20, 24, 32, 60, 64, 88, 104, 176 px.
- Section rhythm 88px · element gap 8px · card padding — · max content width —.

Use a long, vertically scrolling composition with a single-column editorial rhythm and occasional two-column hero framing. The measured sections repeat a black background; full-bleed media alternates with centered text-led interludes. Keep text blocks visually narrow and aligned with the focal point, while allowing experience images to occupy broad spans. The measured spacing system is based on an 8px unit and includes large section gaps; preserve generous breathing room rather than compressing blocks. No page maximum width was measured, so avoid imposing an unsupported fixed value.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- Shadow `xl` (button): `rgba(0, 0, 0, 0.16) 0px 4px 64px 0px`
- Motion: standard transition `0.15s ease-in-out` on interactive elements.

The page reads as mostly flat: black canvas, quiet text, and restrained outlines. Controls use dark fills or thin gray borders rather than bright filled surfaces. A large soft shadow is measured on a button, but avoid making elevation a dominant system; keep layering subtle and let media establish depth.

## Imagery

Use cinematic photography and video as the main visual content: a card held in hand, hotel interiors, restaurant settings, and motorsport. Frame scenes broadly and let the dark surrounding canvas create contrast. Images can carry warm stone, wood, and event colors, but these are photographic content rather than interface colors. Favor atmospheric, low-key scenes with a clear focal subject.

## Components

### Hero media panel

Large rounded-corner visual panel featuring the card in a hand, with a small brand mark and a centered display statement.

### Editorial text interlude

Centered supporting paragraph on black, followed by a pill-shaped waitlist action and quiet explanatory copy.

### Experience showcase

Broad hotel, restaurant, or event photography paired with compact uppercase location captions and subtle controls.

### Waitlist action

Rounded outlined CTA with measured #606060 border and emphasized headline-family label.

### Sign-in action

Rounded dark control with #3a3a3a outline and light text.

### Feature statement panel

Large, calm sentence centered on a dark section, separated from imagery by generous black space.

### Measured component styles

- **Primary button** (“Join the Waitlist Sign In”): background #141414 · text #f8f8f8 · border 1px solid #141414 · radius 16px · padding 0px · 400 17px Sequel Sans Book · shadow rgba(0, 0, 0, 0.16) 0px 4px 64px 0px
- **Secondary button** (“Join the Waitlist”): transparent background · text #0f0f0f · border 1px solid #606060 · radius 1440px · padding 0px 16px · 700 15px Sequel Sans Headline
- **Link**: transparent background · text #001391 · radius 0px · padding 0px · 400 17px Sequel Sans Book

## Do

- Use #000000 as the dominant canvas.
- Set primary copy in Soft Porcelain and supporting copy in Quiet Graphite.
- Pair short editorial statements with expansive dark breathing room.
- Let travel, dining, and event photography carry their natural color.
- Use monospaced uppercase captions sparingly.
- Keep buttons rounded and visually quiet.

## Don't

- Do not introduce bright interface accents absent from the measured palette.
- Do not turn photo colors into persistent brand colors.
- Do not crowd the page with cards, borders, or dense controls.
- Do not use heavy shadows as the primary hierarchy device.
- Do not replace the cinematic media with decorative illustrations.
- Do not make supporting copy compete with the main statement.

## Agent prompt

Build a new Atlas-style page as a quiet, cinematic editorial experience. Use Midnight Canvas (#000000) for the dominant background, Soft Porcelain (#f8f8f8) for primary text, and Quiet Graphite (#808080) for subdued copy. Use Sequel Sans-like clean sans typography for statements and body text, with a restrained monospaced uppercase face for captions. Organize content as spacious centered text interludes alternating with broad, immersive photography or video. Keep controls rounded, dark, and understated, using measured gray outlines such as #525252 or #606060. Treat warm hotel, dining, or event colors as image content only. Preserve generous vertical pauses, strong focal imagery, and minimal interface chrome; avoid dense grids, bright accent colors, and ornamental shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width cinematic card visual with centered brand mark and hero statement. | brand introduction, visual-first entry | large media panel, centered display text, rounded corners |
| 2 | cta | Centered paragraph and waitlist CTA within a spacious black interlude. | benefit explanation, waitlist conversion | centered body copy, pill CTA, quiet supporting note |
| 3 | gallery | Broad hotel imagery set within a single-column, full-bleed showcase. | experience discovery, destination browsing | immersive photography, location caption, subtle controls |
| 4 | gallery | Full-width restaurant scene following a generous black interval. | dining discovery, visual browsing | cinematic restaurant photo, uppercase venue label |
| 5 | gallery | Wide motorsport image presented as an isolated event showcase. | event access discovery, experience browsing | full-bleed action image, dark surrounding canvas |
| 6 | feature-split | Dark editorial feature section with a short centered headline and supporting content. | feature introduction, benefit explanation | large statement, black negative space |
| 7 | product-showcase | Full-width destination photograph with compact label and two understated actions. | hotel exploration, learn more | immersive property image, location caption, subtle pill actions |
| 8 | feature-split | Black text-led interlude introducing dining access and the Atlas Dining offering. | feature introduction, service explanation | centered headline, supporting body copy |
| 9 | gallery | Short full-width restaurant showcase with location label and subtle controls. | venue discovery, experience browsing | restaurant photography, compact caption, minimal controls |

## Source CSS custom properties (selected)

```css
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
--ease-out-circ: cubic-bezier(.075, .82, .165, 1);
--ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
--ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
--ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
--ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/atlascard-com