# Atlas · Design system migration spec

> Source: https://atlascard.com  ·  Curated by OpenDesign  ·  en

> A masterclass in premium fintech UI, blending cinematic photography with a strict, minimalist design system to convey exclusivity and global scale.

## 1. Identity DNA

Atlas operates as a private concierge floating above the city, a system where exclusivity is communicated through extreme restraint. Its design DNA is one of atmospheric presence, using a stark, high-contrast palette and a single, centered glass element to frame access like a coveted object.

**One-liner:** A premium fintech platform offering exclusive global dining, travel, and lifestyle access.
**Keywords:** exclusive · global · luxury · membership · financial
**Analogy:** A premium black-card experience for the modern global citizen.

## 2. Color

The color system is a study in monochromatic tension. A stark palette of blacks, whites, and atmospheric grays dominates the interface, creating a canvas for the full-bleed photography. The brand's signature deep blue appears only in the isolated logo mark, a deliberate act of restraint that makes its presence a point of significance.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#1E1E1E` | main background |
| `--bg-soft` | `#272727` | card background |
| `--bg-quiet` | `#000000` | quiet area |
| `--ink` | `#F8F8F8` | body text |
| `--ink-soft` | `#808080` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--muted-soft` | `rgba(255,255,255,0.8)` | weak hint |
| `--accent` | `#001391` | single accent |
| `--line` | `rgba(255,255,255,0.15)` | divider |

**Color principle:** High-contrast dark mode with a sophisticated gradient palette and a single bold blue accent.

This principle of chromatic discipline ensures the palette serves the atmosphere rather than competing with it.

## 3. Typography

Typography is wielded as a tool of quiet authority. A geometric sans-serif is used with extreme minimalism, primarily for navigation set in uppercase with wide letter-spacing. The system deliberately minimizes typographic hierarchy, relying instead on negative space and positioning to let the visual composition speak.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1.5px | Main hero headline |
| h1 | 48px | 1.05 | 400 | -1px | Section headers |
| body | 17px | 1.23 | 400 | -0.23px | Main paragraph text |
| caption | 12px | 1.2 | 500 | 0.2px | Labels and fine print |

**Type rules:**
- Headlines use a tight negative letter-spacing.
- Monospaced type is used exclusively for labels, coordinates, and data points.
- Font weights are kept minimal, primarily relying on Regular (400).

## 4. Spacing

Generous padding and vast negative space define the rhythm, allowing the atmospheric background to breathe and the central element to float.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding and wide letter-spacing in small caps create an airy, premium feel.

## 5. Surfaces

Surfaces are defined by absence. The design employs no shadows or hard borders, relying entirely on the inherent boundaries of the full-bleed image and the translucent, glass-like quality of the floating card for visual separation.

- **Radius:** sm 4px · md 14px · lg 24px · pill 128px
- **Shadows:**
  - 0px 2px 4px 0px rgba(0, 0, 0, 0.04)
  - 0px 2px 20px 0px rgba(0, 0, 0, 0.15)
- **Borders:** Subtle 1px borders using rgba(255,255,255,0.15) or rgba(255,255,255,0.09) to define cards and sections.

## 6. Layout

The layout skeleton is a full-viewport hero composition, discarding traditional grids for a centered, floating focus. A fixed bottom navigation bar provides essential anchors while the core experience is a singular, atmospheric scene.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width sections with centered content and narrow column constraints for readability.

## 7. Motion & Interaction

Motion philosophy is cinematic and subtle, enhancing depth rather than directing flow. Background parallax and gentle floating animations on the central card create a sense of atmospheric layering, with smooth transitions maintaining a calm, exclusive tempo.

- **Durations:** micro 150ms · small 150ms · medium 750ms
- **Easing:** `cubic-bezier(0.28, 1.1, 0.74, 1)`
- **Patterns:**
  - Smooth elastic transitions for card reveals.
  - Slow, cinematic fades for hero elements.
  - Subtle background color transitions on hover.

- **Hover:** Subtle brightness increases and smooth transitions on interactive elements.
- **Click:** Immediate response with micro-interactions on buttons and links.
- **Transition:** All elements transition smoothly over 150ms to 750ms using custom cubic-bezier curves.
- **Keyboard:** Standard focus outlines likely applied for accessibility, though not explicitly visible in the screenshot.

## 8. Voice & Don'ts

The editorial voice is exclusive, confident, and understated. Headlines rely on visual impact over copy, while calls to action use direct, premium phrasing in all caps with wide tracking.

- **Tone:** Sophisticated, confident, and aspirational.
- **Headline style:** Short, punchy, and benefit-driven.
- **CTA style:** Direct and exclusive, often using monospaced uppercase text.
- **Avoid:** Avoid cluttered layouts. / Avoid loud, neon colors. / Avoid playful or informal language. / Avoid generic, overused stock imagery. / Avoid heavy, decorative borders. / Avoid dense blocks of text.

### Don'ts
- ❌ Don't use bright, saturated backgrounds — screenshot shows deep, muted dark themes (#1E1E1E).
- ❌ Don't use decorative serif fonts — screenshot shows clean, geometric sans-serif typography.
- ❌ Don't use complex, multi-colored gradients — screenshot shows subtle, monochromatic or single-hue gradients.
- ❌ Don't use heavy drop shadows — screenshot shows very subtle, soft, diffused shadows.
- ❌ Don't use small, cramped layouts — screenshot shows generous whitespace and wide spacing.
- ❌ Don't use playful, rounded icons — screenshot shows refined, minimalist, and geometric branding.

The system deliberately avoids cluttered interfaces, saturated accents, and standard e-commerce patterns to preserve its atmosphere of quiet luxury.

## System Prompt (paste into AI tool)

```
Atlas is a premium fintech platform for global lifestyle access. Its design DNA is defined by a dark, high-contrast aesthetic using deep grays (#1E1E1E, #272727) and crisp whites (#F8F8F8), anchored by a single bold blue accent (#001391). Typography relies on clean, geometric sans-serifs for display and body text, complemented by monospaced fonts for data and labels. Layouts are spacious, using generous padding and negative letter-spacing for headlines to create a refined, editorial feel. Critical donts: never use bright or neon colors, avoid decorative serif fonts, and never clutter the interface with heavy borders or complex patterns. Maintain a sophisticated, aspirational tone throughout.
```
