Daniel Do
Specimen
Loading
Hugo Baron - Portfolio
Electric lime and stark black, bold geometric type floats in a vast, cool digital space.
Click any value to copy. Roles are suggestions, not gospel.
- #0cc42coklch(71.3% 0.229 144)Dominant
- #84dc94oklch(82.1% 0.132 149)Surface
- #0c9124oklch(57.2% 0.179 144)Ink
- #848484oklch(61.3% 0.000 90)Accent
- #a3b7a7oklch(75.9% 0.032 151)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | nm | 12px | 400 | 1.1 | 0 | Aa Bb Cc |
| body | nm | 12px | 400 | 1.1 | 0 | Aa Bb Cc |
| button | nm | 12px | 400 | 1.1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #0cc42c;
--color-surface: #84dc94;
--color-ink: #0c9124;
--color-accent: #848484;
--color-detail: #a3b7a7;
}
/* CSS variables exposed by source */
:root {
--bg-color: #fff;
--text-color: #000;
--columns: 12;
--vh: 900px;
--gutter: 1.6rem;
--column: calc((100vw - 22.8rem)/12);
--margin: 2.6rem;
}Drop-in prompt
Build a landing page in the visual style of Hugo Baron - Portfolio.
Reference design system (extracted from the live site):
- Palette: #0cc42c, #84dc94, #0c9124, #848484, #a3b7a7
- Typefaces: nm
- Macrostructure: 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/nuageboi-fr
