Skip to content
WeDanceDocs
Foundationsstable

Elevation

Soft, rounded and a little tactile. Pills for anything you tap, generous radii for surfaces, and shadows that feel printed rather than floating.

Corner radius

Tailwind radius classes, driven by --radius (0.625rem). Pick by size of the element, not by taste.

rounded-md8px

Inputs in dense admin UI, code chips

rounded-lg10px

Small buttons, menu items

rounded-xl14px

Tiles, small cards, swatches

rounded-2xl16px

Cards, panels, dialogs

rounded-3xl24px

Hero images, feature panels

rounded-fullpill

CTAs, chips, avatars, filters — the most used shape

Shadows

Five recipes cover almost every surface. Each is a CSS variable (--wd-shadow-*) and a Tailwind utility (shadow-wd-*). 85 inline shadows in pages still repeat them by hand; they move over when a page is next touched.

Book

Lip

shadow-wd-lipvar(--wd-shadow-lip)

The hard, offset under-edge on pill buttons — makes them feel pressable. Defaults to red-800; on other buttons set --wd-shadow-color to the button’s darker step (cyan-700 on cyan, green-700 on green).

shadow-wd-lip → box-shadow: 0 3px 0 -1px var(--wd-shadow-color, var(--wd-red-800));

Card

shadow-wd-cardvar(--wd-shadow-card)

Hairline plus a warm, barely-there blur. Default for cards on cream.

shadow-wd-card → box-shadow: 0 1px 0 color-mix(in srgb, var(--wd-brown-900) 4%, transparent), 0 6px 18px rgba(59,31,18,0.04);

Sticker

shadow-wd-stickervar(--wd-shadow-sticker)

Offset solid shadow in the item’s accent colour — the playful “stuck on” look for festival and plan cards. Set --wd-shadow-color to the accent (defaults to the text colour).

shadow-wd-sticker → box-shadow: 3px 4px 0 -1px var(--wd-shadow-color, currentColor);
Report a problem

Float

shadow-wd-floatvar(--wd-shadow-float)

Things above the page: floating buttons, popovers, the report-a-problem pill.

shadow-wd-float → box-shadow: 0 6px 20px rgba(0,0,0,0.18), 0 3px 0 -1px rgba(0,0,0,0.15);

Focus halo

shadow-wd-focusvar(--wd-shadow-focus)

Soft ring around focused inputs. Keyboard focus on buttons uses the ring token instead.

shadow-wd-focus → box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-red-600) 15%, transparent);

Using the tokens

Reach for the utility class. Lip and sticker take their colour from --wd-shadow-color on the element; the utility resolves it there, so per-card accents work.

html
<!-- Tailwind utility (preferred) -->
<button class="rounded-full bg-primary text-primary-foreground shadow-wd-lip">Book</button>

<!-- Recolour lip or sticker: set --wd-shadow-color on the same element -->
<button class="rounded-full bg-info text-white shadow-wd-lip"
        style="--wd-shadow-color: var(--wd-cyan-700)">Join</button>
<article class="rounded-2xl border shadow-wd-sticker"
         :style="{ '--wd-shadow-color': accent }">…</article>

<!-- Inline CSS (default colour only) -->
<div style="box-shadow: var(--wd-shadow-card)">…</div>
  • var(--wd-shadow-lip) and var(--wd-shadow-sticker) in inline CSS resolve at the root, so they always use the default colour (red-800 / currentColor). Use the utility when you need another colour.
  • Pressed state: drop the lip (active:shadow-none active:translate-y-px) so the button looks pushed in.
  • Keyboard focus on buttons and links uses the ring token (focus-visible:ring-2 ring-ring), not the focus halo.
  • Variants seen in pages — a deeper 4px lip on large CTAs and bigger sticker offsets on hero art — are not tokens yet. Keep them inline; promote one when it repeats.