Save the Dogs Design System

Save the Dogs · teal

Resolved: light
Overview

Collections

Surfaces that arrange MANY items into a layout — boards, grids, galleries, feeds and timelines. Each is a thin composition over the <Surface> primitive and the @phauna/ds layout/media primitives, so elevation, padding, radius and tone all come from one place and re-skin with the theme. Flip the theme in the top bar to confirm every surface tracks it.

KanbanBoard
Owns the @dnd-kit drag context (mouse · touch · keyboard) for a horizontal row of columns. Controlled: takes columns, fires onMove({cardId,from,to,toIndex}) on drop, keeps a live optimistic order. closestCorners collision; cards drag within and across columns.
KanbanColumn
A titled, scrollable column = Surface (tone surface-2, flat). A droppable list wrapping a vertical SortableContext of cards; optional count Badge + footer slot. Degrades to a static column without a DndContext ancestor.
KanbanCard
A presentational card = Surface (raised) with a title row (+ badge), description and meta/footer slots. Server-safe; the column wraps it in the sortable, focusable node — dragging lifts it (the board's drag-overlay clone).
MasonryGrid
A CSS multi-column masonry wrapper (no JS measuring). Fixed responsive column count OR width-driven auto-fit (minColumnWidth); items kept from splitting across breaks. A layout wrapper — items carry their own framing.
Gallery
A responsive image grid composing @phauna/ds Image/Thumbnail in an AutoGrid. With onOpen each cell is a focusable button firing onOpen(index,item) — wire it to a lightbox. Captioned items render as Thumbnails.
Feed
A vertical activity/post feed. Default: roomy post cards (flat Surface rows with avatar · author · time · body). compact: the @phauna/ds ActivityFeed/ActivityEntry log look.
Timeline
A vertical event rail: dot/medallion + connecting line + content, echoing the LineGroup/ApprovalFlow look. Node colour tracks a lifecycle state; framed wraps each entry's body in a flat Surface card.

KanbanBoard · KanbanColumn · KanbanCard

Columns of draggable cards. Drag with the mouse/touch, or operate it entirely from the keyboard: focus a card, press Space to pick up, Arrow keys to move it within and across columns, Space to drop, Esc to cancel. The board is controlled — it fires onMove on drop and this demo mirrors the move back into its column state.

Backlog

3
  1. Draft the spring adoption flyer
    low
  2. Confirm vet appointments for intake batch
    med

    Six dogs arriving Friday.

  3. Update foster handbook
    low

In progress

2
  1. Coordinate transport from the shelter
    high

    Driver confirmed; pickup 8am.

  2. Photograph new arrivals for the site
    med

Review

1
  1. Approve volunteer welcome email copy
    review

Done

0
  1. Drop cards here

Keyboard: focus a card, press Space to pick up, Arrow keys to move, Space to drop, Esc to cancel.

KanbanBoard — drag cards within / across columns (mouse · touch · keyboard); onMove fires on drop
Anatomy
Coordinate transport from the shelter
high

Driver confirmed; pickup 8am.

Photograph new arrivals
med
KanbanCard (static) — title · badge · description · meta, inside a column shell

MasonryGrid

A CSS multi-column masonry layout — children pour into balanced columns and each item is kept whole across the column break. Pure CSS (no measuring), so it's server-safe. Here a fixed responsive column count holds notes of varying height.

Foster check-in

Quick weekly note from a foster family.

Intake batch

Six dogs arriving Friday — vet appointments booked, transport confirmed, photos scheduled for Saturday morning before the adoption event.

Supply run

Need crates and puppy pads.

Adoption story

Scout went home today after four months in foster. The family sent the sweetest update with a photo of him asleep on the couch.

Volunteer thanks

Big thanks to the Saturday crew.

Reminder

Update the foster handbook before the next orientation.

MasonryGrid — columns={3}, gap='md'; notes of varying height

Feed

A vertical activity / post feed. The default look is roomy post cards (flat Surface rows with a leading avatar, an author + timestamp header, and a body); the compact look composes the @phauna/ds ActivityFeed/ActivityEntry log.

  1. Priya N.
    2h ago
    Six dogs from the Friday intake are now in foster homes. Thank you to everyone who stepped up!
  2. Sam O.
    5h ago
    Transport for tomorrow is confirmed — pickup at 8am, two drivers.
  3. Lee M.
    Yesterday
    New arrival photos are up on the site.
Feed (default) — post cards with avatar · author · time · body
  1. Jamie created the spring flyer task.09:14
  2. Dana moved “Coordinate transport” to In progress.10:02
  3. Rebekah approved the welcome email copy.11:30
  4. Sam marked “Photograph arrivals” done.12:45
Feed (compact) — ActivityFeed/ActivityEntry log; one accented

Timeline

A vertical event rail: a coloured dot (or an icon medallion) on a connecting line, with dated content beside it. The node colour tracks a lifecycle state (done · current · pending · rejected). framed wraps each entry's body in a flat Surface card.

  1. Mar 2
    Intake

    Arrived from the county shelter; vet check booked.

  2. Mar 5
    Transport

    Driven to the foster coordinator.

  3. Mar 6
    Photographed for the site
  4. Pending
    Meet-and-greet

    Awaiting an approved adopter.

  5. Goal
    Adopted
Timeline — icon medallions + lifecycle states (a rescue journey)
  1. 09:14
    Task created

    Draft the spring adoption flyer.

  2. 10:02
    Moved to In progress
  3. —
    Awaiting review

    No reviewer assigned yet.

Timeline — framed (each body in a flat Surface) + plain dots