A Production Design System in Two Days

Outcome
Named design system applied across entire production app in 17 tasks over 2 days
When
2026-03-31 to 2026-04-02
Source
Issue thread BRO-552, child issues BRO-555 through BRO-595

Context

By late March 2026, Argus had shipped a working product. The MVP was functional — users could log in, upload images, run AI analysis, manage workspaces, and access their media library. What it had not shipped was a cohesive visual identity.

The product looked like what it was: a well-built but unstyled SaaS app. Generic components, no consistent typography, no brand language.

The goal of BRO-552 was to implement “Oracle Design” — a named design system, spec in hand — across the entire application.

What Was Done

Oracle Design was scoped as a bottom-up implementation: design tokens first, then component library, then applied to each page. Seventeen subtasks were created covering:

Foundation layer:

  • Design tokens and base styles (BRO-555)
  • Component library: buttons, cards, alerts, modals, tables (BRO-556)
  • Form components: inputs, selects, checkboxes, toggles (BRO-557)
  • Eye-derived SVG icon set (BRO-562) — a distinctive icon system derived from the Argus/eye brand concept

Page application:

  • Login and onboarding (BRO-558)
  • Media library (BRO-559)
  • Settings and workspaces (BRO-560)
  • Landing page rebrand (BRO-561)
  • Docs page (BRO-579)
  • Upload page (BRO-580)

Quality passes:

  • WCAG AA accessibility audit (BRO-564)
  • Light mode variant (BRO-563)
  • Serif font replacement with Outfit (BRO-566, a spec revision mid-sprint)
  • New component additions: action bar, sidebar, filter modal (BRO-567)

Two additional fixes emerged mid-sprint from the implementation work itself: a file format badge hover/selection bug (BRO-578) and an auto-create-default-workspace issue on first login (BRO-595). Both were caught and fixed within the same sprint window.

Verifiable Outcome

MetricValueSource
Child issues17BRO-555 through BRO-595
Pages redesigned6 (login, media library, settings/workspaces, landing, docs, upload)Child issues BRO-558 through BRO-580
Design system layersTokens + 7 component categories + icon set + accessibility + light modeChild issues
Incidental bugs fixed2 (BRO-578, BRO-595)Child issues created mid-sprint
Cycle time~2 days (2026-03-31 to 2026-04-02)Issue dates
Spec revision handled mid-sprintYes (Outfit font substitution, BRO-566)Child issue

Why This Story Matters

Design systems are typically multi-week projects. Naming them, speccing them, getting stakeholder sign-off, building the token layer, then incrementally applying it page by page across a product — that’s normally months of design and engineering time.

Oracle Design went from spec to production-applied in two days. The implementation was comprehensive, not just a cosmetic pass: it included an WCAG AA accessibility audit, a light-mode variant, and an original icon system. Mid-sprint, when the founder changed the font spec (from serif to Outfit), the agent incorporated the revision without reopening work.

The pattern — “here’s a spec, implement it” — is one of the most natural handoffs between a product owner and an engineering team. In this case, the engineering team was a set of agents working from issue to issue.