workos.com/atlas

Atlas by WorkOSsaved 26d ago · captured 26d ago

Seven details, seven pinned.

View as Markdown ↗

Colors8 colors · ground #FDFEFE

ground#fdfefe·83.24%#9db6ec·3.57%#d0d1d9·3.49%accent#5492ec·2.21%#070909·2.01%#b2b2b2·1.18%#2e3032·0.88%#72a8ed·0.83%

Sized by coverage · click to copy.

Typography3 families · 5 styles · InterDisplay, Inter, Lato

Meet Atlas, your AI coworker.

InterDisplay · 84/86 · 600 · -1.68px

Connected to all your tools.

InterDisplay · 48/48 · 600 · -0.96px

Right where your team works

Inter · 16/24 · 600 · -0.16px

Body

Atlas works alongside your team in Slack to answer questions, automate tasks, an

Inter · 18/28 · 500 · -0.18px

Small

Channels

Lato · 13/20 · 500 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsAdd to your Slack2 styles

Add to your SlackPrep for a call

primary · fill #000000 · label #ffffff · radius 9999px · border 0px · padding 8px 16px 8px 12px · height 40px · type 16px / 500

secondary · fill — · label #ffffff · radius 9999px · border 0px · padding 10px 12px · height 40px · type 16px / 400

Shape5 radii · 94 uses

50%47 uses · 50%

9999px18 uses · 19%

8px17 uses · 18%

16px10 uses · 11%

4px2 uses · 2%

AnalysisA 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…

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.

Style recipe- Ground: pure #ffffff page, no section tints; separate sections with vertical whitespace (≥160px) rather than rules or backgrounds. - Type: Inter throughout.

·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.

Details7 worth noting

workos.com/atlas — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1One mascot does all the branding
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.
2Color rationed to one gradient band
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."
3Scenario tabs as segmented control
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.
4Fanned stack of Slack channel headers
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.
5Faithful Slack thread as product demo
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.
6Nearly empty nav
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.
7InterDisplay headline, tight tracking
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.

saas · landing · light · minimal, corporate-clean · friendly, trustworthy, calm, technical, confident

workos.com/atlas

More like this