№ twilio-com--de-de-security

Twilio

Deep indigo expanse, crisp sans-serif geometry, a cool, digital precision.

Split Studiominimalism dark mode monochrome futurist developer tools saasdark

The page uses a stark contrast of deep blues and white, with a prominent video and concise text blocks. The layout is divided into distinct sections, creating a sense of focused information delivery. · ai platform, communication platform, twilio ai, developer tools, saas platform, dark ui, tech website, conversations ai, cloud communications

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 · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#e52e43
OKLCHoklch(60.2% 0.216 21)
RoleDominant
find sites →
Hex#041c6b
OKLCHoklch(27.8% 0.139 264)
RoleSurface
find sites →
Hex#6699f4
OKLCHoklch(68.8% 0.146 261)
RoleInk
find sites →
Hex#9d525c
OKLCHoklch(53.1% 0.100 13)
RoleAccent
find sites →
Hex#aab4c6
OKLCHoklch(76.8% 0.028 262)
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	Whitney SSm	56px	700	1.18	-1.68px	Aa Bb Cc
h2	Whitney SSm	56px	700	1.18	-0.3px	Aa Bb Cc
h3	Whitney SSm	20px	600	1.6	-0.4px	Aa Bb Cc
body	Whitney SSm	16px	400	1.75	0	Aa Bb Cc
button	Whitney SSm	12px	400	1.75	0	Aa Bb Cc

Spacing scale

4px

6px

8px

12px

16px

24px

32px

48px

64px

96px

111px

Radius scale

0px

4px

10px

20px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #e52e43;
  --color-surface: #041c6b;
  --color-ink: #6699f4;
  --color-accent: #9d525c;
  --color-detail: #aab4c6;
}

/* CSS variables exposed by source */
:root {
  --border-thin: 0.1rem;
  --font-size-100: 5.6rem;
  --color-orange-10: 254 245 238;
  --color-yellow-40: 255 221 53;
  --font-weight-titles: 400;
  --color-blue-80: 0 20 137;
  --color-orange-60: 244 124 34;
  --color-paper-accent-active: 251 217 192;
  --font-size-25: 1.5rem;
  --font-size-90: 4.8rem;
  --spacing-size-8: 9.6rem;
  --color-red-40: 245 137 138;
  --font-size-50: 2rem;
  --color-blue-700: 14 62 146;
  --color-blue-30: 153 205 255;
  --color-yellow-30: 255 233 128;
  --font-title-large: 4.8rem;
  --color-chart-red: 253 247 244;
  --font-family-buffalo: Buffalo;
  --color-gray-50-legacy: 134 145 170;
  --color-red-60: 177 15 35;
  --color-ink-accent: 23 36 59;
  --color-blue-20: 204 228 255;
  --font-family-default: Whitney SSm,helvetica,arial,sans-serif;
  --color-gray-300: 154 160 180;
  --spacing-size-3: 1.6rem;
  --color-red-10: 254 236 236;
  --font-size-00: 1rem;
  --font-copy-xxl: 2.4rem;
  --spacing-size-2: 1.2rem;
  --color-orange-30: 250 194 160;
  --spacing-size-4: 2.4rem;
  --font-size-65: 2.6rem;
  --spacing-size-6: 4.8rem;
  --color-focus-visible: 11 42 96;
  --color-gray-50: 243 244 247;
  --font-size-40: 1.8rem;
  --color-blue-10: 235 244 255;
  --shadow-card: 0 8px 24px 0 rgb(18 28 45/0.1);
  --color-green-70: 14 124 58;
  --color-red-light: 239 34 58;
  --spacing-size-0: 0;
  --color-orange-70: 195 85 35;
  --color-red-dark: 177 15 35;
  --color-white: 255 255 255;
  --color-gray-80: 57 71 98;
  --color-gray-400: 126 134 156;
  --font-copy-small: 1.4rem;
  --color-gray-20: 225 227 234;
  --color-chart-sky: 238 246 252;
  --color-ink-light: 30 47 77;
  --color-gray-30: 202 205 216;
  --font-size-10: 1.2rem;
  --font-weight-bold: 700;
  --font-size-55: 2.2rem;
  --color-paper-accent-hover: 253 227 209;
  --color-gray-100: 221 224 230;
  --font-family-text: Whitney SSm,helvetica,arial,sans-serif;
  --shadow-large: 0 16px 60px 0 rgb(18 28 45/0.15);
  --font-weight-semi-bold: 600;
}

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 Twilio.
Reference design system (extracted from the live site):
- Palette: #e52e43, #041c6b, #6699f4, #9d525c, #aab4c6
- Typefaces: Whitney SSm
- 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/twilio-com--de-de-security

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Whitney SSm

56px

700

1.18

-1.68px

Aa Bb Cc

Whitney SSm

56px

700

1.18

-0.3px

Aa Bb Cc

Whitney SSm

20px

600

1.6

-0.4px

Aa Bb Cc

body

Whitney SSm

16px

400

1.75

Aa Bb Cc

button

Whitney SSm

12px

400

1.75

Aa Bb Cc

:root { --color-dominant: #e52e43; --color-surface: #041c6b; --color-ink: #6699f4; --color-accent: #9d525c; --color-detail: #aab4c6; } /* CSS variables exposed by source */ :root { --border-thin: 0.1rem; --font-size-100: 5.6rem; --color-orange-10: 254 245 238; --color-yellow-40: 255 221 53; --font-weight-titles: 400; --color-blue-80: 0 20 137; --color-orange-60: 244 124 34; --color-paper-accent-active: 251 217 192; --font-size-25: 1.5rem; --font-size-90: 4.8rem; --spacing-size-8: 9.6rem; --color-red-40: 245 137 138; --font-size-50: 2rem; --color-blue-700: 14 62 146; --color-blue-30: 153 205 255; --color-yellow-30: 255 233 128; --font-title-large: 4.8rem; --color-chart-red: 253 247 244; --font-family-buffalo: Buffalo; --color-gray-50-legacy: 134 145 170; --color-red-60: 177 15 35; --color-ink-accent: 23 36 59; --color-blue-20: 204 228 255; --font-family-default: Whitney SSm,helvetica,arial,sans-serif; --color-gray-300: 154 160 180; --spacing-size-3: 1.6rem; --color-red-10: 254 236 236; --font-size-00: 1rem; --font-copy-xxl: 2.4rem; --spacing-size-2: 1.2rem; --color-orange-30: 250 194 160; --spacing-size-4: 2.4rem; --font-size-65: 2.6rem; --spacing-size-6: 4.8rem; --color-focus-visible: 11 42 96; --color-gray-50: 243 244 247; --font-size-40: 1.8rem; --color-blue-10: 235 244 255; --shadow-card: 0 8px 24px 0 rgb(18 28 45/0.1); --color-green-70: 14 124 58; --color-red-light: 239 34 58; --spacing-size-0: 0; --color-orange-70: 195 85 35; --color-red-dark: 177 15 35; --color-white: 255 255 255; --color-gray-80: 57 71 98; --color-gray-400: 126 134 156; --font-copy-small: 1.4rem; --color-gray-20: 225 227 234; --color-chart-sky: 238 246 252; --color-ink-light: 30 47 77; --color-gray-30: 202 205 216; --font-size-10: 1.2rem; --font-weight-bold: 700; --font-size-55: 2.2rem; --color-paper-accent-hover: 253 227 209; --color-gray-100: 221 224 230; --font-family-text: Whitney SSm,helvetica,arial,sans-serif; --shadow-large: 0 16px 60px 0 rgb(18 28 45/0.15); --font-weight-semi-bold: 600; }

Build a landing page in the visual style of Twilio. Reference design system (extracted from the live site): - Palette: #e52e43, #041c6b, #6699f4, #9d525c, #aab4c6 - Typefaces: Whitney SSm - 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/twilio-com--de-de-security