Focus.AI Design System

A design system that combines Swiss International Style structural rigor with Focus.AI's brand identity. Warm paper backgrounds, editorial typography, rigorous grid, generous whitespace, opacity-based hierarchy, and restrained accent color.

Six Principles

1. Grid first. Every layout lives on a 12-column grid (editorial pages use a 3-column asymmetric variant). 8px base unit for spacing.
2. Mobile first, always. Design for 320px, then expand. Use sm:, md:, lg: prefixes systematically.
3. Whitespace is structure. Generous padding and margins are the design, not waste.
4. Opacity creates hierarchy. Never introduce a second text color to indicate weight. Use opacity on the primary text color.
5. Two accents maximum, used sparingly. Primary accent for CTAs and navigation. Secondary accent for decorative highlights only.
6. Clarity over decoration. Every element earns its place. If it doesn't help the reader focus on what matters, remove it.

Brand Architecture