Atlas

Atlas Design System Overview

Stack \- Framework: Gatsby 5.14.1 (React-based SSG) \- Deployment: Static site with CDN-hosted assets (cdn.atlas.co) \- No public design token library detected; tokens inferred from visual analysis

Typography \- Primary typeface: Clean sans-serif (system-ui / Inter-class font) \- Hierarchy: Large bold hero headings (~56–72px), section headings (~32–40px), body (~16px) \- Font weight range: 400 (body) → 700 (headings/CTAs) \- Line height: relaxed (~1.5–1.6) for body, tighter (~1.1–1.2) for display text \- Letter spacing: slightly tight on headings (−0.02em), normal on body

Color Philosophy \- Light-first UI with white (#FFFFFF) as the primary surface \- Accent: vivid blue (primary CTA, links, highlights — approx #3B6EF6 / #2563EB-range) \- Supporting: near-black for text (#0F1117 / #111827), mid-greys for secondary text and borders \- Subtle blueish tint used for highlight overlays (image: highlight-blueish.png) \- Dark sections used sparingly for contrast breaks (footer, dark feature panels) \- Customer logos rendered in greyscale/muted on white backgrounds

Spacing \- Base unit: 4px (4pt grid) \- Section vertical padding: 80–120px \- Card/component gap: 24–32px \- Inline element spacing: 8–16px \- Max content width: ~1200px centered with horizontal padding of 24–48px

Component Defaults \- Buttons: pill or slightly rounded (border-radius ~8px), solid fill for primary, outlined for secondary \- Cards: white background, subtle box-shadow, 8–12px border-radius \- Navigation: sticky top bar, white background, logo left / nav center / CTAs right \- Badges/tags: small rounded pills with muted background (e.g., "Navi" announcement bar) \- Tables: clean striped or bordered rows, used extensively on pricing page \- Toggle: billing period toggle (monthly/annually) — pill-style switch

Layout \- Single-column marketing layout with max-width constraint \- Hero: full-width, centered text, paired with product screenshot/video \- Feature sections: alternating image+text two-column grid \- Pricing: horizontal card grid (4 columns on desktop) \- Footer: multi-column link grid on dark/light background \- Responsive: mobile-first with viewport-fit=cover

Dark / Light Mode \- Light mode only on marketing site (theme-color: #FFFFFF) \- App likely supports dark mode (logo-light.svg / logo-dark.svg naming convention observed) \- No prefers-color-scheme CSS detected on public pages