№ grillitype-com--blog

Grillitype — Blog

Cool, precise geometric grids; muted olive, pale peach, and stark white, a technical whisper.

Portfolio Gridminimalism editorial swiss type foundrylight

The layout prioritizes typographic exploration and showcases a range of typefaces with a clean, grid-based structure. The use of muted green and white creates a restrained, almost clinical feel, emphasizing the visual presentation of the fonts themselves. · font showcase, typography grid, type specimen, minimalist typography, design system, grillitype, font foundry, geometric fonts, clean typography, editorial design

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

SwatchHexOKLCHSuggested roleCopy

Hex#98a125
OKLCHoklch(68.0% 0.140 114)
RoleDominant
find sites →
Hex#656b18
OKLCHoklch(50.6% 0.103 114)
RoleSurface
find sites →
Hex#f7cde1
OKLCHoklch(89.0% 0.054 348)
RoleInk
find sites →
Hex#7c7c7c
OKLCHoklch(58.6% 0.000 90)
RoleAccent
find sites →
Hex#c4d1a1
OKLCHoklch(83.9% 0.066 120)
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	GT-Corporate-Web	16px	400	1.75	Aa Bb Cc
h2	GT-Corporate-Web	16px	400	1.38	Aa Bb Cc
body	GT-Corporate-Web	16px	400	1.38	Aa Bb Cc
button	GT-Corporate-Web	16px	400	1.4	Aa Bb Cc

Spacing scale

15px

20px

25px

30px

40px

50px

Radius scale

5px

Export

:root {
  --color-dominant: #98a125;
  --color-surface: #656b18;
  --color-ink: #f7cde1;
  --color-accent: #7c7c7c;
  --color-detail: #c4d1a1;
}

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 Grillitype — Blog.
Reference design system (extracted from the live site):
- Palette: #98a125, #656b18, #f7cde1, #7c7c7c, #c4d1a1
- Typefaces: GT-Corporate-Web
- Macrostructure: Portfolio Grid
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/grillitype-com--blog

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

GT-Corporate-Web

16px

400

1.75

Aa Bb Cc

GT-Corporate-Web

16px

400

1.38

Aa Bb Cc

body

GT-Corporate-Web

16px

400

1.38

Aa Bb Cc

button

GT-Corporate-Web

16px

400

1.4

Aa Bb Cc

Build a landing page in the visual style of Grillitype — Blog. Reference design system (extracted from the live site): - Palette: #98a125, #656b18, #f7cde1, #7c7c7c, #c4d1a1 - Typefaces: GT-Corporate-Web - Macrostructure: Portfolio Grid 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/grillitype-com--blog