№ fontsinuse-com--about

Fontsinuse — About

Clean, cool geometry—crisp sans-serifs on expansive, light-toned canvases.

Portfolio Gridminimalism editorial swiss type foundry medialight

The layout prioritizes showcasing type specimens and typographic explorations. The grid is clean and spacious, allowing each featured piece to breathe. It feels like a curated collection rather than a sales pitch. · font showcase, typography blog, type specimen, design archive, lettering examples, font exploration, typeface collection, editorial design, minimalist grid

Fontsinuse — About - mobile — Mobile · 375

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

SwatchHexOKLCHSuggested roleCopy

Hex#fad309
OKLCHoklch(87.4% 0.179 95)
RoleDominant
find sites →
Hex#0a63a7
OKLCHoklch(49.0% 0.132 249)
RoleSurface
find sites →
Hex#ed862e
OKLCHoklch(71.9% 0.158 56)
RoleInk
find sites →
Hex#ad8177
OKLCHoklch(64.3% 0.057 33)
RoleAccent
find sites →
Hex#d6c1a4
OKLCHoklch(82.1% 0.046 76)
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
h2	RelayCond	36px	700	1	0	Aa Bb Cc
body	BentonSansRE	14px	400	1.6	0	Aa Bb Cc

Spacing scale

10px

20px

30px

Radius scale

0px

2px

3px

Container

Max content width 1180px

Export

:root {
  --color-dominant: #fad309;
  --color-surface: #0a63a7;
  --color-ink: #ed862e;
  --color-accent: #ad8177;
  --color-detail: #d6c1a4;
}

/* CSS variables exposed by source */
:root {
  --fiu-fieldBoxShadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.05);
  --fiu-col-signal: rgb(255, 75, 51);
  --fiu-col-paleYellow: rgb(255, 243, 128);
  --fiu-col-paleGrey: rgb(221, 221, 221);
  --fiu-fontWidth-headline: 70;
  --fiu-col-green2: rgb(119, 204, 119);
  --fiu-fontWidth-copy: 100;
  --fiu-col-green: rgb(51, 153, 51);
  --fiu-fontStacks-headline: RelayCond, Arial, serif;
  --fiu-col-green2-60: rgba(119, 204, 119, 0.6);
  --fiu-fontSize-h2: 2.25rem;
  --fiu-gridUnit-3: calc(10px * 3);
  --fiu-fontSize-small: 0.75rem;
  --fiu-gridUnit-4: calc(10px * 4);
  --fiu-col-bkgd: rgb(255, 255, 255);
  --fiu-buttonHeight: calc(10px * 3);
  --fiu-gridUnit-2: calc(10px * 2);
  --fiu-fontSize-minute: 0.5625rem;
  --fiu-fontStacks-copy: BentonSansRE, Verdana, sans-serif;
  --fiu-col-text: rgb(0, 0, 0);
  --fiu-col-signal-60: rgba(255, 75, 51, 0.6);
  --fiu-letterSpacing-copy: 0;
  --fiu-col-midGrey2: rgb(102, 102, 102);
  --fiu-buttonPaddingH: 10px;
  --fiu-fontSize-h3: 1.875rem;
  --fiu-fontWidth-copy2: 105;
  --fiu-fontSize-smaller: 0.6875rem;
  --fiu-fontSize-h4: 1.5rem;
  --fiu-formBorder: solid 1px rgb(204, 204, 204);
  --fiu-defaultDropShadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.2);
  --fiu-col-darkGrey: rgb(68, 68, 68);
  --fiu-fontSize-subhead: 1rem;
  --fiu-fontSize-tiny: 0.625rem;
  --fiu-col-superPale: rgb(240, 240, 240);
  --fiu-col-red: rgb(255, 75, 51);
  --fiu-col-paleGrey2: rgb(204, 204, 204);
  --fiu-fontSize-h5: 0.75rem;
  --fiu-col-paleYellow-60: rgba(255, 243, 128, 0.6);
  --fiu-col-error: rgb(255, 75, 51);
  --fiu-fontSize-copy: 0.875rem;
  --fiu-fontWeight-bold: bold;
  --fiu-gridUnit-half: calc(10px * 0.5);
  --fiu-fontSize-h1: 3rem;
  --fiu-gridUnit-plus: calc(10px * 1.5);
  --fiu-bigButtonHeight: calc(10px * 4);
  --fiu-gridUnit: 10px;
  --fiu-col-midGrey1: rgb(153, 153, 153);
  --fiu-fontWeight-regular: normal;
  --fiu-letterSpacing-head: 0;
}

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 Fontsinuse — About.
Reference design system (extracted from the live site):
- Palette: #fad309, #0a63a7, #ed862e, #ad8177, #d6c1a4
- Typefaces: RelayCond, BentonSansRE
- Macrostructure: Portfolio Grid
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/fontsinuse-com--about

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

RelayCond

36px

700

Aa Bb Cc

body

BentonSansRE

14px

400

1.6

Aa Bb Cc

:root { --color-dominant: #fad309; --color-surface: #0a63a7; --color-ink: #ed862e; --color-accent: #ad8177; --color-detail: #d6c1a4; } /* CSS variables exposed by source */ :root { --fiu-fieldBoxShadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.05); --fiu-col-signal: rgb(255, 75, 51); --fiu-col-paleYellow: rgb(255, 243, 128); --fiu-col-paleGrey: rgb(221, 221, 221); --fiu-fontWidth-headline: 70; --fiu-col-green2: rgb(119, 204, 119); --fiu-fontWidth-copy: 100; --fiu-col-green: rgb(51, 153, 51); --fiu-fontStacks-headline: RelayCond, Arial, serif; --fiu-col-green2-60: rgba(119, 204, 119, 0.6); --fiu-fontSize-h2: 2.25rem; --fiu-gridUnit-3: calc(10px * 3); --fiu-fontSize-small: 0.75rem; --fiu-gridUnit-4: calc(10px * 4); --fiu-col-bkgd: rgb(255, 255, 255); --fiu-buttonHeight: calc(10px * 3); --fiu-gridUnit-2: calc(10px * 2); --fiu-fontSize-minute: 0.5625rem; --fiu-fontStacks-copy: BentonSansRE, Verdana, sans-serif; --fiu-col-text: rgb(0, 0, 0); --fiu-col-signal-60: rgba(255, 75, 51, 0.6); --fiu-letterSpacing-copy: 0; --fiu-col-midGrey2: rgb(102, 102, 102); --fiu-buttonPaddingH: 10px; --fiu-fontSize-h3: 1.875rem; --fiu-fontWidth-copy2: 105; --fiu-fontSize-smaller: 0.6875rem; --fiu-fontSize-h4: 1.5rem; --fiu-formBorder: solid 1px rgb(204, 204, 204); --fiu-defaultDropShadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.2); --fiu-col-darkGrey: rgb(68, 68, 68); --fiu-fontSize-subhead: 1rem; --fiu-fontSize-tiny: 0.625rem; --fiu-col-superPale: rgb(240, 240, 240); --fiu-col-red: rgb(255, 75, 51); --fiu-col-paleGrey2: rgb(204, 204, 204); --fiu-fontSize-h5: 0.75rem; --fiu-col-paleYellow-60: rgba(255, 243, 128, 0.6); --fiu-col-error: rgb(255, 75, 51); --fiu-fontSize-copy: 0.875rem; --fiu-fontWeight-bold: bold; --fiu-gridUnit-half: calc(10px * 0.5); --fiu-fontSize-h1: 3rem; --fiu-gridUnit-plus: calc(10px * 1.5); --fiu-bigButtonHeight: calc(10px * 4); --fiu-gridUnit: 10px; --fiu-col-midGrey1: rgb(153, 153, 153); --fiu-fontWeight-regular: normal; --fiu-letterSpacing-head: 0; }

Build a landing page in the visual style of Fontsinuse — About. Reference design system (extracted from the live site): - Palette: #fad309, #0a63a7, #ed862e, #ad8177, #d6c1a4 - Typefaces: RelayCond, BentonSansRE - Macrostructure: Portfolio Grid 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/fontsinuse-com--about