Warbyparker
Feature Stack
Loading
Bellroy
Soft, muted greys and warm beige, clean sans-serif, spacious, quietly sophisticated.
Click any value to copy. Roles are suggestions, not gospel.
- #cc502aoklch(59.0% 0.166 37)Dominant
- #254157oklch(36.3% 0.051 244)Surface
- #ebdeceoklch(90.7% 0.026 73)Ink
- #897262oklch(57.0% 0.038 57)Accent
- #c9b29boklch(77.7% 0.041 67)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | GTUltra | 21px | 400 | 1.33 | 0 | Aa Bb Cc |
| h3 | GTUltra | 13px | 300 | 1.23 | 0.325px | Aa Bb Cc |
| body | Times | 14px | 400 | 1.4 | 0 | Aa Bb Cc |
| caption | GTUltra | 12px | 400 | 1.46 | 0.32px | Aa Bb Cc |
| button | Times | 14px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #cc502a;
--color-surface: #254157;
--color-ink: #ebdece;
--color-accent: #897262;
--color-detail: #c9b29b;
}
/* CSS variables exposed by source */
:root {
--color-surface-primary: #f7f7f7;
--color-grey-200: #efefef;
--color-grey-100: #f7f7f7;
--color-grey-600: #333333;
--color-text-brand: #CD4C20;
--color-text-inverted: #ffffff;
--color-text-secondary: #666666;
--color-text-tertiary: #9b9b9b;
--color-functional-error: #eb340a;
--color-surface-brand: #CD4C20;
--color-grey-300: #dbdbdb;
--color-surface-secondary: #dbdbdb;
--color-pop-orange: #CD4C20;
--color-white: #ffffff;
--color-grey-500: #666666;
--font-size-base: 13px;
--color-functional-error-accessible: #de330d;
--color-grey-400: #9b9b9b;
--color-surface-tertiary: #9b9b9b;
--color-text-primary: #333333;
--font-line-height-s: 21px;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--modal-header-color: #CD4C20;
--link-color-text: #CD4C20;
--tw-border-spacing-x: 0;
--tw-scale-y: 1;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--modal-color-surface: #efeae5;
--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-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-skew-y: 0;
}Drop-in prompt
Build a landing page in the visual style of Bellroy.
Reference design system (extracted from the live site):
- Palette: #cc502a, #254157, #ebdece, #897262, #c9b29b
- Typefaces: GTUltra, Times
- Macrostructure: Feature Stack
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/bellroy-com
