№ fosterandpartners-com--docs

Part of Fosterandpartners - 8 pages captured →

Fosterandpartners — Docs

Quiet, verdant serenity: muted earth tones, clean sans serif, spacious, grounded atmosphere.

Photographicminimalism editorial swiss architecturelight

The image prioritizes a wide, immersive view of the memorial site, emphasizing the scale and natural setting. The muted color palette and soft lighting create a contemplative mood, focusing attention on the architecture and the surrounding environment rather than overt branding. · memorial design, public art, london landmark, architectural photography, landscape architecture, foster and partners, queen elizabeth, park design, monument, urban landscape

Fosterandpartners — Docs - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Fosterandpartners — Docs - full page scroll

Fosterandpartners — Docs - mobile full page

Palette

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

Reads as: earthy · muted

SwatchHexOKLCHSuggested roleCopy

Hex#b24642
OKLCHoklch(53.9% 0.142 25)
RoleDominant
find sites →
Hex#343c04
OKLCHoklch(33.7% 0.075 118)
RoleSurface
find sites →
Hex#e8e7af
OKLCHoklch(91.5% 0.073 107)
RoleInk
find sites →
Hex#99a562
OKLCHoklch(69.7% 0.091 117)
RoleAccent
find sites →
Hex#c7bfb5
OKLCHoklch(80.8% 0.017 74)
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	open sans	33px	500	1.2	Aa Bb Cc
h2	open sans	21px	500	1.2	Aa Bb Cc
h3	open sans	14px	700	1.4	Aa Bb Cc
body	open sans	16px	400	1.5	Aa Bb Cc
caption	open sans	14px	400	1.5	Aa Bb Cc
button	open sans	14px	600	1.5	Aa Bb Cc

Spacing scale

8px

17px

24px

32px

40px

60px

80px

Radius scale

0px

2px

17px

25px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #b24642;
  --color-surface: #343c04;
  --color-ink: #e8e7af;
  --color-accent: #99a562;
  --color-detail: #c7bfb5;
}

/* CSS variables exposed by source */
:root {
  --fa-style-family-classic: "Font Awesome 7 Pro";
  --bs-orange: #c65100;
  --bs-link-hover-color-rgb: 51, 51, 51;
  --bs-pink-rgb: 254, 229, 227;
  --bs-warning-bg-subtle: rgb(255, 242.6, 205.4);
  --bs-success: #198754;
  --bs-danger-text-emphasis: rgb(88, 21.2, 27.6);
  --fa-family-brands: "Font Awesome 7 Brands";
  --bs-border-style: solid;
  --bs-warning-rgb: 255, 193, 7;
  --bs-info-text-emphasis: rgb(5.2, 80.8, 96);
  --bs-body-font-weight: 400;
  --bs-primary: #0d6efd;
  --bs-code-color: #d63384;
  --bs-border-radius-2xl: 2rem;
  --bs-body-line-height: 1.5;
  --bs-grey-darker: #747779;
  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
  --bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  --bs-purple: #6f42c1;
  --fa-font-brands: normal 400 1em/1 "Font Awesome 7 Brands";
  --bs-link-hover-color: #333;
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075);
  --bs-green: #198754;
  --bs-cyan: #0dcaf0;
  --bs-primary-border-subtle: rgb(158.2, 197, 254.2);
  --bs-dark-text-emphasis: #495057;
  --bs-info-rgb: 13, 202, 240;
  --bs-breakpoint-xs: 0;
  --bs-grey-lighter-rgb: 250, 250, 250;
  --bs-gray-400: #ced4da;
  --bs-primary-text-emphasis: rgb(5.2, 44, 101.2);
  --bs-border-radius-sm: .25rem;
  --bs-grey-light: #f5f5f5;
  --bs-primary-bg-subtle: rgb(206.6, 226, 254.6);
  --bs-pink: #fee5e3;
  --bs-gray-100: #f8f9fa;
  --bs-link-decoration: underline;
  --bs-border-radius: .375rem;
  --bs-white: #fff;
  --bs-danger: #dc3545;
  --vh: 9px;
  --bs-gray-600: #6c757d;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-highlight-color: #212529;
  --bs-dark-rgb: 33, 37, 41;
  --bs-success-text-emphasis: rgb(10, 54, 33.6);
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));
  --bs-gray-500: #adb5bd;
  --bs-border-radius-xxl: 2rem;
  --fa-font-light: normal 300 1em/1 "Font Awesome 7 Pro";
  --bs-teal: #20c997;
  --bs-indigo: #6610f2;
  --bs-grey-2: #969499;
  --bs-dark: #212529;
  --bs-success-bg-subtle: rgb(209, 231, 220.8);
  --bs-link-color-rgb: 77, 77, 77;
  --fa-family-classic: "Font Awesome 7 Pro";
  --bs-secondary-bg-subtle: rgb(225.6, 227.4, 229);
  --bs-breakpoint-lg: 1024px;
}

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 Fosterandpartners — Docs.
Reference design system (extracted from the live site):
- Palette: #b24642, #343c04, #e8e7af, #99a562, #c7bfb5
- Typefaces: open sans
- Macrostructure: Photographic
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/fosterandpartners-com--docs

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

open sans

33px

500

1.2

Aa Bb Cc

open sans

21px

500

1.2

Aa Bb Cc

open sans

14px

700

1.4

Aa Bb Cc

body

open sans

16px

400

1.5

Aa Bb Cc

caption

open sans

14px

400

1.5

Aa Bb Cc

button

open sans

14px

600

1.5

Aa Bb Cc

:root { --color-dominant: #b24642; --color-surface: #343c04; --color-ink: #e8e7af; --color-accent: #99a562; --color-detail: #c7bfb5; } /* CSS variables exposed by source */ :root { --fa-style-family-classic: "Font Awesome 7 Pro"; --bs-orange: #c65100; --bs-link-hover-color-rgb: 51, 51, 51; --bs-pink-rgb: 254, 229, 227; --bs-warning-bg-subtle: rgb(255, 242.6, 205.4); --bs-success: #198754; --bs-danger-text-emphasis: rgb(88, 21.2, 27.6); --fa-family-brands: "Font Awesome 7 Brands"; --bs-border-style: solid; --bs-warning-rgb: 255, 193, 7; --bs-info-text-emphasis: rgb(5.2, 80.8, 96); --bs-body-font-weight: 400; --bs-primary: #0d6efd; --bs-code-color: #d63384; --bs-border-radius-2xl: 2rem; --bs-body-line-height: 1.5; --bs-grey-darker: #747779; --bs-light-bg-subtle: rgb(251.5, 252, 252.5); --bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); --bs-purple: #6f42c1; --fa-font-brands: normal 400 1em/1 "Font Awesome 7 Brands"; --bs-link-hover-color: #333; --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075); --bs-green: #198754; --bs-cyan: #0dcaf0; --bs-primary-border-subtle: rgb(158.2, 197, 254.2); --bs-dark-text-emphasis: #495057; --bs-info-rgb: 13, 202, 240; --bs-breakpoint-xs: 0; --bs-grey-lighter-rgb: 250, 250, 250; --bs-gray-400: #ced4da; --bs-primary-text-emphasis: rgb(5.2, 44, 101.2); --bs-border-radius-sm: .25rem; --bs-grey-light: #f5f5f5; --bs-primary-bg-subtle: rgb(206.6, 226, 254.6); --bs-pink: #fee5e3; --bs-gray-100: #f8f9fa; --bs-link-decoration: underline; --bs-border-radius: .375rem; --bs-white: #fff; --bs-danger: #dc3545; --vh: 9px; --bs-gray-600: #6c757d; --bs-body-bg-rgb: 255, 255, 255; --bs-highlight-color: #212529; --bs-dark-rgb: 33, 37, 41; --bs-success-text-emphasis: rgb(10, 54, 33.6); --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0)); --bs-gray-500: #adb5bd; --bs-border-radius-xxl: 2rem; --fa-font-light: normal 300 1em/1 "Font Awesome 7 Pro"; --bs-teal: #20c997; --bs-indigo: #6610f2; --bs-grey-2: #969499; --bs-dark: #212529; --bs-success-bg-subtle: rgb(209, 231, 220.8); --bs-link-color-rgb: 77, 77, 77; --fa-family-classic: "Font Awesome 7 Pro"; --bs-secondary-bg-subtle: rgb(225.6, 227.4, 229); --bs-breakpoint-lg: 1024px; }

Build a landing page in the visual style of Fosterandpartners — Docs. Reference design system (extracted from the live site): - Palette: #b24642, #343c04, #e8e7af, #99a562, #c7bfb5 - Typefaces: open sans - Macrostructure: Photographic 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/fosterandpartners-com--docs