# DESIGN.md — Bold Editorial Motion
**Style:** Bold Editorial Motion  
**Use case:** Community platforms, cultural brands, events, membership clubs, sport and lifestyle  
**By:** Zero to UI (02UI) — designmd.info

---

## Overview

This system is built to make you stop scrolling. It earns attention through scale, contrast, and deliberate colour shifts — not tricks, not noise. Typography is the hero: oversized, condensed, heavy. The grid exists mainly to break it. Backgrounds change as the user scrolls, each section owning its own identity while the system keeps everything connected through consistent type treatment and motion behaviour. Motion is part of the design, not decoration — elements animate in with purpose, SVGs add life without clutter. The overall feeling is: confident, alive, and slightly unapologetic.

> **02UI Rationale:** Most sites whisper. This one speaks. The trick is knowing when to stop shouting — and this system knows.

---

## Colors

The palette changes by section. Each section owns its colour theme. These are the core themes and when to use them.

### Theme 1 — Night Open (Hero / Entry)
| Role | Token | Hex |
|---|---|---|
| Background | `--theme1-bg` | `#1A0A2E` |
| Primary text | `--theme1-text` | `#D99FF5` |
| Accent | `--theme1-accent` | `#D99FF5` |
| Border / outline | `--theme1-border` | `rgba(217,159,245,0.35)` |

### Theme 2 — Field (Mid sections)
| Role | Token | Hex |
|---|---|---|
| Background | `--theme2-bg` | `#1A3A1A` |
| Primary text | `--theme2-text` | `#B8F0B8` |
| Accent | `--theme2-accent` | `#7DD87D` |

### Theme 3 — Warm Ground (Lower sections)
| Role | Token | Hex |
|---|---|---|
| Background | `--theme3-bg` | `#2C1F0A` |
| Primary text | `--theme3-text` | `#D4A853` |
| Accent | `--theme3-accent` | `#C49A3C` |

### Theme 4 — Deep Close (CTA / Membership)
| Role | Token | Hex |
|---|---|---|
| Background | `--theme4-bg` | `#1A0A2E` |
| Primary text | `--theme4-text` | `#E8C8FF` |
| Accent | `--theme4-accent` | `#FFFFFF` |

**Global neutrals (used across all themes):**
- `--color-white` `#FFFFFF`
- `--color-black` `#0D0D0D`

> **02UI Rationale:** One colour palette for the whole site is a safe choice. This system is not making safe choices — it is making memorable ones. Colour is how each section earns its own identity.

---

## Typography

This system lives and dies by its type. Everything is centred around a condensed display face.

**Display / Hero (the main event)**
- Font: `Bebas Neue`, `Anton`, or any condensed bold display face
- Weight: 700–900
- Size: 100px–200px (responsive — fills the viewport width)
- Line height: 0.9–1.0
- Letter spacing: -0.02em to 0
- Case: ALL CAPS
- Usage: Hero section, section openers, statement moments

**Headline**
- Same font family as display
- Weight: 700
- Size: 40px–72px
- Line height: 1.0–1.1
- Case: ALL CAPS or Title Case depending on context

**Sub-headline / Eyebrow**
- Font: `Inter` or any neutral sans-serif
- Weight: 500
- Size: 12px–14px
- Letter spacing: 0.08em–0.12em
- Case: ALL CAPS
- Usage: Labels above display text, section identifiers

**Body**
- Font: `Inter` or matching neutral sans-serif
- Weight: 400
- Size: 15px–17px
- Line height: 1.6
- Usage: Descriptions, membership benefits, supporting copy only — body text is secondary here

> **02UI Rationale:** Condensed type at scale does something normal type cannot: it fills space with energy. The bigger the type, the less you need to decorate anything else.

---

## Elevation

This system uses **flat surfaces with colour contrast** to create depth. No shadows. Sections are separated by background colour changes, not borders or lines.

| Level | Usage |
|---|---|
| 0 — Flat | All content sections — the background IS the depth |
| 1 — Raised | Membership cards, pricing tiers — `rgba(255,255,255,0.08)` background overlay |
| 2 — Overlay | Modal / video lightbox — `rgba(0,0,0,0.75)` overlay behind content |

SVG and illustrated elements appear on the same plane as text — no shadows on them. They are part of the surface, not floating above it.

> **02UI Rationale:** When your colour contrast is this strong, shadows are just noise.

---

## Components

### Buttons

| Variant | Background | Text | Border | Hover |
|---|---|---|---|---|
| Primary | `--theme-text` (current section colour) | `--theme-bg` (inverted) | none | Scale `1.02`, 150ms |
| Outline | transparent | `--theme-text` | `2px solid --theme-text` | Background fills with `--theme-text`, text inverts |
| Ghost | transparent | `--theme-text` at 60% opacity | none | Opacity goes to 100% |

- Border radius: `100px` (pill) — the rounded pill is the signature shape of this system
- Padding: `14px 28px` (default), `10px 20px` (small)
- Font: sub-headline style — 13px, 500 weight, letter-spacing 0.06em, ALL CAPS
- Transition: 150ms ease on all states

### Cards (Membership / Pricing)

- Background: `rgba(255,255,255,0.06)` against section colour
- Border: `1px solid rgba(255,255,255,0.15)`
- Border radius: `16px`
- Padding: `32px`
- No shadow — the contrast between card and section background is enough

### Navigation

- Position: fixed top
- Background: transparent initially, becomes `rgba(0,0,0,0.6)` with `backdrop-filter: blur(16px)` on scroll
- Logo: top-left, small, matches section text colour (updates on theme change)
- Nav links: minimal, right-aligned or centred, all caps 12px
- Single CTA: pill button, top-right
- Height: `64px`

### SVG / Illustration elements

- Always flat — no drop shadow
- Colour matches current section palette (foreground colour)
- Size: purposeful — small SVGs as section accents, not page heroes
- Animation: loop at 2–4 second intervals, ease-in-out, subtle

### Section transitions

- Background colour changes happen at scroll trigger points
- Transition: `background-color 0.6s ease`
- No hard cuts between sections — always cross-fade

---

## Do's and Don'ts

**Do:**
- Let the type be the layout. When type is this big, it IS the grid.
- Change background colours between sections — this is how the page breathes and creates pacing.
- Use motion to reveal, not to decorate. Elements animate in on scroll, then sit still.
- Keep body copy short. If you need three paragraphs to explain something, break it into a different format.
- Use pill-shaped buttons consistently — they are the one shape that works against heavy display type without competing.

**Don't:**
- Use this system for a dashboard, a SaaS tool, or anything that needs high information density. It does not work there.
- Add box shadows to anything. The colour contrast is already doing that job.
- Mix the section colour themes. Each section owns one theme — switching inside a section breaks the rhythm.
- Use the display font for body text. It was not made for reading, only for impact.
- Over-animate. Two SVG animations per section is the maximum. More than that and the page starts to feel like a circus.

---

*Free to use, adapt, and share. More files at designmd.info — by Zero to UI.*