Skip to content

Design System Baseline Audit

Captured on 2026-02-08 using npm run audit:design from src/services/web/.

This document establishes the measurable starting point for the design system consolidation. Each subsequent PR should re-run the audit and show counts decreasing toward zero.

Baseline Counts

=== SyRF Design System Audit (2026-02-08) ===

Hardcoded hex colours (SCSS values): 263
Hardcoded rgba values (SCSS values): 54
Hardcoded px in margin/padding/gap: 541
Hardcoded font-size (px): 155
Hardcoded border-radius (px): 74
Hardcoded box-shadow (px): 4
Hardcoded z-index (numeric): 21
!important declarations: 33
Inline styles in templates: 61
Bootstrap classes in class attributes: 103
Bootstrap data-* attributes: 8
Font Awesome references (html+ts): 22
FlexLayout directive usages: 932
::ng-deep usage: 12
Components with OnPush: 20
Total components: 198

--- Global styles ---
Global !important declarations: 10
Global dead MDC structural selectors: 20
Global MDC state selectors (verify at runtime): 7

Notes

  • Counts are computed by grep patterns; a few false positives may exist (e.g., hex colours inside comments that escaped the comment filter)
  • "Bootstrap classes in class attributes" includes 3 non-Bootstrap progress-bar classes on <mat-progress-bar> elements — see v23 spec
  • "FlexLayout directive usages" is a token count (~930), not a line count (~751) — a single template line can have multiple directives