Hover to learn terms · Click to see examples
Hero — the opening structure; sets tone and hierarchy.
Card — a modular container for one idea.
Grid — alignment system that organizes content.
Wrap — centered boundary for line length.
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
CTA — turns attention into action.
Nav — wayfinding through the system.
Pulse & Flicker — motion cues for feedback.
animation: pulse 10s ease-in-out infinite;animation: flicker 3.5s ease-in-out infinite alternate;
Footer — structural closure.
Structure Reveals Narrative
Before: scattered policies, duplicated content, unclear ownership.
After: a structured dashboard with clear sections — the organization’s story is visible.
Clarity Through Containment
Style Serves Structure
Typography, color, and spacing align to the grid — no decoration that weakens comprehension.
Platforms Are Systems
A Confluence space with templates, macros, and governance — it grows with the organization.