Explorateur de tokensToken explorer

Trois niveaux de tokens — navigables, filtrables, directement applicables via CSS Custom Properties. Three token levels — browsable, filterable, directly applicable via CSS Custom Properties.

423 Tokens primitifs (couleurs)Primitive tokens (colors)
80 Tokens sémantiquesSemantic tokens
32 Tokens de composantComponent tokens

Tokens primitifsPrimitive tokens

Valeurs physiques issues de Radix UI. Jamais utilisées directement dans les composants. Physical values from Radix UI. Never used directly in components.

Token CSSValeurValueDescriptionDescription
--sda-primitive-color-gray-1
#fcfcfcApp background
--sda-primitive-color-gray-2
#f9f9f9Subtle background
--sda-primitive-color-gray-3
#f0f0f0UI element background
--sda-primitive-color-gray-4
#e8e8e8Hovered UI element background
--sda-primitive-color-gray-5
#e0e0e0Active / selected UI element background
--sda-primitive-color-gray-6
#d9d9d9Subtle border and separator
--sda-primitive-color-gray-7
#cececeUI element border and focus ring
--sda-primitive-color-gray-8
#bbbbbbHovered UI element border
--sda-primitive-color-gray-9
#8d8d8dSolid background (non-interactive)
--sda-primitive-color-gray-10
#838383Hovered solid background
--sda-primitive-color-gray-11
#646464Low-contrast text
--sda-primitive-color-gray-12
#202020High-contrast text
--sda-primitive-color-mauve-1
#fdfcfdApp background
--sda-primitive-color-mauve-2
#faf9fbSubtle background
--sda-primitive-color-mauve-3
#f2eff3UI element background
--sda-primitive-color-mauve-4
#eae7ecHovered UI element background
--sda-primitive-color-mauve-5
#e3dfe6Active / selected UI element background
--sda-primitive-color-mauve-6
#dbd8e0Subtle border and separator
--sda-primitive-color-mauve-7
#d0cdd7UI element border and focus ring
--sda-primitive-color-mauve-8
#bcbac7Hovered UI element border
--sda-primitive-color-mauve-9
#8e8c99Solid background (non-interactive)
--sda-primitive-color-mauve-10
#84828eHovered solid background
--sda-primitive-color-mauve-11
#65636dLow-contrast text
--sda-primitive-color-mauve-12
#211f26High-contrast text
--sda-primitive-color-slate-1
#fbfcfdApp background
--sda-primitive-color-slate-2
#f8f9faSubtle background
--sda-primitive-color-slate-3
#eff1f3UI element background
--sda-primitive-color-slate-4
#e7e9ecHovered UI element background
--sda-primitive-color-slate-5
#dfe3e6Active / selected UI element background
--sda-primitive-color-slate-6
#d7dbdfSubtle border and separator
--sda-primitive-color-slate-7
#c9cdd2UI element border and focus ring
--sda-primitive-color-slate-8
#b9bfc9Hovered UI element border
--sda-primitive-color-slate-9
#8b9098Solid background (non-interactive)
--sda-primitive-color-slate-10
#80868eHovered solid background
--sda-primitive-color-slate-11
#60646cLow-contrast text
--sda-primitive-color-slate-12
#1c2024High-contrast text
--sda-primitive-color-sage-1
#fbfdfcApp background
--sda-primitive-color-sage-2
#f7f9f8Subtle background
--sda-primitive-color-sage-3
#eef1f0UI element background
--sda-primitive-color-sage-4
#e6e9e8Hovered UI element background
--sda-primitive-color-sage-5
#dfe2e0Active / selected UI element background
--sda-primitive-color-sage-6
#d7dad9Subtle border and separator
--sda-primitive-color-sage-7
#c9cdcbUI element border and focus ring
--sda-primitive-color-sage-8
#b5bcbaHovered UI element border
--sda-primitive-color-sage-9
#869e9aSolid background (non-interactive)
--sda-primitive-color-sage-10
#7c9490Hovered solid background
--sda-primitive-color-sage-11
#5c7672Low-contrast text
--sda-primitive-color-sage-12
#1a2421High-contrast text
--sda-primitive-color-olive-1
#fcfdfcApp background
--sda-primitive-color-olive-2
#f8faf8Subtle background
--sda-primitive-color-olive-3
#eff1eeUI element background
--sda-primitive-color-olive-4
#e7e9e6Hovered UI element background
--sda-primitive-color-olive-5
#dfe2deActive / selected UI element background
--sda-primitive-color-olive-6
#d7dad6Subtle border and separator
--sda-primitive-color-olive-7
#c8cdc7UI element border and focus ring
--sda-primitive-color-olive-8
#b4bab3Hovered UI element border
--sda-primitive-color-olive-9
#8b9389Solid background (non-interactive)
--sda-primitive-color-olive-10
#818a7fHovered solid background
--sda-primitive-color-olive-11
#606b5eLow-contrast text
--sda-primitive-color-olive-12
#1d201cHigh-contrast text
--sda-primitive-color-sand-1
#fdfdfcApp background
--sda-primitive-color-sand-2
#f9f9f8Subtle background
--sda-primitive-color-sand-3
#f1f0efUI element background
--sda-primitive-color-sand-4
#e9e8e6Hovered UI element background
--sda-primitive-color-sand-5
#e2e1deActive / selected UI element background
--sda-primitive-color-sand-6
#dad9d6Subtle border and separator
--sda-primitive-color-sand-7
#cdcecaUI element border and focus ring
--sda-primitive-color-sand-8
#b9bbb5Hovered UI element border
--sda-primitive-color-sand-9
#8d8e86Solid background (non-interactive)
--sda-primitive-color-sand-10
#83847cHovered solid background
--sda-primitive-color-sand-11
#63645bLow-contrast text
--sda-primitive-color-sand-12
#21201cHigh-contrast text
--sda-primitive-color-tomato-1
#fffcfcApp background
--sda-primitive-color-tomato-2
#fff8f7Subtle background
--sda-primitive-color-tomato-3
#feebe7UI element background
--sda-primitive-color-tomato-4
#ffdcd3Hovered UI element background
--sda-primitive-color-tomato-5
#ffcdc2Active / selected UI element background
--sda-primitive-color-tomato-6
#fdbdafSubtle border and separator
--sda-primitive-color-tomato-7
#f5a898UI element border and focus ring
--sda-primitive-color-tomato-8
#ec8e7bHovered UI element border
--sda-primitive-color-tomato-9
#e54d2eSolid background — brand / CTA
--sda-primitive-color-tomato-10
#dd4425Hovered solid background
--sda-primitive-color-tomato-11
#d13415Low-contrast text
--sda-primitive-color-tomato-12
#5c271fHigh-contrast text
--sda-primitive-color-red-1
#fffcfcApp background
--sda-primitive-color-red-2
#fff7f7Subtle background
--sda-primitive-color-red-3
#feebecUI element background
--sda-primitive-color-red-4
#ffdbdcHovered UI element background
--sda-primitive-color-red-5
#ffcdceActive / selected UI element background
--sda-primitive-color-red-6
#fdbdbeSubtle border and separator
--sda-primitive-color-red-7
#f4a9aaUI element border and focus ring
--sda-primitive-color-red-8
#eb8e90Hovered UI element border
--sda-primitive-color-red-9
#e5484dSolid background — brand / CTA / danger
--sda-primitive-color-red-10
#dc3e42Hovered solid background
--sda-primitive-color-red-11
#ce2c31Low-contrast text
--sda-primitive-color-red-12
#641723High-contrast text
--sda-primitive-color-ruby-1
#fffcfdApp background
--sda-primitive-color-ruby-2
#fff7f8Subtle background
--sda-primitive-color-ruby-3
#feeaedUI element background
--sda-primitive-color-ruby-4
#ffdbe1Hovered UI element background
--sda-primitive-color-ruby-5
#ffccd6Active / selected UI element background
--sda-primitive-color-ruby-6
#fabcc7Subtle border and separator
--sda-primitive-color-ruby-7
#f2a7b6UI element border and focus ring
--sda-primitive-color-ruby-8
#e88098Hovered UI element border
--sda-primitive-color-ruby-9
#e54666Solid background — brand / CTA
--sda-primitive-color-ruby-10
#dc3b5dHovered solid background
--sda-primitive-color-ruby-11
#ca244dLow-contrast text
--sda-primitive-color-ruby-12
#64172bHigh-contrast text
--sda-primitive-color-crimson-1
#fffcfdApp background
--sda-primitive-color-crimson-2
#fff7fbSubtle background
--sda-primitive-color-crimson-3
#feecf4UI element background
--sda-primitive-color-crimson-4
#ffdceaHovered UI element background
--sda-primitive-color-crimson-5
#ffcedfActive / selected UI element background
--sda-primitive-color-crimson-6
#f8bdd0Subtle border and separator
--sda-primitive-color-crimson-7
#eda9c0UI element border and focus ring
--sda-primitive-color-crimson-8
#e087a9Hovered UI element border
--sda-primitive-color-crimson-9
#e93d82Solid background — brand / CTA
--sda-primitive-color-crimson-10
#df3478Hovered solid background
--sda-primitive-color-crimson-11
#cb1d63Low-contrast text
--sda-primitive-color-crimson-12
#621639High-contrast text
--sda-primitive-color-pink-1
#fffcfeApp background
--sda-primitive-color-pink-2
#fff7fcSubtle background
--sda-primitive-color-pink-3
#feeef8UI element background
--sda-primitive-color-pink-4
#fce0f3Hovered UI element background
--sda-primitive-color-pink-5
#f9d2ebActive / selected UI element background
--sda-primitive-color-pink-6
#f3c0e0Subtle border and separator
--sda-primitive-color-pink-7
#ebacceUI element border and focus ring
--sda-primitive-color-pink-8
#de85b5Hovered UI element border
--sda-primitive-color-pink-9
#d6409fSolid background — brand / CTA
--sda-primitive-color-pink-10
#cf3897Hovered solid background
--sda-primitive-color-pink-11
#c2298aLow-contrast text
--sda-primitive-color-pink-12
#651249High-contrast text
--sda-primitive-color-plum-1
#fefcffApp background
--sda-primitive-color-plum-2
#fdf7ffSubtle background
--sda-primitive-color-plum-3
#fbf0feUI element background
--sda-primitive-color-plum-4
#f7e2fbHovered UI element background
--sda-primitive-color-plum-5
#f3d4f7Active / selected UI element background
--sda-primitive-color-plum-6
#ecc4eeSubtle border and separator
--sda-primitive-color-plum-7
#e0afe3UI element border and focus ring
--sda-primitive-color-plum-8
#ce91d3Hovered UI element border
--sda-primitive-color-plum-9
#ab4abaSolid background — brand / CTA
--sda-primitive-color-plum-10
#a144aeHovered solid background
--sda-primitive-color-plum-11
#953ea3Low-contrast text
--sda-primitive-color-plum-12
#53195dHigh-contrast text
--sda-primitive-color-purple-1
#fefcfeApp background
--sda-primitive-color-purple-2
#fbf7feSubtle background
--sda-primitive-color-purple-3
#f7edfeUI element background
--sda-primitive-color-purple-4
#f2e2fcHovered UI element background
--sda-primitive-color-purple-5
#ead5f9Active / selected UI element background
--sda-primitive-color-purple-6
#e0c4f4Subtle border and separator
--sda-primitive-color-purple-7
#d1afecUI element border and focus ring
--sda-primitive-color-purple-8
#be93e4Hovered UI element border
--sda-primitive-color-purple-9
#8e4ec6Solid background — brand / CTA
--sda-primitive-color-purple-10
#8445bcHovered solid background
--sda-primitive-color-purple-11
#793aafLow-contrast text
--sda-primitive-color-purple-12
#402060High-contrast text
--sda-primitive-color-violet-1
#fdfcfeApp background
--sda-primitive-color-violet-2
#faf8ffSubtle background
--sda-primitive-color-violet-3
#f4f0feUI element background
--sda-primitive-color-violet-4
#ebe4ffHovered UI element background
--sda-primitive-color-violet-5
#e1d9ffActive / selected UI element background
--sda-primitive-color-violet-6
#d4cafeSubtle border and separator
--sda-primitive-color-violet-7
#c2b5f5UI element border and focus ring
--sda-primitive-color-violet-8
#aa99ecHovered UI element border
--sda-primitive-color-violet-9
#6e56cfSolid background — brand / CTA
--sda-primitive-color-violet-10
#654dc4Hovered solid background
--sda-primitive-color-violet-11
#6550b9Low-contrast text
--sda-primitive-color-violet-12
#2f265fHigh-contrast text
--sda-primitive-color-iris-1
#fdfdffApp background
--sda-primitive-color-iris-2
#f8f8ffSubtle background
--sda-primitive-color-iris-3
#f0f1feUI element background
--sda-primitive-color-iris-4
#e6e7ffHovered UI element background
--sda-primitive-color-iris-5
#dadcffActive / selected UI element background
--sda-primitive-color-iris-6
#cbceffSubtle border and separator
--sda-primitive-color-iris-7
#b8bcf8UI element border and focus ring
--sda-primitive-color-iris-8
#9da0f0Hovered UI element border
--sda-primitive-color-iris-9
#5b5bd6Solid background — brand / CTA
--sda-primitive-color-iris-10
#5252cdHovered solid background
--sda-primitive-color-iris-11
#5151cdLow-contrast text
--sda-primitive-color-iris-12
#272962High-contrast text
--sda-primitive-color-indigo-1
#fdfdfeApp background
--sda-primitive-color-indigo-2
#f7f9ffSubtle background
--sda-primitive-color-indigo-3
#edf2feUI element background
--sda-primitive-color-indigo-4
#e1e9ffHovered UI element background
--sda-primitive-color-indigo-5
#d2deffActive / selected UI element background
--sda-primitive-color-indigo-6
#c1d0fbSubtle border and separator
--sda-primitive-color-indigo-7
#abbdf9UI element border and focus ring
--sda-primitive-color-indigo-8
#8da4efHovered UI element border
--sda-primitive-color-indigo-9
#3e63ddSolid background — brand / CTA
--sda-primitive-color-indigo-10
#3358d4Hovered solid background
--sda-primitive-color-indigo-11
#3a5bc7Low-contrast text
--sda-primitive-color-indigo-12
#1f2d5cHigh-contrast text
--sda-primitive-color-blue-1
#fbfdffApp background
--sda-primitive-color-blue-2
#f4faffSubtle background
--sda-primitive-color-blue-3
#e6f4feUI element background
--sda-primitive-color-blue-4
#d5efffHovered UI element background
--sda-primitive-color-blue-5
#c2e5ffActive / selected UI element background
--sda-primitive-color-blue-6
#acd8faSubtle border and separator
--sda-primitive-color-blue-7
#8ec8f6UI element border and focus ring
--sda-primitive-color-blue-8
#5eb1efHovered UI element border
--sda-primitive-color-blue-9
#0090ffSolid background — brand / CTA
--sda-primitive-color-blue-10
#0588f0Hovered solid background
--sda-primitive-color-blue-11
#0d74ceLow-contrast text
--sda-primitive-color-blue-12
#113264High-contrast text
--sda-primitive-color-cyan-1
#fafdfeApp background
--sda-primitive-color-cyan-2
#f2fafbSubtle background
--sda-primitive-color-cyan-3
#def7f9UI element background
--sda-primitive-color-cyan-4
#caf1f6Hovered UI element background
--sda-primitive-color-cyan-5
#b5e9f0Active / selected UI element background
--sda-primitive-color-cyan-6
#9ddde7Subtle border and separator
--sda-primitive-color-cyan-7
#7dcedcUI element border and focus ring
--sda-primitive-color-cyan-8
#3db9cfHovered UI element border
--sda-primitive-color-cyan-9
#00a2c7Solid background — brand / CTA
--sda-primitive-color-cyan-10
#0797b9Hovered solid background
--sda-primitive-color-cyan-11
#107d98Low-contrast text
--sda-primitive-color-cyan-12
#0d3c48High-contrast text
--sda-primitive-color-teal-1
#fafefdApp background
--sda-primitive-color-teal-2
#f3fbf9Subtle background
--sda-primitive-color-teal-3
#e0f8f3UI element background
--sda-primitive-color-teal-4
#ccf3eaHovered UI element background
--sda-primitive-color-teal-5
#b8ecdfActive / selected UI element background
--sda-primitive-color-teal-6
#a1e0d2Subtle border and separator
--sda-primitive-color-teal-7
#83cfc4UI element border and focus ring
--sda-primitive-color-teal-8
#53b9abHovered UI element border
--sda-primitive-color-teal-9
#12a594Solid background — brand / CTA
--sda-primitive-color-teal-10
#0d9b8aHovered solid background
--sda-primitive-color-teal-11
#008573Low-contrast text
--sda-primitive-color-teal-12
#0d3d38High-contrast text
--sda-primitive-color-jade-1
#fbfefdApp background
--sda-primitive-color-jade-2
#f4fbf7Subtle background
--sda-primitive-color-jade-3
#e6f7edUI element background
--sda-primitive-color-jade-4
#d6f1e3Hovered UI element background
--sda-primitive-color-jade-5
#c3e9d7Active / selected UI element background
--sda-primitive-color-jade-6
#acdfc8Subtle border and separator
--sda-primitive-color-jade-7
#8ed1b4UI element border and focus ring
--sda-primitive-color-jade-8
#5eba94Hovered UI element border
--sda-primitive-color-jade-9
#29a383Solid background — brand / CTA
--sda-primitive-color-jade-10
#26997bHovered solid background
--sda-primitive-color-jade-11
#208368Low-contrast text
--sda-primitive-color-jade-12
#1d3b31High-contrast text
--sda-primitive-color-green-1
#fbfefcApp background
--sda-primitive-color-green-2
#f4fbf6Subtle background
--sda-primitive-color-green-3
#e6f6ebUI element background
--sda-primitive-color-green-4
#d6efdfHovered UI element background
--sda-primitive-color-green-5
#c4e8d1Active / selected UI element background
--sda-primitive-color-green-6
#addfc0Subtle border and separator
--sda-primitive-color-green-7
#8fd1aaUI element border and focus ring
--sda-primitive-color-green-8
#5eba87Hovered UI element border
--sda-primitive-color-green-9
#30a46cSolid background — brand / CTA / success
--sda-primitive-color-green-10
#299764Hovered solid background
--sda-primitive-color-green-11
#18794eLow-contrast text
--sda-primitive-color-green-12
#153226High-contrast text
--sda-primitive-color-grass-1
#fbfefbApp background
--sda-primitive-color-grass-2
#f5fbf5Subtle background
--sda-primitive-color-grass-3
#e9f6e9UI element background
--sda-primitive-color-grass-4
#d7eed8Hovered UI element background
--sda-primitive-color-grass-5
#c2e3c4Active / selected UI element background
--sda-primitive-color-grass-6
#a9d6abSubtle border and separator
--sda-primitive-color-grass-7
#87c58bUI element border and focus ring
--sda-primitive-color-grass-8
#5bae63Hovered UI element border
--sda-primitive-color-grass-9
#46a758Solid background — brand / CTA / success
--sda-primitive-color-grass-10
#3e9b50Hovered solid background
--sda-primitive-color-grass-11
#297c3bLow-contrast text
--sda-primitive-color-grass-12
#1b311eHigh-contrast text
--sda-primitive-color-brown-1
#fefdfcApp background
--sda-primitive-color-brown-2
#fcf9f6Subtle background
--sda-primitive-color-brown-3
#f6eee7UI element background
--sda-primitive-color-brown-4
#f0e4d9Hovered UI element background
--sda-primitive-color-brown-5
#ebdacaActive / selected UI element background
--sda-primitive-color-brown-6
#e4cdb7Subtle border and separator
--sda-primitive-color-brown-7
#dcbc9fUI element border and focus ring
--sda-primitive-color-brown-8
#cea37eHovered UI element border
--sda-primitive-color-brown-9
#ad7f58Solid background — brand / CTA
--sda-primitive-color-brown-10
#a07653Hovered solid background
--sda-primitive-color-brown-11
#815e46Low-contrast text
--sda-primitive-color-brown-12
#3e2a1eHigh-contrast text
--sda-primitive-color-bronze-1
#fdfcfcApp background
--sda-primitive-color-bronze-2
#fdf7f5Subtle background
--sda-primitive-color-bronze-3
#f6edeaUI element background
--sda-primitive-color-bronze-4
#efe4dfHovered UI element background
--sda-primitive-color-bronze-5
#e7d9d3Active / selected UI element background
--sda-primitive-color-bronze-6
#dfcdc5Subtle border and separator
--sda-primitive-color-bronze-7
#d3bcb3UI element border and focus ring
--sda-primitive-color-bronze-8
#c2a499Hovered UI element border
--sda-primitive-color-bronze-9
#a18072Solid background — brand / CTA
--sda-primitive-color-bronze-10
#957468Hovered solid background
--sda-primitive-color-bronze-11
#7d5e54Low-contrast text
--sda-primitive-color-bronze-12
#43302bHigh-contrast text
--sda-primitive-color-gold-1
#fdfdfcApp background
--sda-primitive-color-gold-2
#faf9f2Subtle background
--sda-primitive-color-gold-3
#f2f0e7UI element background
--sda-primitive-color-gold-4
#eae6dbHovered UI element background
--sda-primitive-color-gold-5
#e1dccfActive / selected UI element background
--sda-primitive-color-gold-6
#d8d0bfSubtle border and separator
--sda-primitive-color-gold-7
#cbc0aaUI element border and focus ring
--sda-primitive-color-gold-8
#b9a88dHovered UI element border
--sda-primitive-color-gold-9
#978365Solid background — brand / CTA
--sda-primitive-color-gold-10
#8c795cHovered solid background
--sda-primitive-color-gold-11
#71624bLow-contrast text
--sda-primitive-color-gold-12
#3b3427High-contrast text
--sda-primitive-color-sky-1
#f9feffApp background
--sda-primitive-color-sky-2
#f1fafdSubtle background
--sda-primitive-color-sky-3
#e1f6fdUI element background
--sda-primitive-color-sky-4
#d1f0faHovered UI element background
--sda-primitive-color-sky-5
#bee7f5Active / selected UI element background
--sda-primitive-color-sky-6
#a9daedSubtle border and separator
--sda-primitive-color-sky-7
#8dcae3UI element border and focus ring
--sda-primitive-color-sky-8
#60b3d7Hovered UI element border
--sda-primitive-color-sky-9
#7ce2feSolid background — brand / CTA (light scale)
--sda-primitive-color-sky-10
#74daf8Hovered solid background
--sda-primitive-color-sky-11
#00749eLow-contrast text
--sda-primitive-color-sky-12
#1d3e56High-contrast text
--sda-primitive-color-mint-1
#f9fefdApp background
--sda-primitive-color-mint-2
#f2fbf9Subtle background
--sda-primitive-color-mint-3
#ddf9f2UI element background
--sda-primitive-color-mint-4
#c8f4e9Hovered UI element background
--sda-primitive-color-mint-5
#b3ecdeActive / selected UI element background
--sda-primitive-color-mint-6
#9ae0d0Subtle border and separator
--sda-primitive-color-mint-7
#76d2beUI element border and focus ring
--sda-primitive-color-mint-8
#4fc4a7Hovered UI element border
--sda-primitive-color-mint-9
#86ead4Solid background — brand / CTA (light scale)
--sda-primitive-color-mint-10
#7de0cbHovered solid background
--sda-primitive-color-mint-11
#027864Low-contrast text
--sda-primitive-color-mint-12
#16433cHigh-contrast text
--sda-primitive-color-lime-1
#fcfdfaApp background
--sda-primitive-color-lime-2
#f8faf3Subtle background
--sda-primitive-color-lime-3
#eef6d6UI element background
--sda-primitive-color-lime-4
#e2f0bdHovered UI element background
--sda-primitive-color-lime-5
#d3e7a6Active / selected UI element background
--sda-primitive-color-lime-6
#c2da91Subtle border and separator
--sda-primitive-color-lime-7
#abc978UI element border and focus ring
--sda-primitive-color-lime-8
#8db654Hovered UI element border
--sda-primitive-color-lime-9
#bdee63Solid background — brand / CTA (light scale)
--sda-primitive-color-lime-10
#b0e64cHovered solid background
--sda-primitive-color-lime-11
#5c7c2fLow-contrast text
--sda-primitive-color-lime-12
#37401cHigh-contrast text
--sda-primitive-color-yellow-1
#fdfdf9App background
--sda-primitive-color-yellow-2
#fefce9Subtle background
--sda-primitive-color-yellow-3
#fffab8UI element background
--sda-primitive-color-yellow-4
#fff394Hovered UI element background
--sda-primitive-color-yellow-5
#ffe770Active / selected UI element background
--sda-primitive-color-yellow-6
#f3d768Subtle border and separator
--sda-primitive-color-yellow-7
#e4c767UI element border and focus ring
--sda-primitive-color-yellow-8
#d5ae39Hovered UI element border
--sda-primitive-color-yellow-9
#ffe629Solid background — brand / CTA (light scale)
--sda-primitive-color-yellow-10
#ffdc00Hovered solid background
--sda-primitive-color-yellow-11
#9e6c00Low-contrast text
--sda-primitive-color-yellow-12
#473b1fHigh-contrast text
--sda-primitive-color-amber-1
#fefdfbApp background
--sda-primitive-color-amber-2
#fefbe9Subtle background
--sda-primitive-color-amber-3
#fff7c2UI element background
--sda-primitive-color-amber-4
#ffee9cHovered UI element background
--sda-primitive-color-amber-5
#fbe577Active / selected UI element background
--sda-primitive-color-amber-6
#f3d673Subtle border and separator
--sda-primitive-color-amber-7
#e9c162UI element border and focus ring
--sda-primitive-color-amber-8
#e2a336Hovered UI element border
--sda-primitive-color-amber-9
#ffc53dSolid background — brand / CTA / warning
--sda-primitive-color-amber-10
#ffba18Hovered solid background
--sda-primitive-color-amber-11
#ab6400Low-contrast text
--sda-primitive-color-amber-12
#4f3422High-contrast text
--sda-primitive-color-orange-1
#fefcfbApp background
--sda-primitive-color-orange-2
#fff7edSubtle background
--sda-primitive-color-orange-3
#ffefd6UI element background
--sda-primitive-color-orange-4
#ffdfb5Hovered UI element background
--sda-primitive-color-orange-5
#ffd19aActive / selected UI element background
--sda-primitive-color-orange-6
#ffc182Subtle border and separator
--sda-primitive-color-orange-7
#f5ae73UI element border and focus ring
--sda-primitive-color-orange-8
#ec9455Hovered UI element border
--sda-primitive-color-orange-9
#f76b15Solid background — brand / CTA
--sda-primitive-color-orange-10
#ef5f00Hovered solid background
--sda-primitive-color-orange-11
#cc4e00Low-contrast text
--sda-primitive-color-orange-12
#582d1dHigh-contrast text
--sda-primitive-color-accent-1
#f0ededApp background
--sda-primitive-color-accent-2
#eee8e8Subtle background
--sda-primitive-color-accent-3
#ebdadcUI element background
--sda-primitive-color-accent-4
#ecccd0Hovered UI element background
--sda-primitive-color-accent-5
#e7bdc3Active / selected UI element background
--sda-primitive-color-accent-6
#dfadb4Subtle border and separator
--sda-primitive-color-accent-7
#d49aa2UI element border and focus ring
--sda-primitive-color-accent-8
#c8818cHovered UI element border
--sda-primitive-color-accent-9
#ed6b86Solid background — brand accent / CTA secondaire
--sda-primitive-color-accent-10
#e05f7bHovered solid background
--sda-primitive-color-accent-11
#a6294cTexte accent — 7.1:1 sur blanc (WCAG AA+AAA)
--sda-primitive-color-accent-12
#5d1f2eHigh-contrast text
--sda-primitive-color-secondary-1
#f0edeeApp background
--sda-primitive-color-secondary-2
#f0e7eaSubtle background
--sda-primitive-color-secondary-3
#edd9dfUI element background
--sda-primitive-color-secondary-4
#ebcbd5Hovered UI element background
--sda-primitive-color-secondary-5
#e4becbActive / selected UI element background
--sda-primitive-color-secondary-6
#d8b2bfSubtle border and separator
--sda-primitive-color-secondary-7
#c8a3afUI element border and focus ring
--sda-primitive-color-secondary-8
#b18d99Hovered UI element border
--sda-primitive-color-secondary-9
#463239Solid dark background — 12.2:1 avec texte blanc
--sda-primitive-color-secondary-10
#5f404bHovered solid background
--sda-primitive-color-secondary-11
#6b4b56Texte medium sur fond clair
--sda-primitive-color-secondary-12
#432f36High-contrast text — 13.8:1 sur blanc (WCAG AAA)
--sda-primitive-color-neutral-0
#ffffffBlanc pur — fond de surface, texte sur action/danger
--sda-primitive-color-neutral-50
#fafafaFond au survol — Tailwind neutral.50 (Radix gray.2 = #f9f9f9)
--sda-primitive-color-neutral-500
#767676Texte désactivé accessible — 4.54:1 sur blanc (WCAG AA). Non présent dans Radix gray. Voir ADR-017.
--sda-primitive-color-white-1
rgba(255,255,255,1.00)Pure white
--sda-primitive-color-white-2
rgba(255,255,255,0.97)White alpha 97%
--sda-primitive-color-white-3
rgba(255,255,255,0.93)White alpha 93%
--sda-primitive-color-white-4
rgba(255,255,255,0.90)White alpha 90%
--sda-primitive-color-white-5
rgba(255,255,255,0.88)White alpha 88%
--sda-primitive-color-white-6
rgba(255,255,255,0.85)White alpha 85%
--sda-primitive-color-white-7
rgba(255,255,255,0.80)White alpha 80%
--sda-primitive-color-white-8
rgba(255,255,255,0.75)White alpha 75%
--sda-primitive-color-white-9
rgba(255,255,255,0.60)White alpha 60%
--sda-primitive-color-white-10
rgba(255,255,255,0.52)White alpha 52%
--sda-primitive-color-white-11
rgba(255,255,255,0.39)White alpha 39%
--sda-primitive-color-white-12
rgba(255,255,255,0.18)White alpha 18%
--sda-primitive-color-black-1
rgba(0,0,0,0.05)Black alpha 5%
--sda-primitive-color-black-2
rgba(0,0,0,0.10)Black alpha 10%
--sda-primitive-color-black-3
rgba(0,0,0,0.15)Black alpha 15%
--sda-primitive-color-black-4
rgba(0,0,0,0.20)Black alpha 20%
--sda-primitive-color-black-5
rgba(0,0,0,0.30)Black alpha 30%
--sda-primitive-color-black-6
rgba(0,0,0,0.40)Black alpha 40%
--sda-primitive-color-black-7
rgba(0,0,0,0.50)Black alpha 50%
--sda-primitive-color-black-8
rgba(0,0,0,0.60)Black alpha 60%
--sda-primitive-color-black-9
rgba(0,0,0,0.70)Black alpha 70%
--sda-primitive-color-black-10
rgba(0,0,0,0.75)Black alpha 75%
--sda-primitive-color-black-11
rgba(0,0,0,0.80)Black alpha 80%
--sda-primitive-color-black-12
rgba(0,0,0,0.90)Black alpha 90%

Tokens sémantiquesSemantic tokens

Intentions UX — ce que les agents doivent utiliser pour comprendre la fonction, pas la valeur brute. UX intentions — what agents must use to understand function, not raw values.

Token CSSAlias (référence)Alias (reference)Valeur résolueResolved value
--sda-semantic-color-action-primary
{primitive.color.teal.9}#12a594
--sda-semantic-color-action-primary-hover
—#0d9b8a
--sda-semantic-color-action-primary-disabled
—#d9d9d9
--sda-semantic-color-feedback-danger
{primitive.color.red.11}#ce2c31
--sda-semantic-color-feedback-danger-subtle
—#feebec
--sda-semantic-color-feedback-success
{primitive.color.green.11}#18794e
--sda-semantic-color-feedback-info
{primitive.color.blue.11}#0d74ce
--sda-semantic-color-background-page
{primitive.color.gray.1}#fcfcfc
--sda-semantic-color-background-surface
{primitive.color.neutral.0}#ffffff
--sda-semantic-color-background-subtle
{primitive.color.gray.3}#f0f0f0
--sda-semantic-color-background-hover
{primitive.color.neutral.50}#fafafa
--sda-semantic-color-text-primary
{primitive.color.gray.12}#202020
--sda-semantic-color-text-secondary
{primitive.color.gray.11}#646464
--sda-semantic-color-text-disabled
{primitive.color.neutral.500}#767676
--sda-semantic-color-text-on-action
—#ffffff
--sda-semantic-color-text-on-danger
—#ffffff
--sda-semantic-color-border-default
{primitive.color.gray.4}#e8e8e8
--sda-semantic-color-border-focus
{primitive.color.teal.9}#12a594
--sda-semantic-color-border-danger
{primitive.color.red.11}#ce2c31
--sda-semantic-color-brand-primary
{primitive.color.teal.9}#12a594
--sda-semantic-color-brand-primary-hover
—#0d9b8a
--sda-semantic-color-brand-primary-subtle
—#e0f8f3
--sda-semantic-color-brand-accent
{primitive.color.accent.9}#ed6b86
--sda-semantic-color-brand-accent-hover
—#e05f7b
--sda-semantic-color-brand-accent-subtle
—#ebdadc
--sda-semantic-color-brand-accent-text
—#a6294c
--sda-semantic-color-brand-secondary
{primitive.color.secondary.9}#463239
--sda-semantic-color-brand-secondary-hover
—#5f404b
--sda-semantic-color-brand-secondary-text
—#432f36
--sda-semantic-space-density-factor-compact
{primitive.density.factor.compact}0.75
--sda-semantic-space-density-factor-normal
{primitive.density.factor.normal}1
--sda-semantic-space-density-factor-comfortable
{primitive.density.factor.comfortable}1.25
--sda-semantic-space-control-padding-x
—16px
--sda-semantic-space-control-padding-y
—8px
--sda-semantic-space-control-gap
{primitive.space.2}8px
--sda-semantic-space-layout-section
{primitive.space.8}32px
--sda-semantic-space-layout-component
{primitive.space.5}20px
--sda-semantic-space-compact-control-padding-x
—floor({primitive.space.4} * {semantic.space.density.factor.compact} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}
--sda-semantic-space-compact-control-padding-y
—floor({primitive.space.2} * {semantic.space.density.factor.compact} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}
--sda-semantic-space-compact-control-gap
floor({primitive.space.2} * {semantic.space.density.factor.compact} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}floor({primitive.space.2} * {semantic.space.density.factor.compact} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}
--sda-semantic-space-compact-layout-section
floor({primitive.space.8} * {semantic.space.density.factor.compact} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}floor({primitive.space.8} * {semantic.space.density.factor.compact} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}
--sda-semantic-space-compact-layout-component
floor({primitive.space.5} * {semantic.space.density.factor.compact} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}floor({primitive.space.5} * {semantic.space.density.factor.compact} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}
--sda-semantic-space-comfortable-control-padding-x
—ceil({primitive.space.4} * {semantic.space.density.factor.comfortable} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}
--sda-semantic-space-comfortable-control-padding-y
—ceil({primitive.space.2} * {semantic.space.density.factor.comfortable} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}
--sda-semantic-space-comfortable-control-gap
ceil({primitive.space.2} * {semantic.space.density.factor.comfortable} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}ceil({primitive.space.2} * {semantic.space.density.factor.comfortable} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}
--sda-semantic-space-comfortable-layout-section
ceil({primitive.space.8} * {semantic.space.density.factor.comfortable} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}ceil({primitive.space.8} * {semantic.space.density.factor.comfortable} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}
--sda-semantic-space-comfortable-layout-component
ceil({primitive.space.5} * {semantic.space.density.factor.comfortable} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}ceil({primitive.space.5} * {semantic.space.density.factor.comfortable} / {primitive.density.grid-unit}) * {primitive.density.grid-unit}
--sda-semantic-radius-control
{primitive.radius.sm}6px
--sda-semantic-radius-card
{primitive.radius.md}10px
--sda-semantic-typography-fontFamily
{primitive.fontFamily.base}'Atkinson Hyperlegible', system-ui, sans-serif
--sda-semantic-typography-detail-size
{primitive.fontSize.xs}0.75rem
--sda-semantic-typography-detail-weight
{primitive.fontWeight.regular}400
--sda-semantic-typography-detail-line-height
—1.6
--sda-semantic-typography-label-size
{primitive.fontSize.sm}0.875rem
--sda-semantic-typography-label-weight
{primitive.fontWeight.medium}500
--sda-semantic-typography-label-line-height
—1.6
--sda-semantic-typography-body-size
{primitive.fontSize.base}1rem
--sda-semantic-typography-body-weight
{primitive.fontWeight.regular}400
--sda-semantic-typography-body-line-height
—1.6
--sda-semantic-typography-heading-1-size
{primitive.fontSize.4xl}2.5rem
--sda-semantic-typography-heading-1-weight
{primitive.fontWeight.bold}700
--sda-semantic-typography-heading-1-line-height
—1.0
--sda-semantic-typography-heading-2-size
{primitive.fontSize.3xl}2rem
--sda-semantic-typography-heading-2-weight
{primitive.fontWeight.bold}700
--sda-semantic-typography-heading-2-line-height
—1.0
--sda-semantic-typography-heading-3-size
{primitive.fontSize.2xl}1.75rem
--sda-semantic-typography-heading-3-weight
{primitive.fontWeight.bold}700
--sda-semantic-typography-heading-3-line-height
—1.1
--sda-semantic-typography-heading-4-size
{primitive.fontSize.xl}1.5rem
--sda-semantic-typography-heading-4-weight
{primitive.fontWeight.bold}700
--sda-semantic-typography-heading-4-line-height
—1.1
--sda-semantic-typography-heading-5-size
{primitive.fontSize.lg}1.25rem
--sda-semantic-typography-heading-5-weight
{primitive.fontWeight.medium}500
--sda-semantic-typography-heading-5-line-height
—1.1
--sda-semantic-typography-hero-size
{primitive.fontSize.5xl}3rem
--sda-semantic-typography-hero-weight
{primitive.fontWeight.bold}700
--sda-semantic-typography-hero-line-height
—1.0
--sda-semantic-icon-size-inline
{primitive.iconSize.sm}16px
--sda-semantic-icon-size-control
{primitive.iconSize.md}20px
--sda-semantic-icon-size-nav
{primitive.iconSize.lg}24px

Tokens de composantComponent tokens

Contrats institutionnels. Toute modification requiert une approbation formelle. Institutional contracts. Any change requires formal approval.

Token CSSAlias sémantiqueSemantic aliasValeur résolueResolved value
--sda-component-button-primary-backgroundvar(--sda-semantic-color-action-primary)
#12a594
--sda-component-button-primary-background-hovervar(--sda-semantic-color-action-primary-hover)
#0d9b8a
--sda-component-button-primary-background-disabledvar(--sda-semantic-color-action-primary-disabled)
#d9d9d9
--sda-component-button-primary-textvar(--sda-semantic-color-text-on-action)
#ffffff
--sda-component-button-primary-padding-xvar(--sda-semantic-space-control-padding-x)
16px
--sda-component-button-primary-padding-yvar(--sda-semantic-space-control-padding-y)
8px
--sda-component-button-primary-radiusvar(--sda-semantic-radius-control)
6px
--sda-component-button-critical-backgroundvar(--sda-semantic-color-feedback-danger)
#ce2c31
--sda-component-button-critical-background-hovervar(--sda-semantic-color-feedback-danger-subtle)
#feebec
--sda-component-button-critical-textvar(--sda-semantic-color-text-on-danger)
#ffffff
--sda-component-button-critical-bordervar(--sda-semantic-color-feedback-danger)
#ce2c31
--sda-component-button-secondary-backgroundtransparent
transparent
--sda-component-button-secondary-background-hovervar(--sda-semantic-color-background-subtle)
#f0f0f0
--sda-component-button-secondary-textvar(--sda-semantic-color-action-primary)
#12a594
--sda-component-button-secondary-bordervar(--sda-semantic-color-action-primary)
#12a594
--sda-component-button-ghost-backgroundtransparent
transparent
--sda-component-button-ghost-background-hovervar(--sda-semantic-color-background-subtle)
#f0f0f0
--sda-component-button-ghost-textvar(--sda-semantic-color-action-primary)
#12a594
--sda-component-button-ghost-bordertransparent
transparent
--sda-component-input-default-backgroundvar(--sda-semantic-color-background-surface)
#ffffff
--sda-component-input-default-bordervar(--sda-semantic-color-border-default)
#e8e8e8
--sda-component-input-default-border-focusvar(--sda-semantic-color-border-focus)
#12a594
--sda-component-input-default-border-errorvar(--sda-semantic-color-border-danger)
#ce2c31
--sda-component-input-default-textvar(--sda-semantic-color-text-primary)
#202020
--sda-component-input-default-placeholdervar(--sda-semantic-color-text-secondary)
#646464
--sda-component-input-default-radiusvar(--sda-semantic-radius-control)
6px
--sda-component-input-default-padding-xvar(--sda-semantic-space-control-padding-x)
16px
--sda-component-input-default-padding-yvar(--sda-semantic-space-control-padding-y)
8px
--sda-component-card-default-backgroundvar(--sda-semantic-color-background-surface)
#ffffff
--sda-component-card-default-bordervar(--sda-semantic-color-border-default)
#e8e8e8
--sda-component-card-default-radiusvar(--sda-semantic-radius-card)
10px
--sda-component-card-default-paddingvar(--sda-semantic-space-layout-component)
20px
Contribuer à ce projetContribute to this project Ce système est ouvert aux contributions — tokens, composants, décisions architecturales, corrections d'accessibilité ou documentation. Toute amélioration est bienvenue. This system welcomes contributions — tokens, components, architectural decisions, accessibility fixes, or documentation. Every improvement counts.
Voir sur GitHub → View on GitHub →