<!--
title: Use design system colors
domain: app-frameworks
topic: Code Style
language: Css
source: angular/angular
updated: 2025-07-09
url: https://awesomereviewers.com/reviewers/angular-use-design-system-colors/
-->

Always use design system color variables instead of hardcoded color values in stylesheets. This ensures consistent theming, automatic dark/light mode support, and maintainable code.

Replace hardcoded colors with their design system equivalents:

```scss
// ❌ Avoid hardcoded colors
.loading {
  color: #666;
  background: #f5f5f5;
}

.stat-value {
  color: #1976d2;
}

// ✅ Use design system colors
.loading {
  color: var(--secondary-contrast);
  background: var(--color-foreground);
}

.stat-value {
  color: var(--dynamic-blue-02);
}
```

Dynamic color variables (prefixed with `--dynamic-`, `--color-`, etc.) automatically adapt to theme changes, eliminating the need for manual theme-specific overrides. Only use theme mixins like `theme.dark-theme` for special cases that can't be handled by dynamic colors.