Bbcearth
Photographic
Loading
Dazed & Confused Magazine | Fashion, Art, Music, Film, Ideas | Dazed
Striking, stark black-and-white photography, assertive sans-serif, vast open negative space.
Click any value to copy. Roles are suggestions, not gospel.
- #2de32doklch(79.8% 0.255 143)Dominant
- #8aef8aoklch(86.7% 0.166 144)Surface
- #743428oklch(40.9% 0.093 32)Ink
- #757771oklch(56.6% 0.009 122)Accent
- #bdbbb5oklch(79.2% 0.009 92)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | haas | 36px | 700 | 1 | 0 | Aa Bb Cc |
| h2 | haas | 18px | 500 | 1.5 | -0.36px | Aa Bb Cc |
| h3 | haas | 24px | 700 | 1.17 | -0.48px | Aa Bb Cc |
| body | haas | 16px | 400 | 1 | 0 | Aa Bb Cc |
| button | Arial | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #2de32d;
--color-surface: #8aef8a;
--color-ink: #743428;
--color-accent: #757771;
--color-detail: #bdbbb5;
}
/* CSS variables exposed by source */
:root {
--selection-background: #00FF19;
--parent-width: 100%;
--split-sticky-top__mobile: 20px;
--dg-measure-offset: 20px;
--dg-measure: calc((100% + 20px) * (12 / 12) - 20px);
--split-sticky-top: 20px;
--gHeader-nav-border-height: 0px;
--selection-shadow: none;
--swiper-navigation-size: 44px;
--gHeader-rendered-ad-height: 90px;
--columns-max: 12;
--split-sticky-height-xs: 82vh;
--gHeader-logo-strip-height: 100px;
--gHeader-ad-height-mobile: 50px;
--gHeader-ad-shown: 1;
--split-rail-max: 760px;
--columns: 12;
--split-scene-extra: 50px;
--gHeader-ad-height-desktop: 90px;
--gHeader-height-mobile: calc((50px * 1) + 70px);
--columns-article-header-max: 10;
--gHeader-logo-strip-height-condensed: 50px;
--gHeader-ad-height: 90px;
--gHeaderNoNav-height: calc((90px * 1) + 100px);
--split-sticky-height-no-advert-xs: 88vh;
--gHeaderNav-height: calc((90px * 1) + 100px + calc(42px + 0px));
--gHeader-nav-panel-height: calc(42px + 0px);
--gHeader-nav-link-height: 42px;
--swiper-theme-color: #007aff;
--split-sticky-height-no-advert: 84vh;
--gutter: 20px;
--selection-color: black;
--gHeader-logo-strip-height-mobile: 70px;
--split-sticky-height: 80vh;
--gHeader-height: calc((90px * 1) + 100px + calc(42px + 0px));
}Drop-in prompt
Build a landing page in the visual style of Dazed & Confused Magazine | Fashion, Art, Music, Film, Ideas | Dazed.
Reference design system (extracted from the live site):
- Palette: #2de32d, #8aef8a, #743428, #757771, #bdbbb5
- Typefaces: haas, Arial
- Macrostructure: Photographic
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/dazeddigital-com
