Design System - Design Tokens

Token Übersicht

{{coverage.total_tokens}}
Gesamt Tokens
{{coverage.used_tokens}}
Verwendet
{{coverage.usage_percentage}}%
Nutzungsgrad

🎨 Design Tokens (All Types)

Alle verfügbaren Design Tokens in Ihrem System ({{analysis.totalTokens}} gesamt).

--color-primary
#412785
color
--space-md
1rem
spacing
--radius-lg
1rem
radius
--bg
oklch(18% .01 270)
color
--accent
oklch(70% .2 295)
color
--success
var(--success-base)
semantic
--error
var(--error-base)
semantic
--warning
var(--warning-base)
semantic
--{{token.name}}
{{token.value}}
{{token.type}} (live)

📏 Spacing Tokens

--{{token.name}}
{{token.value}}
spacing

📝 Typography Tokens

--{{token.name}}
{{token.value}}
typography

📐 Radius Tokens

--{{token.name}}
{{token.value}}
radius

🌊 Shadow Tokens

--{{token.name}}
{{token.value}}
shadow

🚫 Unbenutzte Tokens

Diese Tokens sind definiert, werden aber nicht verwendet und können entfernt werden.

--{{token.name}}
{{token.value}}
{{token.type}}

➕ Missing Color Tokens

Diese Standard-Color-Tokens fehlen und sollten hinzugefügt werden.

--{{token_name}}
color (empfohlen)

➕ Missing Spacing Tokens

Diese Standard-Spacing-Tokens fehlen und sollten hinzugefügt werden.

--{{token_name}}
spacing (empfohlen)

➕ Missing Typography Tokens

Diese Standard-Typography-Tokens fehlen und sollten hinzugefügt werden.

--{{token_name}}
typography (empfohlen)