---
name: "tech-flat-design-semantic-tokens"
title: "Semantic design tokens"
description: "Use semantic tokens (bg-card, foreground) not ad-hoc color utilities"
type: "tech"
category: "design"
tags: ["tech", "web", "design"]
related: ["[[tech-flat-design-hairline]]", "[[tech-shadcn-base]]"]
---
Prefer semantic tokens (`bg-card`, `text-muted-foreground`) so themes/dark mode stay coherent.

Related: [[tech-flat-design-hairline]], [[tech-shadcn-base]], [[tech-unit-suffix-vs-scale]].