WeDance design system

Design that feels like a night out

Tokens, components and patterns for every WeDance screen. One source of truth for designers, developers and the agents that build with them.

Principles

Warm, not loud

Cream, deep browns and one confident red. Colour carries meaning; it is never decoration for its own sake.

Phone first

Dancers open WeDance on the dance floor, one-handed. Every screen starts at 375px and grows.

One way to do it

Use the component or the token. If neither fits, propose a new one — never hand-roll a one-off.

Readable by everyone

Text meets WCAG AA, every control works by keyboard, motion respects reduced-motion.

How to use it

Reach for these in order. Stop at the first one that fits.

vue

<!-- 1. Prefer a component -->
<Button>Save plan</Button>

<!-- 2. Then a Tailwind token class (semantic first) -->
<p class="text-muted-foreground">…</p>
<div class="bg-wd-cream border-border">…</div>

<!-- 3. In inline CSS, a variable — never a hex -->
<span style="color: var(--wd-amber-600)">…</span>

<!-- 4. Colour computed in JS (rotations, alpha suffix) -->
<script setup lang="ts">
import { WD } from '~/lib/brand'
const accent = [WD.red600, WD.cyan600][i]   // accent + '55' still works
</script>

Full rules and token tables live in docs/design-system.md. Tokens are defined in app/assets/css/tailwind.css; components in app/components/ui.