Big Dk
Split Studio
Loading
Kkaa Co Jp — About
Earthy ochre and charcoal, clean sans-serif, spacious, contemplative, quietly authoritative.
Click any value to copy. Roles are suggestions, not gospel.
- #aea450oklch(71.0% 0.107 103)Dominant
- #555027oklch(42.6% 0.060 102)Surface
- #e4bc8coklch(81.9% 0.078 71)Ink
- #aa7b5foklch(62.3% 0.071 52)Accent
- #ccc0b2oklch(81.4% 0.024 72)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | -apple-system | 33px | 300 | 1.11 | -0.32px | Aa Bb Cc |
| h2 | -apple-system | 32px | 300 | 1.8 | -0.32px | Aa Bb Cc |
| body | -apple-system | 16px | 300 | 1.8 | -0.32px | Aa Bb Cc |
| caption | -apple-system | 14px | 300 | 1.63 | -0.32px | Aa Bb Cc |
| button | -apple-system | 16px | 300 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #aea450;
--color-surface: #555027;
--color-ink: #e4bc8c;
--color-accent: #aa7b5f;
--color-detail: #ccc0b2;
}
/* CSS variables exposed by source */
:root {
--theme-color-background-rgba: 255,255,255;
--theme-p-max-width: 61rem;
--theme-color-grey: #808080;
--theme-color-black: #292929;
--global-color-rgb: #f0f5f7;
--theme-color-yellow: #fff000;
--theme-color-background-odd: #f5f5f5;
--theme-color-light: #a3a3a3;
--theme-section-gap: 3rem;
--theme-color-background: #fff;
--theme-grid-gap: .9rem;
--theme-section-max-width: 80rem;
--global-color-rgba: 240,245,247;
--theme-block-gap: 1.2rem;
--theme-color-black-rgba: 41,41,41;
--dominant-color-rgba: rgba(122,115,99,.4);
}Drop-in prompt
Build a landing page in the visual style of Kkaa Co Jp — About.
Reference design system (extracted from the live site):
- Palette: #aea450, #555027, #e4bc8c, #aa7b5f, #ccc0b2
- Typefaces: -apple-system
- 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/kkaa-co-jp--about
