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 RequiredList the 3 most inconsistent elements in your current application.
COMMAND / IMPLEMENTATION
npx @abeta.dev/react-libs@latest audit-css --path=./srcSTEP REFLECTION
Which inconsistency causes the most code duplication in your team?
Discussion on Step 01 (0)
Ask questions or share tips with fellow buildersNo comments yet on this step. Be the first to share an insight!