v138 · css

Design System Audit

Simulate the OS-level font scale preference and watch every component in a design system either adapt (using env(preferred-text-scale)) or break (ignoring it). The audit scores each component against WCAG 2.5.8's 24×24 px minimum touch target.

Feature detection: checking…
OS font scale simulator — env(preferred-text-scale)
1.00×
Presets:
Showing:
WCAG AA pass (≥24px touch target)
Marginal (20–24px)
Fail (<20px)
Primary Button
fixed adaptive
fixed (ignores scale)
adaptive (env(preferred-text-scale))
Fixed height: 36px — pass
Adaptive height: 36px — pass
Text Input
fixed adaptive
fixed
adaptive
Fixed height: 36px — pass
Adaptive height: 36px — pass
Content Card
fixed adaptive
fixed
Notification
Your export is ready to download.
adaptive
Notification
Your export is ready to download.
Status Badges
fixed adaptive
fixed
Active Pending Error
adaptive
Active Pending Error
Navigation Tabs
fixed adaptive
fixed
Overview
Activity
Settings
adaptive
Overview
Activity
Settings
Fixed tab height: 32px — warn
Adaptive tab height: 32px — warn
Alert Banner
fixed adaptive
fixed
⚠️ Your session expires in 5 minutes. Save your work.
adaptive
⚠️ Your session expires in 5 minutes. Save your work.

Audit summary

Component Fixed height Adaptive height Fixed WCAG Adaptive WCAG 
/* env(preferred-text-scale) — proportional component sizing */
.ds-button {
  /* Fixed: ignores OS font scale */
  height: 36px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.ds-button {
  /* Adaptive: scales with user's preference */
  height: calc(36px * env(preferred-text-scale, 1));
  padding: calc(0.5rem * env(preferred-text-scale, 1))
           calc(1rem  * env(preferred-text-scale, 1));
  font-size: calc(0.875rem * env(preferred-text-scale, 1));
}

/* The comma-1 fallback ensures 1× on browsers
   that don't yet expose preferred-text-scale */

see also