№ basecamp-com

Basecamp

Warm coral gradients and playful, slightly quirky sans-serifs float in open, airy negative space.

Feature Stackplayful maximalism saaslight

The page uses a dynamic composition of illustrations and text to convey a sense of chaotic problem-solving. The color palette is bright and contrasting, creating a lively and slightly frantic mood. Typography is clean and modern, prioritizing readability amidst the visual noise. · project management, saas frustration, team collaboration, workflow problems, productivity tools, software challenges, workplace stress

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: saturated · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#1273eb
OKLCHoklch(57.5% 0.199 258)
RoleDominant
find sites →
Hex#128424
OKLCHoklch(53.5% 0.163 145)
RoleSurface
find sites →
Hex#fbdcb8
OKLCHoklch(91.1% 0.058 71)
RoleInk
find sites →
Hex#b08f54
OKLCHoklch(66.8% 0.087 81)
RoleAccent
find sites →
Hex#9cbbcd
OKLCHoklch(77.5% 0.042 234)
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	Graphik	42px	600	1.15	-0.942872px	Aa Bb Cc
h2	Graphik	38px	600	1.15	-0.857142px	Aa Bb Cc
body	Graphik	15px	400	1.5	-0.285714px	Aa Bb Cc
button	Graphik	15px	500	1	-0.285714px	Aa Bb Cc

Spacing scale

9px

23px

38px

91px

Radius scale

0px

6px

9px

11px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #1273eb;
  --color-surface: #128424;
  --color-ink: #fbdcb8;
  --color-accent: #b08f54;
  --color-detail: #9cbbcd;
}

/* CSS variables exposed by source */
:root {
  --text-decoration-thickness: max(1px, 0.07em);
  --color-highlight: oklch(0.9034 0.1292 91.09);
  --space-xxxx-large: 12em;
  --border-radius: 0.75em;
  --color-ink: oklch(0.3209 0.0204 233.83);
  --text-underline-offset: 0.08em;
  --font-size-x-large: max(1rem, 1.5873vw);
  --font-size-small: max(0.5625rem, 0.9259vw);
  --font-size-xx-large: max(1.1875rem, 1.8519vw);
  --color-blue-hover: oklch(0.5087 0.1602 254.08);
  --space-small: 0.8em;
  --font-family-graphik: 'Graphik', sans-serif;
  --font-size-x-small: max(0.5rem, 0.7937vw);
  --color-ink-5: oklch(0.56 0.0133 231.77);
  --color-yellow: oklch(0.9034 0.1292 91.09);
  --font-family-monaspace: 'Monaspace', monospace;
  --space-x-large: 3em;
  --font-size-large: max(0.875rem, 1.3228vw);
  --color-white: oklch(1 0 0);
  --color-ink-4: oklch(0.3209 0.0204 233.83);
  --space-large: 2em;
  --space-neutral: 1.5em;
  --space-medium: 1em;
  --font-family-sharpie: 'Sharpie', sans-serif;
  --space-x-small: 0.6em;
  --color-ink-1: oklch(0.1891 0.0191 235.5);
  --color-ink-inverted: oklch(0.3209 0.0204 233.83);
  --font-size-xxx-large: max(1.6875rem, 2.6455vw);
  --font-family-berkeley: 'Berkeley Mono', monospace;
  --space-xxx-large: 8em;
  --color-red: oklch(0.6311 0.1701 32);
  --space-xx-large: 6em;
  --color-black: oklch(0 0 0);
  --color-green: oklch(0.5506 0.1301 154.06);
  --color-ink-3: oklch(0.2714 0.023 230.3);
  --color-blue: oklch(0.5687 0.1602 254.08);
  --color-green-hover: oklch(0.4906 0.1301 154.06);
  --color-canvas: oklch(0.9802 0.0074 151.89);
  --color-ink-2: oklch(0.2303 0.0211 232.9);
  --color-ink-inverted-hover: oklch(0.2714 0.023 230.3);
  --font-size-xxxx-large: max(1.875rem, 2.9101vw);
  --font-size-medium: max(0.75rem, 1.1905vw);
  --color-ink-hover: oklch(0.2714 0.023 230.3);
  --font-size: max(0.6875rem, 1.0582vw);
  --oklch-ink-inverted: 0.3209 0.0204 233.83;
  --oklch-off-white: 0.9197 0.0059 239.83;
  --oklch-ink-inverted-hover: 0.2714 0.023 230.3;
  --oklch-ink-5: 0.56 0.0133 231.77;
  --oklch-red: 0.6311 0.1701 32;
  --_number-flow-d: 0;
  --oklch-theme-1: 0.9802 0.0074 151.89;
  --letter-spacing-loose: -0.01125em;
  --_number-flow-dx: 0px;
  --oklch-theme-5: 0.9727 0.0119 17.36;
  --oklch-theme-3: 0.9856 0.0084 56.32;
  --oklch-yellow: 0.9034 0.1292 91.09;
  --oklch-ink-hover: 0.2714 0.023 230.3;
  --oklch-white: 1 0 0;
  --oklch-theme-2: 0.9822 0.0118 313.22;
  --line-height-tight: 1.3;
}

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 Basecamp.
Reference design system (extracted from the live site):
- Palette: #1273eb, #128424, #fbdcb8, #b08f54, #9cbbcd
- Typefaces: Graphik
- 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/basecamp-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Graphik

42px

600

1.15

-0.942872px

Aa Bb Cc

Graphik

38px

600

1.15

-0.857142px

Aa Bb Cc

body

Graphik

15px

400

1.5

-0.285714px

Aa Bb Cc

button

Graphik

15px

500

-0.285714px

Aa Bb Cc

:root { --color-dominant: #1273eb; --color-surface: #128424; --color-ink: #fbdcb8; --color-accent: #b08f54; --color-detail: #9cbbcd; } /* CSS variables exposed by source */ :root { --text-decoration-thickness: max(1px, 0.07em); --color-highlight: oklch(0.9034 0.1292 91.09); --space-xxxx-large: 12em; --border-radius: 0.75em; --color-ink: oklch(0.3209 0.0204 233.83); --text-underline-offset: 0.08em; --font-size-x-large: max(1rem, 1.5873vw); --font-size-small: max(0.5625rem, 0.9259vw); --font-size-xx-large: max(1.1875rem, 1.8519vw); --color-blue-hover: oklch(0.5087 0.1602 254.08); --space-small: 0.8em; --font-family-graphik: 'Graphik', sans-serif; --font-size-x-small: max(0.5rem, 0.7937vw); --color-ink-5: oklch(0.56 0.0133 231.77); --color-yellow: oklch(0.9034 0.1292 91.09); --font-family-monaspace: 'Monaspace', monospace; --space-x-large: 3em; --font-size-large: max(0.875rem, 1.3228vw); --color-white: oklch(1 0 0); --color-ink-4: oklch(0.3209 0.0204 233.83); --space-large: 2em; --space-neutral: 1.5em; --space-medium: 1em; --font-family-sharpie: 'Sharpie', sans-serif; --space-x-small: 0.6em; --color-ink-1: oklch(0.1891 0.0191 235.5); --color-ink-inverted: oklch(0.3209 0.0204 233.83); --font-size-xxx-large: max(1.6875rem, 2.6455vw); --font-family-berkeley: 'Berkeley Mono', monospace; --space-xxx-large: 8em; --color-red: oklch(0.6311 0.1701 32); --space-xx-large: 6em; --color-black: oklch(0 0 0); --color-green: oklch(0.5506 0.1301 154.06); --color-ink-3: oklch(0.2714 0.023 230.3); --color-blue: oklch(0.5687 0.1602 254.08); --color-green-hover: oklch(0.4906 0.1301 154.06); --color-canvas: oklch(0.9802 0.0074 151.89); --color-ink-2: oklch(0.2303 0.0211 232.9); --color-ink-inverted-hover: oklch(0.2714 0.023 230.3); --font-size-xxxx-large: max(1.875rem, 2.9101vw); --font-size-medium: max(0.75rem, 1.1905vw); --color-ink-hover: oklch(0.2714 0.023 230.3); --font-size: max(0.6875rem, 1.0582vw); --oklch-ink-inverted: 0.3209 0.0204 233.83; --oklch-off-white: 0.9197 0.0059 239.83; --oklch-ink-inverted-hover: 0.2714 0.023 230.3; --oklch-ink-5: 0.56 0.0133 231.77; --oklch-red: 0.6311 0.1701 32; --_number-flow-d: 0; --oklch-theme-1: 0.9802 0.0074 151.89; --letter-spacing-loose: -0.01125em; --_number-flow-dx: 0px; --oklch-theme-5: 0.9727 0.0119 17.36; --oklch-theme-3: 0.9856 0.0084 56.32; --oklch-yellow: 0.9034 0.1292 91.09; --oklch-ink-hover: 0.2714 0.023 230.3; --oklch-white: 1 0 0; --oklch-theme-2: 0.9822 0.0118 313.22; --line-height-tight: 1.3; }

Build a landing page in the visual style of Basecamp. Reference design system (extracted from the live site): - Palette: #1273eb, #128424, #fbdcb8, #b08f54, #9cbbcd - Typefaces: Graphik - 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/basecamp-com