Tide 29Court design system
Tide v0.1 · live showcase

The design system, fully applied.

This whole site is built from Tide and nothing else: its tokens, its CSS, its 25 elements, and 35 live demos across the gallery and its showpieces. No forked styles, no lookalikes. Flip the theme in the bar, light beach to night beach, and everything follows.

Open the gallery See the tokens See the states

This morning, in situ

The decision inbox and an agent run, sitting in a page the way a product would use them.

  •
  • Gathered overnight activity3 errands, 1 approval
  • Drafted the summaryReady below
    •

    Decisions, in situ

    The swipe deck is the house verb set: right approve, left dismiss, up snooze, down comment. One gesture, one action — the vacated edge floods muted until the swipe is armed, solid when letting go commits.

    Purchase
    Beach restock
    $42.00
    Sunscreen, towels, and a replacement umbrella anchor.
    Needs approvalSample data
    Draft reply
    Reply to the caterer about Saturday
    “Twenty guests, one vegetarian, arriving at six.”
    Ready to sendSample data
    Renewal
    Storage unit renews Friday
    Same rate as last quarter. Approve to keep it, dismiss to let it lapse.
    Low stakesSample data

    Money, in situ

    One shape the whole way: idle, processing, paid. Slide to pay lives in the same family.

    Beach day kit
    Sample product
    $24

    Ask, in situ

    The instruction composer: mic when empty, send when there is text, effort chips underneath.

    A form, in situ

    Fields, checks, a segmented control and a switch, all Tide. Inputs compute at 16px so iOS never zooms.

    One opportunity per screen

    The upgrade pattern, over a soft preview of what is behind it.

    Weekly insights

    Spend fell 12% this week; three errands ran themselves.

    The rest of the site

    Everything here is Tide, rendered live. Nothing on this site is a screenshot.

    Gallery

    The system’s own gallery: every component live, each with its Tune knob.

     Scenes

    Whole stories played end to end: a pricing ceremony, an approval, the morning paper, a quiz, a checkout.

     Tokens

    Color ramps, type scale, spacing, radius and motion, read from the live CSS in both themes.

     States

    Disabled, empty, error and settled states, instantiated one by one.

     Demo: morning inbox

    A Dillo showpiece page, served exactly as the system ships it.

     Demo: errand checkout

    Checkout composed from Tide pieces.

     Demo: agent run

    A run trace as a full page.