The visual approach
WorkOS anchors its entire palette on #7C3AED, a saturated purple that occupies the space between Stripe's indigo and Vercel's black. For a product selling single sign-on and SCIM provisioning—features historically marketed with navy blues and enterprise gray—the choice signals a audience shift. This is authentication infrastructure for developers who already use Tailwind and deploy to Vercel, not IT buyers comparing Okta SKUs.
The typography follows through. Inter at 48px / 700 weight for H1, 36px / 700 for H2, with #111827 text on #FFFFFF backgrounds. The type scale is tight—Display tops out at 60–72px—so the hierarchy never feels like a SaaS billboard. Body copy sits at 16px / 400, secondary text drops to #6B7280, and the whole system assumes readers are scanning documentation, not being sold to.
Component vocabulary stays minimal: nav, hero, card, pricing, cta, form. No testimonial carousels, no "trusted by" logo parades above the fold, no chatbot widgets. The design treats SSO setup the way Stripe treats payment integration—serious infrastructure that doesn't need to cosplay as an enterprise suite.
What works
The motion system earns its complexity budget. Primary buttons lift -translate-y-0.5 with shadow expansion over 200ms ease-out, a micro-interaction that separates clickable CTAs from passive cards. Toggle switches animate at 250ms with cubic-bezier(.4,0,.2,1), matching the timing curve Radix UI uses by default—evidence that WorkOS either uses Radix primitives or intentionally matches them.
Integration logos start grayscale and saturate to full color over 300ms on hover. This pattern solves two problems: it keeps the grid visually quiet when twenty vendor logos compete for attention, and it creates an interaction hook without needing border highlights or scale transforms. The filter transition is cheap to animate and works at any logo size.
Notification badges ("New user added") slide up 12px while fading from opacity: 0 to opacity: 1 over 350ms cubic-bezier(.2,.8,.2,1). The timing curve front-loads acceleration, so the badge appears to pop into place rather than drift. Icon accents—lock icons, user-plus glyphs—scale 1 → 1.1 → 1 over 250ms total, a two-phase bounce that confirms the interaction without feeling cartoonish.
Parallax cards shift their striped background patterns at 0.5x scroll speed. This is restrained compared to most parallax implementations: the foreground card content scrolls normally, only the decorative lines lag behind. It adds depth without triggering motion sensitivity or making the page feel unstable during fast scrolling.
What a builder can borrow
The grayscale-to-color logo treatment is the easiest lift. Apply filter: grayscale(100%) by default, transition to grayscale(0%) on hover over 300ms. Works for partner grids, integration pages, or any layout where a dozen logos need to coexist without visual chaos. No custom SVG states required—one CSS rule handles every logo format.
The notification badge animation is worth copying directly: transform: translateY(12px); opacity: 0; in the initial state, then transition both properties to translateY(0); opacity: 1; with cubic-bezier(.2,.8,.2,1). The curve does the work—swap it for ease-out and the animation feels sluggish. The specific curve makes it snappy.
For developers building auth or admin features, WorkOS demonstrates that "enterprise-ready" doesn't require a visual dialect separate from your product. If your app uses purple and Inter, your SSO configuration screen can too. The design system doesn't code-switch between end-user UI and enterprise features—it applies the same #7C3AED primary, the same 200ms button hovers, the same 16px body text. This consistency makes enterprise features feel like native product capabilities instead of bolted-on admin panels.
The purple itself matters less than the principle: pick a primary color that reflects your product's personality, then use it everywhere, including the parts that integrate with Okta. WorkOS proves that SSO doesn't have to look like a separate product.