№ pi-ai

Pi

Warm ochre and sage, gentle sans-serifs float on generous, airy canvases.

Ecosystem Indexminimalism editorial playful ailight

The layout uses a clean bento grid to showcase key features with illustrations. The color palette is soft and muted, with a focus on earthy tones and pastel accents, creating a welcoming and approachable feel. · ai product, emotional ai, saas features, ai tools, feature showcase, minimalist ai, soft ui, illustration ui

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

SwatchHexOKLCHSuggested roleCopy

Hex#ee7637
OKLCHoklch(69.6% 0.166 46)
RoleDominant
find sites →
Hex#15895d
OKLCHoklch(55.9% 0.119 161)
RoleSurface
find sites →
Hex#e794b5
OKLCHoklch(76.0% 0.107 355)
RoleInk
find sites →
Hex#ab955b
OKLCHoklch(67.6% 0.081 89)
RoleAccent
find sites →
Hex#d5ccbb
OKLCHoklch(84.8% 0.025 83)
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	Grenette Pro Regular	64px	400	0.95	-3px	Aa Bb Cc
h2	Grenette Pro Regular	52px	400	0.95	-2.08px	Aa Bb Cc
h3	Grenette Pro Regular	14px	400	1.4	-0.56px	Aa Bb Cc
body	sans-serif	12px	400	1.4	0	Aa Bb Cc

Spacing scale

12px

20px

24px

32px

40px

Container

Max content width 1382px

Export

:root {
  --color-dominant: #ee7637;
  --color-surface: #15895d;
  --color-ink: #e794b5;
  --color-accent: #ab955b;
  --color-detail: #d5ccbb;
}

/* CSS variables exposed by source */
:root {
  --one-if-corner-shape-supported: 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 Pi.
Reference design system (extracted from the live site):
- Palette: #ee7637, #15895d, #e794b5, #ab955b, #d5ccbb
- Typefaces: Grenette Pro Regular, sans-serif
- Macrostructure: Ecosystem Index
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/pi-ai

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Grenette Pro Regular

64px

400

0.95

-3px

Aa Bb Cc

Grenette Pro Regular

52px

400

0.95

-2.08px

Aa Bb Cc

Grenette Pro Regular

14px

400

1.4

-0.56px

Aa Bb Cc

body

sans-serif

12px

400

1.4

Aa Bb Cc

:root { --color-dominant: #ee7637; --color-surface: #15895d; --color-ink: #e794b5; --color-accent: #ab955b; --color-detail: #d5ccbb; } /* CSS variables exposed by source */ :root { --one-if-corner-shape-supported: 1; }

Build a landing page in the visual style of Pi. Reference design system (extracted from the live site): - Palette: #ee7637, #15895d, #e794b5, #ab955b, #d5ccbb - Typefaces: Grenette Pro Regular, sans-serif - Macrostructure: Ecosystem Index 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/pi-ai