--- version: alpha name: Dazed description: "Pure black canvas, Neue Haas Grotesk headlines punching at 36px with tight negative tracking, DrukWide uppercase section stamps, and a zero-color philosophy where editorial photography carries all the chromatic weight." colors: background: "#000000" surface: "#000000" surface-elevated: "#0d0d0d" # barely-there lift for nested containers ink: "#ffffff" on-background: "#ffffff" on-surface: "#ffffff" primary: "#ffffff" # white is the brand accent — no hue allowed on-primary: "#000000" border: "#000000" # 1px solid black on light surfaces; inverse = white border-inverse: "#ffffff" # 1px solid white on dark canvas ink-secondary: "#7a7f85" # muted metadata — bylines, timestamps, kickers ink-tertiary: "#a6a9ae" # lightest readable text — captions, labels focus-ring: "#206dc5" # accessibility blue — from dembrandt focus data shadow-soft: "#1a1a1a" # flattened from rgba(0,0,0,0.3) shadow data typography: display-hero: fontFamily: "Neue Haas Grotesk Display, HelveticaNeue, Helvetica, Arial, sans-serif" fontSize: 72px fontWeight: 700 lineHeight: 0.95 letterSpacing: -1.44px display: fontFamily: "Neue Haas Grotesk Display, HelveticaNeue, Helvetica, Arial, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 1.00 letterSpacing: -0.72px heading-section: fontFamily: "Neue Haas Grotesk Display, HelveticaNeue, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.17 letterSpacing: -0.48px heading-sub: fontFamily: "Neue Haas Grotesk Display, HelveticaNeue, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.50 letterSpacing: -0.36px body-large: fontFamily: "Neue Haas Grotesk Display, HelveticaNeue, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.50 letterSpacing: -0.36px body: fontFamily: "Neue Haas Grotesk Display, HelveticaNeue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px nav-link: fontFamily: "Neue Haas Grotesk Display, HelveticaNeue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.00 letterSpacing: 0px section-stamp: fontFamily: "DrukWide, Impact, Arial Black, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.00 letterSpacing: 0.96px button-ui: fontFamily: "Neue Haas Grotesk Display, HelveticaNeue, Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 700 lineHeight: 1.00 letterSpacing: 0.5px caption: fontFamily: "Neue Haas Grotesk Display, HelveticaNeue, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.67 letterSpacing: 0px spacing: xs: 5px sm: 10px md: 20px lg: 25px xl: 30px 2xl: 40px 3xl: 80px 4xl: 120px rounded: none: 0px pill: 50px components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 16px button-primary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.border-inverse}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 16px button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.border-inverse}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 16px button-secondary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 16px button-pill: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.border-inverse}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 20px button-pill-hover: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" padding: 14px 20px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 0px card-hover: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 0px input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.border-inverse}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px section-label: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" typography: "{typography.section-stamp}" rounded: "{rounded.none}" padding: 0px nav: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 20px 0px badge: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px --- # Dazed Design System ## Overview Dazed Digital is fashion and youth culture's most unflinching digital canvas — a publication built on the assumption that the design itself must be as confrontational as the editorial. The page is pure black (`{colors.background}`), not dark gray, not off-black: the full-stop, commitment-grade `#000000` that tells you immediately you are not on a lifestyle blog. Against that void, Neue Haas Grotesk Display (`{typography.display}`) works in pure white at tight negative tracking, delivering headlines that feel like they were set by someone who had studied Swiss International Style and decided the grid was only interesting when you violated it with scale. The 36–72px range of the display type, run at `lineHeight: 0.95–1.00`, means headlines barely breathe — ascenders crowd the text above them, which is precisely the point. The second typographic register belongs to DrukWide (`{typography.section-stamp}`), the condensed ultra-black display face that surfaces exclusively in uppercase section labels and category stamps. It operates at 13px with near-zero weight adjustment — small but unmistakably loud, like a venue sign screaming at a whisper volume. This pairing of metrically precise Neue Haas and architecturally aggressive DrukWide is the system's fingerprint: Swiss precision punctuated by editorial brutalism. Color is not a system here; it is an absence. There is no brand hue, no accent hex, no semantic rainbow. The only color in the Dazed palette is white on black (`{colors.ink}` on `{colors.background}`) with one muted gray for metadata (`{colors.ink-secondary}`). Photography carries all chromatic weight. A cover image of a model in chartreuse against a red backdrop lands with ten times the saturation because the surrounding chrome has zero competition. The design system's restraint is its loudest statement. **Key Characteristics:** - Pure `{colors.background}` canvas with zero softening — black is the brand canvas, not a dark-mode variant - Neue Haas Grotesk Display at 36–72px, weight 700, `letterSpacing: -0.72px` to `-1.44px` — tight negative tracking across all display sizes - DrukWide uppercase category stamps at 13px / `letterSpacing: 0.96px` — the only font break from the Haas stack - Zero brand hue — white (`{colors.ink}`) is the accent; editorial photography is the only color - Square corners everywhere (`{rounded.none}`) except section-filter pills (`{rounded.pill}`) - 1px solid white borders (`{colors.border-inverse}`) for all interactive outlines on dark canvas - Section category labels in `{colors.ink-secondary}` — soft gray metadata against hard white headlines - Image-first grid: photography occupies the dominant tile real estate, type floats below or overlays - No card shadows — story tiles are flat, defined by edge-to-edge image crops and whitespace rhythm - Buttons invert on hover: ghost-to-fill and fill-to-ghost symmetrically, no intermediate states - Focus ring in accessibility blue (`{colors.focus-ring}`) — the only non-monochrome moment in the system ## Colors ### Primary Canvas - **Pure Black** (`{colors.background}`): The defining design decision of the entire property. Not charcoal, not near-black — absolute zero. This is the brand canvas. - **Paper White** (`{colors.ink}`): The single ink color for headlines, body copy, and UI affordances. Also serves as the only "brand accent" — no hue is allocated anywhere else. ### Secondary Surface - **Barely-Black** (`{colors.surface-elevated}`): `#0d0d0d`, reserved for nested containers and hover state backgrounds where a subtle lift is needed without introducing a new color. ### Metadata Grays - **Muted Gray** (`{colors.ink-secondary}`): `#7a7f85` — section category labels, DrukWide stamps, byline metadata. The only gray permitted on the primary dark canvas. - **Light Gray** (`{colors.ink-tertiary}`): `#a6a9ae` — captions, consent UI labels, least-priority text. Does not appear in editorial chrome, only in utility contexts. ### Borders - **Canvas Border** (`{colors.border-inverse}`): `{colors.ink}` (`#ffffff`) used as a `1px solid` border on all interactive components on the dark canvas — inputs, secondary buttons, ghost CTAs. ### Interaction - **Focus Ring** (`{colors.focus-ring}`): `#206dc5` — the single non-monochrome hex in the entire system. Appears as a focus halo on keyboard navigation. Sourced from the CMP consent layer's focus definition; used as the system-wide accessibility marker. - **Hover Tint** (`{colors.shadow-soft}`): `#1a1a1a` — flattened from `rgba(0,0,0,0.3)` drop-shadow data. Used sparingly for subtle hover-state background lifts. ## Typography ### Font Family - **Primary**: `Neue Haas Grotesk Display` (self-hosted, NHaasGroteskDSStd OTF files), weights 45 Light / 55 Regular / 65 Medium / 75 Bold / 400 Light alt. Fallback stack: `HelveticaNeue, Helvetica, Arial, sans-serif`. Handles all editorial, body, UI, and navigation roles. - **Section Stamps**: `DrukWide` (self-hosted, DrukWide-Medium.otf). Exclusively uppercase section category labels at micro-scale. Fallback: `Impact, Arial Black, sans-serif`. - **Legacy UI layer**: `UniversNextPro-Regular` (self-hosted) appears in tertiary consent and older promotional modules. `Helvetica` appears as a system fallback in some utility contexts. These are not primary brand fonts and should not be replicated in new work. ### Hierarchy | Token | Use | |---|---| | `display-hero` | 72px hero headlines — editorial covers, feature openers | | `display` | 36px primary story headlines across all grid tiles | | `heading-section` | 24px sub-section titles, card group headers | | `heading-sub` | 18px secondary story heds, sidebar items | | `body-large` | 18px article deck / intro paragraph | | `body` | 16px default reading copy and form labels | | `nav-link` | 16px top navigation category links | | `section-stamp` | 13px DrukWide UPPERCASE section category labels | | `button-ui` | 13px Neue Haas Grotesk button labels — tracked out slightly | | `caption` | 12px photo credits, timestamps, ancillary metadata | ### Principles - **One typeface, one accent**: Neue Haas Grotesk handles every register. DrukWide enters only for category stamps. The system never introduces a third face. - **Negative tracking is structural**: All display sizes from `heading-section` upward carry negative letter-spacing (`-0.36px` to `-1.44px`). The tighter the headline, the more Dazed it is. - **Tight line-height on display**: `display-hero` runs at `0.95` — ascenders will crowd. This is intentional. It creates the compressed, urgent feeling that defines the publication's aesthetic. - **Uppercase is DrukWide's territory**: The only uppercase text treatment in the system belongs to `section-stamp`. Neue Haas headlines use sentence case. - **Weight contrast carries hierarchy**: The system relies entirely on weight (400 vs 700) and size contrast rather than color differentiation to establish reading order. ## Layout ### Spacing System The complete spacing scale is declared in the `spacing:` token block above. Base unit: 5px, with 10px and 20px as the primary rhythm. Dazed's spacing is editorial-tight at the tile level and deliberately generous at the macro level. Story tiles pack photographs edge-to-edge; sections breathe with `{spacing.3xl}`–`{spacing.4xl}` between major content blocks. The tension between density and air is the pacing mechanism. ### Grid & Container - Max content width: ~1260–1300px on desktop (from breakpoint data) - Grid: 3-up or 4-up desktop story grid with ~20–25px gutters; each tile is image-dominant - Navigation: full-width top bar, categories run horizontally, collapses to hamburger below 900px - Section filters: pill-shaped category buttons at `{rounded.pill}` — the only non-square interactive elements ### Whitespace Philosophy - **Black is the whitespace**: In a system without an actual white canvas, the exposed black background between tiles and sections performs the same function as traditional white negative space. - **Photography edges as structure**: Tile boundaries are defined by image edges, not card borders or shadows. - **Section spacing is generous**: Vertical breathing room between editorial sections (`{spacing.3xl}`–`{spacing.4xl}`) counterbalances the dense headline tracking. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, no border | Default story tiles, page canvas, all editorial surfaces | | Hairline (Level 1) | `1px solid {colors.border-inverse}` | Interactive outlines — inputs, ghost buttons | | Hover Lift (Level 2) | Background shifts to `{colors.surface-elevated}` | Story tile hover — barely perceptible lightening | | Drop (Level 3) | `rgba(0,0,0,0.3) 0px 7px 20px -8px` | Floating overlays, consent/modal layers only | | Focus (Level 4) | `outline: 2px solid {colors.focus-ring}` | Keyboard accessibility ring | **Shadow Philosophy**: Dazed is essentially shadowless in its editorial layer. The two shadow values detected by dembrandt (`rgba(0,0,0,0.1)` and `rgba(0,0,0,0.3)`) belong to the third-party consent management UI, not to the publication's own component layer. For all editorial surfaces — tiles, headers, navigation, buttons — depth is communicated via the inversion of white and black fills alone. There are no drop shadows, no blurs, no glassmorphism. The design system's idea of depth is: white on black, then black on white, then back to black. ## Shapes The complete radius scale is declared in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Every story tile, image crop, button, input, navigation element — the default for all editorial UI | | `pill` | 50px | Section category filter buttons ("More Fashion", "More Beauty", "More Film & TV") only | Dazed's shape language is binary: absolutely square everywhere except the section filter chips. The pill at `50px` is not a modern-app gesture — it is a deliberate semantic signal that says "this is a filter" without any other visual differentiation. No `4px`, no `8px`, no `16px` intermediate radii anywhere on the production site. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly via `{components.*}`. ### Buttons - **`button-primary`** — White fill, black label, no radius, `{typography.button-ui}`. Used for subscription CTAs, primary actions in inverted contexts. Example: "SIGN UP", "CONFIRM". - **`button-primary-hover`** — Inverts to ghost: transparent fill, white border `{colors.border-inverse}`, white text. - **`button-secondary`** — Ghost: black fill (the canvas), `1px solid {colors.border-inverse}`, white label. Used for "Buy a Copy" and section CTAs. - **`button-secondary-hover`** — Inverts to filled: white background, black label. - **`button-pill`** — Ghost pill, used for section filter buttons only (`{rounded.pill}`). Inherits same inversion logic on hover. ### Cards Story tiles are chromeless layout primitives: a full-bleed image crop stacked above a category stamp in `{colors.ink-secondary}`, then a headline in `{typography.display}`, then optional metadata in `{typography.caption}`. There is no card border, no card shadow, no padding — the image edge is the tile boundary. - **`card`** — Zero-chrome story tile, `padding: 0`, background inherits `{colors.surface}`. - **`card-hover`** — Background lifts to `{colors.surface-elevated}` (`#0d0d0d`). Almost imperceptible. Just enough to signal interactivity. ### Inputs - **`input`** — Black background, white border `{colors.border-inverse}`, white label text, `{rounded.none}`. - **`input-focus`** — Border color swaps to `{colors.focus-ring}` (blue). Signals keyboard focus without visual noise. ### Navigation - **`nav`** — Full-bleed black strip. Category links in `{typography.nav-link}`, white text. Hover: underline appears. - Logo: Dazed wordmark in pure white SVG, ~200×48px, centered or left-aligned. ### Badges / Labels - **`section-label`** — DrukWide uppercase, `{colors.ink-secondary}`, appears above every story headline as a category designator ("FASHION", "MUSIC", "FILM & TV"). - **`badge`** — Minimal pill badge in white fill for notification-style labels. Rare in editorial chrome. ## Do's and Don'ts ### Do - Default every canvas to `{colors.background}` (`#000000`) — absolute black, always - Use `{typography.display}` (Neue Haas Grotesk Bold) with `letterSpacing: -0.72px` for all primary story headlines - Use DrukWide uppercase in `{colors.ink-secondary}` for section labels — only role this font plays - Keep all story tiles and interactive elements at `{rounded.none}` — the pill is reserved for filter chips only - Invert buttons on hover: white fill ↔ ghost white border, with a snappy 150ms transition - Let editorial photography provide all chromatic accent — the design chrome provides none - Maintain `1px solid {colors.border-inverse}` for all ghost interactive outlines on the dark canvas - Use `{typography.caption}` for timestamps, bylines, and photo credits — never bump to body scale - Apply `{colors.focus-ring}` as the keyboard-focus accessibility signal — it is the only non-monochrome hex ### Don't - Don't introduce a brand hue — no red, no orange, no editorial green; color lives in photography only - Don't soften the background to `#111` or `#1a1a1a` — `{colors.background}` is `#000000`, commit to it - Don't add `box-shadow` to story tiles or cards — depth signals via fill inversion, not simulated lighting - Don't mix DrukWide into body copy or headlines — it belongs exclusively to UPPERCASE section stamps - Don't use intermediate border radii (`4px`–`25px`) — the system is binary: `{rounded.none}` or `{rounded.pill}` - Don't reduce display headline letter-spacing toward zero — negative tracking is what makes the typography feel Dazed - Don't use `{colors.ink-secondary}` for headlines — it belongs to metadata and DrukWide labels only - Don't add decorative gradients, blurs, or overlays to the page chrome - Don't use UniversNextPro in new work — it appears in legacy modules and should not be extended --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <375px | Single column, hero display drops to 42px, hamburger nav | | Mobile | 375–599px | Single column, 1-up story grid, `{spacing.md}` horizontal padding | | Mobile Large | 600–899px | 2-up grid begins, section filters scroll horizontally | | Tablet | 900–1024px | 2–3-up grid, horizontal nav compresses, top bar adapts | | Desktop | 1025–1260px | Full 3–4-up story grid, complete horizontal nav category row | | Large Desktop | >1260px | Container caps ~1300px, outer gutters expand, grid unchanged | ### Touch Targets - Section filter pills: min 44px tap height — the pill radius helps with tap affordance on mobile - Story tiles: the full tile area is tappable, not just the headline text - Ghost buttons at mobile: maintain `12px` vertical padding for adequate touch height ### Collapsing Strategy - **Navigation**: Full horizontal category list collapses to hamburger at 900px. Logo stays centered. - **Display type**: `display-hero` scales 72px → 56px → 42px across the three breakpoint tiers. Tracking tightens proportionally. - **Grid**: 4-up → 3-up → 2-up → 1-up. Image crops maintain aspect ratios, never stretch. - **Section filters**: At mobile widths, filter pills shift to a horizontally scrolling row rather than wrapping. ### Image Behavior - All editorial photographs maintain their crop — no art direction changes across breakpoints - Hero images run full-width of their column with zero radius - Photography is `object-fit: cover` at defined aspect ratios (16:9 hero, 4:3 or 3:4 editorial tiles) --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (`#000000`) - Primary text: `{colors.ink}` (`#ffffff`) - Category labels: `{colors.ink-secondary}` (`#7a7f85`) - Captions: `{colors.ink-tertiary}` (`#a6a9ae`) - Ghost border: `{colors.border-inverse}` (`#ffffff`) - Focus ring: `{colors.focus-ring}` (`#206dc5`) - No brand hue — photography provides all color ### Example Component Prompts 1. "Build a Dazed story tile on `{colors.background}`. Full-bleed image (no border-radius). Below the image: a DrukWide 13px / uppercase `{colors.ink-secondary}` category label with `letterSpacing: 0.96px` (e.g., 'FASHION'). Below that: a Neue Haas Grotesk Display 36px / 700 / white headline with `letterSpacing: -0.72px` and `lineHeight: 1.00`. No card border, no shadow." 2. "Design a Dazed primary CTA button: `{colors.ink}` fill, `{colors.on-primary}` label text in Neue Haas Grotesk 13px / weight 700 / `letterSpacing: 0.5px`. Square corners (`{rounded.none}`). Padding: `12px 16px`. On hover, invert to transparent background with `1px solid {colors.border-inverse}` and white label in 150ms." 3. "Create the Dazed top navigation bar on `{colors.background}`: Dazed wordmark centered in pure white. Below it, a horizontal row of category links in Neue Haas Grotesk 16px / weight 500 / white. Categories: Fashion, Beauty, Music, Film & TV, Life & Culture. Hover: underline appears." 4. "Build a Dazed section filter row: a series of pill buttons (`{rounded.pill}`) with `1px solid {colors.border-inverse}`, transparent fill, 14px Neue Haas Grotesk / weight 700 / white. Padding: `14px 20px`. On hover, fill inverts to white with black label. On mobile, pills scroll horizontally." 5. "Generate a Dazed-style hero feature opener: `{colors.background}` canvas, full-width editorial photograph (3:2 aspect ratio), then below it a 72px Neue Haas Grotesk Display / weight 700 / white headline at `lineHeight: 0.95`, `letterSpacing: -1.44px`. Below the headline: 18px / weight 400 article deck at `lineHeight: 1.50`. A DrukWide 13px uppercase category label in `{colors.ink-secondary}` sits above the headline." 6. "Design a Dazed email input form on `{colors.background}`: white-bordered `1px solid` rectangular input (no radius), Neue Haas Grotesk 16px / 400 placeholder in `{colors.ink-secondary}`. On focus, border swaps to `{colors.focus-ring}` blue. Beside it: a solid white fill submit button with black label text and square corners." ### Iteration Guide 1. Start with `{colors.background}` (`#000000`) — commit to absolute black, not near-black. 2. Headline type rule: Neue Haas Grotesk Display Bold, always negative tracking, always `lineHeight` at or below `1.17`. 3. Section labels are the only DrukWide moment — UPPERCASE, `{colors.ink-secondary}`, 13px, `letterSpacing: 0.96px`. One role, no exceptions. 4. Color rule: white (`{colors.ink}`) and two grays (`{colors.ink-secondary}`, `{colors.ink-tertiary}`) are the entire chrome palette. 5. Button logic: all buttons invert fill ↔ ghost on hover. No intermediate states, no color changes. 6. Shape rule: `{rounded.none}` on everything except section filter pills (`{rounded.pill}`). 7. Photography is the design — make sure image crops dominate tile real estate. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Dazed. Brand names and trademarks belong to their respective owners.