## Design Context

### Users
TRUE is the world's premier platform for blockchain-secured digital certificates, diplomas, and credentials. Two primary user groups: **issuers** (education institutions, certification bodies, corporate L&D teams) who create and distribute credentials, and **recipients** who store and share them. This style guide serves developers and designers building TRUE web properties — it must be precise, authoritative, and easy to reference.

### Brand Personality
**Trustworthy, Premium, Bold.** The interface should evoke trust, credibility, and premium quality. For certificate recipients, a TRUE credential should feel valuable enough to proudly share. The brand balances institutional authority with modern sophistication — never bureaucratic, never casual.

### Aesthetic Direction
- **Visual tone**: Clean, precise, premium. Stripe-level polish meets Linear-level precision.
- **Signature element**: The cyan-to-pink gradient (#7DCADE to #D82A80) is the brand's most distinctive visual asset. Dark contrast sections alternate with light to create rhythm and depth.
- **Typography**: Marcellus / Marcellus SC for display (serif gravitas), Helvetica Neue for body (clean readability). The serif/sans pairing signals "established yet modern."
- **Theme**: Light and dark sections coexist — the contrast is intentional and central to the brand identity.
- **References**: Stripe (clean, premium), Linear (precision), trueoriginal.com (the source of truth — gradient, dark sections, Marcellus typography).
- **Anti-references**: Generic SaaS dashboards, playful/casual interfaces, bureaucratic government forms.

### Design Principles
1. **Precision over decoration** — Every pixel should be intentional. Spacing, alignment, and typography must be exact. No ornamental flourishes.
2. **Contrast creates hierarchy** — Use the light/dark alternation and the gradient strategically to guide attention and establish visual rhythm.
3. **Premium through restraint** — Fewer elements, more breathing room. Quality is communicated by what you leave out, not what you add.
4. **Accessible by default** — WCAG AA compliance. The brand's boldness must not come at the cost of readability or usability.
5. **The gradient is sacred** — The cyan-to-pink gradient is the brand's signature. Use it for hero moments and key accents, never dilute it through overuse.