DOL Figma Variable Registry

Total AI-facing tokens: 838 · Semantic 349 · Component 140 · Typography 181 · Spacing 45 · Radius 87 · Shadow 36 (Base palette layer (1661) excluded - not directly bound; reached via semantic references.)

How to use this registry

1. Figma design task → pick variable: find purpose below, read the variable name, bind in Figma. The 4-category rule (fill/* / text-color/* / icon-color/* / border-color/*) is enforced by section structure.
2. Cite format: --text-color-danger-primary (full CSS var) or text-color/danger-primary (Figma variable path)
3. Dark column blank = token uses same value across modes. Non-blank = different dark value via darkValue.
4. TW column = Tailwind class equivalent when code-side implementation matches (cross-reference for consistency).

When you can’t find what you need here:

• Check ../figma-ai/variable-selection.md (decision tree for intent → variable)
• Check ../ds-guideline/{color,typography,radius,spacing,shadow}.md (deep reference)
• Check ../ds-guideline/DIRECTION.md §4 Color, §6-§9 philosophy (rationale)

Anti-patterns for variable binding: see figma-naming-6-binding scope in ../anti-pattern-registry.md (5 rules)

---

§1 Semantic layer - the 4-category rule

Rule (per figma-ai/naming-convention.md §1): every visual property binds to ONE of these 4 categories. Icon vectors MUST use icon-color/* even if same hex as text - enables future icon-specific mode variants.

§1.1 text-color/* (72 tokens)

Binds text-node fills. Typical families: neutral (body / label / caption), brand (emphasis), info/success/warning/danger (status messaging), ai (AI-generated content).

Name	Resolved	Dark	TW	Purpose
--text-color-neutral-dim	#6C7885		gray-600 neutral-600 slate-600 stone-600 zinc-600	neutral dim text
--text-color-neutral-subtle	#444C56		gray-800 neutral-800 slate-800 stone-800 zinc-800	neutral subtle text
--text-color-neutral-inverse-primary	#FFFFFF			neutral text
--text-color-neutral-primary	#2B3138		gray-900 neutral-900 slate-900 stone-900 zinc-900	neutral text
--text-color-neutral-secondary	#55606B		gray-700 neutral-700 slate-700 stone-700 zinc-700	neutral secondary text
--text-color-neutral-stress	#21262D		gray-950 neutral-950 slate-950 stone-950 zinc-950	neutral stress text
--text-color-neutral-disabled	#8493A1		gray-500 neutral-500 slate-500 stone-500 zinc-500	neutral disabled text
--text-color-brand-dim	#F1B6B6		brand-300 primary-300	brand dim text
--text-color-brand-primary	#D42525		brand-600 primary-600	brand text
--text-color-brand-secondary	#FF7D7D		brand-400 primary-400	brand secondary text
--text-color-brand-disabled	#F9DFDF		brand-200 primary-200	brand disabled text
--text-editor-text-bg-color-9	#F1B6B6		brand-300 primary-300	brand text
--text-editor-text-color-9	#D42525		brand-600 primary-600	brand text
--text-color-info-dim	#A7B7ED		blue-300 info-300	info dim text
--text-color-progress-dim	#A7B7ED		blue-300 info-300	info dim text
--text-color-info-primary	#2B52D4		blue-600 info-600	info text
--text-color-progress-primary	#2B52D4		blue-600 info-600	info text
--text-color-info-secondary	#6F8AE2		blue-400 info-400	info secondary text
--text-color-progress-secondary	#6F8AE2		blue-400 info-400	info secondary text
--text-color-info-disabled	#DFE5F9		blue-200 info-200	info disabled text
--text-color-progress-disabled	#DFE5F9		blue-200 info-200	info disabled text
--text-editor-text-bg-color-4	#DFE5F9		blue-200 info-200	info text
--text-editor-text-color-4	#2B52D4		blue-600 info-600	info text
--text-color-success-dim	#A6D1AE		emerald-300 green-300 success-300	success dim text
--text-color-success-primary	#329546		emerald-600 green-600 success-600	success text
--text-color-success-secondary	#74B782		emerald-400 green-400 success-400	success secondary text
--text-color-success-disabled	#D7EADB		emerald-200 green-200 success-200	success disabled text
--text-editor-text-bg-color-1	#D7EADB		emerald-200 green-200 success-200	success text
--text-editor-text-color-1	#329546		emerald-600 green-600 success-600	success text
--text-color-warning-dim	#EFCE84		amber-300 warning-300	warning dim text
--text-color-warning-primary	#B9840E		amber-700 warning-700	warning text
--text-color-warning-secondary	#EABE5C		amber-400 warning-400	warning secondary text
--text-color-warning-disabled	#F6E4BB		amber-200 warning-200	warning disabled text
--text-editor-text-bg-color-3	#F6E4BB		amber-200 warning-200	warning text
--text-editor-text-color-3	#E0A011		amber-600 warning-600	warning text
--text-color-danger-dim	#F3B8A4		danger-300 red-300	danger dim text
--text-color-danger-primary	#E24B19		danger-600 red-600	danger text
--text-color-danger-secondary	#ED8D6D		danger-400 red-400	danger secondary text
--text-color-danger-disabled	#FAE0D7		danger-200 red-200	danger disabled text
--text-editor-text-bg-color-6	#FAE0D7		danger-200 red-200	danger text
--text-editor-text-color-6	#E24B19		danger-600 red-600	danger text
--text-color-special-dim	#BCADED		purple-300 special-300 violet-300	special dim text
--text-color-special-primary	#5B37D2		purple-600 special-600 violet-600	special text
--text-color-special-secondary	#9178E1		purple-400 special-400 violet-400	special secondary text
--text-color-special-disabled	#E8E2F9		purple-200 special-200 violet-200	special disabled text
--text-editor-text-bg-color-10	#E8E2F9		purple-200 special-200 violet-200	special text
--text-editor-text-color-10	#5B37D2		purple-600 special-600 violet-600	special text
--text-color-ai-dim	#39C4FF		cyan-500	ai dim text
--text-color-ai-primary	#006B99		cyan-800	ai text
--text-color-ai-secondary	#008ECA		cyan-700	ai secondary text
--text-color-ai-disabled	#CBEAF8		cyan-200	ai disabled text
--text-color-on-inverse-primary	#FFFFFF			text
--text-color-on-inverse-secondary	#FFFFFFB2			secondary text
--text-color-on-inverse-disabled	#FFFFFF4D			disabled text
--text-editor-text-bg-color-11	#F6DFF0		fuchsia-200 magenta-200	text
--text-editor-text-bg-color-12	#C5CDD4		gray-300 neutral-300 slate-300 stone-300 zinc-300	text
--text-editor-text-bg-color-13	#A1ACB8		gray-400 neutral-400 slate-400 stone-400 zinc-400	text
--text-editor-text-bg-color-14	#55606B		gray-700 neutral-700 slate-700 stone-700 zinc-700	text
--text-editor-text-bg-color-15	#2B3138		gray-900 neutral-900 slate-900 stone-900 zinc-900	text
--text-editor-text-bg-color-2	#F8DFE4		pink-200 rose-200	text
--text-editor-text-bg-color-5	#E3EC9E		lemon-100 lime-100	text
--text-editor-text-bg-color-7	#CEEAF4		deepsky-200 sky-200	text
--text-editor-text-bg-color-8	#E6F4FF		indigo-100	text
--text-editor-text-color-11	#BF2598		fuchsia-600 magenta-600	text
--text-editor-text-color-12	#6C7885		gray-600 neutral-600 slate-600 stone-600 zinc-600	text
--text-editor-text-color-13	#8493A1		gray-500 neutral-500 slate-500 stone-500 zinc-500	text
--text-editor-text-color-14	#C5CDD4		gray-300 neutral-300 slate-300 stone-300 zinc-300	text
--text-editor-text-color-15	#FFFFFF			text
--text-editor-text-color-2	#D94B67		pink-600 rose-600	text
--text-editor-text-color-5	#BBD015		lemon-900 lime-900	text
--text-editor-text-color-7	#27A3CD		deepsky-600 sky-600	text
--text-editor-text-color-8	#2FA5FF		indigo-600	text

§1.2 icon-color/* (43 tokens)

Binds icon vector fills. Do NOT substitute text-color/* - category mismatch breaks future icon-mode variants.

Name	Resolved	Dark	TW	Purpose
--icon-color-neutral-dim	#8493A1		gray-500 neutral-500 slate-500 stone-500 zinc-500	neutral dim icon
--icon-color-neutral-subtle	#444C56		gray-800 neutral-800 slate-800 stone-800 zinc-800	neutral subtle icon
--icon-color-neutral-inverse-primary	#FFFFFF			neutral icon
--icon-color-neutral-primary	#2B3138		gray-900 neutral-900 slate-900 stone-900 zinc-900	neutral icon
--icon-color-neutral-secondary	#6C7885		gray-600 neutral-600 slate-600 stone-600 zinc-600	neutral secondary icon
--icon-color-neutral-stress	#21262D		gray-950 neutral-950 slate-950 stone-950 zinc-950	neutral stress icon
--icon-color-neutral-disabled	#A1ACB8		gray-400 neutral-400 slate-400 stone-400 zinc-400	neutral disabled icon
--icon-color-brand-dim	#F1B6B6		brand-300 primary-300	brand dim icon
--icon-color-brand-primary	#D42525		brand-600 primary-600	brand icon
--icon-color-brand-secondary	#FF7D7D		brand-400 primary-400	brand secondary icon
--icon-color-brand-disabled	#F9DFDF		brand-200 primary-200	brand disabled icon
--icon-color-info-dim	#A7B7ED		blue-300 info-300	info dim icon
--icon-color-progress-dim	#A7B7ED		blue-300 info-300	info dim icon
--icon-color-info-primary	#2B52D4		blue-600 info-600	info icon
--icon-color-progress-primary	#2B52D4		blue-600 info-600	info icon
--icon-color-info-secondary	#6F8AE2		blue-400 info-400	info secondary icon
--icon-color-progress-secondary	#6F8AE2		blue-400 info-400	info secondary icon
--icon-color-info-disabled	#DFE5F9		blue-200 info-200	info disabled icon
--icon-color-progress-disabled	#DFE5F9		blue-200 info-200	info disabled icon
--icon-color-success-dim	#A6D1AE		emerald-300 green-300 success-300	success dim icon
--icon-color-success-primary	#329546		emerald-600 green-600 success-600	success icon
--icon-color-success-secondary	#74B782		emerald-400 green-400 success-400	success secondary icon
--icon-color-success-disabled	#D7EADB		emerald-200 green-200 success-200	success disabled icon
--icon-color-warning-dim	#EFCE84		amber-300 warning-300	warning dim icon
--icon-color-warning-primary	#B9840E		amber-700 warning-700	warning icon
--icon-color-warning-secondary	#EABE5C		amber-400 warning-400	warning secondary icon
--icon-color-warning-disabled	#F6E4BB		amber-200 warning-200	warning disabled icon
--icon-color-danger-dim	#F3B8A4		danger-300 red-300	danger dim icon
--icon-color-danger-primary	#E24B19		danger-600 red-600	danger icon
--icon-color-danger-secondary	#ED8D6D		danger-400 red-400	danger secondary icon
--icon-color-danger-disabled	#FAE0D7		danger-200 red-200	danger disabled icon
--icon-color-special-dim	#BCADED		purple-300 special-300 violet-300	special dim icon
--icon-color-special-primary	#5B37D2		purple-600 special-600 violet-600	special icon
--icon-color-special-secondary	#7759DA		purple-500 special-500 violet-500	special secondary icon
--icon-color-special-disabled	#E8E2F9		purple-200 special-200 violet-200	special disabled icon
--icon-color-ai-dim	#6AD3FF		cyan-400	ai dim icon
--icon-color-ai-primary	#00B3FF		cyan-600	ai icon
--icon-color-ai-secondary	#39C4FF		cyan-500	ai secondary icon
--icon-color-ai-deep	#006B99		cyan-800	ai deep icon
--icon-color-ai-disabled	#CBEAF8		cyan-200	ai disabled icon
--icon-color-on-inverse-primary	#FFFFFF			icon
--icon-color-on-inverse-secondary	#FFFFFF99			secondary icon
--icon-color-on-inverse-disabled	#FFFFFF4D			disabled icon

§1.3 border-color/* (65 tokens)

Binds strokes (frame/component borders, divider lines, focus rings).

Name	Resolved	Dark	TW	Purpose
--border-color-neutral-subtle	#F1F2F4		gray-100 neutral-100 slate-100 stone-100 zinc-100	neutral subtle border
--border-color-neutral-primary	#E2E5E9		gray-200 neutral-200 slate-200 stone-200 zinc-200	neutral border
--border-color-neutral-stress	#444C56		gray-800 neutral-800 slate-800 stone-800 zinc-800	neutral stress border
--border-color-neutral-highlight	#8493A1		gray-500 neutral-500 slate-500 stone-500 zinc-500	neutral highlight border
--border-color-neutral-deep	#C5CDD4		gray-300 neutral-300 slate-300 stone-300 zinc-300	neutral deep border
--border-color-neutral-disabled	#F1F2F4		gray-100 neutral-100 slate-100 stone-100 zinc-100	neutral disabled border
--border-color-neutral-inverse	#FFFFFF			neutral inverse border
--border-color-brand-dim	#FCEFEF		brand-100 primary-100	brand dim border
--border-color-brand-soft	#F9DFDF		brand-200 primary-200	brand soft border
--border-color-brand-subtle	#B90F0F		brand-700 primary-700	brand subtle border
--border-color-brand-secondary	#F1B6B6		brand-300 primary-300	brand secondary border
--border-color-brand-stress	#990D0D		brand-800 primary-800	brand stress border
--border-color-brand-highlight	#D42525		brand-600 primary-600	brand highlight border
--border-color-brand-matte	#FEF8F8		brand-50 primary-50	brand matte border
--border-color-info-dim	#EFF2FC		blue-100 info-100	info dim border
--border-color-progress-dim	#EFF2FC		blue-100 info-100	info dim border
--border-color-info-soft	#DFE5F9		blue-200 info-200	info soft border
--border-color-progress-soft	#DFE5F9		blue-200 info-200	info soft border
--border-color-info-subtle	#2446B4		blue-700 info-700	info subtle border
--border-color-progress-subtle	#2446B4		blue-700 info-700	info subtle border
--border-color-info-primary	#2B52D4		blue-600 info-600	info border
--border-color-progress-primary	#2B52D4		blue-600 info-600	info border
--border-color-info-secondary	#A7B7ED		blue-300 info-300	info secondary border
--border-color-progress-secondary	#A7B7ED		blue-300 info-300	info secondary border
--border-color-info-stress	#1E3A95		blue-800 info-800	info stress border
--border-color-progress-stress	#1E3A95		blue-800 info-800	info stress border
--border-color-info-matte	#F8F9FE		blue-50 info-50	info matte border
--border-color-progress-matte	#F8F9FE		blue-50 info-50	info matte border
--border-color-success-dim	#EBF5ED		emerald-100 green-100 success-100	success dim border
--border-color-success-soft	#D7EADB		emerald-200 green-200 success-200	success soft border
--border-color-success-subtle	#297939		emerald-700 green-700 success-700	success subtle border
--border-color-success-primary	#329546		emerald-600 green-600 success-600	success border
--border-color-success-secondary	#A6D1AE		emerald-300 green-300 success-300	success secondary border
--border-color-success-stress	#205E2C		emerald-800 green-800 success-800	success stress border
--border-color-success-matte	#F6FAF7		emerald-50 green-50 success-50	success matte border
--border-color-warning-dim	#FBF1DD		amber-100 warning-100	warning dim border
--border-color-warning-soft	#F6E4BB		amber-200 warning-200	warning soft border
--border-color-warning-subtle	#B9840E		amber-700 warning-700	warning subtle border
--border-color-warning-primary	#E0A011		amber-600 warning-600	warning border
--border-color-warning-secondary	#EFCE84		amber-300 warning-300	warning secondary border
--border-color-warning-stress	#92680B		amber-800 warning-800	warning stress border
--border-color-warning-matte	#FDF9F0		amber-50 warning-50	warning matte border
--border-color-danger-dim	#FCEFEB		danger-100 red-100	danger dim border
--border-color-danger-soft	#FAE0D7		danger-200 red-200	danger soft border
--border-color-danger-subtle	#BA3E15		danger-700 red-700	danger subtle border
--border-color-danger-primary	#E24B19		danger-600 red-600	danger border
--border-color-danger-secondary	#F3B8A4		danger-300 red-300	danger secondary border
--border-color-danger-stress	#943110		danger-800 red-800	danger stress border
--border-color-danger-matte	#FEF8F6		danger-50 red-50	danger matte border
--border-color-special-dim	#F3F1FC		purple-100 special-100 violet-100	special dim border
--border-color-special-soft	#E8E2F9		purple-200 special-200 violet-200	special soft border
--border-color-special-subtle	#4F30B6		purple-700 special-700 violet-700	special subtle border
--border-color-special-primary	#5B37D2		purple-600 special-600 violet-600	special border
--border-color-special-secondary	#BCADED		purple-300 special-300 violet-300	special secondary border
--border-color-special-stress	#43289B		purple-800 special-800 violet-800	special stress border
--border-color-special-matte	#FAF9FE		purple-50 special-50 violet-50	special matte border
--border-color-ai-dim	#E5F5FB		cyan-100	ai dim border
--border-color-ai-soft	#CBEAF8		cyan-200	ai soft border
--border-color-ai-primary	#39C4FF		cyan-500	ai border
--border-color-ai-secondary	#6AD3FF		cyan-400	ai secondary border
--border-color-ai-deep	#00B3FF		cyan-600	ai deep border
--border-color-ai-matte	#F3FAFD		cyan-50	ai matte border
--border-color-on-inverse-dim	#FFFFFF4D			dim border
--border-color-on-inverse-primary	#FFFFFF			border
--border-color-on-inverse-secondary	#FFFFFF99			secondary border

§1.4 fill/* (64 tokens)

Binds frame/shape backgrounds where the background carries semantic meaning (alert bg, status tint, brand-tinted surface). Group by family for navigation.

fill-neutral/* (10)

Name	Resolved	Dark	Level
--fill-neutral-dark-dim	#434E5B		dim
--fill-neutral-dim	#F1F2F4		dim
--fill-neutral-inverse-dim	#353C45		dim
--fill-neutral-dark-primary	#313A44		primary
--fill-neutral-inverse-primary	#2B3138		primary
--fill-neutral-stress	#C5CDD4		stress
--fill-neutral-deep	#E2E5E9		deep
--fill-neutral-disabled	#F9FAFA		disabled
--fill-neutral-base	#FFFFFF		base
--fill-neutral-matte	#F9FAFA		matte

fill-brand/* (7)

Name	Resolved	Dark	Level
--fill-brand-dim	#FCEFEF		dim
--fill-brand-soft	#F9DFDF		soft
--fill-brand-subtle	#B90F0F		subtle
--fill-brand-primary	#D42525		primary
--fill-brand-secondary	#F1B6B6		secondary
--fill-brand-stress	#990D0D		stress
--fill-brand-matte	#FEF8F8		matte

fill-info/* (14)

Name	Resolved	Dark	Level
--fill-info-dim	#EFF2FC		dim
--fill-progress-dim	#EFF2FC		dim
--fill-info-soft	#DFE5F9		soft
--fill-progress-soft	#DFE5F9		soft
--fill-info-subtle	#2446B4		subtle
--fill-progress-subtle	#2446B4		subtle
--fill-info-primary	#2B52D4		primary
--fill-progress-primary	#2B52D4		primary
--fill-info-secondary	#A7B7ED		secondary
--fill-progress-secondary	#A7B7ED		secondary
--fill-info-stress	#1E3A95		stress
--fill-progress-stress	#1E3A95		stress
--fill-info-matte	#F8F9FE		matte
--fill-progress-matte	#F8F9FE		matte

fill-success/* (7)

Name	Resolved	Dark	Level
--fill-success-dim	#EBF5ED		dim
--fill-success-soft	#D7EADB		soft
--fill-success-subtle	#297939		subtle
--fill-success-primary	#329546		primary
--fill-success-secondary	#A6D1AE		secondary
--fill-success-stress	#205E2C		stress
--fill-success-matte	#F6FAF7		matte

fill-warning/* (7)

Name	Resolved	Dark	Level
--fill-warning-dim	#FBF1DD		dim
--fill-warning-soft	#F6E4BB		soft
--fill-warning-subtle	#92680B		subtle
--fill-warning-primary	#E0A011		primary
--fill-warning-secondary	#EFCE84		secondary
--fill-warning-stress	#6F4F08		stress
--fill-warning-matte	#FDF9F0		matte

fill-danger/* (7)

Name	Resolved	Dark	Level
--fill-danger-dim	#FCEFEB		dim
--fill-danger-soft	#FAE0D7		soft
--fill-danger-subtle	#BA3E15		subtle
--fill-danger-primary	#E24B19		primary
--fill-danger-secondary	#F3B8A4		secondary
--fill-danger-stress	#943110		stress
--fill-danger-matte	#FEF8F6		matte

fill-special/* (7)

Name	Resolved	Dark	Level
--fill-special-dim	#F3F1FC		dim
--fill-special-soft	#E8E2F9		soft
--fill-special-subtle	#4F30B6		subtle
--fill-special-primary	#5B37D2		primary
--fill-special-secondary	#BCADED		secondary
--fill-special-stress	#43289B		stress
--fill-special-matte	#FAF9FE		matte

fill-ai/* (5)

Name	Resolved	Dark	Level
--fill-ai-dim	#E5F5FB		dim
--fill-ai-soft	#CBEAF8		soft
--fill-ai-primary	#00B3FF		primary
--fill-ai-secondary	#39C4FF		secondary
--fill-ai-matte	#F3FAFD		matte

§1.5 surface-page/* (14 tokens)

Binds page-level backgrounds (body bg, section bg, overlay scrim).

Name	Resolved	Dark	Level
--surface-page-neutral-dark-dim	#434E5B		dim
--surface-page-neutral-dim	#F1F2F4		dim
--surface-page-neutral-inverse-dim	#353C45		dim
--surface-page-neutral-subtle	#F9FAFB		subtle
--surface-page-neutral-dark-primary	#313A44		primary
--surface-page-neutral-inverse-primary	#2B3138		primary
--surface-page-neutral-primary	#FFFFFF		primary
--surface-page-neutral-secondary	#F2F4F7		secondary
--surface-page-neutral-pri-dashboard	#FFFFFF
--surface-overlay-popup-overlay-inverse	#000710D4		inverse
--surface-overlay-drawer-overlay	#000B19BB
--surface-overlay-hover-overlay	#000710D4
--surface-overlay-popup-overlay-neutral	#FFFFFFCC
--surface-page-paper	#FDF9F4

§1.6 Feature tokens (stat / program / leaderboard / table) (42 tokens)

Scope-specific tokens for dashboard, progress tracking, admin surfaces. Most downstream code maps these via program-skill-*, stat-*, leaderboard-*, table-color-*.

Name	Resolved	Dark	Category
--leaderboard-color-top-1-dim	#E7CF54		leaderboard
--leaderboard-color-top-1-matte	#F9F3D4		leaderboard
--leaderboard-color-top-1-primary	#E1C228		leaderboard
--leaderboard-color-top-1-secondary	#ECD874		leaderboard
--leaderboard-color-top-2-dim	#92D0FF		leaderboard
--leaderboard-color-top-2-matte	#F4FAFF		leaderboard
--leaderboard-color-top-2-primary	#2FA5FF		leaderboard
--leaderboard-color-top-2-secondary	#CCE9FF		leaderboard
--leaderboard-color-top-3-dim	#F5C794		leaderboard
--leaderboard-color-top-3-matte	#FEF8F3		leaderboard
--leaderboard-color-top-3-primary	#EC983B		leaderboard
--leaderboard-color-top-3-secondary	#FAE2C7		leaderboard
--leaderboard-color-top-other-dim	#74B782		leaderboard
--leaderboard-color-top-other-matte	#EBF5ED		leaderboard
--leaderboard-color-top-other-primary	#329546		leaderboard
--leaderboard-color-top-other-secondary	#D7EADB		leaderboard
--program-skill-english-listening-matte	#EFF2FC		program
--program-skill-english-listening-primary	#2B52D4		program
--program-skill-english-listening-secondary	#6F8AE2		program
--program-skill-english-listening-subtle	#5070DB		program
--program-skill-english-online-test-matte	#F3F1FC		program
--program-skill-english-online-test-primary	#5B37D2		program
--program-skill-english-online-test-secondary	#9178E1		program
--program-skill-english-online-test-subtle	#7759DA		program
--program-skill-english-reading-matte	#EBF5ED		program
--program-skill-english-reading-primary	#329546		program
--program-skill-english-reading-secondary	#74B782		program
--program-skill-english-reading-subtle	#54A765		program
--program-skill-english-speaking-matte	#FCEFF2		program
--program-skill-english-speaking-primary	#D94B67		program
--program-skill-english-speaking-secondary	#E6889A		program
--program-skill-english-speaking-subtle	#E06C83		program
--program-skill-english-writing-matte	#FBF1DD		program
--program-skill-english-writing-primary	#B9840E		program
--program-skill-english-writing-secondary	#E5B13A		program
--program-skill-english-writing-subtle	#E0A011		program
--table-color-cell-line	#F1F2F4		table
--table-color-header-line	#E2E5E9		table
--table-color-row-color-hover	#F1F2F4		table
--table-color-row-color-primary	#FFFFFF		table
--table-color-row-color-secondary	#F9FAFA		table
--table-color-table-border	#E2E5E9		table

§1.7 Other semantic (49 tokens)

Tokens that don’t match the 4-category rule (mostly stat/chart-specific; may be promoted to category when patterns stabilize).

Name	Resolved	Dark	Category
--stat-card-bg	#FFFFFF		stat
--stat-card-border	#F1F2F4		stat
--stat-card-label-text	#55606B		stat
--stat-card-padding-x	16px		stat
--stat-card-padding-y	12px		stat
--stat-card-radius	16px		stat
--stat-card-subtitle-text	#6C7885		stat
--stat-card-value-text	#2B3138		stat
--stat-chart-area-fill-opacity	0.20000000298023224		stat
--stat-chart-axis-line	#C5CDD4		stat
--stat-chart-axis-text	#55606B		stat
--stat-chart-axis-tick	#F1F2F4		stat
--stat-chart-bar-gap	8px		stat
--stat-chart-bar-radius	12px		stat
--stat-chart-grid-line	#F1F2F4		stat
--stat-chart-grid-line-strong	#E2E5E9		stat
--stat-chart-legend-icon	#6C7885		stat
--stat-chart-legend-text	#55606B		stat
--stat-chart-line-point-radius	4px		stat
--stat-chart-line-point-stroke-width	2px		stat
--stat-chart-line-stroke-width	2px		stat
--stat-chart-series-1-default	#1F83A5		stat
--stat-chart-series-1-hover	#18637D		stat
--stat-chart-series-2-default	#E06C83		stat
--stat-chart-series-2-hover	#D94B67		stat
--stat-chart-series-3-default	#7759DA		stat
--stat-chart-series-3-hover	#5B37D2		stat
--stat-chart-series-4-default	#B9840E		stat
--stat-chart-series-4-hover	#92680B		stat
--stat-chart-series-5-default	#329546		stat
--stat-chart-series-5-hover	#297939		stat
--stat-chart-series-6-default	#5070DB		stat
--stat-chart-series-6-hover	#2B52D4		stat
--stat-chart-series-other-muted	#F1F2F4		stat
--stat-chart-tooltip-bg	#FFFFFFCC		stat
--stat-chart-tooltip-border	#F1F2F4		stat
--stat-chart-tooltip-padding-x	12px		stat
--stat-chart-tooltip-padding-y	8px		stat
--stat-chart-tooltip-radius	12px		stat
--stat-chart-tooltip-text	#2B3138		stat
--stat-delta-bg-negative	#FCEFEB		stat
--stat-delta-bg-neutral	#F1F2F4		stat
--stat-delta-bg-positive	#EBF5ED		stat
--stat-delta-negative	#E24B19		stat
--stat-delta-neutral	#55606B		stat
--stat-delta-positive	#329546		stat
--stat-empty-icon	#8493A1		stat
--stat-empty-line	#F1F2F4		stat
--stat-empty-text	#6C7885		stat

---

§2 Component layer (140 tokens)

Pre-composed component-specific tokens (sizing, radius, padding per component type). Bind these when building a specific component (alert, button, input, modal, etc.) - they cascade to semantic/base tokens underneath.

§2 alert/* (3)

Name	Resolved	Purpose
--alert-radius-lg	20px
--alert-radius-md	16px
--alert-radius-sm	12px

§2 bottom/* (2)

Name	Resolved	Purpose
--bottom-sheet-radius-lg	24px
--bottom-sheet-radius-md	20px

§2 button/* (19)

Name	Resolved	Purpose
--button-height-2xl	56px
--button-height-2xs	24px
--button-height-3xl	64px
--button-height-3xs	20px
--button-height-4xl	72px
--button-height-lg	40px
--button-height-md	36px
--button-height-sm	32px
--button-height-xl	48px
--button-height-xs	28px
--button-radius-2xl	20px
--button-radius-2xs	12px
--button-radius-3xl	24px
--button-radius-3xs	12px
--button-radius-lg	16px
--button-radius-md	14px
--button-radius-sm	12px
--button-radius-xl	16px
--button-radius-xs	12px

§2 control/* (15)

Name	Resolved	Purpose
--control-height-2xl	56px	spacing
--control-height-2xs	24px	spacing
--control-height-3xl	64px	spacing
--control-height-3xs	20px	spacing
--control-height-4xl	72px	spacing
--control-height-4xs	16px	spacing
--control-height-5xs	12px	spacing
--control-height-content-2xl	128px	spacing
--control-height-content-lg	80px	spacing
--control-height-content-xl	92px	spacing
--control-height-lg	40px	spacing
--control-height-md	36px	spacing
--control-height-sm	32px	spacing
--control-height-xl	48px	spacing
--control-height-xs	28px	spacing

§2 dropdown/* (3)

Name	Resolved	Purpose
--dropdown-radius-lg	20px
--dropdown-radius-md	16px
--dropdown-radius-xl	24px

§2 header/* (6)

Name	Resolved	Purpose
--header-height-2xl	92px
--header-height-lg	72px
--header-height-md	64px
--header-height-sm	52px
--header-height-xl	80px
--header-height-xs	40px

§2 input/* (55)

Name	Resolved	Purpose
--input-color-bg-color-default	#F1F2F4
--input-color-bg-color-disable	#F9FAFA
--input-color-bg-color-error	#F1F2F4
--input-color-bg-color-focus	#F1F2F4
--input-color-bg-color-hover	#E2E5E9	hover
--input-color-bg-color-selected-default	#EFF2FC
--input-color-bg-color-selected-focus	#EFF2FC
--input-color-bg-color-selected-hover	#F8F9FE	hover
--input-color-border-color-disable	#F1F2F4
--input-color-border-color-error	#E24B19
--input-color-border-color-focus	#2B52D4
--input-color-border-color-success	#329546
--input-color-border-color-warning	#E0A011
--input-color-outline-color-bg-default	#FFFFFF
--input-color-outline-color-bg-disable	#F9FAFA
--input-color-outline-color-bg-hover	#F9FAFA	hover
--input-color-outline-color-border-default	#E2E5E9
--input-color-outline-color-border-disable	#F1F2F4
--input-color-outline-color-border-hover	#C5CDD4	hover
--input-color-text-color-disable	#8493A1
--input-color-text-color-filled	#2B3138
--input-color-text-color-filled-disable	#6C7885
--input-color-text-color-placeholder	#55606B
--input-height-2xl	56px
--input-height-2xs	24px
--input-height-3xs	20px
--input-height-lg	40px
--input-height-md	36px
--input-height-sm	32px
--input-height-xl	48px
--input-height-xs	28px
--input-interactive-focus-ring-color-brand	#FCEFEF
--input-interactive-focus-ring-color-error	#FCEFEB
--input-interactive-focus-ring-color-neutral	#F1F2F4
--input-interactive-focus-ring-color-special	#FAF9FE
--input-interactive-focus-ring-color-tertiary	#EFF2FC
--input-interactive-focus-ring-color-warning	#FBF1DD
--input-interactive-focus-ring-width-2xl	9px
--input-interactive-focus-ring-width-lg	5px
--input-interactive-focus-ring-width-md	3px
--input-interactive-focus-ring-width-sm	2px
--input-interactive-focus-ring-width-xl	7px
--input-padding-2xl	20px
--input-padding-lg	14px
--input-padding-md	12px
--input-padding-sm	8px
--input-padding-sm-sub	10px
--input-padding-xl	16px
--input-padding-xs-sub	6px
--input-radius-2xl	20px
--input-radius-lg	16px
--input-radius-md	14px
--input-radius-mini	8px
--input-radius-sm	12px
--input-radius-xl	16px

§2 logo/* (8)

Name	Resolved	Purpose
--logo-general-brand	#D42525
--logo-general-separator	#E2E5E9
--logo-general-text-primary	#21262D
--logo-general-text-secondary	#55606B	secondary
--logo-mono-mono	#2B3138
--logo-negative-mono-negative	#FFFFFF
--logo-negative-separator-negative	#FFFFFF
--logo-negative-text-secondary	#FFFFFFB2	secondary

§2 modal/* (7)

Name	Resolved	Purpose
--modal-radius-lg	32px
--modal-radius-md	20px
--modal-radius-xl	48px
--modal-width-lg	768px
--modal-width-md	560px
--modal-width-sm	480px
--modal-width-xl	1200px

§2 side/* (4)

Name	Resolved	Purpose
--side-panel-border-color-active	#8493A1
--side-panel-border-color-default	#E2E5E9
--side-panel-radius-lg	32px
--side-panel-radius-md	24px

§2 test/* (2)

Name	Resolved	Purpose
--test-comp-test-card-radius-lg	20px
--test-comp-test-card-radius-md	16px

§2 toggle/* (2)

Name	Resolved	Purpose
--toggle-group-flush-radius-general	12px
--toggle-group-inset-radius-general	16px

§2 tooltip/* (2)

Name	Resolved	Purpose
--tooltip-radius-lg	16px
--tooltip-radius-sm	8px

§2 uploader/* (12)

Name	Resolved	Purpose
--uploader-content-height-2xl	128px
--uploader-content-height-lg	80px
--uploader-content-height-md	48px
--uploader-content-height-sm	40px
--uploader-content-height-xl	92px
--uploader-content-height-xs	32px
--uploader-radius-2x	24px
--uploader-radius-lg	20px
--uploader-radius-md	16px
--uploader-radius-sm	16px
--uploader-radius-xl	24px
--uploader-radius-xs	16px

---

§3 Typography (181 tokens)

Font-family / size / weight / line-height / letter-spacing / paragraph-spacing. DOL uses 2 font families only (Plus Jakarta Sans for heading, Inter for body). KID domain substitutes Quicksand - see DIRECTION §6.

§3 font-* (46)

Name	Resolved	Dark
--font-family-body	Inter
--font-family-decoration	Fuzzy Bubbles
--font-family-heading	Plus Jakarta Sans
--font-family-quote	Noto Serif
--font-size-body-2xl	24px
--font-size-body-base	14px
--font-size-body-lg	18px
--font-size-body-md	16px
--font-size-body-sm	12px
--font-size-body-xl	20px
--font-size-body-xs	10px
--font-size-display-2xl	24px
--font-size-display-4xl	32px
--font-size-display-5xl	40px
--font-size-display-6xl	44px
--font-size-display-7xl	56px
--font-size-display-8xl	60px
--font-size-display-9xl	64px
--font-size-heading-2xl	24px
--font-size-heading-3xl	28px
--font-size-heading-4xl	32px
--font-size-heading-5xl	40px
--font-size-heading-6xl	44px
--font-size-heading-7xl	56px
--font-size-heading-base	14px
--font-size-heading-lg	18px
--font-size-heading-md	16px
--font-size-heading-xl	20px
--font-size-label-base	14px
--font-size-label-sm	12px
--font-size-label-xs	10px
--font-size-quote-2xl	24px
--font-size-quote-lg	18px
--font-size-quote-xl	20px
--font-weight-black	900px
--font-weight-bold	700px
--font-weight-light	300px
--font-weight-medium	500px
--font-weight-regular	400px
--font-weight-scale-black	900px
--font-weight-scale-bold	700px
--font-weight-scale-light	300px
--font-weight-scale-medium	500px
--font-weight-scale-regular	400px
--font-weight-scale-semibold	600px
--font-weight-semibold	600px

§3 text-* (17)

Name	Resolved	Dark
--text-scale-10xl	64px
--text-scale-2xl	24px
--text-scale-2xs	8px
--text-scale-3xl	28px
--text-scale-4xl	32px
--text-scale-5xl	40px
--text-scale-6xl	44px
--text-scale-7xl	48px
--text-scale-8xl	56px
--text-scale-9xl	60px
--text-scale-base	14px
--text-scale-lg	18px
--text-scale-md	16px
--text-scale-md-sub	15px
--text-scale-sm	12px
--text-scale-xl	20px
--text-scale-xs	10px

§3 line-* (76)

Name	Resolved	Dark
--line-height-body-2xl-compact	32px
--line-height-body-2xl-extended	40px
--line-height-body-2xl-standard	36px
--line-height-body-base-compact	16px
--line-height-body-base-extended	24px
--line-height-body-base-standard	20px
--line-height-body-lg-compact	24px
--line-height-body-lg-extended	32px
--line-height-body-lg-standard	28px
--line-height-body-md-compact	20px
--line-height-body-md-extended	28px
--line-height-body-md-standard	24px
--line-height-body-sm-compact	16px
--line-height-body-sm-extended	24px
--line-height-body-sm-standard	20px
--line-height-body-xl-compact	28px
--line-height-body-xl-extended	36px
--line-height-body-xl-standard	32px
--line-height-body-xs-compact	12px
--line-height-body-xs-extended	20px
--line-height-body-xs-standard	16px
--line-height-display-2xl-fit	24px
--line-height-display-2xl-standard	32px
--line-height-display-4xl-fit	32px
--line-height-display-4xl-standard	40px
--line-height-display-5xl-fit	40px
--line-height-display-5xl-standard	48px
--line-height-display-6xl-fit	44px
--line-height-display-6xl-standard	56px
--line-height-display-7xl-fit	56px
--line-height-display-7xl-standard	64px
--line-height-display-8xl-fit	60px
--line-height-display-8xl-standard	72px
--line-height-display-9xl-fit	64px
--line-height-display-9xl-standard	72px
--line-height-heading-2xl-compact	28px
--line-height-heading-2xl-extended	36px
--line-height-heading-2xl-fit	24px
--line-height-heading-2xl-standard	32px
--line-height-heading-3xl-compact	32px
--line-height-heading-3xl-extended	40px
--line-height-heading-3xl-fit	28px
--line-height-heading-3xl-standard	36px
--line-height-heading-4xl-compact	36px
--line-height-heading-4xl-extended	48px
--line-height-heading-4xl-fit	32px
--line-height-heading-4xl-standard	40px
--line-height-heading-5xl-compact	40px
--line-height-heading-5xl-extended	60px
--line-height-heading-5xl-fit	40px
--line-height-heading-5xl-standard	48px
--line-height-heading-6xl-compact	48px
--line-height-heading-6xl-extended	64px
--line-height-heading-6xl-fit	44px
--line-height-heading-6xl-standard	60px
--line-height-heading-7xl-compact	64px
--line-height-heading-7xl-extended	72px
--line-height-heading-7xl-fit	56px
--line-height-heading-7xl-standard	64px
--line-height-heading-base-standard	20px
--line-height-heading-lg-compact	20px
--line-height-heading-lg-extended	28px
--line-height-heading-lg-standard	24px
--line-height-heading-md-compact	20px
--line-height-heading-md-extended	28px
--line-height-heading-md-standard	24px
--line-height-heading-xl-compact	24px
--line-height-heading-xl-extended	32px
--line-height-heading-xl-fit	20px
--line-height-heading-xl-standard	28px
--line-height-label-base	20px
--line-height-label-sm	16px
--line-height-label-xs	12px
--line-height-quote-2xl-standard	40px
--line-height-quote-lg-standard	28px
--line-height-quote-xl-standard	32px

§3 leading-* (16)

Name	Resolved	Dark
--leading-scale-12	12px
--leading-scale-16	16px
--leading-scale-20	20px
--leading-scale-24	24px
--leading-scale-28	28px
--leading-scale-32	32px
--leading-scale-36	36px
--leading-scale-4	4px
--leading-scale-40	40px
--leading-scale-44	44px
--leading-scale-48	48px
--leading-scale-56	56px
--leading-scale-60	60px
--leading-scale-64	64px
--leading-scale-72	72px
--leading-scale-8	8px

§3 letter-* (7)

Name	Resolved	Dark
--letter-spacing-none	0px
--letter-spacing-scale-loose	0.5px
--letter-spacing-scale-none	0px
--letter-spacing-scale-tight	-0.5px
--letter-spacing-scale-wide	1px
--letter-spacing-tight	-0.5px
--letter-spacing-wide	0.5px

§3 paragraph-* (19)

Name	Resolved	Dark
--paragraph-spacing-body-2xl-standard	16px
--paragraph-spacing-body-base-compact	4px
--paragraph-spacing-body-base-extended	12px
--paragraph-spacing-body-base-standard	8px
--paragraph-spacing-body-lg-standard	12px
--paragraph-spacing-body-md-compact	8px
--paragraph-spacing-body-md-extended	12px
--paragraph-spacing-body-md-standard	8px
--paragraph-spacing-body-sm-compact	4px
--paragraph-spacing-body-sm-extended	8px
--paragraph-spacing-body-sm-standard	8px
--paragraph-spacing-body-xl-standard	12px
--paragraph-spacing-body-xs-compact	4px
--paragraph-spacing-body-xs-extended	8px
--paragraph-spacing-body-xs-standard	4px
--paragraph-spacing-scale-12	12px
--paragraph-spacing-scale-16	16px
--paragraph-spacing-scale-4	4px
--paragraph-spacing-scale-8	8px

---

§4 Spacing (45 tokens)

Inset (component-internal padding) + spacing (between-element) + section (page-section) + page (layout margin). Use by intent - inset-* inside components, section-gap-* between page sections.

§4 inset-* (17)

Name	Resolved	Dark
--inset-2xl	20px
--inset-2xs	2px
--inset-3xl	24px
--inset-4xl	28px
--inset-5xl	32px
--inset-6xl	40px
--inset-7xl	52px
--inset-8xl	60px
--inset-lg	16px
--inset-md	12px
--inset-md-sub	14px
--inset-none	0px
--inset-sm	8px
--inset-sm-sub	10px
--inset-xl	18px
--inset-xs	4px
--inset-xs-sub	6px

§4 spacing-* (17)

Name	Resolved	Dark
--spacing-2xl	20px
--spacing-2xs	2px
--spacing-3xl	24px
--spacing-4xl	28px
--spacing-5xl	32px
--spacing-6xl	40px
--spacing-7xl	52px
--spacing-8xl	60px
--spacing-lg	16px
--spacing-md	12px
--spacing-md-sub	14px
--spacing-none	0px
--spacing-sm	8px
--spacing-sm-sub	10px
--spacing-xl	18px
--spacing-xs	4px
--spacing-xs-sub	6px

§4 section-* (7)

Name	Resolved	Dark
--section-spacing-1	32px
--section-spacing-2	36px
--section-spacing-3	52px
--section-spacing-4	48px
--section-spacing-5	60px
--section-spacing-6	72px
--section-spacing-7	80px

§4 page-* (3)

Name	Resolved	Dark
--page-margin-full-width-case	16px
--page-margin-general-case	16px
--page-margin-large-case	20px

§4 max-* (1)

Name	Resolved	Dark
--max-width-container-dol-website	560px

---

§5 Radius (87 tokens)

Component-specific radius (alert / button / input / modal / dropdown / uploader / tooltip) + base scale (control-xs → control-xl). Use component-scoped radius when available - button-radius-* vs raw control-*.

§5 control-* (13)

Name	Resolved	Dark
--control-2xl	32px
--control-2xs	6px
--control-3xl	40px
--control-3xs	4px
--control-4xl	48px
--control-5xl	60px
--control-lg	20px
--control-lg-sub	16px
--control-md	14px
--control-sm	12px
--control-sm-sub	10px
--control-xl	24px
--control-xs	8px

§5 none-* (1)

Name	Resolved	Dark
--none-radius	0px

§5 overlay-* (8)

Name	Resolved	Dark
--overlay-2xl	32px
--overlay-3xl	40px
--overlay-4xl	48px
--overlay-5xl	60px
--overlay-lg	20px
--overlay-md	16px
--overlay-sm	12px
--overlay-xl	24px

§5 pill-* (1)

Name	Resolved	Dark
--pill-shape	999px

§5 radius-* (56)

Name	Resolved	Dark
--radius-0	0px
--radius-0-5	2px
--radius-1	4px
--radius-1-5	6px
--radius-10	40px
--radius-11	44px
--radius-12	48px
--radius-13	52px
--radius-14	56px
--radius-15	60px
--radius-16	64px
--radius-17	68px
--radius-18	72px
--radius-19	76px
--radius-2	8px
--radius-2-5	10px
--radius-20	80px
--radius-21	84px
--radius-22	88px
--radius-23	92px
--radius-24	96px
--radius-25	100px
--radius-26	104px
--radius-27	108px
--radius-28	112px
--radius-29	116px
--radius-3	12px
--radius-3-5	14px
--radius-30	120px
--radius-31	124px
--radius-32	128px
--radius-33	132px
--radius-34	136px
--radius-35	140px
--radius-36	144px
--radius-37	148px
--radius-38	152px
--radius-39	156px
--radius-4	16px
--radius-40	160px
--radius-41	164px
--radius-42	168px
--radius-43	172px
--radius-44	176px
--radius-45	180px
--radius-46	184px
--radius-47	188px
--radius-48	192px
--radius-49	196px
--radius-5	20px
--radius-50	200px
--radius-6	24px
--radius-7	28px
--radius-8	32px
--radius-9	36px
--radius-max	999px

§5 surface-* (8)

Name	Resolved	Dark
--surface-2xl	32px
--surface-3xl	40px
--surface-4xl	48px
--surface-5xl	60px
--surface-lg	20px
--surface-md	16px
--surface-sm	12px
--surface-xl	24px

---

§6 Shadow (36 tokens)

Elevation shadows by semantic role. DOL convention: neutral shadow for most elevation; colored shadow (shadow-brand-*, shadow-danger-*) only for campaign/special states. See DIRECTION §9 shadow philosophy + DIRECTION §10 slop-07 (dark-glow anti-pattern).

Name	Resolved	Dark
--interactive-focusring	0px 0px 0px rgba(237, 242, 253, 1)
--shadow-ai-to-bot-3	0px 10px 20px rgba(0, 179, 228, 0.1), 0px 2px 6px rgba(1, 132, 173, 0)
--shadow-ai-to-bot-4	0px 16px 24px rgba(0, 179, 228, 0.1), 0px 2px 6px rgba(0, 179, 228, 0.1)
--shadow-ai-to-bot-5	0px 24px 32px rgba(0, 179, 228, 0.1), 0px 16px 24px rgba(0, 179, 228, 0.1), 0px 4px 8px rgba(0, 179, 228, 0.1)
--shadow-brand-to-bot-3	0px 10px 20px rgba(212, 37, 37, 0.1), 0px 2px 6px rgba(212, 37, 37, 0.1)
--shadow-brand-to-bot-4	0px 16px 24px rgba(212, 37, 37, 0.1), 0px 2px 6px rgba(212, 37, 37, 0.1)
--shadow-brand-to-bot-5	0px 24px 32px rgba(212, 37, 37, 0.1), 0px 16px 24px rgba(212, 37, 37, 0.1), 0px 4px 8px rgba(212, 37, 37, 0.1)
--shadow-danger-to-bot-3	0px 10px 20px rgba(226, 74, 24, 0.1), 0px 2px 6px rgba(226, 74, 24, 0.1)
--shadow-danger-to-bot-4	0px 16px 24px rgba(226, 74, 24, 0.1), 0px 2px 6px rgba(226, 74, 24, 0.1)
--shadow-danger-to-bot-5	0px 24px 32px rgba(226, 74, 24, 0.1), 0px 16px 24px rgba(226, 74, 24, 0.1), 0px 4px 8px rgba(226, 74, 24, 0.1)
--shadow-info-to-bot-3	0px 10px 20px rgba(43, 82, 212, 0.1), 0px 2px 6px rgba(43, 82, 212, 0.1)
--shadow-info-to-bot-4	0px 16px 24px rgba(43, 82, 212, 0.1), 0px 2px 6px rgba(43, 82, 212, 0.1)
--shadow-info-to-bot-5	0px 24px 32px rgba(43, 82, 212, 0.1), 0px 16px 24px rgba(43, 82, 212, 0.1), 0px 4px 8px rgba(43, 82, 212, 0.1)
--shadow-neutral-to-bot-1	0px 1px 3px rgba(48, 63, 119, 0.1)
--shadow-neutral-to-bot-2	0px 2px 6px rgba(48, 63, 119, 0.1), 0px 0px 2px rgba(48, 66, 120, 0.1)
--shadow-neutral-to-bot-3	0px 10px 20px rgba(48, 63, 119, 0.1), 0px 2px 6px rgba(48, 66, 120, 0.1)
--shadow-neutral-to-bot-4	0px 12px 24px rgba(48, 66, 119, 0.1), 0px 3px 6px rgba(48, 66, 120, 0.1)
--shadow-neutral-to-bot-5	0px 24px 32px rgba(48, 66, 120, 0.1), 0px 16px 24px rgba(48, 66, 120, 0.1), 0px 4px 8px rgba(48, 66, 120, 0.1)
--shadow-neutral-to-left-2	-6px 0px 16px rgba(48, 66, 120, 0), -1px 0px 2px rgba(48, 66, 120, 0)
--shadow-neutral-to-left-3	-10px 0px 20px rgba(48, 66, 120, 0.1), -2px 0px 6px rgba(48, 66, 120, 0.1)
--shadow-neutral-to-right-2	6px 0px 16px rgba(48, 66, 120, 0), 1px 0px 2px rgba(48, 66, 120, 0)
--shadow-neutral-to-right-3	10px 0px 20px rgba(48, 66, 120, 0.1), 2px 0px 6px rgba(48, 66, 120, 0.1)
--shadow-neutral-to-top-1	0px -1px 3px rgba(48, 63, 119, 0.1)
--shadow-neutral-to-top-2	0px -2px 6px rgba(48, 63, 119, 0.1), 0px 0px 2px rgba(48, 66, 120, 0.1)
--shadow-neutral-to-top-3	0px -10px 20px rgba(48, 63, 119, 0.1), 0px -2px 6px rgba(48, 66, 120, 0.1)
--shadow-neutral-to-top-4	0px -12px 24px rgba(48, 66, 119, 0.1), 0px -3px 6px rgba(48, 66, 120, 0.1)
--shadow-neutral-to-top-5	0px -24px 32px rgba(48, 66, 120, 0.1), 0px -16px 24px rgba(48, 66, 120, 0.1), 0px -4px 8px rgba(48, 66, 120, 0.1)
--shadow-paper-to-bot-3	0px 10px 20px rgba(220, 147, 78, 0.1), 0px 2px 6px rgba(220, 147, 78, 0.1)
--shadow-paper-to-bot-4	0px 16px 24px rgba(220, 147, 78, 0.1), 0px 2px 6px rgba(220, 147, 78, 0.1)
--shadow-paper-to-bot-5	0px 24px 32px rgba(220, 147, 78, 0.1), 0px 16px 24px rgba(220, 147, 78, 0.1), 0px 4px 8px rgba(220, 147, 78, 0.1)
--shadow-success-to-bot-3	0px 10px 20px rgba(50, 149, 70, 0.1), 0px 2px 6px rgba(50, 149, 70, 0.1)
--shadow-success-to-bot-4	0px 16px 24px rgba(50, 149, 70, 0.1), 0px 2px 6px rgba(50, 149, 70, 0.1)
--shadow-success-to-bot-5	0px 24px 32px rgba(50, 149, 70, 0.1), 0px 16px 24px rgba(50, 149, 70, 0.1), 0px 4px 8px rgba(50, 149, 70, 0.1)
--shadow-warning-to-bot-3	0px 10px 20px rgba(255, 153, 31, 0.1), 0px 2px 6px rgba(255, 153, 31, 0.1)
--shadow-warning-to-bot-4	0px 16px 24px rgba(255, 153, 31, 0.1), 0px 2px 6px rgba(255, 153, 31, 0.1)
--shadow-warning-to-bot-5	0px 24px 32px rgba(255, 153, 31, 0.1), 0px 16px 24px rgba(255, 153, 31, 0.1), 0px 4px 8px rgba(255, 153, 31, 0.1)

---

§7 Layout (61 tokens)

Page-level layout: container width caps, page padding per viewport, header/sidebar heights. Separate GM desktop / tablet / mobile variants (see tokens/v4/layout*.css).

Name	Resolved	Category
--container-app-max-width-md	920px	container
--container-app-max-width-page	1204px	container
--container-app-max-width-page-no-padding	1144px	container
--container-app-max-width-sm	720px	container
--container-landing-max-width	1144px	container
--container-modal-width-lg	768px	container
--container-modal-width-md	560px	container
--container-modal-width-sm	480px	container
--container-modal-width-xl	1200px	container
--focus-ring-width-2xl	9px	focus
--focus-ring-width-lg	5px	focus
--focus-ring-width-md	3px	focus
--focus-ring-width-sm	2px	focus
--focus-ring-width-xl	7px	focus
--inset-inset-0	0px	inset
--inset-inset-0-5	2px	inset
--inset-inset-1	4px	inset
--inset-inset-1-5	6px	inset
--inset-inset-10	40px	inset
--inset-inset-12	48px	inset
--inset-inset-14	56px	inset
--inset-inset-16	64px	inset
--inset-inset-2	8px	inset
--inset-inset-2-5	10px	inset
--inset-inset-20	80px	inset
--inset-inset-3	12px	inset
--inset-inset-3-5	14px	inset
--inset-inset-4	16px	inset
--inset-inset-5	20px	inset
--inset-inset-6	24px	inset
--inset-inset-7	28px	inset
--inset-inset-8	32px	inset
--page-padding-compact	20px	page
--page-padding-large-case	60px	page
--page-padding-standard	32px	page
--section-gap-gap-2xl	100px	section
--section-gap-gap-3xl	112px	section
--section-gap-gap-4xl	120px	section
--section-gap-gap-lg	60px	section
--section-gap-gap-md	48px	section
--section-gap-gap-sm	40px	section
--section-gap-gap-xl	80px	section
--section-gap-gap-xs	32px	section
--spacing-space-0	0px	spacing
--spacing-space-0-5	2px	spacing
--spacing-space-1	4px	spacing
--spacing-space-1-5	6px	spacing
--spacing-space-10	40px	spacing
--spacing-space-12	48px	spacing
--spacing-space-14	56px	spacing
--spacing-space-16	64px	spacing
--spacing-space-2	8px	spacing
--spacing-space-2-5	10px	spacing
--spacing-space-20	80px	spacing
--spacing-space-3	12px	spacing
--spacing-space-3-5	14px	spacing
--spacing-space-4	16px	spacing
--spacing-space-5	20px	spacing
--spacing-space-6	24px	spacing
--spacing-space-7	28px	spacing
--spacing-space-8	32px	spacing

---

Related

• ../figma-ai/naming-convention.md - 4-category rule + intensity modifiers + anti-patterns
• ../figma-ai/variable-selection.md - decision tree (intent → variable)
• ../ds-guideline/color.md - color token philosophy
• ../ds-guideline/typography.md - typography philosophy
• ../anti-pattern-registry.md - figma-naming-6-binding scope (5 binding anti-patterns)
• ../../docs/tailwind-color-guideline.md - Tailwind class ↔ DS-Token mapping