Feathericons
Component Playground
Loading
Heroicons
Cool, crisp geometry - monochrome grid with clean, assertive sans serif.
Click any value to copy. Roles are suggestions, not gospel.
- #64bcfcoklch(76.6% 0.125 242)Dominant
- #024c82oklch(40.8% 0.110 249)Surface
- #9c7cf4oklch(67.0% 0.173 293)Ink
- #747c8coklch(58.5% 0.026 264)Accent
- #aab4c4oklch(76.7% 0.025 260)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Inter var | 36px | 800 | 1.11 | -0.9px | Aa Bb Cc |
| h2 | Inter var | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| body | Inter var | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Inter var | 14px | 600 | 1.71 | 0 | Aa Bb Cc |
| button | Inter var | 12px | 600 | 1.33 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #64bcfc;
--color-surface: #024c82;
--color-ink: #9c7cf4;
--color-accent: #747c8c;
--color-detail: #aab4c4;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-bg-opacity: 1;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgba(59,130,246,.5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Heroicons.
Reference design system (extracted from the live site):
- Palette: #64bcfc, #024c82, #9c7cf4, #747c8c, #aab4c4
- Typefaces: Inter var
- Macrostructure: Component Playground
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/heroicons-com
