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 _on content surfaces_** — Breathing room makes content shine; control surfaces run dense (see below) 4. **Micro-delight** — Thoughtful animations that feel tactile and responsive ### Two Spatial Modes "Generous space" is a **content** rule. Control surfaces follow density instead. | | Content surface | Control surface | | ----------- | ----------------------------------------- | ------------------------------------------------- | | Examples | Pages, cards, empty states, reading views | Sidebars, toolbars, list panes, menus, table rows | | Body text | 15–16px | 13px, metadata 11px | | Row height | — | 28–32px (4px-grid multiples) | | Inset | 16–24px