## Design Context

### Users
Developers building Svelte 5 applications — both the creator (Florian) for side projects and other devs adopting the kit. Usage ranges from quick side projects to more professional/production applications. Developers want components that look good out of the box without spending time on design decisions.

### Brand Personality
**Polished, friendly, versatile.** The current vibe is playful and warm (fox branding, pink accent, rounded corners), but the kit needs to credibly serve professional contexts too. Think: defaults that feel designed and approachable, not sterile or corporate — but never so playful that a business app looks unserious.

### Aesthetic Direction
- **Visual tone**: Warm and refined with personality. Opinionated defaults that have a clear point of view, but easy to override for different contexts.
- **Theme**: Both dark and light mode, fully supported. No preference for one over the other.
- **Anti-references**: Generic Bootstrap/Material look. Corporate sterility. But also: overly cute/toy-like aesthetics that wouldn't work in a dashboard or admin panel.
- **Key tension**: Playful enough to be memorable, professional enough to be versatile.

### Design Principles
1. **Opinionated defaults, easy escape hatches** — Components should look great with zero config, but customization (colors, radius, fonts) should be a one-liner, not a fight.
2. **Warm, not cute** — Personality comes from refined details (spacing, typography, subtle color), not from decoration or novelty.
3. **Works everywhere** — A component should look at home in a personal blog AND a SaaS dashboard. The base aesthetic bridges both.
4. **Dark and light as equals** — Neither mode is an afterthought. Both should feel intentional and polished.
5. **Developer ergonomics first** — The API for customization matters as much as the visual output.

### Accessibility
Target WCAG 2.1 AA as baseline. Ensure sufficient color contrast in both modes, keyboard navigation, focus indicators, and screen reader support.
