Pentagram
Split Studio
Loading
OddCommon
Quiet, airy expanse of soft greys and pale yellows, clean sans-serifs floating serenely.
Click any value to copy. Roles are suggestions, not gospel.
- #fbeb31oklch(92.5% 0.185 104)Dominant
- #e4d44coklch(85.9% 0.153 103)Surface
- #435a14oklch(43.4% 0.098 126)Ink
- #a0955doklch(66.6% 0.077 98)Accent
- #a9c7ccoklch(80.9% 0.033 209)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Roobert | 24px | 700 | 1.5 | 0 | Aa Bb Cc |
| h3 | Roobert | 69px | 400 | 1.2 | -1.38171px | Aa Bb Cc |
| body | Roobert | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Roobert | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fbeb31;
--color-surface: #e4d44c;
--color-ink: #435a14;
--color-accent: #a0955d;
--color-detail: #a9c7cc;
}
/* CSS variables exposed by source */
:root {
--accent-color: #ffea28;
--foreground-color: #252424;
--fg-color: #252424;
--border-color: #c8c8c8;
--font-sans: "Roobert";
--font-mono: "GTFlexa";
--bg-color: #f4f4f4;
--background-color: #f4f4f4;
--yellow: #ffea28;
--evil-ease: cubic-bezier(.666,0,.237,1);
--header-height: 78px;
--power4-in: linear(0,.0024 29.91%,.008 38.03%,.0179 44.72%,.035 51.16%,.0595 56.88%,.0922 62.08%,.1338 66.88%,.1914 71.85%,.262 76.5%,.3461 80.88%,.4447 85.04%,.5587 89.01%,.689 92.82%,.8359 96.48%,1);
--dark-gray: #363636;
--mid-color: #757575;
--noise-bg-color: #fff;
--black: #252424;
--side-padding: 40px;
--power4-out: linear(0,.1641 3.52%,.311 7.18%,.4413 10.99%,.5553 14.96%,.6539 19.12%,.738 23.5%,.8086 28.15%,.8662 33.12%,.9078 37.92%,.9405 43.12%,.965 48.84%,.9821 55.28%,.992 61.97%,.9976 70.09%,1);
--white: #f4f4f4;
--cursor: default;
--gray: #757575;
--full-white: #fff;
--light-gray: #c8c8c8;
}Drop-in prompt
Build a landing page in the visual style of OddCommon.
Reference design system (extracted from the live site):
- Palette: #fbeb31, #e4d44c, #435a14, #a0955d, #a9c7cc
- Typefaces: Roobert
- 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/oddcommon-com
