№ platonphoto-com

Platonphoto

Bold, gritty black and white collage—urgent sans-serif shouts from a chaotic depth.

Manifestoeditorial maximalism monochrome portfoliolight

The page uses a dense collage of portraits to create a visually arresting hero. The black and white palette and overlapping images evoke a sense of raw energy and a celebration of individual expression. Typography is minimal, allowing the visual impact to dominate. · platon photo, portrait agency, photo portfolio, black and white portraits, collage hero, editorial photography, maximalist design, photo 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: monochrome · muted

SwatchHexOKLCHSuggested roleCopy

Hex#b61924
OKLCHoklch(49.9% 0.189 25)
RoleDominant
find sites →
Hex#22886c
OKLCHoklch(56.3% 0.101 170)
RoleSurface
find sites →
Hex#fce4dc
OKLCHoklch(93.6% 0.029 39)
RoleInk
find sites →
Hex#5675a1
OKLCHoklch(55.7% 0.078 257)
RoleAccent
find sites →
Hex#c4a4a8
OKLCHoklch(74.8% 0.038 10)
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
body	sans-serif	16px	400	1.4	0	Aa Bb Cc
button	LeCorbusier	21px	400	1.89	0	Aa Bb Cc

Spacing scale

10px

18px

234px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #b61924;
  --color-surface: #22886c;
  --color-ink: #fce4dc;
  --color-accent: #5675a1;
  --color-detail: #c4a4a8;
}

/* CSS variables exposed by source */
:root {
  --secondary-button-font-font-weight: 500;
  --primary-button-font-font-style: normal;
  --secondary-button-font-font-size-value: 1.1;
  --primary-button-padding-y: 1rem;
  --backgroundOverlayColor: hsla(0,0%,0%,1);
  --primary-button-font-font-size: .75rem;
  --primary-button-font-line-height: 1.2em;
  --secondary-button-font-font-family: "Helvetica Neue",Arial,sans-serif;
  --secondary-button-font-text-transform: none;
  --primaryButtonPadding: 1.3rem;
  --primary-button-rounded-border-bottom-left-radius: 6.4px;
  --text-highlight-color-on-background: hsla(56.84,34.55%,89.22%,1);
  --secondary-button-rounded-border-bottom-right-radius: 6.4px;
  --primary-button-rounded-border-top-right-radius: 6.4px;
  --secondaryButtonBackgroundColor: hsla(56.84,34.55%,89.22%,1);
  --primary-button-font-font-weight: 700;
  --secondary-button-font-font-style: normal;
  --secondary-button-padding-y: 1.3rem;
  --primary-button-padding-x: 1.3rem;
  --primaryButtonTextColor: hsla(0,0%,0%,1);
  --secondary-button-rounded-border-bottom-left-radius: 6.4px;
  --primaryButtonBackgroundColor: hsla(0,0%,100%,1);
  --primary-button-font-letter-spacing: .02em;
  --secondary-button-padding-x: 2.171rem;
  --accent-hsl: 56.84,34.55%,89.22%;
  --secondary-button-font-line-height: 1.2em;
  --secondaryButtonTextColor: hsla(0,0%,0%,1);
  --primary-button-stroke: 0px;
  --primary-button-font-font-family: "Helvetica Neue",Arial,sans-serif;
  --primary-button-rounded-border-top-left-radius: 6.4px;
  --secondary-button-rounded-border-top-left-radius: 6.4px;
  --secondary-button-stroke: 2px;
  --text-highlight-color: hsla(56.84,34.55%,89.22%,1);
  --secondary-button-font-font-size: 1.1rem;
  --primary-button-font-font-size-value: .75;
  --primary-button-rounded-border-bottom-right-radius: 6.4px;
  --secondary-button-font-letter-spacing: .02em;
  --secondary-button-rounded-border-top-right-radius: 6.4px;
  --primary-button-font-text-transform: uppercase;
  --tweak-summary-block-background-color: hsla(56.84,34.55%,89.22%,1);
  --tertiary-button-font-font-style: normal;
  --tweak-blog-basic-grid-list-meta-color: hsla(56.84,34.55%,89.22%,1);
  --course-item-lesson-name-font-letter-spacing: 0em;
  --content-link-block-title-font-font-weight: 700;
  --product-basic-item-restock-notification-wrap-layout-font-font-style: normal;
  --portfolio-grid-overlay-title-font-font-size-value: 1.8;
  --menu-block-item-description-font-letter-spacing: 0em;
  --product-basic-item-title-half-layout-font-font-family: "motor-stencil";
  --quote-block-text-font-font-family: "Helvetica Neue",Arial,sans-serif;
  --quote-block-text-font-font-weight: 700;
  --product-basic-item-add-ons-title-half-layout-font-font-weight: 700;
  --tweak-blog-item-title-color: hsla(56.84,34.55%,89.22%,1);
  --portfolio-item-pagination-font-font-size-value: 1.3;
  --portfolio-hover-static-title-color: hsla(56.84,34.55%,89.22%,1);
  --portfolio-item-pagination-font-font-size: 1.3rem;
  --product-basic-item-description-font-line-height: 1.2em;
  --course-list-grid-layout-chapter-meta-font-font-style: normal;
  --portfolio-index-background-title-font-letter-spacing: 0em;
  --product-basic-item-restock-notification-wrap-layout-font-text-transform: uppercase;
  --tweak-product-basic-item-gallery-controls-color: hsla(0,0%,0%,1);
}

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 Platonphoto.
Reference design system (extracted from the live site):
- Palette: #b61924, #22886c, #fce4dc, #5675a1, #c4a4a8
- Typefaces: sans-serif, LeCorbusier
- Macrostructure: Manifesto
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/platonphoto-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

body

sans-serif

16px

400

1.4

Aa Bb Cc

button

LeCorbusier

21px

400

1.89

Aa Bb Cc

:root { --color-dominant: #b61924; --color-surface: #22886c; --color-ink: #fce4dc; --color-accent: #5675a1; --color-detail: #c4a4a8; } /* CSS variables exposed by source */ :root { --secondary-button-font-font-weight: 500; --primary-button-font-font-style: normal; --secondary-button-font-font-size-value: 1.1; --primary-button-padding-y: 1rem; --backgroundOverlayColor: hsla(0,0%,0%,1); --primary-button-font-font-size: .75rem; --primary-button-font-line-height: 1.2em; --secondary-button-font-font-family: "Helvetica Neue",Arial,sans-serif; --secondary-button-font-text-transform: none; --primaryButtonPadding: 1.3rem; --primary-button-rounded-border-bottom-left-radius: 6.4px; --text-highlight-color-on-background: hsla(56.84,34.55%,89.22%,1); --secondary-button-rounded-border-bottom-right-radius: 6.4px; --primary-button-rounded-border-top-right-radius: 6.4px; --secondaryButtonBackgroundColor: hsla(56.84,34.55%,89.22%,1); --primary-button-font-font-weight: 700; --secondary-button-font-font-style: normal; --secondary-button-padding-y: 1.3rem; --primary-button-padding-x: 1.3rem; --primaryButtonTextColor: hsla(0,0%,0%,1); --secondary-button-rounded-border-bottom-left-radius: 6.4px; --primaryButtonBackgroundColor: hsla(0,0%,100%,1); --primary-button-font-letter-spacing: .02em; --secondary-button-padding-x: 2.171rem; --accent-hsl: 56.84,34.55%,89.22%; --secondary-button-font-line-height: 1.2em; --secondaryButtonTextColor: hsla(0,0%,0%,1); --primary-button-stroke: 0px; --primary-button-font-font-family: "Helvetica Neue",Arial,sans-serif; --primary-button-rounded-border-top-left-radius: 6.4px; --secondary-button-rounded-border-top-left-radius: 6.4px; --secondary-button-stroke: 2px; --text-highlight-color: hsla(56.84,34.55%,89.22%,1); --secondary-button-font-font-size: 1.1rem; --primary-button-font-font-size-value: .75; --primary-button-rounded-border-bottom-right-radius: 6.4px; --secondary-button-font-letter-spacing: .02em; --secondary-button-rounded-border-top-right-radius: 6.4px; --primary-button-font-text-transform: uppercase; --tweak-summary-block-background-color: hsla(56.84,34.55%,89.22%,1); --tertiary-button-font-font-style: normal; --tweak-blog-basic-grid-list-meta-color: hsla(56.84,34.55%,89.22%,1); --course-item-lesson-name-font-letter-spacing: 0em; --content-link-block-title-font-font-weight: 700; --product-basic-item-restock-notification-wrap-layout-font-font-style: normal; --portfolio-grid-overlay-title-font-font-size-value: 1.8; --menu-block-item-description-font-letter-spacing: 0em; --product-basic-item-title-half-layout-font-font-family: "motor-stencil"; --quote-block-text-font-font-family: "Helvetica Neue",Arial,sans-serif; --quote-block-text-font-font-weight: 700; --product-basic-item-add-ons-title-half-layout-font-font-weight: 700; --tweak-blog-item-title-color: hsla(56.84,34.55%,89.22%,1); --portfolio-item-pagination-font-font-size-value: 1.3; --portfolio-hover-static-title-color: hsla(56.84,34.55%,89.22%,1); --portfolio-item-pagination-font-font-size: 1.3rem; --product-basic-item-description-font-line-height: 1.2em; --course-list-grid-layout-chapter-meta-font-font-style: normal; --portfolio-index-background-title-font-letter-spacing: 0em; --product-basic-item-restock-notification-wrap-layout-font-text-transform: uppercase; --tweak-product-basic-item-gallery-controls-color: hsla(0,0%,0%,1); }

Build a landing page in the visual style of Platonphoto. Reference design system (extracted from the live site): - Palette: #b61924, #22886c, #fce4dc, #5675a1, #c4a4a8 - Typefaces: sans-serif, LeCorbusier - Macrostructure: Manifesto 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/platonphoto-com