№ footer-design

Footer — The only footer gallery on earth.

Crisp, technical blue-grey grid; clean sans-serif, spacious layouts, a quiet, confident clarity.

Specimenminimalism editorial swiss medialight

Footer — The only footer gallery on earth. - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Footer — The only footer gallery on earth. - full page scroll

Footer — The only footer gallery on earth. - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

SwatchHexOKLCHSuggested roleCopy

Hex#3639bd
OKLCHoklch(43.7% 0.201 273)
RoleDominant
find sites →
Hex#8dd49c
OKLCHoklch(80.8% 0.106 150)
RoleSurface
find sites →
Hex#542414
OKLCHoklch(32.5% 0.076 39)
RoleInk
find sites →
Hex#6da37b
OKLCHoklch(66.6% 0.082 152)
RoleAccent
find sites →
Hex#94c28b
OKLCHoklch(76.7% 0.091 140)
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	Inter	32px	600	1	-1.6px	Aa Bb Cc
h2	Inter	20px	600	1.4	-0.6px	Aa Bb Cc
h3	Inter	32px	600	1	-1.28px	Aa Bb Cc
body	Inter	18px	400	1.4	-0.54px	Aa Bb Cc
button	Inter	14px	600	1	-0.42px	Aa Bb Cc

Spacing scale

8px

12px

16px

24px

40px

60px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #3639bd;
  --color-surface: #8dd49c;
  --color-ink: #542414;
  --color-accent: #6da37b;
  --color-detail: #94c28b;
}

/* CSS variables exposed by source */
:root {
  --black-secondary: rgba(36, 36, 36, 0.64);
  --white-code: 255, 255, 255;
  --white: white;
  --gray: 242, 242, 242;
  --grey: #f2f2f2;
  --midnight: rgb(20, 20, 20);
  --lightgray: 249, 249, 249;
  --white-secondary: rgba(255, 255, 255, 0.64);
  --black-code: 36, 36, 36;
  --white-tertiary: rgba(255, 255, 255, 0.12);
  --black: #242424;
}

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 Footer — The only footer gallery on earth..
Reference design system (extracted from the live site):
- Palette: #3639bd, #8dd49c, #542414, #6da37b, #94c28b
- Typefaces: Inter
- Macrostructure: 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/footer-design

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter

32px

600

-1.6px

Aa Bb Cc

Inter

20px

600

1.4

-0.6px

Aa Bb Cc

Inter

32px

600

-1.28px

Aa Bb Cc

body

Inter

18px

400

1.4

-0.54px

Aa Bb Cc

button

Inter

14px

600

-0.42px

Aa Bb Cc

:root { --color-dominant: #3639bd; --color-surface: #8dd49c; --color-ink: #542414; --color-accent: #6da37b; --color-detail: #94c28b; } /* CSS variables exposed by source */ :root { --black-secondary: rgba(36, 36, 36, 0.64); --white-code: 255, 255, 255; --white: white; --gray: 242, 242, 242; --grey: #f2f2f2; --midnight: rgb(20, 20, 20); --lightgray: 249, 249, 249; --white-secondary: rgba(255, 255, 255, 0.64); --black-code: 36, 36, 36; --white-tertiary: rgba(255, 255, 255, 0.12); --black: #242424; }

Build a landing page in the visual style of Footer — The only footer gallery on earth.. Reference design system (extracted from the live site): - Palette: #3639bd, #8dd49c, #542414, #6da37b, #94c28b - Typefaces: Inter - Macrostructure: 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/footer-design