№ pampatype-com--about

Pampatype — About

Soft, lavender geometry—clean, modern sans-serif floats on spacious, airy white.

Type Specimenminimalism editorial swiss type foundrylight

The page presents a clean, typographic-focused display of font variations. The layout is spacious and uncluttered, emphasizing the visual qualities of the typefaces through ample negative space and a consistent presentation. · font showcase, typography display, typeface samples, design system, font family, pampatype, lettering, type design

Pampatype — About - mobile — Mobile · 375

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#cb34ab
OKLCHoklch(59.5% 0.221 338)
RoleDominant
find sites →
Hex#372e8b
OKLCHoklch(37.3% 0.148 281)
RoleSurface
find sites →
Hex#f47cbc
OKLCHoklch(74.1% 0.163 349)
RoleInk
find sites →
Hex#944ca6
OKLCHoklch(54.1% 0.153 319)
RoleAccent
find sites →
Hex#b4b6bc
OKLCHoklch(77.6% 0.009 271)
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	Amster-BlancaItalica	72px	300	1.2	Aa Bb Cc
h2	Chercan	23px	300	1.2	Aa Bb Cc
h3	PerecGrisVersalita	18px	300	1.2	Aa Bb Cc
body	Perec	18px	300	1.88	Aa Bb Cc
button	Perec	27px	700	1	Aa Bb Cc

Spacing scale

9px

18px

30px

36px

54px

72px

Radius scale

0px

5px

Container

Max content width 1400px

Export

:root {
  --color-dominant: #cb34ab;
  --color-surface: #372e8b;
  --color-ink: #f47cbc;
  --color-accent: #944ca6;
  --color-detail: #b4b6bc;
}

/* CSS variables exposed by source */
:root {
  --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --primary: #007bff;
  --secondary: #6c757d;
  --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --light: #f8f9fa;
  --indigo: #6610f2;
  --yellow: #ffc107;
  --green: #28a745;
  --pink: #e83e8c;
  --purple: #6f42c1;
  --breakpoint-xs: 0;
  --teal: #20c997;
  --gray-dark: #343a40;
  --breakpoint-md: 768px;
  --breakpoint-sm: 576px;
  --breakpoint-lg: 992px;
  --blue: #007bff;
  --white: #fff;
  --danger: #dc3545;
  --success: #28a745;
  --gray: #6c757d;
  --warning: #ffc107;
  --red: #dc3545;
  --cyan: #17a2b8;
  --info: #17a2b8;
  --dark: #343a40;
  --breakpoint-xl: 1200px;
  --orange: #fd7e14;
}

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 Pampatype — About.
Reference design system (extracted from the live site):
- Palette: #cb34ab, #372e8b, #f47cbc, #944ca6, #b4b6bc
- Typefaces: Amster-BlancaItalica, Chercan, Perec
- Macrostructure: Type 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/pampatype-com--about

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Amster-BlancaItalica

72px

300

1.2

Aa Bb Cc

Chercan

23px

300

1.2

Aa Bb Cc

PerecGrisVersalita

18px

300

1.2

Aa Bb Cc

body

Perec

18px

300

1.88

Aa Bb Cc

button

Perec

27px

700

Aa Bb Cc

:root { --color-dominant: #cb34ab; --color-surface: #372e8b; --color-ink: #f47cbc; --color-accent: #944ca6; --color-detail: #b4b6bc; } /* CSS variables exposed by source */ :root { --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; --primary: #007bff; --secondary: #6c757d; --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --light: #f8f9fa; --indigo: #6610f2; --yellow: #ffc107; --green: #28a745; --pink: #e83e8c; --purple: #6f42c1; --breakpoint-xs: 0; --teal: #20c997; --gray-dark: #343a40; --breakpoint-md: 768px; --breakpoint-sm: 576px; --breakpoint-lg: 992px; --blue: #007bff; --white: #fff; --danger: #dc3545; --success: #28a745; --gray: #6c757d; --warning: #ffc107; --red: #dc3545; --cyan: #17a2b8; --info: #17a2b8; --dark: #343a40; --breakpoint-xl: 1200px; --orange: #fd7e14; }

Build a landing page in the visual style of Pampatype — About. Reference design system (extracted from the live site): - Palette: #cb34ab, #372e8b, #f47cbc, #944ca6, #b4b6bc - Typefaces: Amster-BlancaItalica, Chercan, Perec - Macrostructure: Type 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/pampatype-com--about