Brand, UX, and Web Design Experts | Portal One
Split Studio
Loading
Poster – Homepage
Cool, stark grayscale, bold geometric type floats in expansive, echoing negative space.
Click any value to copy. Roles are suggestions, not gospel.
- #b04e65oklch(55.5% 0.129 8)Dominant
- #d5a3afoklch(76.5% 0.061 3)Surface
- #572732oklch(34.3% 0.072 7)Ink
- #94645coklch(55.2% 0.064 30)Accent
- #aab0bfoklch(75.7% 0.022 268)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Azeret Mono | 24px | 700 | 0.58 | 0 | Aa Bb Cc |
| h2 | Azeret Mono | 12px | 700 | 1.17 | 0 | Aa Bb Cc |
| body | Azeret Mono | 12px | 400 | 1.17 | 0 | Aa Bb Cc |
| button | Azeret Mono | 12px | 700 | 1.17 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #b04e65;
--color-surface: #d5a3af;
--color-ink: #572732;
--color-accent: #94645c;
--color-detail: #aab0bf;
}
/* CSS variables exposed by source */
:root {
--bg-light-color: #e7e7e7;
--bg-color: #000;
--main-bezier: cubic-bezier(0.63,0.01,0,0.83);
--rem: 16px;
--ivh: 900px;
--quad-ease-in-out: cubic-bezier(0.455,0.03,0.515,0.955);
--plyr-font-family: "Azeret Mono";
--plyr-line-height: 12px;
--plyr-font-size-small: 10px;
--promo-banner-height: 40px;
--plyr-font-size-large: 10px;
--plyr-color-main: #fff;
--quad-ease-out: cubic-bezier(0.25,0.46,0.45,0.94);
--plyr-video-controls-background: transparent;
--plyr-range-thumb-active-shadow-width: 0;
--plyr-font-size-badge: 10px;
--promo-banner-mobile-height: 64px;
--plyr-font-smoothing: true;
--plyr-font-weight-bold: 400;
--plyr-range-track-height: 1px;
--plyr-font-size-xlarge: 10px;
--light-color: #fff;
--plyr-font-size-base: 10px;
--plyr-range-thumb-shadow: none;
--plyr-video-control-background-hover: none;
--vw: 100vw;
}Drop-in prompt
Build a landing page in the visual style of Poster – Homepage.
Reference design system (extracted from the live site):
- Palette: #b04e65, #d5a3af, #572732, #94645c, #aab0bf
- Typefaces: Azeret Mono
- 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/posterco-tv
