№ calendly-com--blog

Calendly — Blog

Deep, cool tech clarity: clean lines, stark blues, and precise sans-serif precision.

Feature Stackminimalism swiss brutalism saaslight

The page uses a clean, spacious layout with a prominent hero section and a focused booking interface. The color palette is predominantly cool blues and white, creating a sense of calm efficiency. Typography is clear and functional, prioritizing readability. · scheduling interface, calendar app, meeting scheduler, productivity tool, saas design, clean ui, cool color palette, minimalist booking

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#0444fc
OKLCHoklch(50.4% 0.273 264)
RoleDominant
find sites →
Hex#11385e
OKLCHoklch(33.5% 0.080 251)
RoleSurface
find sites →
Hex#446bfc
OKLCHoklch(58.6% 0.220 268)
RoleInk
find sites →
Hex#506e8a
OKLCHoklch(52.6% 0.057 247)
RoleAccent
find sites →
Hex#97b2d0
OKLCHoklch(75.4% 0.053 251)
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	gilroy	68px	700	1.2	Aa Bb Cc
h2	gilroy	18px	400	1.6	Aa Bb Cc
h3	gilroy	28px	600	1.4	Aa Bb Cc
body	gilroy	16px	400	1	Aa Bb Cc
button	gilroy	16px	400	1	Aa Bb Cc

Spacing scale

12px

Radius scale

0px

4px

8px

12px

24px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #0444fc;
  --color-surface: #11385e;
  --color-ink: #446bfc;
  --color-accent: #506e8a;
  --color-detail: #97b2d0;
}

/* CSS variables exposed by source */
:root {
  --color-purple-200: #f3edfe;
  --text-base: 1rem;
  --color-action-tertiary-text-hover: #5f6d77;
  --spacing-gap-lg: calc(.25rem * 6);
  --color-orange-600: #f79009;
  --radius-ui-3xl: calc(.25rem * 10);
  --color-orange-800: #6f3f00;
  --color-neutral-600: #476788;
  --color-badge-warning-bg: #ffe67c;
  --color-fd-secondary: #ededed;
  --color-neutral-300: #e7edf6;
  --font-geist: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --color-purple-800: #7434f4;
  --spacing-4xl: calc(.25rem * 14);
  --text-base--line-height: calc(1.5 / 1);
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-calendly-sans: "Calendly Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --color-neutral-200: #f0f3f8;
  --color-text-secondary: #5f6d77;
  --radius-ui-full: 9999px;
  --spacing-2xl: calc(.25rem * 10);
  --color-action-primary-bg-pressed: #1e5ea7;
  --radius-btn-standard: calc(.25rem * 2.5);
  --color-text-tertiary: #93a0aa;
  --color-primary-300: #b8dcff;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-main-100p: #f4f8ff;
  --color-primary-800: #004796;
  --color-fd-diff-add-symbol: #0ac864;
  --spacing-sm: calc(.25rem * 3);
  --color-primary-500: #09f;
  --color-fd-diff-remove: #c80a641f;
  --color-badge-success-text: #3f491b;
  --color-green-500: #17e886;
  --color-primary-700: #004eba;
  --radius-ui-xl: calc(.25rem * 6);
  --color-white: #fff;
  --color-fd-border: #cccccc80;
  --radius-sm: .25rem;
  --color-iconbutton-text: #071a31;
  --spacing-gap-2xl: calc(.25rem * 12);
  --font-wulkan: "Wulkan Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --color-main-800n: #0b3558;
  --color-magnolia-a10: #fcfbf81a;
  --radius-ui-md: calc(.25rem * 4);
  --font-weight-bold: 700;
  --color-midnight-a10: #071a311a;
  --color-midnight-a20: #071a3133;
  --font-weight-regular: 400;
  --color-fd-idea: lab(64.7587% 46.0756 133.272);
  --color-ash: #e4e6e9;
  --color-fd-overlay: #0003;
  --text-xs--line-height: calc(1 / .75);
  --color-neutral-700: #194870;
  --radius-ui-xs: calc(.25rem * 2);
  --radius-2xl: 1rem;
  --radius-md: .375rem;
  --color-fd-diff-add: #0eb4641a;
  --spacing-gap-sm: calc(.25rem * 3);
  --text-xl: 1.25rem;
}

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 Calendly — Blog.
Reference design system (extracted from the live site):
- Palette: #0444fc, #11385e, #446bfc, #506e8a, #97b2d0
- Typefaces: gilroy
- 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/calendly-com--blog

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

gilroy

68px

700

1.2

Aa Bb Cc

gilroy

18px

400

1.6

Aa Bb Cc

gilroy

28px

600

1.4

Aa Bb Cc

body

gilroy

16px

400

Aa Bb Cc

button

gilroy

16px

400

Aa Bb Cc

:root { --color-dominant: #0444fc; --color-surface: #11385e; --color-ink: #446bfc; --color-accent: #506e8a; --color-detail: #97b2d0; } /* CSS variables exposed by source */ :root { --color-purple-200: #f3edfe; --text-base: 1rem; --color-action-tertiary-text-hover: #5f6d77; --spacing-gap-lg: calc(.25rem * 6); --color-orange-600: #f79009; --radius-ui-3xl: calc(.25rem * 10); --color-orange-800: #6f3f00; --color-neutral-600: #476788; --color-badge-warning-bg: #ffe67c; --color-fd-secondary: #ededed; --color-neutral-300: #e7edf6; --font-geist: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --color-purple-800: #7434f4; --spacing-4xl: calc(.25rem * 14); --text-base--line-height: calc(1.5 / 1); --font-system: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-calendly-sans: "Calendly Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --color-neutral-200: #f0f3f8; --color-text-secondary: #5f6d77; --radius-ui-full: 9999px; --spacing-2xl: calc(.25rem * 10); --color-action-primary-bg-pressed: #1e5ea7; --radius-btn-standard: calc(.25rem * 2.5); --color-text-tertiary: #93a0aa; --color-primary-300: #b8dcff; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-main-100p: #f4f8ff; --color-primary-800: #004796; --color-fd-diff-add-symbol: #0ac864; --spacing-sm: calc(.25rem * 3); --color-primary-500: #09f; --color-fd-diff-remove: #c80a641f; --color-badge-success-text: #3f491b; --color-green-500: #17e886; --color-primary-700: #004eba; --radius-ui-xl: calc(.25rem * 6); --color-white: #fff; --color-fd-border: #cccccc80; --radius-sm: .25rem; --color-iconbutton-text: #071a31; --spacing-gap-2xl: calc(.25rem * 12); --font-wulkan: "Wulkan Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --color-main-800n: #0b3558; --color-magnolia-a10: #fcfbf81a; --radius-ui-md: calc(.25rem * 4); --font-weight-bold: 700; --color-midnight-a10: #071a311a; --color-midnight-a20: #071a3133; --font-weight-regular: 400; --color-fd-idea: lab(64.7587% 46.0756 133.272); --color-ash: #e4e6e9; --color-fd-overlay: #0003; --text-xs--line-height: calc(1 / .75); --color-neutral-700: #194870; --radius-ui-xs: calc(.25rem * 2); --radius-2xl: 1rem; --radius-md: .375rem; --color-fd-diff-add: #0eb4641a; --spacing-gap-sm: calc(.25rem * 3); --text-xl: 1.25rem; }

Build a landing page in the visual style of Calendly — Blog. Reference design system (extracted from the live site): - Palette: #0444fc, #11385e, #446bfc, #506e8a, #97b2d0 - Typefaces: gilroy - 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/calendly-com--blog