// design across projects
UI Pack
2026 · open source · react + svg
I keep the diagrams, animations and slide starters I reuse in UI Pack. It lets my projects share type, colours and spacing without setting them up again each time.
It started with the diagrams on this site. I'm building it out in two directions: web design for my projects, and presentations for the things I need to explain. Each slide starter includes speaker notes alongside the visual.
Web design
A shared set of visual building blocks for my websites. The working library covers figures, icons, backgrounds and animation; reusable page layouts are the next layer.
Figures & motion
These examples use my own projects. Hover a node or legend entry to follow a flow. Pause and Replay control the animation; reduced motion keeps it still.
The figure style grew from OpenAI's Habitat post and archify's approach to typed figures, adapted to the type and colours I use here.
Product docs layout
The shared docs renderer, responsive navigation, local contents, and prose treatment.
Product documentation
A reusable shell keeps navigation and context around a measured reading column.
Start with the map
Pages stay grouped by section while the current article keeps its own heading links.
Note: On mobile, navigation moves into a disclosure and the right-hand contents rail is hidden.
Keep prose readable
Tables, code spans, callouts, and adjacent-page links use the same light and dark tokens.
Link every heading
Anchors are visible on hover and keyboard focus.
Assets
Every part, icon, motion token, background and mark is catalogued with a rendered preview and a copy action, so I can find what I have before I draw it again. Open the asset browser.
Install
Not on npm yet, so it installs from GitHub with dist/ committed: npm install github:ong6/uipack. The README on GitHub has the parts, the connector rule, the hover API and the presets.
Same palette
Paper, ink and cobalt, in light and dark themes.
Same type
IBM Plex Sans
IBM Plex Mono for labels
Same habits
Clear hierarchy, room to read, and motion that explains what changed.
// NEXT
Trading engine
A paper-trading engine that tests ideas against rules set in advance