№ shortwave-com

Shortwave

Deep indigo expanse, crisp geometric sans-serif, a feeling of focused, digital clarity.

Feature Stackminimalism dark mode brutalism saas aidark

The page uses a stark, dark aesthetic with a prominent call to action. Typography is clean and functional, prioritizing clarity over ornamentation. The overall impression is efficient and focused on the product's utility. · ai email, automation tool, dark saas, productivity app, email workflow, shortwave ai, ai writing assistant

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 · monochrome · muted

SwatchHexOKLCHSuggested roleCopy

Hex#356cfa
OKLCHoklch(58.0% 0.220 264)
RoleDominant
find sites →
Hex#14246e
OKLCHoklch(30.3% 0.129 268)
RoleSurface
find sites →
Hex#9bb5fc
OKLCHoklch(78.1% 0.106 268)
RoleInk
find sites →
Hex#787b98
OKLCHoklch(59.1% 0.044 280)
RoleAccent
find sites →
Hex#b3b4ba
OKLCHoklch(77.1% 0.009 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	Sample
h1	Poppins	64px	400	1.19	Aa Bb Cc
h2	Poppins	52px	400	1.04	Aa Bb Cc
h3	Poppins	24px	400	1.15	Aa Bb Cc
body	Times	16px	400	1.15	Aa Bb Cc
button	Poppins	16px	600	1.5	Aa Bb Cc

Spacing scale

64px

Radius scale

0px

8px

Export

:root {
  --color-dominant: #356cfa;
  --color-surface: #14246e;
  --color-ink: #9bb5fc;
  --color-accent: #787b98;
  --color-detail: #b3b4ba;
}

/* CSS variables exposed by source */
:root {
  --primary-hover: #4D7EFF;
  --primary-text: #6593FF;
  --primary: #356AFF;
  --primary-shine: #abc7ff;
  --bg: #0F0F16;
  --purple-card-hover: #7347FF59;
  --bright-purple: #7b4dff;
  --sea-green: #60D1D1;
  --card-border: rgba(255, 255, 255, 0.12);
  --turquoise-card: #2570A94D;
  --lowest-emphasis: rgba(255, 255, 255, 0.2);
  --divider: rgba(255, 255, 255, 0.12);
  --blue-card: #4964FF1A;
  --highlighted-purple-card: linear-gradient(315deg, #8F00FFCC 0%, #7583FFCC 46.87%);
  --blue-card-hover: #455FBA80;
  --green-tile: #47E3AB;
  --purple-highlight: #7B6FB4;
  --low-emphasis: #A1A1A1;
  --cta-lowlight-splash: #0055ff42;
  --purple-card: #7347FF33;
  --blue-splash: #0f1354;
  --highlighted-blue-card: #3165DCCC;
  --turquoise-card-hover: #2570A980;
  --medium-emphasis: #c0bfbf;
  --nav-bg: rgba(22, 22, 22, 0.4);
  --white: #FFFFFF;
  --pink-blur: #ff38d3;
  --card-bg: #161620;
  --card-border-shine: rgba(255, 255, 255, 0.24);
  --neutral: #dedede;
}

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 Shortwave.
Reference design system (extracted from the live site):
- Palette: #356cfa, #14246e, #9bb5fc, #787b98, #b3b4ba
- Typefaces: Poppins, Times
- Macrostructure: Feature Stack
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/shortwave-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Poppins

64px

400

1.19

Aa Bb Cc

Poppins

52px

400

1.04

Aa Bb Cc

Poppins

24px

400

1.15

Aa Bb Cc

body

Times

16px

400

1.15

Aa Bb Cc

button

Poppins

16px

600

1.5

Aa Bb Cc

:root { --color-dominant: #356cfa; --color-surface: #14246e; --color-ink: #9bb5fc; --color-accent: #787b98; --color-detail: #b3b4ba; } /* CSS variables exposed by source */ :root { --primary-hover: #4D7EFF; --primary-text: #6593FF; --primary: #356AFF; --primary-shine: #abc7ff; --bg: #0F0F16; --purple-card-hover: #7347FF59; --bright-purple: #7b4dff; --sea-green: #60D1D1; --card-border: rgba(255, 255, 255, 0.12); --turquoise-card: #2570A94D; --lowest-emphasis: rgba(255, 255, 255, 0.2); --divider: rgba(255, 255, 255, 0.12); --blue-card: #4964FF1A; --highlighted-purple-card: linear-gradient(315deg, #8F00FFCC 0%, #7583FFCC 46.87%); --blue-card-hover: #455FBA80; --green-tile: #47E3AB; --purple-highlight: #7B6FB4; --low-emphasis: #A1A1A1; --cta-lowlight-splash: #0055ff42; --purple-card: #7347FF33; --blue-splash: #0f1354; --highlighted-blue-card: #3165DCCC; --turquoise-card-hover: #2570A980; --medium-emphasis: #c0bfbf; --nav-bg: rgba(22, 22, 22, 0.4); --white: #FFFFFF; --pink-blur: #ff38d3; --card-bg: #161620; --card-border-shine: rgba(255, 255, 255, 0.24); --neutral: #dedede; }

Build a landing page in the visual style of Shortwave. Reference design system (extracted from the live site): - Palette: #356cfa, #14246e, #9bb5fc, #787b98, #b3b4ba - Typefaces: Poppins, Times - Macrostructure: Feature Stack 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/shortwave-com