Atlas以近黑画布和克制的字体，搭配银行卡、酒店、餐饮与活动的电影感影像。页面通过宽松的留白段落和全幅场景展示权益，而非密集的产品界面。
North star · Keep the interface nearly black and typographically quiet, letting immersive experience photography provide the page’s richness.
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.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
Midnight Canvas
#000000
Page canvas and recurring section background; the dominant interface color.
表层色
Button Charcoal
#141414
Subtle button and section surface tone; also appears in a measured dark gradient.
中性色
Quiet Graphite
#808080
Muted supporting text and low-emphasis copy on black.
Soft Porcelain
#f8f8f8
Primary headline and body text, plus light text on dark controls.
Slate Hairline
#525252
Measured button border tone; use for restrained outlines against black.
Smoke Outline
#606060
Border on the waitlist action; a quiet control edge, not a vivid accent.
Coal Outline
#3a3a3a
Border on the sign-in action, maintaining the subdued dark control treatment.
Near-Black Ink
#0f0f0f
Measured text color on a light CTA treatment; not a page-wide text color.
Pale Caption
#cccccc
Rare secondary text tone; use sparingly for low-priority copy.
文字 背景 对比度 WCAG #f8f8f8 Soft Porcelain#000000 Midnight Canvas19.77:1 AAA #808080 Quiet Graphite#000000 Midnight Canvas5.32:1 AA
字体 字号阶梯：Golden Ratio（比例约 1.569，正文 16px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Sequel Sans Headline Book 网络字体 · 字重 400 / 700 · 占比 88%
免费替代：DM Sans
Primary headlines and body copy
Aa 设计
ApercuMono Pro Medium 网络字体 · 字重 400 · 占比 7%
免费替代：Space Mono
Small uppercase captions and code-like labels
Aa 设计
Sequel Sans Display Book 网络字体 · 字重 400 · 占比 3%
免费替代：DM Sans
Oversized display statement
Aa 设计
Sequel Sans Headline 网络字体 · 字重 700 · 占比 2%
免费替代：DM Sans
Emphasized headline and button text
角色 示例 字号 字重 行高 字距 特大标题 Oversized hero or section statement.
Atlas
97px 400 1.03 0 一级标题 Primary section headline and introductory claim.
Atlas
28px 400 1.3 -0.008em 二级标题 Secondary feature-section heading.
The quick brown fox 敏捷的狐狸
24px 400 1.3 0.008em 三级标题 Experience, destination, or feature title.
The quick brown fox 敏捷的狐狸
23px 400 1.17 0 正文 Explanatory copy and benefit descriptions.
The quick brown fox 敏捷的狐狸
16px 400 1.4 0 辅助文字 Small uppercase location and experience labels.
The quick brown fox 敏捷的狐狸
12px 400 1.67 0 代码 Monospaced uppercase metadata-style labels.
const style = 1;
12px 400 1.67 0
间距与布局 基准单位 8px · 密度：适中
88px 版块间距
8px 元素间距
— 卡片内边距
— 内容最大宽度
2px
3px
6px
8px
12px
16px
18px
20px
24px
32px
60px
64px
88px
104px
176px
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.
圆角与层次 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.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
页面版块 共 9 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 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. ✕ 不该做 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. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 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.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
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 ## Colors
| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | ` | `--color-midnight-canvas` | brand | Page canvas and recurring section background; the dominant interface color. |
| Quiet Graphite | ` | `--color-quiet-graphite` | neutral | Muted supporting text and low-emphasis copy on black. |
| Soft Porcelain | ` | `--color-soft-porcelain` | neutral | Primary headline and body text, plus light text on dark controls. |
| Button Charcoal | ` | `--color-button-charcoal` | surface | Subtle button and section surface tone; also appears in a measured dark gradient. |
| Slate Hairline | ` | `--color-slate-hairline` | neutral | Measured button border tone; use for restrained outlines against black. |
| Smoke Outline | ` | `--color-smoke-outline` | neutral | Border on the waitlist action; a quiet control edge, not a vivid accent. |
| Coal Outline | ` | `--color-coal-outline` | neutral | Border on the sign-in action, maintaining the subdued dark control treatment. |
| Near-Black Ink | ` | `--color-near-black-ink` | neutral | Measured text color on a light CTA treatment; not a page-wide text color. |
| Pale Caption | ` | `--color-pale-caption` | neutral | Rare secondary text tone; use sparingly for low-priority copy. |
### Semantic aliases
`--color-canvas` → ` (Midnight Canvas) · `--color-text` → ` (Soft Porcelain) · `--color-text-muted` → ` (Quiet Graphite) · `--color-border` → ` (Slate Hairline)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 19.77:1 | AAA |
| ` | ` | 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 ### Sign-in action
Rounded dark control with ### 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 ## Do
- Use ## 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 (## 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
