№ flow-org--en-docs-getting-started

Flow

Deep charcoal expanse, crisp sans-serif clarity, cool digital efficiency.

Type Specimenminimalism swiss monochrome brutalism developer toolslight

The design prioritizes clarity and functionality through a stark contrast of dark and light, emphasizing typography and a clean layout. The limited color palette and precise spacing create a sense of focused professionalism. · javascript type checker, developer tools, static analysis, code quality, dark theme, technical website, minimalist design, code editor, flow.org, typescript

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

SwatchHexOKLCHSuggested roleCopy

Hex#deb334
OKLCHoklch(78.4% 0.145 89)
RoleDominant
find sites →
Hex#ab8c36
OKLCHoklch(65.3% 0.110 89)
RoleSurface
find sites →
Hex#f1838b
OKLCHoklch(73.3% 0.135 16)
RoleInk
find sites →
Hex#817f77
OKLCHoklch(59.6% 0.012 95)
RoleAccent
find sites →
Hex#b4b5bc
OKLCHoklch(77.4% 0.010 280)
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	Geist Variable	56px	700	1.1	-0.84px	Aa Bb Cc
h2	Geist Variable	32px	700	1.2	-0.32px	Aa Bb Cc
body	Geist Variable	16px	400	1.65	0	Aa Bb Cc
button	Geist Variable	13px	400	1.4	0	Aa Bb Cc

Spacing scale

48px

56px

80px

88px

96px

Radius scale

0px

6px

8px

40px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #deb334;
  --color-surface: #ab8c36;
  --color-ink: #f1838b;
  --color-accent: #817f77;
  --color-detail: #b4b5bc;
}

/* CSS variables exposed by source */
:root {
  --ifm-menu-link-padding-vertical: 0.375rem;
  --ifm-spacing-vertical: 1rem;
  --ifm-color-primary-contrast-background: #102445;
  --ifm-pre-line-height: 1.45;
  --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: #efce65;
  --ifm-scrollbar-track-background-color: #444;
  --ifm-color-success-darker: #008b00;
  --ifm-alert-padding-horizontal: 1rem;
  --ifm-color-gray-400: #ccd0d5;
  --ifm-blockquote-color: #ebedf0;
  --ifm-color-success-contrast-foreground: #e6f6e6;
  --ifm-blockquote-font-size: 100%;
  --docsearch-icon-stroke-width: 1.4;
  --ifm-font-size-base: 100%;
  --ifm-navbar-link-color: #e3e3e3;
  --ifm-breadcrumb-padding-vertical: 0.4rem;
  --ifm-breadcrumb-separator-size-multiplier: 1.25;
  --ifm-heading-font-family: "Geist Variable",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ifm-link-hover-color: #f0c94a;
  --ifm-color-primary-dark: #e3b51d;
  --ifm-background-surface-color: #353d46;
  --docsearch-footer-background: #1e2136;
  --ifm-font-weight-base: 400;
  --ifm-font-weight-normal: 400;
  --ifm-color-secondary-contrast-background: #474748;
  --ifm-color-emphasis-400: #8d949e;
  --ifm-tabs-padding-vertical: 1rem;
  --ifm-color-success-lightest: #80d280;
  --ifm-navbar-item-padding-horizontal: 0.75rem;
  --docsearch-hit-height: 56px;
  --ifm-pre-border-radius: 4px;
  --ifm-color-white: #fff;
  --docsearch-modal-height: 600px;
  --ifm-list-margin: 1rem;
  --ifm-color-primary-contrast-foreground: #ebf2fc;
  --ifm-badge-border-width: 1px;
  --docsearch-spacing: 12px;
  --ifm-color-danger-lightest: #fd9c9f;
  --ifm-color-warning-dark: #e6a700;
  --ifm-color-danger-lighter: #fb7478;
  --ifm-alert-color: #e3e3e3;
  --ifm-pills-spacing: 0.125rem;
  --ifm-color-danger-light: #fb565b;
  --docusaurus-collapse-button-bg: hsla(0,0%,100%,.05);
  --ifm-color-gray-900: #1c1e21;
  --ifm-lightest-value: 50%;
  --ifm-color-primary-darkest: #b18c13;
  --ifm-font-color-base: #e3e3e3;
  --docsearch-hit-active-color: #fff;
  --ifm-breadcrumb-item-background-active: hsla(0,0%,100%,.05);
  --ifm-color-emphasis-900: #f5f6f7;
  --ifm-color-success-light: #26b226;
  --ifm-color-emphasis-500: #bec3c9;
  --ifm-color-warning-lightest: #ffdd80;
  --ifm-list-item-margin: 0.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 Flow.
Reference design system (extracted from the live site):
- Palette: #deb334, #ab8c36, #f1838b, #817f77, #b4b5bc
- Typefaces: Geist Variable
- Macrostructure: Type Specimen
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/flow-org--en-docs-getting-started

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Geist Variable

56px

700

1.1

-0.84px

Aa Bb Cc

Geist Variable

32px

700

1.2

-0.32px

Aa Bb Cc

body

Geist Variable

16px

400

1.65

Aa Bb Cc

button

Geist Variable

13px

400

1.4

Aa Bb Cc

:root { --color-dominant: #deb334; --color-surface: #ab8c36; --color-ink: #f1838b; --color-accent: #817f77; --color-detail: #b4b5bc; } /* CSS variables exposed by source */ :root { --ifm-menu-link-padding-vertical: 0.375rem; --ifm-spacing-vertical: 1rem; --ifm-color-primary-contrast-background: #102445; --ifm-pre-line-height: 1.45; --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: #efce65; --ifm-scrollbar-track-background-color: #444; --ifm-color-success-darker: #008b00; --ifm-alert-padding-horizontal: 1rem; --ifm-color-gray-400: #ccd0d5; --ifm-blockquote-color: #ebedf0; --ifm-color-success-contrast-foreground: #e6f6e6; --ifm-blockquote-font-size: 100%; --docsearch-icon-stroke-width: 1.4; --ifm-font-size-base: 100%; --ifm-navbar-link-color: #e3e3e3; --ifm-breadcrumb-padding-vertical: 0.4rem; --ifm-breadcrumb-separator-size-multiplier: 1.25; --ifm-heading-font-family: "Geist Variable",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --ifm-link-hover-color: #f0c94a; --ifm-color-primary-dark: #e3b51d; --ifm-background-surface-color: #353d46; --docsearch-footer-background: #1e2136; --ifm-font-weight-base: 400; --ifm-font-weight-normal: 400; --ifm-color-secondary-contrast-background: #474748; --ifm-color-emphasis-400: #8d949e; --ifm-tabs-padding-vertical: 1rem; --ifm-color-success-lightest: #80d280; --ifm-navbar-item-padding-horizontal: 0.75rem; --docsearch-hit-height: 56px; --ifm-pre-border-radius: 4px; --ifm-color-white: #fff; --docsearch-modal-height: 600px; --ifm-list-margin: 1rem; --ifm-color-primary-contrast-foreground: #ebf2fc; --ifm-badge-border-width: 1px; --docsearch-spacing: 12px; --ifm-color-danger-lightest: #fd9c9f; --ifm-color-warning-dark: #e6a700; --ifm-color-danger-lighter: #fb7478; --ifm-alert-color: #e3e3e3; --ifm-pills-spacing: 0.125rem; --ifm-color-danger-light: #fb565b; --docusaurus-collapse-button-bg: hsla(0,0%,100%,.05); --ifm-color-gray-900: #1c1e21; --ifm-lightest-value: 50%; --ifm-color-primary-darkest: #b18c13; --ifm-font-color-base: #e3e3e3; --docsearch-hit-active-color: #fff; --ifm-breadcrumb-item-background-active: hsla(0,0%,100%,.05); --ifm-color-emphasis-900: #f5f6f7; --ifm-color-success-light: #26b226; --ifm-color-emphasis-500: #bec3c9; --ifm-color-warning-lightest: #ffdd80; --ifm-list-item-margin: 0.25rem; }

Build a landing page in the visual style of Flow. Reference design system (extracted from the live site): - Palette: #deb334, #ab8c36, #f1838b, #817f77, #b4b5bc - Typefaces: Geist Variable - Macrostructure: Type Specimen 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/flow-org--en-docs-getting-started