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.