№ prettier-io

Prettier

Deep charcoal expanse, crisp sans-serif geometry, punctuated by vibrant, coded accents.

Ecosystem Indexminimalism swiss dark mode monochrome brutalism developer toolsdark

The page uses a dark, muted color palette with a focus on typography and code snippets. The layout is structured with distinct blocks showcasing the tool's functionality, creating a sense of organized complexity. · code formatter, dark theme, javascript tools, syntax highlighting, developer website, code editor, minimalist design, technical website

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 · neon · high-contrast · cool · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#fbbb44
OKLCHoklch(83.1% 0.149 79)
RoleDominant
find sites →
Hex#1b5771
OKLCHoklch(43.1% 0.074 231)
RoleSurface
find sites →
Hex#f9c44f
OKLCHoklch(84.7% 0.144 84)
RoleInk
find sites →
Hex#8ca45c
OKLCHoklch(68.3% 0.101 124)
RoleAccent
find sites →
Hex#9fb9bb
OKLCHoklch(76.7% 0.029 202)
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
h2	system-ui	34px	500	1.25	Aa Bb Cc
h3	system-ui	20px	500	1.25	Aa Bb Cc
body	system-ui	16px	400	1.65	Aa Bb Cc
button	system-ui	13px	400	1.4	Aa Bb Cc

Spacing scale

8px

16px

20px

32px

48px

Radius scale

0px

8px

13px

50px

Container

Max content width 1320px

Export

:root {
  --color-dominant: #fbbb44;
  --color-surface: #1b5771;
  --color-ink: #f9c44f;
  --color-accent: #8ca45c;
  --color-detail: #9fb9bb;
}

/* CSS variables exposed by source */
:root {
  --color-pink-light: #d2add3;
  --color-pink-dark: #b87fbb;
  --color-yellow-lighter: #facd73;
  --color-yellow-darkest: #d69108;
  --color-pink-lightest: #ebdaeb;
  --color-pink-darker: #b274b5;
  --color-pink-lighter: #d8b8d9;
  --color-pink: #c596c7;
  --shadow-pop: 0 4px 12px rgba(0,0,0,.06);
  --color-yellow-light: #f9c764;
  --color-yellow: #f8bc45;
  --color-yellow-darker: #f6ab17;
  --color-pink-darkest: #9c559f;
  --color-yellow-dark: #f7b126;
  --color-yellow-lightest: #fbdda1;
  --ifm-menu-link-padding-vertical: .375rem;
  --ifm-spacing-vertical: 1rem;
  --ifm-color-primary-contrast-background: #ebf2fc;
  --ifm-pre-line-height: 1.45;
  --docsearch-background-color: #f5f5fa;
  --ifm-global-border-width: 1px;
  --ifm-card-horizontal-spacing: 1rem;
  --ifm-avatar-photo-size: 3rem;
  --ifm-h2-font-size: 1.5rem;
  --ifm-font-weight-semibold: 500;
  --ifm-color-primary-lighter: #1d959f;
  --ifm-scrollbar-track-background-color: #f1f1f1;
  --ifm-color-success-darker: #008b00;
  --ifm-alert-padding-horizontal: 1rem;
  --ifm-color-gray-400: #ccd0d5;
  --ifm-blockquote-color: #444950;
  --ifm-color-success-contrast-foreground: #003100;
  --ifm-blockquote-font-size: 100%;
  --docsearch-icon-stroke-width: 1.4;
  --ifm-font-size-base: 100%;
  --ifm-navbar-link-color: #1c1e21;
  --ifm-breadcrumb-padding-vertical: .4rem;
  --ifm-breadcrumb-separator-size-multiplier: 1.25;
  --ifm-heading-font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --ifm-link-hover-color: #19828a;
  --ifm-color-primary-dark: #16757c;
  --ifm-background-surface-color: #fff;
  --docsearch-footer-background: rgba(255,255,255,.65);
  --ifm-font-weight-normal: 400;
  --ifm-font-weight-base: 400;
  --docsearch-search-button-text-color: #5a5e9a;
  --ifm-color-secondary-contrast-background: #fdfdfe;
  --ifm-color-emphasis-400: #ccd0d5;
  --ifm-tabs-padding-vertical: 1rem;
  --ifm-color-success-lightest: #80d280;
  --ifm-navbar-item-padding-horizontal: .75rem;
  --docsearch-hit-height: 56px;
  --ifm-pre-border-radius: .4rem;
  --ifm-color-white: #fff;
  --docsearch-modal-height: 600px;
  --ifm-list-margin: 1rem;
  --ifm-color-primary-contrast-foreground: #102445;
  --ifm-badge-border-width: 1px;
  --docsearch-spacing: 12px;
  --ifm-color-danger-lightest: #fd9c9f;
}

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 Prettier.
Reference design system (extracted from the live site):
- Palette: #fbbb44, #1b5771, #f9c44f, #8ca45c, #9fb9bb
- Typefaces: system-ui
- Macrostructure: Ecosystem Index
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/prettier-io

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

system-ui

34px

500

1.25

Aa Bb Cc

system-ui

20px

500

1.25

Aa Bb Cc

body

system-ui

16px

400

1.65

Aa Bb Cc

button

system-ui

13px

400

1.4

Aa Bb Cc

:root { --color-dominant: #fbbb44; --color-surface: #1b5771; --color-ink: #f9c44f; --color-accent: #8ca45c; --color-detail: #9fb9bb; } /* CSS variables exposed by source */ :root { --color-pink-light: #d2add3; --color-pink-dark: #b87fbb; --color-yellow-lighter: #facd73; --color-yellow-darkest: #d69108; --color-pink-lightest: #ebdaeb; --color-pink-darker: #b274b5; --color-pink-lighter: #d8b8d9; --color-pink: #c596c7; --shadow-pop: 0 4px 12px rgba(0,0,0,.06); --color-yellow-light: #f9c764; --color-yellow: #f8bc45; --color-yellow-darker: #f6ab17; --color-pink-darkest: #9c559f; --color-yellow-dark: #f7b126; --color-yellow-lightest: #fbdda1; --ifm-menu-link-padding-vertical: .375rem; --ifm-spacing-vertical: 1rem; --ifm-color-primary-contrast-background: #ebf2fc; --ifm-pre-line-height: 1.45; --docsearch-background-color: #f5f5fa; --ifm-global-border-width: 1px; --ifm-card-horizontal-spacing: 1rem; --ifm-avatar-photo-size: 3rem; --ifm-h2-font-size: 1.5rem; --ifm-font-weight-semibold: 500; --ifm-color-primary-lighter: #1d959f; --ifm-scrollbar-track-background-color: #f1f1f1; --ifm-color-success-darker: #008b00; --ifm-alert-padding-horizontal: 1rem; --ifm-color-gray-400: #ccd0d5; --ifm-blockquote-color: #444950; --ifm-color-success-contrast-foreground: #003100; --ifm-blockquote-font-size: 100%; --docsearch-icon-stroke-width: 1.4; --ifm-font-size-base: 100%; --ifm-navbar-link-color: #1c1e21; --ifm-breadcrumb-padding-vertical: .4rem; --ifm-breadcrumb-separator-size-multiplier: 1.25; --ifm-heading-font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; --ifm-link-hover-color: #19828a; --ifm-color-primary-dark: #16757c; --ifm-background-surface-color: #fff; --docsearch-footer-background: rgba(255,255,255,.65); --ifm-font-weight-normal: 400; --ifm-font-weight-base: 400; --docsearch-search-button-text-color: #5a5e9a; --ifm-color-secondary-contrast-background: #fdfdfe; --ifm-color-emphasis-400: #ccd0d5; --ifm-tabs-padding-vertical: 1rem; --ifm-color-success-lightest: #80d280; --ifm-navbar-item-padding-horizontal: .75rem; --docsearch-hit-height: 56px; --ifm-pre-border-radius: .4rem; --ifm-color-white: #fff; --docsearch-modal-height: 600px; --ifm-list-margin: 1rem; --ifm-color-primary-contrast-foreground: #102445; --ifm-badge-border-width: 1px; --docsearch-spacing: 12px; --ifm-color-danger-lightest: #fd9c9f; }

Build a landing page in the visual style of Prettier. Reference design system (extracted from the live site): - Palette: #fbbb44, #1b5771, #f9c44f, #8ca45c, #9fb9bb - Typefaces: system-ui - Macrostructure: Ecosystem Index 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/prettier-io