№ netlify-com--blog

Netlify — Blog

Deep charcoal canvas, friendly rounded sans-serifs, luminous apricot accents feel approachable and innovative.

Feature Stackminimalism playful developer tools saaslight

The page uses a dark background with bright, playful illustrations to highlight the core value proposition. Typography is clean and modern, with a focus on readability. The layout is structured with distinct sections for key features and a clear call to action. · saas landing page, developer tools website, ai platform design, dark mode website, modern web design, tech startup, netlify homepage, code platform, web development tools, cloud platform

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

SwatchHexOKLCHSuggested roleCopy

Hex#f9b23b
OKLCHoklch(81.1% 0.151 76)
RoleDominant
find sites →
Hex#267879
OKLCHoklch(52.5% 0.077 196)
RoleSurface
find sites →
Hex#fcbc54
OKLCHoklch(83.5% 0.140 77)
RoleInk
find sites →
Hex#64948c
OKLCHoklch(63.0% 0.053 183)
RoleAccent
find sites →
Hex#b1b2b5
OKLCHoklch(76.4% 0.004 271)
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	Figtree	64px	800	1.1	Aa Bb Cc
h2	Figtree	49px	800	1.1	Aa Bb Cc
h3	Martian Mono	12px	500	1.1	Aa Bb Cc
body	Instrument Sans	16px	400	1.5	Aa Bb Cc
button	Figtree	14px	600	1.5	Aa Bb Cc

Spacing scale

8px

16px

24px

32px

48px

64px

96px

Radius scale

0px

2px

4px

6px

12px

30px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #f9b23b;
  --color-surface: #267879;
  --color-ink: #fcbc54;
  --color-accent: #64948c;
  --color-detail: #b1b2b5;
}

/* CSS variables exposed by source */
:root {
  --color-info-border: color(srgb .19215686274509805 .4196078431372549 .9568627450980393);
  --color-invalid-border: color(srgb .8392156862745098 .15294117647058825 .25098039215686274);
  --color-bg-1-inverse: #d1d5da;
  --color-info-text: color(srgb .19215686274509805 .4196078431372549 .9568627450980393);
  --border-radius-4: 16px;
  --color-warning-border: color(srgb .984313725490196 .6941176470588235 .23921568627450981);
  --color-text-accent: color(srgb .0784313725490196 .8470588235294118 .8313725490196079);
  --color-brand-connect-1: #1b205b;
  --color-text-default: color(srgb .20784313725490197 .22745098039215686 .24313725490196078);
  --border-width-heavy: 3px;
  --color-link-1: #2e51ed;
  --color-bg-inverse: color(srgb .8196078431372549 .8352941176470589 .8549019607843137);
  --color-bg-disabled: #e9ebed;
  --color-disabled-text: color(srgb .615686274509804 .6549019607843137 .6980392156862745);
  --color-border-subtle: color(srgb 0 0 0 / .06274509803921569);
  --font-size-text-md: 1rem;
  --color-link-inverse: color(srgb .5019607843137255 .6705882352941176 .9803921568627451);
  --color-disabled-border: color(srgb .615686274509804 .6549019607843137 .6980392156862745);
  --radius-circle: 50%;
  --color-warning-text: color(srgb .3764705882352941 .20392156862745098 .03137254901960784);
  --color-brand-core-1: #2e51ed;
  --color-brand-connect-2: #2e51ed;
  --space-4xl: 10rem;
  --border-width-base: 1.5px;
  --radius-m: .375rem;
  --shadow-outline: 0px 0px 60px 0px #80abfa66;
  --color-text-warning: #603408;
  --color-brand-secondary: color(srgb .0784313725490196 .8470588235294118 .8313725490196079);
  --color-text-weak: color(srgb .4666666666666667 .5019607843137255 .5372549019607843);
  --color-border: 1px solid color(srgb .9137254901960784 .9215686274509803 .9294117647058824);
  --color-brand-support: #edf4ff;
  --color-brand-create-2: #f98e21;
  --color-success-bg: color(srgb .7450980392156863 .9764705882352941 .7764705882352941);
  --space-3xl: 6rem;
  --color-about-hero-bg: linear-gradient(to top, #edf4ff, #ffffff);
  --color-border-success: #64d87f;
  --color-highlight: #8efbf7;
  --color-bg: color(srgb 1 1 1);
  --border-radius-3: 8px;
  --font-secondary: "Figtree", system-ui, "Helvetica", sans-serif;
  --color-brand-core-2: #32e6e2;
  --color-bg-shadow: rgba(0, 0, 0, .1);
  --border-width-thin: 1px;
  --color-link-default: color(srgb .1803921568627451 .3176470588235294 .9294117647058824);
  --space-2xl: 4rem;
  --color-text-2: #545a61;
  --font-size-display-xs: clamp(1.25rem, 1.1477rem + .4545vw, 1.5rem);
  --border-radius-2: 4px;
  --space-2xs: .5rem;
  --radius-l: .75rem;
  --color-border-warning: #fbb13d;
  --font-size-display-2xl: clamp(1.8rem, calc(.7rem + 4.41vw) , 4.01rem);
  --color-logo-spark: color(srgb .0196078431372549 .7411764705882353 .7294117647058823);
  --color-bg-invalid: #fbd3d0;
  --color-text-3: #778089;
  --color-brand-2-hover: #8efbf7;
  --color-text-inverse: color(srgb .9647058823529412 .9647058823529412 .9686274509803922);
  --color-brand-primary: color(srgb .1803921568627451 .3176470588235294 .9294117647058824);
  --color-invalid-text: color(srgb .8392156862745098 .15294117647058825 .25098039215686274);
  --color-border-default: color(srgb 0 0 0 / .14901960784313725);
}

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 Netlify — Blog.
Reference design system (extracted from the live site):
- Palette: #f9b23b, #267879, #fcbc54, #64948c, #b1b2b5
- Typefaces: Figtree, Instrument Sans
- 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/netlify-com--blog

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Figtree

64px

800

1.1

Aa Bb Cc

Figtree

49px

800

1.1

Aa Bb Cc

Martian Mono

12px

500

1.1

Aa Bb Cc

body

Instrument Sans

16px

400

1.5

Aa Bb Cc

button

Figtree

14px

600

1.5

Aa Bb Cc

:root { --color-dominant: #f9b23b; --color-surface: #267879; --color-ink: #fcbc54; --color-accent: #64948c; --color-detail: #b1b2b5; } /* CSS variables exposed by source */ :root { --color-info-border: color(srgb .19215686274509805 .4196078431372549 .9568627450980393); --color-invalid-border: color(srgb .8392156862745098 .15294117647058825 .25098039215686274); --color-bg-1-inverse: #d1d5da; --color-info-text: color(srgb .19215686274509805 .4196078431372549 .9568627450980393); --border-radius-4: 16px; --color-warning-border: color(srgb .984313725490196 .6941176470588235 .23921568627450981); --color-text-accent: color(srgb .0784313725490196 .8470588235294118 .8313725490196079); --color-brand-connect-1: #1b205b; --color-text-default: color(srgb .20784313725490197 .22745098039215686 .24313725490196078); --border-width-heavy: 3px; --color-link-1: #2e51ed; --color-bg-inverse: color(srgb .8196078431372549 .8352941176470589 .8549019607843137); --color-bg-disabled: #e9ebed; --color-disabled-text: color(srgb .615686274509804 .6549019607843137 .6980392156862745); --color-border-subtle: color(srgb 0 0 0 / .06274509803921569); --font-size-text-md: 1rem; --color-link-inverse: color(srgb .5019607843137255 .6705882352941176 .9803921568627451); --color-disabled-border: color(srgb .615686274509804 .6549019607843137 .6980392156862745); --radius-circle: 50%; --color-warning-text: color(srgb .3764705882352941 .20392156862745098 .03137254901960784); --color-brand-core-1: #2e51ed; --color-brand-connect-2: #2e51ed; --space-4xl: 10rem; --border-width-base: 1.5px; --radius-m: .375rem; --shadow-outline: 0px 0px 60px 0px #80abfa66; --color-text-warning: #603408; --color-brand-secondary: color(srgb .0784313725490196 .8470588235294118 .8313725490196079); --color-text-weak: color(srgb .4666666666666667 .5019607843137255 .5372549019607843); --color-border: 1px solid color(srgb .9137254901960784 .9215686274509803 .9294117647058824); --color-brand-support: #edf4ff; --color-brand-create-2: #f98e21; --color-success-bg: color(srgb .7450980392156863 .9764705882352941 .7764705882352941); --space-3xl: 6rem; --color-about-hero-bg: linear-gradient(to top, #edf4ff, #ffffff); --color-border-success: #64d87f; --color-highlight: #8efbf7; --color-bg: color(srgb 1 1 1); --border-radius-3: 8px; --font-secondary: "Figtree", system-ui, "Helvetica", sans-serif; --color-brand-core-2: #32e6e2; --color-bg-shadow: rgba(0, 0, 0, .1); --border-width-thin: 1px; --color-link-default: color(srgb .1803921568627451 .3176470588235294 .9294117647058824); --space-2xl: 4rem; --color-text-2: #545a61; --font-size-display-xs: clamp(1.25rem, 1.1477rem + .4545vw, 1.5rem); --border-radius-2: 4px; --space-2xs: .5rem; --radius-l: .75rem; --color-border-warning: #fbb13d; --font-size-display-2xl: clamp(1.8rem, calc(.7rem + 4.41vw) , 4.01rem); --color-logo-spark: color(srgb .0196078431372549 .7411764705882353 .7294117647058823); --color-bg-invalid: #fbd3d0; --color-text-3: #778089; --color-brand-2-hover: #8efbf7; --color-text-inverse: color(srgb .9647058823529412 .9647058823529412 .9686274509803922); --color-brand-primary: color(srgb .1803921568627451 .3176470588235294 .9294117647058824); --color-invalid-text: color(srgb .8392156862745098 .15294117647058825 .25098039215686274); --color-border-default: color(srgb 0 0 0 / .14901960784313725); }

Build a landing page in the visual style of Netlify — Blog. Reference design system (extracted from the live site): - Palette: #f9b23b, #267879, #fcbc54, #64948c, #b1b2b5 - Typefaces: Figtree, Instrument Sans - 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/netlify-com--blog