# workos.com/atlas

Source: https://workos.com/atlas
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, corporate-clean, friendly, trustworthy, calm, technical, confident
Colors: #fdfefe, #9db6ec, #d0d1d9, #5492ec, #070909, #b2b2b2, #2e3032, #72a8ed
Type (h1): InterDisplay · 84px/85.68px · 600 · tracking -1.68px — "Meet Atlas, your AI coworker."
Type (h2): InterDisplay · 48px/48px · 600 · tracking -0.96px — "Connected to all your tools."
Type (h3): Inter · 16px/24px · 600 · tracking -0.16px — "Right where your team works"
Type (body): Inter · 18px/28px · 500 · tracking -0.18px — "Atlas works alongside your team in Slack to answer questions, automate tasks, an"
Type (small): Lato · 13px/19.5px · 500 — "Channels"
Type (button): Inter · 16px/24px · 500 · tracking -0.16px — "Add to your Slack"
Button (primary): "Add to your Slack" — fill #000000, text #ffffff, radius 9999px, border 0px, padding 8px 16px 8px 12px, height 40px, type 16px/500
Button (secondary): "Prep for a call" — text #ffffff, radius 9999px, border 0px, padding 10px 12px, height 40px, type 16px/400
Radii: 50% (47), 9999px (18), 8px (17), 16px (10), 4px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/workos-com-atlas/hero.webp?v=1f35494f
- Page crop (mid-1): https://media.lvly.design/library/workos-com-atlas/mid-1.webp?v=71c55670
- Page crop (mid-2): https://media.lvly.design/library/workos-com-atlas/mid-2.webp?v=aaf3c095
- Hero (mobile): https://media.lvly.design/library/workos-com-atlas/mobile-hero.webp?v=939ae26a
- Full page (desktop): https://media.lvly.design/library/workos-com-atlas/full.jpg?v=a3ea69b9
- Full page (mobile): https://media.lvly.design/library/workos-com-atlas/mobile-full.jpg?v=0e985d12
- Clip preview (mp4): https://media.lvly.design/library/workos-com-atlas/video-zfm733.preview.mp4?v=55f18769

A pure-white product launch page that sells an AI Slack agent through a single character: a glossy, Pixar-clean white robot with softly glowing cyan eyes, rendered 3D and dropped dead-center under an 84px InterDisplay headline ("Meet Atlas, your AI coworker."). Everything else is restraint — near-black type, one solid black pill CTA carrying the Slack glyph, 18px medium body at tight −0.18px tracking. The only color arrives as a wide, sky-blue gradient band (#5492ec → #9db6ec) that frames a scenario switcher (pill tabs: "Prep for a call", "Debug a regression"…) above a faux macOS window with a Slack conversation inside. Further down the page the robot returns at a laptop ringed by tool favicons, and stacked Slack channel tabs fan out like a card deck behind a realistic thread mock — the product is shown entirely in Slack's own visual language rather than in invented UI. Rounded everywhere (9999px pills, 8/16px cards, circular avatars), generous vertical air, two-column text-and-illustration sections with a strong left rag.

## Steal-worthy details

- One mascot does the branding: a white 3D robot with the WorkOS diamond embossed on its chest — the hero, the section illustrations and the Slack avatar are all the same character, so the page needs no other imagery.
- Color is rationed to a single blue gradient band behind the interactive demo; the rest of the page is white/black, which makes the band read as "this is the live part."
- Scenario tabs as a pill segmented control over a mock desktop window — the selected tab is solid white on the translucent blue, unselected tabs sit inside a frosted strip.
- Slack channel headers stacked and offset (#new-hires, #incidents, #customer-success, #project-orbit) like a fanned card deck, hinting at breadth without a grid of screenshots.
- The product demo is a faithful Slack thread — real avatars, an AGENT badge, timestamps, bolded entities and a #launch channel link — credibility borrowed from a UI the reader already trusts.
- The nav is nearly empty: logo + sub-brand word ("Atlas" in a lighter weight) on the left, one black pill CTA on the right, nothing else.
- Display headline uses the InterDisplay optical size at 600 weight with −1.68px tracking and a ~1.02 line-height, breaking over two lines with the second line longer.

## Style recipe

- Ground: pure #ffffff page, no section tints; separate sections with vertical whitespace (≥160px) rather than rules or backgrounds.
- Type: Inter throughout. Display headlines in InterDisplay 600, 72–84px, tracking −2%, line-height 1.02, centered in the hero and left-aligned in sections. Body Inter 500 at 18px/28px, tracking −1%, color #2e3032 on white.
- Palette: near-black #070909 for headings and the primary button; mid-gray #b2b2b2 / #d0d1d9 for secondary chrome; a single accent gradient from #5492ec to #9db6ec used on exactly one surface per page. No other hues.
- Buttons: solid black pill, 40px tall, 8px 16px padding, 16px/500 white label, leading icon allowed; secondary actions are text links with an external-link glyph.
- Radii: 9999px for pills and tabs, 16px for large panels and windows, 8px for inner cards, 50% for avatars and icon chips.
- Imagery: one rendered 3D mascot with soft studio lighting and a subtle contact shadow, reused at every scale; frame product UI inside a light macOS-style window (three traffic-light dots, hairline border, slight drop shadow).
- Interactive demos: a frosted-glass pill tab strip on a translucent accent band, selected tab solid white with dark label, others white text at ~70% opacity.
- Layout: 1200px max content width, hero centered, feature sections as two columns (text ~40%, illustration ~60%) alternating sides; stack related panels with small offsets to suggest depth.
- Motion: light entrance only — fade/rise on the hero, cross-fade between scenario tabs; no parallax, no continuous animation.