CDDS Design Kit - Core UI (Chrome) - Variable Definitions

This document catalogs all 143 design variables extracted from the CDDS Design Kit — Core UI (Chrome) Figma file (4474:11230).

The variables are organized into logical design token categories for easy reference and implementation across Chromium WebUI and C++ Views.

Summary Table of Contents

1. System & Surface Colors (14 variables)
2. Primary, Tertiary & Container Colors (9 variables)
3. State, Ripple & Interaction Colors (12 variables)
4. Outline, Divider & Component Colors (12 variables)
5. Reference & Static Colors (9 variables)
6. Typography (Fonts, Sizes, Weights, Line Heights) (27 variables)
7. Typography (Composite Text Styles) (14 variables)
8. Spacing Tokens (17 variables)
9. Corner Radius Tokens (10 variables)
10. Elevation & Shadows (18 variables)
11. Miscellaneous & Gem Tokens (9 variables)

1. System & Surface Colors

Variable Name	Value / Definition	Preview
`desktop/sys/base-colors/base`	`#ffffff`	`#ffffff`
`desktop/sys/base-colors/base-container`	`#edf2fa`	`#edf2fa`
`desktop/sys/base-colors/base-container-elevated`	`#ffffff`	`#ffffff`
`desktop/sys/surface-colors/inverse-on-surface`	`#f2f2f2`	`#f2f2f2`
`desktop/sys/surface-colors/inverse-primary`	`#a8c7fa`	`#a8c7fa`
`desktop/sys/surface-colors/inverse-surface`	`#303030`	`#303030`
`desktop/sys/surface-colors/inverse-surface-primary`	`#062e6f`	`#062e6f`
`desktop/sys/surface-colors/on-surface`	`#1f1f1f`	`#1f1f1f`
`desktop/sys/surface-colors/on-surface-subtle`	`#474747`	`#474747`
`desktop/sys/surface-colors/surface`	`#ffffff`	`#ffffff`
`desktop/sys/surface-colors/surface-1`	`#f8fafd`	`#f8fafd`
`desktop/sys/surface-colors/surface-5`	`#eaf0f9`	`#eaf0f9`
`desktop/sys/surface-colors/surface-variant`	`#e1e3e1`	`#e1e3e1`
`gem/sys/surface-colors/on-surface`	`#1f1f1f`	`#1f1f1f`

2. Primary, Tertiary & Container Colors

Variable Name	Value / Definition	Preview
`desktop/sys/container-colors/neutral-container`	`#f2f2f2`	`#f2f2f2`
`desktop/sys/container-colors/on-tonal-container`	`#041e49`	`#041e49`
`desktop/sys/container-colors/tonal-container`	`#d3e3fd`	`#d3e3fd`
`desktop/sys/primary-colors/on-primary`	`#ffffff`	`#ffffff`
`desktop/sys/primary-colors/primary`	`#0b57d0`	`#0b57d0`
`desktop/sys/tertiary-colors/on-tertiary`	`#ffffff`	`#ffffff`
`desktop/sys/tertiary-colors/on-tertiary-container`	`#072711`	`#072711`
`desktop/sys/tertiary-colors/tertiary`	`#146c2e`	`#146c2e`
`desktop/sys/tertiary-colors/tertiary-container`	`#c4eed0`	`#c4eed0`

3. State, Ripple & Interaction Colors

Variable Name	Value / Definition	Preview
`desktop/sys/state-colors/state-disabled`	`#1f1f1f61`	`#1f1f1f61`
`desktop/sys/state-colors/state-disabled-container`	`#1f1f1f1f`	`#1f1f1f1f`
`desktop/sys/state-colors/state-focus-ring`	`#0b57d0`	`#0b57d0`
`desktop/sys/state-colors/state-header-hover`	`#a8c7fa`	`#a8c7fa`
`desktop/sys/state-colors/state-hover-dim-blend-protection`	`#062e6f2e`	`#062e6f2e`
`desktop/sys/state-colors/state-hover-on-prominent`	`#fdfcfb1a`	`#fdfcfb1a`
`desktop/sys/state-colors/state-hover-on-subtle`	`#1f1f1f0f`	`#1f1f1f0f`
`desktop/sys/state-colors/state-inactive-ring`	`#062e6f8c`	`#062e6f8c`
`desktop/sys/state-colors/state-on-header-hover`	`#062e6f`	`#062e6f`
`desktop/sys/state-colors/state-ripple-neutral-on-prominent`	`#fdfcfb29`	`#fdfcfb29`
`desktop/sys/state-colors/state-ripple-neutral-on-subtle`	`#1f1f1f14`	`#1f1f1f14`
`desktop/sys/state-colors/state-ripple-primary`	`#7cacf852`	`#7cacf852`

4. Outline, Divider & Component Colors

Variable Name	Value / Definition	Preview
`desktop/sys/component-colors/divider`	`#d3e3fd`	`#d3e3fd`
`desktop/sys/component-colors/header`	`#d3e3fd`	`#d3e3fd`
`desktop/sys/component-colors/omnibox-container`	`#edf2fa`	`#edf2fa`
`desktop/sys/component-colors/on-header-divider`	`#a8c7fa`	`#a8c7fa`
`desktop/sys/component-colors/on-header-primary`	`#0b57d0`	`#0b57d0`
`desktop/sys/doNotUse/on-surface-secondary`	`#474747`	`#474747`
`desktop/sys/doNotUse/surface-variant`	`#e1e3e1`	`#e1e3e1`
`desktop/sys/error-colors/error`	`#b3261e`	`#b3261e`
`desktop/sys/error-colors/on-error`	`#ffffff`	`#ffffff`
`desktop/sys/outline-colors/neutral-outline`	`#c7c7c7`	`#c7c7c7`
`desktop/sys/outline-colors/outline`	`#747775`	`#747775`
`desktop/sys/outline-colors/tonal-outline`	`#a8c7fa`	`#a8c7fa`

5. Reference & Static Colors

Variable Name	Value / Definition	Preview
`CDDS/sys/light/surface`	`#FFFFFF`	`#FFFFFF`
`desktop/ref/neutral-surface/neutral-surface-2`	`#f3f6fc`	`#f3f6fc`
`desktop/ref/neutral-surface/neutral-surface-3`	`#eff3fa`	`#eff3fa`
`desktop/ref/neutral/neutral-0`	`#000000`	`#000000`
`desktop/ref/neutral/neutral-100`	`#ffffff`	`#ffffff`
`desktop/ref/neutral/neutral-60`	`#8f8f8f`	`#8f8f8f`
`desktop/ref/tertiary/tertiary-95`	`#e7f8ed`	`#e7f8ed`
`desktop/sys/static-colors/black`	`#000000`	`#000000`
`desktop/sys/static-colors/white`	`#ffffff`	`#ffffff`

6. Typography (Fonts, Sizes, Weights, Line Heights)

Variable Name	Value / Definition	Preview
`GIC Icon Scale/Icon M`	`Font(family: "Google Symbols", style: Regular, size: Icon M, weight: 400, lineHeight: Icon M, letterSpacing: 0)`	View Definition`Font(family: "Google Symbols", style: Regular, size: Icon M, weight: 400, lineHeight: Icon M, letterSpacing: 0)`
`Icon M`	`16`	`16`
`desktop/font/body`	`Google Sans Text`	`Google Sans Text`
`desktop/font/headline`	`Google Sans`	`Google Sans`
`desktop/font_size/body-five`	`11`	`11`
`desktop/font_size/body-four`	`12`	`12`
`desktop/font_size/body-three`	`13`	`13`
`desktop/font_size/body-two`	`14`	`14`
`desktop/font_size/button`	`13`	`13`
`desktop/font_size/headline-five`	`14`	`14`
`desktop/font_size/headline-four`	`16`	`16`
`desktop/font_size/headline-three`	`18`	`18`
`desktop/font_size/label`	`9`	`9`
`desktop/font_weight/bold`	`Bold`	`Bold`
`desktop/font_weight/medium`	`Medium`	`Medium`
`desktop/font_weight/regular`	`Regular`	`Regular`
`desktop/line_height/body-five`	`16`	`16`
`desktop/line_height/body-four`	`18`	`18`
`desktop/line_height/body-three`	`20`	`20`
`desktop/line_height/body-two`	`20`	`20`
`desktop/line_height/button`	`20`	`20`
`desktop/line_height/headline-five`	`20`	`20`
`desktop/line_height/headline-four`	`24`	`24`
`desktop/line_height/headline-three`	`24`	`24`
`desktop/line_height/label`	`9`	`9`
`gem/icon-size/icon-M`	`16`	`16`
`gem/letter-spacing/regular`	`0`	`0`

7. Typography (Composite Text Styles)

Variable Name	Value / Definition	Preview
`desktop/body/five (medium)`	`Font(family: "desktop/font/body", style: desktop/font_weight/medium, size: desktop/font_size/body-five, weight: 500, lineHeight: desktop/line_height/body-five, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/body", style: desktop/font_weight/medium, size: desktop/font_size/body-five, weight: 500, lineHeight: desktop/line_height/body-five, letterSpacing: 0)`
`desktop/body/five (regular)`	`Font(family: "desktop/font/body", style: desktop/font_weight/regular, size: desktop/font_size/body-five, weight: 400, lineHeight: desktop/line_height/body-five, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/body", style: desktop/font_weight/regular, size: desktop/font_size/body-five, weight: 400, lineHeight: desktop/line_height/body-five, letterSpacing: 0)`
`desktop/body/four (medium)`	`Font(family: "desktop/font/body", style: desktop/font_weight/medium, size: desktop/font_size/body-four, weight: 500, lineHeight: desktop/line_height/body-four, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/body", style: desktop/font_weight/medium, size: desktop/font_size/body-four, weight: 500, lineHeight: desktop/line_height/body-four, letterSpacing: 0)`
`desktop/body/four (regular)`	`Font(family: "desktop/font/body", style: desktop/font_weight/regular, size: desktop/font_size/body-four, weight: 400, lineHeight: desktop/line_height/body-four, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/body", style: desktop/font_weight/regular, size: desktop/font_size/body-four, weight: 400, lineHeight: desktop/line_height/body-four, letterSpacing: 0)`
`desktop/body/three (bold)`	`Font(family: "desktop/font/body", style: desktop/font_weight/bold, size: desktop/font_size/body-three, weight: 700, lineHeight: desktop/line_height/body-three, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/body", style: desktop/font_weight/bold, size: desktop/font_size/body-three, weight: 700, lineHeight: desktop/line_height/body-three, letterSpacing: 0)`
`desktop/body/three (medium)`	`Font(family: "desktop/font/body", style: desktop/font_weight/medium, size: desktop/font_size/body-three, weight: 500, lineHeight: desktop/line_height/body-three, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/body", style: desktop/font_weight/medium, size: desktop/font_size/body-three, weight: 500, lineHeight: desktop/line_height/body-three, letterSpacing: 0)`
`desktop/body/three (regular)`	`Font(family: "desktop/font/body", style: desktop/font_weight/regular, size: desktop/font_size/body-three, weight: 400, lineHeight: desktop/line_height/body-three, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/body", style: desktop/font_weight/regular, size: desktop/font_size/body-three, weight: 400, lineHeight: desktop/line_height/body-three, letterSpacing: 0)`
`desktop/body/two (medium)`	`Font(family: "desktop/font/body", style: desktop/font_weight/medium, size: desktop/font_size/body-two, weight: 500, lineHeight: desktop/line_height/body-two, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/body", style: desktop/font_weight/medium, size: desktop/font_size/body-two, weight: 500, lineHeight: desktop/line_height/body-two, letterSpacing: 0)`
`desktop/body/two (regular)`	`Font(family: "desktop/font/body", style: desktop/font_weight/regular, size: desktop/font_size/body-two, weight: 400, lineHeight: desktop/line_height/body-two, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/body", style: desktop/font_weight/regular, size: desktop/font_size/body-two, weight: 400, lineHeight: desktop/line_height/body-two, letterSpacing: 0)`
`desktop/headline/five`	`Font(family: "desktop/font/headline", style: desktop/font_weight/medium, size: desktop/font_size/headline-five, weight: 500, lineHeight: desktop/line_height/headline-five, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/headline", style: desktop/font_weight/medium, size: desktop/font_size/headline-five, weight: 500, lineHeight: desktop/line_height/headline-five, letterSpacing: 0)`
`desktop/headline/four`	`Font(family: "desktop/font/headline", style: desktop/font_weight/medium, size: desktop/font_size/headline-four, weight: 500, lineHeight: desktop/line_height/headline-four, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/headline", style: desktop/font_weight/medium, size: desktop/font_size/headline-four, weight: 500, lineHeight: desktop/line_height/headline-four, letterSpacing: 0)`
`desktop/headline/three`	`Font(family: "desktop/font/headline", style: desktop/font_weight/medium, size: desktop/font_size/headline-three, weight: 500, lineHeight: desktop/line_height/headline-three, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/headline", style: desktop/font_weight/medium, size: desktop/font_size/headline-three, weight: 500, lineHeight: desktop/line_height/headline-three, letterSpacing: 0)`
`desktop/special/button`	`Font(family: "desktop/font/body", style: desktop/font_weight/medium, size: desktop/font_size/button, weight: 500, lineHeight: desktop/line_height/button, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/body", style: desktop/font_weight/medium, size: desktop/font_size/button, weight: 500, lineHeight: desktop/line_height/button, letterSpacing: 0)`
`desktop/special/label`	`Font(family: "desktop/font/body", style: desktop/font_weight/bold, size: desktop/font_size/label, weight: 700, lineHeight: desktop/line_height/label, letterSpacing: 0)`	View Definition`Font(family: "desktop/font/body", style: desktop/font_weight/bold, size: desktop/font_size/label, weight: 700, lineHeight: desktop/line_height/label, letterSpacing: 0)`

8. Spacing Tokens

Variable Name	Value / Definition	Preview
`desktop/spacing/10`	`10`	`10`
`desktop/spacing/12`	`12`	`12`
`desktop/spacing/13`	`13`	`13`
`desktop/spacing/14`	`14`	`14`
`desktop/spacing/16`	`16`	`16`
`desktop/spacing/18`	`18`	`18`
`desktop/spacing/2`	`2`	`2`
`desktop/spacing/20`	`20`	`20`
`desktop/spacing/24`	`24`	`24`
`desktop/spacing/3`	`3`	`3`
`desktop/spacing/32`	`32`	`32`
`desktop/spacing/4`	`4`	`4`
`desktop/spacing/5`	`5`	`5`
`desktop/spacing/6`	`6`	`6`
`desktop/spacing/7`	`7`	`7`
`desktop/spacing/8`	`8`	`8`
`desktop/spacing/9`	`9`	`9`

9. Corner Radius Tokens

Variable Name	Value / Definition	Preview
`desktop/corner-radius/10`	`10`	`10`
`desktop/corner-radius/12`	`12`	`12`
`desktop/corner-radius/16`	`16`	`16`
`desktop/corner-radius/2`	`2`	`2`
`desktop/corner-radius/20`	`20`	`20`
`desktop/corner-radius/4`	`4`	`4`
`desktop/corner-radius/6`	`6`	`6`
`desktop/corner-radius/8`	`8`	`8`
`desktop/corner-radius/fully-rounded`	`999`	`999`
`gem/corner-radius/fully-rounded`	`100`	`100`

10. Elevation & Shadows

Variable Name	Value / Definition	Preview
`desktop/elevation/3`	`Effect(type: DROP_SHADOW, color: #0000004D, offset: (desktop/elevation/3/ambient/X, desktop/elevation/3/ambient/Y), radius: desktop/elevation/3/ambient/Blur, spread: desktop/elevation/3/ambient/Spread); Effect(type: DROP_SHADOW, color: #00000026, offset: (desktop/elevation/3/key/X, desktop/elevation/3/key/Y), radius: desktop/elevation/3/key/Blur, spread: desktop/elevation/3/key/Spread)`	View Definition`Effect(type: DROP_SHADOW, color: #0000004D, offset: (desktop/elevation/3/ambient/X, desktop/elevation/3/ambient/Y), radius: desktop/elevation/3/ambient/Blur, spread: desktop/elevation/3/ambient/Spread); Effect(type: DROP_SHADOW, color: #00000026, offset: (desktop/elevation/3/key/X, desktop/elevation/3/key/Y), radius: desktop/elevation/3/key/Blur, spread: desktop/elevation/3/key/Spread)`
`desktop/elevation/3/ambient/Blur`	`3`	`3`
`desktop/elevation/3/ambient/Spread`	`0`	`0`
`desktop/elevation/3/ambient/X`	`0`	`0`
`desktop/elevation/3/ambient/Y`	`1`	`1`
`desktop/elevation/3/key/Blur`	`8`	`8`
`desktop/elevation/3/key/Spread`	`3`	`3`
`desktop/elevation/3/key/X`	`0`	`0`
`desktop/elevation/3/key/Y`	`4`	`4`
`desktop/elevation/4`	`Effect(type: DROP_SHADOW, color: #0000004D, offset: (desktop/elevation/4/ambient/X, desktop/elevation/4/ambient/Y), radius: desktop/elevation/4/ambient/Blur, spread: desktop/elevation/4/ambient/Spread); Effect(type: DROP_SHADOW, color: #00000026, offset: (desktop/elevation/4/key/X, desktop/elevation/4/key/Y), radius: desktop/elevation/4/key/Blur, spread: desktop/elevation/4/key/Spread)`	View Definition`Effect(type: DROP_SHADOW, color: #0000004D, offset: (desktop/elevation/4/ambient/X, desktop/elevation/4/ambient/Y), radius: desktop/elevation/4/ambient/Blur, spread: desktop/elevation/4/ambient/Spread); Effect(type: DROP_SHADOW, color: #00000026, offset: (desktop/elevation/4/key/X, desktop/elevation/4/key/Y), radius: desktop/elevation/4/key/Blur, spread: desktop/elevation/4/key/Spread)`
`desktop/elevation/4/ambient/Blur`	`3`	`3`
`desktop/elevation/4/ambient/Spread`	`0`	`0`
`desktop/elevation/4/ambient/X`	`0`	`0`
`desktop/elevation/4/ambient/Y`	`2`	`2`
`desktop/elevation/4/key/Blur`	`10`	`10`
`desktop/elevation/4/key/Spread`	`4`	`4`
`desktop/elevation/4/key/X`	`0`	`0`
`desktop/elevation/4/key/Y`	`6`	`6`

11. Miscellaneous & Gem Tokens

Variable Name	Value / Definition	Preview
`desktop/admin/g/blue`	`#4285f4`	`#4285f4`
`desktop/admin/g/green`	`#34a853`	`#34a853`
`desktop/admin/g/red`	`#ea4335`	`#ea4335`
`desktop/admin/g/yellow`	`#fbbc05`	`#fbbc05`
`desktop/admin/tab-groups/bookmarks-bar/blue`	`#e8f0fe`	`#e8f0fe`
`desktop/admin/tab-groups/tab-strip/blue`	`#1a73e8`	`#1a73e8`
`desktop/admin/tab-groups/tab-strip/green`	`#188038`	`#188038`
`gem/gradients/angular`	``	``
`gem/gradients/tab-strip`	``	``