Tawny

Changelog

Writeups

Writeups

Design notes. Each one walks a decision from the first frame to the last.

The first note is Five decisions. None need a designer. — why a product can feel expensive without a new component, a new font, or a designer in the room. Read them all on Writeups.

Components

Component demos fill the frame

Component detail pages now use a tall stage, the same scale as the issue list, so a navbar, a button, or a map reads at real size instead of a thin strip. Gallery cards crop tighter around that subject.

components/ui/dotted-map

The map follows the theme

Land dots use the foreground at 70% — ink on cream in light, paper on ink in dark — instead of a fixed gray faded to 40%. Markers stay tawny.

Improvements

  • Raised the default component detail frame to a 36rem stage
  • Cropped header, motion, and effects gallery cards around the subject
  • Painted dotted-map dots with the theme foreground

Components

Route sheet

A route sheet in the same language as the issue list. One accent, a hairline border, and a 4px grid. The timeline follows a bike trip to Wall Street, and the same sheet carries two more ways to get there.

components/route-sheet

Route

1 hr

10 min

Start

Your Location

34 min

Pickup

W 84 St & Amsterdam Ave

Bikes

30

EBikes

25

44 min

Dropoff

Barrow St & Hudson St

Parking

41

Destination

Wall Street

Three trips

Bike keeps the dock pickup on W 84 St and the dropoff at Barrow St. Drive follows the West Side Highway and parks at the Battery Parking Garage. Transit boards the 1 train at 86 St and gets off at Wall St.

The squiggle stays on the bike leg. A walk or a drive is a straight line, and the train is dashed.

Open it on the route sheet.

Ocean

Ocean joins the design catalog

Ocean is a scroll-driven WebGL landing page. A particle whale, sea turtle, jellyfish, and manta ray — each sampled from a glTF model — morph into one another as you scroll.

designs/ocean

Dive through the creatures

Ocean is a single-page studio landing built around a Three.js particle field. Each creature is a glTF model sampled into the same number of points, and a custom shader morphs between them as you scroll, with ocean currents, bioluminescent shimmer, and a cursor ripple layered on top.

Scroll the live demo to dive through all four creatures, or scaffold a copy and swap in your own studio copy.

npx create-tawny@latest --template ocean

Improvements

  • Added the Ocean template to create-tawny, registered in the CLI's template list
  • Added a live design demo and full /view preview for Ocean
  • Showcased Ocean in the designs catalog and in Components docs

Dashboard

Board can be clicked through

Board is no longer a static issue list. The sidebar, filter, display, and commands each change what you see.

components/issue-list
Issues11

A short loop

Inbox, My issues, Issues, and Backlog filter the rows. Filter narrows by status. Display switches between the aligned list and a Todo / In progress / Done board. Selecting a row opens its detail. Status there is the same menu as the rest of the dashboard — a bordered control, a status icon, and Todo, In progress, and Done — not the browser's own dropdown.

New issue, and the Create issue command, add a row from a title. Assign to me, search, and the sidebar toggle do what they say. The bell opens two notices.

Improvements

  • Sidebar views filter the issue list
  • Filter narrows by Todo, In progress, and Done
  • Display switches between the list and a three-column board
  • A detail pane updates status from a menu that matches the dashboard, and New issue adds a row
  • Command palette actions and the bell are clickable