Buly1803
Portfolio Grid
Loading
Grailed
Earthy, diffused light on textured surfaces—understated serif whispers across expanses of soft, muted browns.
Click any value to copy. Roles are suggestions, not gospel.
- #cb4572oklch(58.9% 0.173 3)Dominant
- #582820oklch(34.1% 0.073 31)Surface
- #ce6484oklch(63.8% 0.138 3)Ink
- #955e56oklch(54.0% 0.074 29)Accent
- #cdc4b1oklch(82.2% 0.028 86)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Helvetica | 20px | 600 | 1.5 | 0 | Aa Bb Cc |
| body | sans-serif | 10px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | sans-serif | 10px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #cb4572;
--color-surface: #582820;
--color-ink: #ce6484;
--color-accent: #955e56;
--color-detail: #cdc4b1;
}
/* 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-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-border-spacing-x: 0;
--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;
--global-header-height: 70px;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Grailed.
Reference design system (extracted from the live site):
- Palette: #cb4572, #582820, #ce6484, #955e56, #cdc4b1
- Typefaces: Helvetica, sans-serif
- 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/grailed-com
