Design Language
Brand identity, visual principles, and the reasoning behind Trovella's design decisions across color, typography, layout, and interaction.
Trovella's design language defines the visual and experiential identity of the product -- the "why" behind every color, typeface, spacing choice, and interaction pattern. Where the UI Components topic documents how the design system is implemented in code, this topic documents the decisions and principles that shaped it.
Why This Topic Exists
Design decisions made during Phase 0 are the foundation that every new screen, component, and marketing page builds on. Without a documented rationale, design intent drifts as features accumulate -- colors get added "because they looked nice," spacing becomes inconsistent, and the product gradually converges on the generic look of every other SaaS template. This topic preserves the reasoning so that any contributor (human or AI agent) can make decisions consistent with the original intent.
Scope
This topic covers:
- Brand identity -- archetype, personality traits, tone, and positioning strategy
- Color system -- primary, neutral, semantic, and accent palette choices and why they were chosen
- Typography -- font selection, type scale, weight strategy, and the role of a display typeface
- Layout and navigation -- responsive strategy, sidebar architecture, command palette, and workspace switching
- Interaction patterns -- animation principles, micro-interaction philosophy, empty/loading/error state design, and microcopy conventions
- Anti-patterns -- the specific tells of AI-generated design and how Trovella's design language counters each one
What This Topic Does Not Cover
- Token values and CSS custom properties -- see Design Tokens
- Theming implementation (dark mode toggle, Tailwind v4 mapping, font loading) -- see Theming
- Component architecture (dashboard shell, CVA variants, composition patterns) -- see Component Patterns
- shadcn/ui component inventory and generation workflow -- see shadcn/ui Component Library
Pages
Brand Identity
The archetype blend, personality traits, tone spectrum, and positioning approach that define how Trovella presents itself. Every visual and verbal choice traces back to these decisions.
Color System
Why deep teal, gold accent, and warm neutrals -- the psychological, competitive, and technical reasoning behind the palette.
Typography
Font selection rationale, the role of DM Serif Display as a display typeface, the type scale, and the four-weight strategy.
Layout & Navigation
Responsive breakpoint strategy, the five-zone sidebar, command palette, and workspace switcher -- the structural decisions that shape how users move through the product.
Interaction Patterns
Animation philosophy, empty state strategy, loading and error treatment, microcopy conventions, and the voice system that governs all UI text.
Anti-Patterns
The twelve tells of AI-generated design and the specific countermeasures built into Trovella's design language.
Cross-Domain References
- UI Components -- the technical implementation of the design language: token CSS, theming, shadcn/ui components, and composition patterns
- Product Vision -- the product strategy that brand identity and positioning decisions flow from
- Routing & Pages -- the page structure and middleware that the layout decisions inform