Digitalocean — About
Stat-Led
Loading
Institute of Health
Cool, clinical greys and soft sans-serifs create a spacious, focused, and quietly authoritative feel.
Click any value to copy. Roles are suggestions, not gospel.
- #785032oklch(46.8% 0.069 57)Dominant
- #d8b8a1oklch(80.4% 0.049 58)Surface
- #5a2c24oklch(35.3% 0.069 31)Ink
- #7e7d81oklch(59.2% 0.006 298)Accent
- #c1bdbeoklch(80.2% 0.005 0)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Lay Grotesk | 58px | 500 | 1 | -0.216px | Aa Bb Cc |
| h2 | Lay Grotesk | 50px | 500 | 1 | 0 | Aa Bb Cc |
| body | Lay Grotesk | 14px | 400 | 1 | -0.216px | Aa Bb Cc |
| caption | Lay Grotesk | 13px | 500 | 1 | -0.216px | Aa Bb Cc |
| button | Lay Grotesk | 14px | 400 | 1 | -0.216px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #785032;
--color-surface: #d8b8a1;
--color-ink: #5a2c24;
--color-accent: #7e7d81;
--color-detail: #c1bdbe;
}
/* CSS variables exposed by source */
:root {
--gray: #e6e6e6;
--white: #f1f1f1;
--black: #242424;
}Drop-in prompt
Build a landing page in the visual style of Institute of Health.
Reference design system (extracted from the live site):
- Palette: #785032, #d8b8a1, #5a2c24, #7e7d81, #c1bdbe
- Typefaces: Lay Grotesk
- Macrostructure: Stat-Led
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/instituteofhealth-com
