Components consume semantic tokens only
Theme by rebinding roles, never hard-coding product colors in components.
実践ガイダンス
Use --color-* / --space-* / --dur-* contracts. Primitives stay in tokens package.
推奨
- Reference CSS variables
- Support light/dark/high-contrast
非推奨
- Hard-code hex/oklch in component source
検証契約
token tests + no raw color in packages/react
根拠リファレンス
ref.adobe.spectrum— Adobe Spectrumref.ameba.spindle— Spindle Design Systemref.apple.hig-color— Apple HIG Colorref.apple.hig-foundations— Apple HIG Foundationsref.apple.liquid-glass— Apple design materials (Liquid Glass era)ref.atlassian.design-system— Atlassian Design Systemref.atlassian.design-tokens— Atlassian Design Tokensref.duolingo.brand-family— Duolingo Design — Sub-brand family rulesref.duolingo.color— Duolingo Design — Named brand color rolesref.duolingo.imagery— Duolingo Design — Imagery directionref.duolingo.logos— Duolingo Design — Logos production constraintsref.duolingo.typography— Duolingo Design — Brand type hierarchy + fallbacksref.figma.variables— Figma Variables & Modesref.github.primer-primitives— Primer Primitivesref.github.primer— Primer Design Systemref.google.material-3— Material Design 3ref.ibm.carbon— Carbon Design Systemref.microsoft.fluent-2— Fluent 2 Design Systemref.microsoft.fluent-design-tokens— Fluent 2 Design Tokensref.shopify.polaris— Shopify Polarisref.tailwind.v4— Tailwind CSS v4ref.vercel.geist— Geist Design Systemref.w3c.dtcg-format— DTCG Design Tokens Formatref.w3c.dtcg— Design Tokens Community Group