Bellroy
Feature Stack
Loading
Plus Size Clothing and Personal Styling for Women | Dia & Co
Soft, airy cream canvas, delicate serif whispers, and gentle, sun-kissed pastel accents.
Click any value to copy. Roles are suggestions, not gospel.
- #d69c63oklch(73.6% 0.101 65)Dominant
- #ccbceboklch(82.4% 0.067 300)Surface
- #69411boklch(41.4% 0.076 61)Ink
- #a68c5doklch(65.3% 0.071 82)Accent
- #d5bdb4oklch(81.6% 0.030 42)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Roslindale narrow | 28px | 700 | 1.2 | 0 | Aa Bb Cc |
| h2 | Roslindale | 40px | 700 | 1.15 | -0.4px | Aa Bb Cc |
| h3 | Roslindale narrow | 36px | 100 | 1.2 | 0 | Aa Bb Cc |
| body | Inter Tight | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Eina | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
:root {
--color-dominant: #d69c63;
--color-surface: #ccbceb;
--color-ink: #69411b;
--color-accent: #a68c5d;
--color-detail: #d5bdb4;
}
/* CSS variables exposed by source */
:root {
--color-grey3: #ccc;
--color-gray-800: #343a40;
--color-grey6: #444;
--accent: #E8DED1;
--color-menu-link: #444;
--color-link-color: #444;
--color-grey2: #eee;
--color-grey5: #666;
--color-grey8: #333;
--color-slightly-darker-gray: #999;
--color-hr-border-color: #ccc;
--color-grey-transparent-2: rgba(0, 0, 0, 0.25);
--color-gray-300: #949494;
--color-success: #0DA508;
--color-dark-gray: #444;
--color-yellow: #FFB64A;
--color-gray-500: #adb5bd;
--color-grey-transparent-1: rgba(0, 0, 0, 0.65);
--color-btn-focus: #9191AC;
--color-gray-900: #212529;
--color-white: #fff;
--color-minsk: #3A2A7C;
--color-gray-400: #ced4da;
--color-gray-700: #495057;
--color-horizontal-rule-grey: #ccc;
--color-gray-600: #525252;
--color-grey7: #222;
--color-close-menu-bg: #eee;
--color-grey1: #f9f9f9;
--color-gray-100: #f5f5f5;
--color-light-blue: #7ed0ee;
--color-darker-gray: #222;
--color-primary: #262626;
--color-horizontal-border-grey: #999;
--color-gray-200: #e9ecef;
--color-red: #B50000;
--color-black: #000;
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--color-green: #0DA508;
--color-blue: #0449B9;
--color-light-gray: #f9f9f9;
--color-primary-light: #F9F7F3;
--color-danger: #B50000;
--color-btn-hover: #131313;
--color-grey4: #999;
--color-product-number-grey: #ccc;
--primary: #262626;
--secondary: #525252;
--light: #f5f5f5;
--yellow: #FFB64A;
--pink: #e83e8c;
--breakpoint-xs: 0;
--gray-1: #f5f5f5;
--gray-dark: #343a40;
--white: #fff;
--success: #0DA508;
--success-text: #096506;
--red: #B50000;
--skin-selectbox-background-color-1: #fff;
--sale: #A70033;
}Drop-in prompt
Build a landing page in the visual style of Plus Size Clothing and Personal Styling for Women | Dia & Co.
Reference design system (extracted from the live site):
- Palette: #d69c63, #ccbceb, #69411b, #a68c5d, #d5bdb4
- Typefaces: Roslindale narrow, Roslindale, Inter Tight
- 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/dia-com
