WEAVE

A FigJam map of every component, a UX audit, user testing and a competitive review (Material Design, Carbon) looked for what was holding the products together. Two rounds of interviews with 20+ creators tuned spacing and colour.

Fig. 01

With limited time, we fixed the fundamentals first: tokens for colour, type, spacing, radius and elevation, synced from Tokens Studio to GitHub and built Tailwind-native and PrimeNG-compatible.

Decision 01

Layered tokens

Every value resolves through layers, from global to brand to mode to result, so one change reaches every component. Tokens are synced from Tokens Studio to GitHub.

• Colour
• Type
• Spacing
• Radius
• Elevation

How one token resolves, layer by layer

Layer	Example token
Global	neutral.900
Brand	brand.primary.default
Mode	bg.interactive.primary.default
Result	Primary button

Fig. 02

Decision 02

Fix by addition

Failing colours stayed. Each got an accessible companion token, so nothing already shipped had to change.

Contrast on white, before and after

Token	Before	After
Danger	3.76:1	6.47:1
Success	2.54:1	5.48:1
Secondary text	—	5.33:1

Fig. 03

Decision 03

Focus you can see

A solid 2px outline with a 2px offset in #0D3133 replaced the faint glow, which measured about 1.16:1.

Contrast on white, before and after

Token	Before	After
Focus indicator	1.16:1	13.96:1

Fig. 04

With the tokens in place, the FigJam component map became a library: 45+ components, each specified state by state, built to match Angular 17, PrimeNG and Tailwind so designers and developers use the same names.

1. Style guide

   Colour, type, spacing, radius and elevation, documented once and resolved through the layered tokens.

2. Component library

   Every component specified state by state, in light and dark modes, in Figma and a live Storybook.

3. Content guide

   Shared wording for labels and messages, so the products sound like one product.

Fig. 05

The test of a system is a real screen. Here are two dashboards before Weave and after: same data, one visual language.

Fig. 06BeforeAfter

↔

The same system carried into an employee app. Its older profile page is on the left and its home screen, built with Weave, is on the right: two different screens of one product, in one visual language.

Fig. 07a

Fig. 07b

39%

less development time

Fig. 08

Satisfaction rose 36%, at least 90% of the initial goals were met, and hand-off to developers improved.

Weave now has a second kind of user: the tools that generate screens and code. Once the system was live, we shipped an update so they can read it too.

1. DESIGN.md

   The Storybook exports every colour, type, spacing, radius and shadow token as one portable file. Drop it in a repo and AI tools write code that follows the system.

2. One instructions file

   Weave and WCAG 2.2 merged into a single brief for generative AI: Angular 17, PrimeNG, AA conformance, with strict rules of precedence.

3. Guardrails

   WCAG is never broken. Tokens are used by name, not hex. Missing values are flagged with a computed contrast ratio, never guessed.

It also lists 12 things the AI must never output, such as the accent colour as text on a light surface, white text on the accent fill, status shown by colour alone, or placeholder-only inputs.

Step 1, export. Storybook publishes every token, and its Design Markdown tab turns them into a single DESIGN.md.

Fig. 09

Fig. 10

Step 2, brief. Weave and WCAG 2.2 merge into one instructions file, kept as markdown for the tools and as a readable page for people.

Fig. 11

Fig. 12