← Back to work

Jun 2026 – Jul 2026 · Brand, engineering, design

Live

Wroughtery — Studio Site & Design System

The umbrella site for my shipped tools at wroughtery.com — Angular 22 with SSR and full static prerender, a three-layer theming architecture, and a data-driven tool roster. Also ships the Orbital installer and per-product privacy pages.

Last updated

Context

Wroughtery is the studio umbrella over my shipped products — "Wrought, not bought." One brand, one anvil mark, and a bridge page per tool (Orbital, LagSync, KeepWinning) that carries its own identity without fragmenting the site.

Live: wroughtery.com

wroughtery.com homepage — anvil mark and tool roster
The forge shell — anvil mark, roster, and the hot/cold signal system.

Architecture

Angular 22 all-in on the modern primitives: standalone components, signals, functional router, OnPush everywhere. Every route is statically prerendered via @angular/ssr — the deploy artifact is plain HTML on Vercel's CDN, with an optional Express SSR server kept in the tree for dynamic routes later.

The interesting part is the three-layer theming discipline:

  1. Forge shell — header, footer, and app frame share one fixed identity and are never re-themed.
  2. Bridge pages — each tool's page scopes its own accent palette (Orbital's teal, LagSync's blue, KeepWinning's ember) via CSS custom properties, so a product feels like itself without leaking styles.
  3. Data-driven roster — a single typed tool registry drives the whole site; each entry carries a signal: 'hot' | 'cold' flag that decides whether the anvil renders with the lit "AI ember" mark or the plain cold mark. Adding a product is a data change, not a page build.

Fonts are self-hosted (@fontsource), design tokens live as CSS variables in one SCSS entry point, and there is no runtime CSS-in-JS anywhere.

More than a brochure

The site is also light infrastructure for the products: it self-hosts the Orbital for Windows installer behind a stable /downloads/windows redirect, and serves each product's privacy policy at a canonical URL that the store listings point to.

Takeaways

An umbrella site lives or dies on the boundary between shared and per-product identity. Fixing that boundary in the architecture — shell never themed, accents strictly page-scoped, roster as data — meant three visually distinct product pages with zero style bleed, and a fourth costs one registry entry.