designing-frontendlisted

# Frontend Design: Calm Tech Design Language This skill guides **design thinking** and decision-making for frontend interfaces. It focuses on the **what** and **why** of design, not the implementation details. **For implementation (how to code it)**: Use the `styling-with-tailwind-shadcn` skill. ## Design Philosophy: Calm Tech Our design system embraces **"Calm Tech"** — interfaces that feel sophisticated, spacious, and effortless. ### Core Principles 1. **Clarity over decoration** — Every element earns its place 2. **Soft depth over flat** — Subtle shadows and layers create hierarchy without noise 3. **Generous space** — Breathing room makes content shine 4. **Micro-delight** — Thoughtful animations that feel tactile and responsive ### Design Rules | Rule | Reasoning | | -------------------------- | ------------------------------------------------------------ | | **No pure black or white** | Rich, tinted neutrals feel warmer and more sophisticated | | **Desaturated accents** | Vibrant but not harsh — easier on the eyes | | **WCAG AA contrast** | Accessibility is non-negotiable (4.5:1 text, 3:1 large text) | | **Generous radius** | Soft corners feel friendly and modern | | **Soft shadows** | Diffused shadows create depth without visual noise | ## Design Thinking Process Before writing any code, work through these q