This document defines the visual foundations for StudioFlow. It is the single source of truth for color, typography, spacing, and usage — shared across design, engineering, and marketing.

1. Color System

Our palette is built on a neutral slate base with an indigo-to-violet primary range. Every surface maps to a semantic token so that switching between light and dark themes never requires hardcoded values.

Primary Range

Use the indigo scale for interactive elements and the violet scale for emphasis and gradients. Maintain a contrast ratio of at least 4.5:1 for body text and 3:1 for large or UI text.

2. Typography

Headings use a tight tracking and semibold weight. Body copy renders at 15px with relaxed leading for long-form reading. Tabular numbers are reserved for data-dense surfaces such as dashboards and billing.

3. Launch Checklist

• Audit all surfaces against the new token map
• Run accessibility contrast validation across light and dark themes
• Export logo and favicon set at required resolutions
• Document legacy usages for migration in the appendix