Screenshot of Atlas Card

Atlas Card

atlascard.com

The reference for a cinematic fintech card landing where one deep sapphire (#001391) is the only chroma, the physical card floats over atmospheric city photography, and a monospaced footnote voice does all the metadata work.

Fintech flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
display
Sequel Sans Display
body
Sequel Sans Headline Book
mono
ApercuMono Pro Medium

Do / Don't

Reference it for

  • Single-accent discipline: keep the whole canvas achromatic (Void #000000, Obsidian #1e1e1e, Graphite #272727, Ash #808080) and spend the one sapphire #001391 only on the logo mark and the active CTA
  • A hero built on full-bleed atmospheric photography (hazy aerial cityscape) rather than flat colour, with the product card composited as a floating, slightly-rotated object
  • Depth without shadow: step surfaces black to obsidian to graphite and let fog/photography carry the sense of space (shadow scale is null on purpose)
  • Monospaced footnote voice: set legal and metadata lines in a mono face (ApercuMono Pro) at ~10px, all-caps, letter-spaced, with a superscript dagger for the disclaimer marker
  • Two custom geometric sans for the editorial layer: Sequel Sans Headline Book for display, Sequel Sans Book for body, kept centred and confident
  • Full-pill controls: buttons and inputs use the 128px pill radius for a singular, invitation-only feel, one CTA at a time
  • A rounded-square app-icon logo lozenge (white tile, sapphire glyph) pinned top-centre as the only persistent brand element
  • A thin progress/scrub indicator near the base of the hero to telegraph the scroll-driven card animation

Do not copy

  • The Atlas Card name, the rounded-square sapphire logo lozenge, and the glyph inside it
  • The exact sapphire #001391 as your brand accent (it reads specifically as Atlas)
  • The licensed custom faces Sequel Sans and ApercuMono Pro (use your own geometric sans + mono)
  • The aerial city-in-fog hero photograph and the floating-card composite as a literal motif
  • Brand-specific copy such as 'ACCESS COVETED DINING, HOTELS, AND EVENTS' and the concierge/membership positioning
  • The invitation-only luxury-card business framing itself