When building apps, one of the easiest ways to keep your design consistent is by defining brand colors, fonts, and sizes as CSS custom properties (aka ‘variables’). You typically declare them inside a :root selector, so they’re available globally across your styles.
You then reference them using the var() function—for example: color: var(–color-brand-orange); instead of hardcoding #FFA500.
This way, you only need to update values in one place, and the entire app updates instantly. It also ensures your branding stays intact across components, pages, and future redesigns.
If you’re using AI tools in your workflow, you’ll want to feed these variables into your project instructions. Otherwise, the AI is prone to introducing random colors that break your brand consistency. Defining them upfront helps your coding assistant generate code that matches your style guide every time. I now search my css files for ‘#’ in a final check to root out (lol) any random colors.
Other common uses for CSS variables include:
- Spacing: margins, padding, line-height (e.g., –spacing-sm: 8px;)
- Breakpoints: reusable media query values (e.g., –breakpoint-md: 768px;)
- Z-index layers: for consistent stacking across components (e.g., –z-modal: 1000;)
- Animation timing: durations and easing (e.g., –transition-speed: 0.3s;)
- Box shadows and borders: for consistent depth and accents (e.g., –-shadow-card: 0 2px 6px rgba(0,0,0,0.15);)