<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design System: Agency Creative — Visual Theme & Atmosphere

Agency Creative is a bold, expressive design system for teams that lead with visual storytelling. It takes cues from high-end editorial design, motion graphics, and the unapologetic confidence of studios that win awards. Colour is not decoration — it's the message. Typography is not just readable — it commands the room.

The palette is built around a vibrant purple-to-pink gradient axis with deep dark surfaces that let colour work hard. When used on light backgrounds, the same palette shifts to high-impact contrast against clean whites. Every surface is a potential canvas: gradients can sweep across hero sections, buttons pulse with colour, and empty space becomes dramatic tension.

Layout philosophy is deliberately asymmetric. Grids are a scaffold, not a cage — elements can break columns, overlap, and create intentional visual friction. Motion is a core design element, not an afterthought. Page transitions, scroll-triggered animations, and micro-interactions give the system its energy. Type is large, tracked wide, and demands attention.

**Key characteristics:**
- **Mood:** Bold, dynamic, confident, expressive, editorial
- **Signature gradient:** Purple `#7c3aed` → Pink `#ec4899` (135° angle default)
- **Background options:** Deep black `#0f0f0f` (dark mode), clean white `#ffffff` (light mode)
- **Typography feel:** Large display type, wide tracking, strong hierarchy
- **Corner treatment:** Mixed — 16px for containers, 999px for CTAs (pill), 0px for editorial crops
- **Border style:** Minimal — rely on colour and spacing for structure, not lines
- **Shadow approach:** Coloured shadows that extend the gradient palette
- **Density:** Low to medium — generous whitespace creates drama
- **Motion:** Core element — 300–500ms spring easing, scroll-triggered reveals, hover transforms
