№ daniel-do--article-2019-lessons-learned

Daniel Do

Soft blush geometry floats on deep ink, crisp sans-serifs breathe spacious clarity.

Specimenminimalism editorial swiss portfoliolight

The composition prioritizes clean typography and ample negative space, creating a sense of quiet confidence. The soft, overlapping geometric shapes add a subtle layer of visual interest without disrupting the overall clarity. · portfolio website, minimalist design, type design, editorial portfolio, dark portfolio, geometric shapes, typography focused, creative portfolio

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

SwatchHexOKLCHSuggested roleCopy

Hex#d87cca
OKLCHoklch(71.2% 0.150 333)
RoleDominant
find sites →
Hex#1c3c34
OKLCHoklch(32.9% 0.041 175)
RoleSurface
find sites →
Hex#fbdbda
OKLCHoklch(91.8% 0.036 20)
RoleInk
find sites →
Hex#89b2af
OKLCHoklch(73.3% 0.044 191)
RoleAccent
find sites →
Hex#bbc7c3
OKLCHoklch(81.9% 0.014 174)
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	PT Serif	42px	700	1.2	0	Aa Bb Cc
h2	Tiempos Fine	92px	700	1.05	0.924px	Aa Bb Cc
h3	Geograph	19px	700	1.2	0	Aa Bb Cc
body	PT Serif	21px	400	1.2	0	Aa Bb Cc
button	Geograph	18px	600	1.4	0.4px	Aa Bb Cc

Spacing scale

27px

32px

63px

131px

184px

Radius scale

0px

Container

Max content width 1160px

Export

:root {
  --color-dominant: #d87cca;
  --color-surface: #1c3c34;
  --color-ink: #fbdbda;
  --color-accent: #89b2af;
  --color-detail: #bbc7c3;
}

/* CSS variables exposed by source */
:root {
  --space-sm: clamp(1rem, 2rem, 3rem);
  --space-md: clamp(1.5rem, 3.4rem, 6rem);
  --shortDuration: .15s;
  --indent: clamp(1rem, 3vw, 4rem);
  --vertical-md-gap: calc(clamp(1.2rem, 4vw, 2.5rem) * .75);
  --page-padding: clamp(clamp(1rem, 2rem, 3rem), 6vw, clamp(1.5rem, 3.4rem, 6rem));
  --tiemposText: "Tiempos Text", serif;
  --tiemposHeadline: "Tiempos Headline", serif;
  --tiemposFine: "Tiempos Fine", serif;
  --mediumSize: .85em;
  --geograph: "Geograph", sans-serif;
  --ptSerif: "PT Serif", serif;
  --archiveSpacing: clamp(0rem, 1vw, 2rem);
  --vertical-lg-gap: clamp(1.2rem, 4vw, 2.5rem);
  --smallSize: .75em;
}

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 Daniel Do.
Reference design system (extracted from the live site):
- Palette: #d87cca, #1c3c34, #fbdbda, #89b2af, #bbc7c3
- Typefaces: PT Serif, Tiempos Fine, Geograph
- 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/daniel-do--article-2019-lessons-learned

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

PT Serif

42px

700

1.2

Aa Bb Cc

Tiempos Fine

92px

700

1.05

0.924px

Aa Bb Cc

Geograph

19px

700

1.2

Aa Bb Cc

body

PT Serif

21px

400

1.2

Aa Bb Cc

button

Geograph

18px

600

1.4

0.4px

Aa Bb Cc

:root { --color-dominant: #d87cca; --color-surface: #1c3c34; --color-ink: #fbdbda; --color-accent: #89b2af; --color-detail: #bbc7c3; } /* CSS variables exposed by source */ :root { --space-sm: clamp(1rem, 2rem, 3rem); --space-md: clamp(1.5rem, 3.4rem, 6rem); --shortDuration: .15s; --indent: clamp(1rem, 3vw, 4rem); --vertical-md-gap: calc(clamp(1.2rem, 4vw, 2.5rem) * .75); --page-padding: clamp(clamp(1rem, 2rem, 3rem), 6vw, clamp(1.5rem, 3.4rem, 6rem)); --tiemposText: "Tiempos Text", serif; --tiemposHeadline: "Tiempos Headline", serif; --tiemposFine: "Tiempos Fine", serif; --mediumSize: .85em; --geograph: "Geograph", sans-serif; --ptSerif: "PT Serif", serif; --archiveSpacing: clamp(0rem, 1vw, 2rem); --vertical-lg-gap: clamp(1.2rem, 4vw, 2.5rem); --smallSize: .75em; }

Build a landing page in the visual style of Daniel Do. Reference design system (extracted from the live site): - Palette: #d87cca, #1c3c34, #fbdbda, #89b2af, #bbc7c3 - Typefaces: PT Serif, Tiempos Fine, Geograph - 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/daniel-do--article-2019-lessons-learned