system
400.wtf

400.wtf / system

Sistema

The 400.wtf design system: everything it's made of and why. Specimens show the parts in use, the inventory tracks every component through the plan, and the documents record the decisions behind them.

/01

Specimens

  1. 01Foundations Fundações

    Surfaces, palette, type, space, grid, structure and motion.

    DS-1 · Shipped

  2. 02Icons Ícones

    34 glyphs on a 24-unit grid; status icons by shape.

    DS-2 · Shipped

  3. 03Wayfinding Sinalização

    Route lines, networks and interchanges, stations, signs, notices.

    DS-2 · Shipped

  4. 04Layout & media Composição

    Sections, grid primitives, bleeds, figures and photo treatment.

    DS-3 · Shipped

  5. 05Brand Marca

    The station mark (favicon), the logo and the name board.

    Brand · Shipped

  6. 06Components Componentes

    Actions, data, forms, navigation and editorial compositions.

    DS-4 · Shipped

/02

Components

Every component in the plan, as stations on the route: passed once shipped, here while building, ahead when planned. All are Vue SFCs that render to static HTML unless hydrated (ADR-0012).

47 shipped · 0 building · 0 planned

Component Layer Phase Status
Annotation Wayfinding DS-2 Shipped
ArtifactFrame Editorial DS-4 Shipped
Bleed Layout DS-3 Shipped
Button Actions DS-4 Shipped
Col Layout DS-3 Shipped
ColorInput Forms DS-4 Shipped
DepartureBoard Data Época Shipped
DepartureRow Data Época Shipped
Dialog Actions Época Shipped
DurationInput Forms Época Shipped
Field Forms DS-4 Shipped
Figure Media DS-3 Shipped
FitText Layout DS-3 Shipped
Grid Layout DS-3 Shipped
GridOverlay Tooling DS-1 Shipped
Icon Wayfinding DS-2 Shipped
IconButton Actions Época Shipped
Input Forms DS-4 Shipped
LinePicker Forms Época Shipped
Link Actions DS-4 Shipped
LocaleSwitch Navigation DS-0 Shipped
Logo Navigation Brand Shipped
MetaList Data DS-4 Shipped
NameBoard Editorial Brand Shipped
Notice Wayfinding DS-2 Shipped
Overlap Layout DS-5 Shipped
Pager Navigation DS-4 Shipped
Plate Layout DS-5 Shipped
ProjectEntry Editorial DS-4 Shipped
Prose Editorial DS-5 Shipped
RouteLine Wayfinding DS-2 Shipped
RouteMap Wayfinding DS-3 Shipped
Section Layout DS-3 Shipped
SectionHead Layout DS-3 Shipped
Select Forms DS-4 Shipped
SideNav Navigation Docs Shipped
Sign Wayfinding DS-2 Shipped
SiteNav Navigation DS-4 Shipped
Slider Forms DS-4 Shipped
Stack Layout DS-3 Shipped
StationMarker Wayfinding DS-2 Shipped
Table Data DS-4 Shipped
Tag Data DS-4 Shipped
Texture Media DS-3 Shipped
ThemeSwitch Navigation Theme Shipped
TimeDisplay Data Época Shipped
Toggle Forms DS-4 Shipped

/03

Documents

Rendered from docs/ in the repo, so they never drift from what's committed.

Identity

  1. Identity brief — 400.wtf (civic redesign)
  2. Photography direction
  3. Voice — Terminal 400

Design system

  1. Design system plan — 400.wtf civic redesign

Decisions (ADR)

  1. ADR-0001 — Astro static shell with Vue islands for artifacts Accepted
  2. ADR-0002 — Persistent background runtime across navigation Accepted
  3. ADR-0003 — Artifacts as an MDX content collection Accepted
  4. ADR-0004 — Stateless GPU particle animation for the black hole Accepted
  5. ADR-0005 — Canvas 2D kit: functional core, optional facade Accepted
  6. ADR-0006 — Schema-driven artifact config panel with localStorage persistence Accepted
  7. ADR-0007 — Cloudflare Workers deployment with full static prerender Accepted
  8. ADR-0008 — WebGPU / TSL migration posture Proposed
  9. ADR-0009 — Dark-only visual language Superseded by ADR-0011
  10. ADR-0010 — pnpm workspace with an in-repo design system Accepted
  11. ADR-0011 — Surfaces instead of themes Accepted
  12. ADR-0012 — DS components are Vue SFCs, static by default Accepted
  13. ADR-0013 — Bilingual routing: PT-BR default, EN first-class Accepted
  14. ADR-0014 — Typefaces: Bricolage Grotesque, IBM Plex Sans, IBM Plex Mono Accepted
  15. ADR-0015 — Route lines as a transit network Accepted
  16. ADR-0016 — The black hole as a station (Estação Fim da Linha) Accepted

/04

Source

Tokens
packages/ds/src/tokens/
Generated CSS
packages/ds/src/css/
Components
packages/ds/src/components/
Icons
packages/ds/src/icons/
Specimens
apps/site/src/pages/system/
Registry
apps/site/src/system/registry.ts