| 1 | --- |
| 2 | name: "editorial-site-redesign" |
| 3 | description: "Pattern for redesigning an editorial website with design tokens, phased rollout, and clear handoff" |
| 4 | domain: "design" |
| 5 | confidence: "low" |
| 6 | source: "earned" |
| 7 | --- |
| 8 | |
| 9 | ## Context |
| 10 | |
| 11 | When redesigning an editorial or content-heavy website, the challenge is creating a distinctive visual identity while maintaining readability and shipping incrementally. This skill captures the pattern used for SquadScope's 2026 redesign. |
| 12 | |
| 13 | ## Patterns |
| 14 | |
| 15 | 1. **Study peer references first**: Fetch 3-4 comparable sites. Capture: layout pattern, typography, color, navigation, density, article treatment. Note what fits and what doesn't. |
| 16 | |
| 17 | 2. **Lock tokens before components**: Define CSS custom properties (colors, spacing, typography, shadows, radii) as the foundation. Components depend on tokens; tokens don't depend on components. |
| 18 | |
| 19 | 3. **Phase: tokens → chrome → content → polish**: |
| 20 | - Phase 1: Design tokens + typography |
| 21 | - Phase 2: Header + footer (site chrome) |
| 22 | - Phase 3: Home page layout |
| 23 | - Phase 4: Article/content layouts |
| 24 | - Phase 5: Secondary components (dashboards, callouts) |
| 25 | - Phase 6: Brand assets (icons, OG images) |
| 26 | |
| 27 | 4. **Specs replace mockups**: Without Figma, write component specs as prose + ASCII diagrams. Include: structure, spacing values, color tokens, states (hover, active, focus), responsive behavior. |
| 28 | |
| 29 | 5. **Icon from concept**: Start with a narrative (what does the brand represent?), propose 2-3 concepts, recommend one, then hand-code SVG. Use `currentColor` for automatic light/dark adaptation. |
| 30 | |
| 31 | 6. **WCAG AA from the start**: Verify contrast ratios when defining palette, not after implementation. |
| 32 | |
| 33 | ## Examples |
| 34 | |
| 35 | - `docs/processed/redesign-proposal-2026-05.md` — full proposal with token tables, ASCII layouts, component specs |
| 36 | - `docs/processed/icon-spec.md` — icon narrative, SVG code, asset checklist |
| 37 | |
| 38 | ## Anti-Patterns |
| 39 | |
| 40 | - Designing components before establishing tokens (leads to inconsistency) |
| 41 | - Big-bang redesign (ship nothing until everything is done) |
| 42 | - Copying reference sites literally (lose distinctiveness) |
| 43 | - Skipping accessibility verification (expensive to fix later) |
| 44 | - Using external fonts without fallbacks (FOUT, performance) |