№ workos-com

Workos

Deep indigo and cool grey, precise sans-serifs float in expansive, clean digital space.

Split Studiominimalism swiss brutalism developer toolslight

The layout is split into two distinct sections. The left side features a vertical navigation with toggle switches, while the right side presents a prominent hero section with a clear call to action. The overall aesthetic is clean and functional, prioritizing clarity and ease of access to settings. · saas dashboard, developer platform, enterprise settings, toggle switches, clean interface, minimalist design, workos, platform settings

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: cool · muted · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#6464f4
OKLCHoklch(58.5% 0.210 278)
RoleDominant
find sites →
Hex#08087b
OKLCHoklch(27.4% 0.175 267)
RoleSurface
find sites →
Hex#997ff7
OKLCHoklch(67.4% 0.172 291)
RoleInk
find sites →
Hex#778085
OKLCHoklch(59.4% 0.013 232)
RoleAccent
find sites →
Hex#b2b5c8
OKLCHoklch(77.7% 0.027 279)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Untitled Sans	80px	500	1.05	-5.6px	Aa Bb Cc
h2	Untitled Sans	28px	500	1.2	-1.4px	Aa Bb Cc
h3	Untitled Sans	52px	500	1.07	-2.6px	Aa Bb Cc
body	Untitled Sans	16px	400	1.2	0	Aa Bb Cc
button	Untitled Sans	14px	400	1.71	0	Aa Bb Cc

Spacing scale

12px

16px

24px

66px

80px

120px

Radius scale

0px

4px

8px

18px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #6464f4;
  --color-surface: #08087b;
  --color-ink: #997ff7;
  --color-accent: #778085;
  --color-detail: #b2b5c8;
}

/* CSS variables exposed by source */
:root {
  --foreground-light-3: #8f96bd;
  --foreground-dark-3: #878ca6;
  --foreground-dark-2: #c5cae8;
  --border-color: #e8eaed;
  --brand-purple: #6363f1;
  --brand-3: #d8d9fa;
  --foreground-light-2: #656b8a;
  --border-dark: #2b335a;
  --um-text-secondary: #60646c;
  --dark-2: #C5CAE8;
  --cool-gray: #eceff1;
  --um-input-border-active: #b9bbc6;
  --um-input-bg: #f9f9fb;
  --page-padding: 56px;
  --um-input-bg-active: white;
  --um-input-border: #dddde3;
  --dark-accent: #23f0c3;
  --light-1: #29363D;
  --um-color-swatch-border: #0000301a;
  --um-cta-radius: 100px;
  --black: #29363d;
  --section-light: #f9f9fb;
  --black-dark: #030628;
  --swiper-navigation-size: 44px;
  --light-3: #8F96BD;
  --swiper-theme-color: #007aff;
  --dark-3: #878CA6;
  --um-cta-accent: #d1d1ff;
  --um-text-primary: #2b333b;
  --light-2: #656B8A;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Workos.
Reference design system (extracted from the live site):
- Palette: #6464f4, #08087b, #997ff7, #778085, #b2b5c8
- Typefaces: Untitled Sans
- Macrostructure: Split Studio
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/workos-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Untitled Sans

80px

500

1.05

-5.6px

Aa Bb Cc

Untitled Sans

28px

500

1.2

-1.4px

Aa Bb Cc

Untitled Sans

52px

500

1.07

-2.6px

Aa Bb Cc

body

Untitled Sans

16px

400

1.2

Aa Bb Cc

button

Untitled Sans

14px

400

1.71

Aa Bb Cc

:root { --color-dominant: #6464f4; --color-surface: #08087b; --color-ink: #997ff7; --color-accent: #778085; --color-detail: #b2b5c8; } /* CSS variables exposed by source */ :root { --foreground-light-3: #8f96bd; --foreground-dark-3: #878ca6; --foreground-dark-2: #c5cae8; --border-color: #e8eaed; --brand-purple: #6363f1; --brand-3: #d8d9fa; --foreground-light-2: #656b8a; --border-dark: #2b335a; --um-text-secondary: #60646c; --dark-2: #C5CAE8; --cool-gray: #eceff1; --um-input-border-active: #b9bbc6; --um-input-bg: #f9f9fb; --page-padding: 56px; --um-input-bg-active: white; --um-input-border: #dddde3; --dark-accent: #23f0c3; --light-1: #29363D; --um-color-swatch-border: #0000301a; --um-cta-radius: 100px; --black: #29363d; --section-light: #f9f9fb; --black-dark: #030628; --swiper-navigation-size: 44px; --light-3: #8F96BD; --swiper-theme-color: #007aff; --dark-3: #878CA6; --um-cta-accent: #d1d1ff; --um-text-primary: #2b333b; --light-2: #656B8A; }

Build a landing page in the visual style of Workos. Reference design system (extracted from the live site): - Palette: #6464f4, #08087b, #997ff7, #778085, #b2b5c8 - Typefaces: Untitled Sans - Macrostructure: Split Studio Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/workos-com