STEP 01 OF 05

Audit an existing interface

Catalog all unique colors, font sizes, button variations, and spacing increments across 3 screens. Identify visual fragmentation.

EXPECTED STEP ARTIFACT

An interface inventory spreadsheet revealing 14 inconsistent shades of gray and 6 conflicting button heights.

src/styles/inventory.css

+8-5

Catalog and deduplicate fragmented CSS colors into an inventory.

 --- a/src/styles/inventory.css
 +++ b/src/styles/inventory.css
-•
+@@ -1,5 +1,8 @@
 -/* Scattered legacy colors */
 -.btn-primary { background: #3b82f6; }
 -.card-header { color: #1e293b; border-color: #e2e8f0; }
 -.sidebar { background: #f8fafc; color: #334155; }
 -.highlight { color: #22c55e; }
 +/* Consolidated Semantic Palette Audit */
 +:root {
 +  --raw-neutral-900: #171717;
 +  --raw-neutral-100: #f5f3ee;
 +  --raw-neutral-400: #d8d6ce;
 +  --raw-lime-500: #d7f05a;
 +  --raw-blue-300: #b7d8ee;
 +}

CHECKPOINT VERIFICATION

Action Required

List the 3 most inconsistent elements in your current application.

COMMAND / IMPLEMENTATION

npx @abeta.dev/react-libs@latest audit-css --path=./src

Your Output, Evidence or Link:

YOUR WORKING NOTES & EVIDENCE (AUTO-SAVED TO DEVICE)

STEP REFLECTION

Which inconsistency causes the most code duplication in your team?

Discussion on Step 01 (0)

Ask questions or share tips with fellow builders

No comments yet on this step. Be the first to share an insight!

LAB COMPANION SANDBOX

Explore the Production Architecture in Real-Time

See how this track connects to Abeta's open-source primitives. Test live latency benchmarks, CRDT vector clocks, and hardware-accelerated nodes in the browser sandbox.

Launch Sandbox ↗

Design systems in practice

Audit an existing interface

Explore the Production Architecture in Real-Time