Everlane
Split Studio
Loading
Karenwalker
Earthy, vintage serif whispers across expansive, softly lit, muted ochre and charcoal spaces.
Click any value to copy. Roles are suggestions, not gospel.
- #7d5838oklch(49.2% 0.067 61)Dominant
- #74240coklch(38.1% 0.117 36)Surface
- #d5baa3oklch(80.6% 0.044 63)Ink
- #957451oklch(58.3% 0.065 68)Accent
- #ccc4c0oklch(82.6% 0.011 49)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | azo-sans-web | 40px | 500 | 0 | 0.6px | Aa Bb Cc |
| h2 | azo-sans-web | 12px | 700 | 1 | 0.4px | Aa Bb Cc |
| h3 | KW Display | 15px | 500 | 1.5 | 2px | Aa Bb Cc |
| body | azo-sans-web | 16px | 400 | 1.8 | 0.6px | Aa Bb Cc |
| caption | azo-sans-web | 10px | 400 | 1.5 | 0.4px | Aa Bb Cc |
| button | azo-sans-web | 10px | 400 | 1.4 | 1.5px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #7d5838;
--color-surface: #74240c;
--color-ink: #d5baa3;
--color-accent: #957451;
--color-detail: #ccc4c0;
}
/* CSS variables exposed by source */
:root {
--text-boxes-shadow-visible: 0;
--font-heading-style: normal;
--spacing-sections-desktop: 0px;
--color-badge-foreground: 18,18,18;
--font-body-family: "azo-sans-web", sans-serif;
--color-background: 255,255,255;
--color-badge-background: 255,255,255;
--color-button-text: 255,255,255;
--spacing-sections-mobile: 0px;
--color-button: 18,18,18;
--font-body-weight-bold: 700;
--color-secondary-button: 255,255,255;
--font-heading-scale: 1.0;
--text-boxes-border-width: 0px;
--color-shadow: 0,0,0;
--color-background-contrast: 191,191,191;
--text-boxes-shadow-blur-radius: 5px;
--text-boxes-radius: 0px;
--font-body-style: normal;
--color-secondary-button-text: 18,18,18;
--font-body-weight: 400;
--text-boxes-shadow-horizontal-offset: 0px;
--text-boxes-shadow-vertical-offset: 4px;
--font-heading-family: "azo-sans-web", sans-serif;
--color-foreground: 18,18,18;
--font-body-scale: 1.0;
--text-boxes-shadow-opacity: 0.0;
--font-heading-weight: 500;
--text-boxes-border-opacity: 0.1;
--color-link: 18,18,18;
--color-badge-border: 18,18,18;
--inputs-shadow-opacity: 0.0;
--header-height: 163px;
--buttons-shadow-horizontal-offset: 0px;
--collection-card-shadow-opacity: 0.0;
--focused-base-box-shadow: 0 0 0 .3rem rgb(255,255,255), 0 0 .5rem .4rem rgba(18,18,18, .3);
--drawer-shadow-opacity: 0.0;
--blog-card-border-opacity: 0.1;
--drawer-shadow-blur-radius: 5px;
--alpha-link: .85;
--media-border-width: 0px;
--sparkle: url(./sparkle.gif);
--variant-pills-border-width: 1px;
--blog-card-shadow-visible: 0;
--blog-card-corner-radius: 0.0rem;
--buttons-border-opacity: 1.0;
--collection-card-border-opacity: 0.1;
--duration-long: .5s;
--page-width-margin: 0rem;
--buttons-radius-outset: 0px;
--inputs-border-width: 1px;
--kw-font-azo-family: "azo-sans-web", sans-serif;
--variant-pills-shadow-vertical-offset: 4px;
--inputs-border-opacity: 1.0;
--grid-mobile-vertical-spacing: 10px;
--swiper-theme-color: #007aff;
--collection-card-shadow-visible: 0;
--buttons-radius: 0px;
--buttons-shadow-opacity: 0.0;
--drawer-border-width: 1px;
}Drop-in prompt
Build a landing page in the visual style of Karenwalker.
Reference design system (extracted from the live site):
- Palette: #7d5838, #74240c, #d5baa3, #957451, #ccc4c0
- Typefaces: azo-sans-web, Arial
- Macrostructure: Split Studio
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/karenwalker-com--products-forever-band
