Reference

All variables and styles

Every variable, text style and effect style the ACSS plugin for Figma creates, with its code syntax, default value and where it shows up in Figma.

This page lists everything the ACSS plugin for Figma creates when you click Save, using the plugin’s default settings. Use it to find a variable’s exact name, check the code syntax a developer will see in Dev Mode, or see where a variable shows up in Figma.

How to read the tables:

Name is the full variable name. The part before each / is a group in Figma’s Variables panel.
Code syntax, shown under the name, is what Dev Mode shows for the variable. “No code syntax” means the variable has none, usually because it’s a helper value that has no ACSS equivalent.
Default value is the value with default settings. An arrow (→) means the variable points to another variable (an alias), so it changes when that one changes.
Shows up in lists the Figma fields where you can pick the variable (its scopes).

Desktop and mobile versions share the same code syntax. Learn why in Desktop and mobile values.

Color Palette

Ten color families with eight shades each, plus White, Black and Transparent. Brand colors are under Main Colors and status colors under Semantic Colors. Transparency variables you add yourself also go here; they aren’t listed because there are none by default. Set these up on the Color Palette screen.

Show all Color Palette variables

Name and code syntax	Default value	Shows up in
`Main Colors/Primary/Main` `var(--primary)`	#0766EE	All
`Main Colors/Primary/Ultra-Light` `var(--primary-ultra-light)`	#CCDFFF	All
`Main Colors/Primary/Light` `var(--primary-light)`	#98BFFF	All
`Main Colors/Primary/Semi-Light` `var(--primary-semi-light)`	#448BFF	All
`Main Colors/Primary/Hover` `var(--primary-hover)`	#2177FF	All
`Main Colors/Primary/Semi-Dark` `var(--primary-semi-dark)`	#003483	All
`Main Colors/Primary/Dark` `var(--primary-dark)`	#00133A	All
`Main Colors/Primary/Ultra-Dark` `var(--primary-ultra-dark)`	#000310	All
`Main Colors/Secondary/Main` `var(--secondary)`	#8843DB	All
`Main Colors/Secondary/Ultra-Light` `var(--secondary-ultra-light)`	#E3D6FF	All
`Main Colors/Secondary/Light` `var(--secondary-light)`	#C9ACFF	All
`Main Colors/Secondary/Semi-Light` `var(--secondary-semi-light)`	#A664FE	All
`Main Colors/Secondary/Hover` `var(--secondary-hover)`	#9754ED	All
`Main Colors/Secondary/Semi-Dark` `var(--secondary-semi-dark)`	#4D008A	All
`Main Colors/Secondary/Dark` `var(--secondary-dark)`	#1F003E	All
`Main Colors/Secondary/Ultra-Dark` `var(--secondary-ultra-dark)`	#060012	All
`Main Colors/Tertiary/Main` `var(--tertiary)`	#008660	All
`Main Colors/Tertiary/Ultra-Light` `var(--tertiary-ultra-light)`	#5DFFC3	All
`Main Colors/Tertiary/Light` `var(--tertiary-light)`	#00DFA2	All
`Main Colors/Tertiary/Semi-Light` `var(--tertiary-semi-light)`	#00A97A	All
`Main Colors/Tertiary/Hover` `var(--tertiary-hover)`	#00976D	All
`Main Colors/Tertiary/Semi-Dark` `var(--tertiary-semi-dark)`	#004631	All
`Main Colors/Tertiary/Dark` `var(--tertiary-dark)`	#001C11	All
`Main Colors/Tertiary/Ultra-Dark` `var(--tertiary-ultra-dark)`	#000502	All
`Main Colors/Accent/Main` `var(--accent)`	#9D6300	All
`Main Colors/Accent/Ultra-Light` `var(--accent-ultra-light)`	#FFD6A8	All
`Main Colors/Accent/Light` `var(--accent-light)`	#FFA82A	All
`Main Colors/Accent/Semi-Light` `var(--accent-semi-light)`	#C57D00	All
`Main Colors/Accent/Hover` `var(--accent-hover)`	#B17000	All
`Main Colors/Accent/Semi-Dark` `var(--accent-semi-dark)`	#533200	All
`Main Colors/Accent/Dark` `var(--accent-dark)`	#221200	All
`Main Colors/Accent/Ultra-Dark` `var(--accent-ultra-dark)`	#070200	All
`Main Colors/Base/Main` `var(--base)`	#0074C8	All
`Main Colors/Base/Ultra-Light` `var(--base-ultra-light)`	#C6E1FF	All
`Main Colors/Base/Light` `var(--base-light)`	#89C3FF	All
`Main Colors/Base/Semi-Light` `var(--base-semi-light)`	#0092F9	All
`Main Colors/Base/Hover` `var(--base-hover)`	#0083E0	All
`Main Colors/Base/Semi-Dark` `var(--base-semi-dark)`	#003C6B	All
`Main Colors/Base/Dark` `var(--base-dark)`	#00172E	All
`Main Colors/Base/Ultra-Dark` `var(--base-ultra-dark)`	#00030B	All
`Main Colors/Neutral/Main` `var(--neutral)`	#717171	All
`Main Colors/Neutral/Ultra-Light` `var(--neutral-ultra-light)`	#DEDEDE	All
`Main Colors/Neutral/Light` `var(--neutral-light)`	#BEBEBE	All
`Main Colors/Neutral/Semi-Light` `var(--neutral-semi-light)`	#8F8F8F	All
`Main Colors/Neutral/Hover` `var(--neutral-hover)`	#808080	All
`Main Colors/Neutral/Semi-Dark` `var(--neutral-semi-dark)`	#3A3A3A	All
`Main Colors/Neutral/Dark` `var(--neutral-dark)`	#161616	All
`Main Colors/Neutral/Ultra-Dark` `var(--neutral-ultra-dark)`	#030303	All
`Semantic Colors/Success/Main` `var(--success)`	#00893D	All
`Semantic Colors/Success/Ultra-Light` `var(--success-ultra-light)`	#77FF9B	All
`Semantic Colors/Success/Light` `var(--success-light)`	#02E36A	All
`Semantic Colors/Success/Semi-Light` `var(--success-semi-light)`	#00AC4F	All
`Semantic Colors/Success/Hover` `var(--success-hover)`	#009A46	All
`Semantic Colors/Success/Semi-Dark` `var(--success-semi-dark)`	#00481D	All
`Semantic Colors/Success/Dark` `var(--success-dark)`	#001D07	All
`Semantic Colors/Success/Ultra-Dark` `var(--success-ultra-dark)`	#000501	All
`Semantic Colors/Info/Main` `var(--info)`	#0079B3	All
`Semantic Colors/Info/Ultra-Light` `var(--info-ultra-light)`	#BEE4FF	All
`Semantic Colors/Info/Light` `var(--info-light)`	#76C7FF	All
`Semantic Colors/Info/Semi-Light` `var(--info-semi-light)`	#0099E0	All
`Semantic Colors/Info/Hover` `var(--info-hover)`	#0089C9	All
`Semantic Colors/Info/Semi-Dark` `var(--info-semi-dark)`	#003F60	All
`Semantic Colors/Info/Dark` `var(--info-dark)`	#001828	All
`Semantic Colors/Info/Ultra-Dark` `var(--info-ultra-dark)`	#000409	All
`Semantic Colors/Warning/Main` `var(--warning)`	#986600	All
`Semantic Colors/Warning/Ultra-Light` `var(--warning-ultra-light)`	#FFD7A0	All
`Semantic Colors/Warning/Light` `var(--warning-light)`	#FCAB00	All
`Semantic Colors/Warning/Semi-Light` `var(--warning-semi-light)`	#BF8100	All
`Semantic Colors/Warning/Hover` `var(--warning-hover)`	#AC7300	All
`Semantic Colors/Warning/Semi-Dark` `var(--warning-semi-dark)`	#513400	All
`Semantic Colors/Warning/Dark` `var(--warning-dark)`	#211300	All
`Semantic Colors/Warning/Ultra-Dark` `var(--warning-ultra-dark)`	#060300	All
`Semantic Colors/Danger/Main` `var(--danger)`	#D40924	All
`Semantic Colors/Danger/Ultra-Light` `var(--danger-ultra-light)`	#FFD1CD	All
`Semantic Colors/Danger/Light` `var(--danger-light)`	#FFA098	All
`Semantic Colors/Danger/Semi-Light` `var(--danger-semi-light)`	#F94144	All
`Semantic Colors/Danger/Hover` `var(--danger-hover)`	#E62B34	All
`Semantic Colors/Danger/Semi-Dark` `var(--danger-semi-dark)`	#73000D	All
`Semantic Colors/Danger/Dark` `var(--danger-dark)`	#320003	All
`Semantic Colors/Danger/Ultra-Dark` `var(--danger-ultra-dark)`	#0D0000	All
`Transparent` No code syntax	#FFFFFF / 0%	Frame fill, Shape fill, Stroke, Text fill
`White` `var(--white)`	#FFFFFF	Frame fill, Shape fill, Stroke, Text fill
`Black` `var(--black)`	#000000	Frame fill, Shape fill, Stroke, Text fill

Spacing

The spacing scale, section spacing and contextual gaps for desktop and mobile. Set up on the Spacing screen.

Name and code syntax	Default value	Shows up in
`Desktop/D Space XS` `var(--space-xs)`	13.33	Gap and padding, Text content, Paragraph spacing
`Desktop/D Space S` `var(--space-s)`	20	Gap and padding, Text content, Paragraph spacing
`Desktop/D Space M` `var(--space-m)`	30	Gap and padding, Text content, Paragraph spacing
`Desktop/D Space L` `var(--space-l)`	45	Gap and padding, Text content, Paragraph spacing
`Desktop/D Space XL` `var(--space-xl)`	67.5	Gap and padding, Text content, Paragraph spacing
`Desktop/D Space XXL` `var(--space-xxl)`	101.25	Gap and padding, Text content, Paragraph spacing
`Mobile/M Space XS` `var(--space-xs)`	13.51	Gap and padding, Text content, Paragraph spacing
`Mobile/M Space S` `var(--space-s)`	18	Gap and padding, Text content, Paragraph spacing
`Mobile/M Space M` `var(--space-m)`	24	Gap and padding, Text content, Paragraph spacing
`Mobile/M Space L` `var(--space-l)`	31.99	Gap and padding, Text content, Paragraph spacing
`Mobile/M Space XL` `var(--space-xl)`	42.65	Gap and padding, Text content, Paragraph spacing
`Mobile/M Space XXL` `var(--space-xxl)`	56.85	Gap and padding, Text content, Paragraph spacing
`Desktop Base Spacing Value` No code syntax	30	Text content
`Desktop Spacing Scale Ratio` No code syntax	1.5	Text content
`Desktop/Desktop Section Spacing Multiplier` No code syntax	3	Text content
`Desktop/D Section Space XS` `var(--section-xs)`	40	Gap and padding, Text content
`Desktop/D Section Space S` `var(--section-s)`	60	Gap and padding, Text content
`Desktop/D Section Space M` `var(--section-m)`	90	Gap and padding, Text content
`Desktop/D Section Space L` `var(--section-l)`	135	Gap and padding, Text content
`Desktop/D Section Space XL` `var(--section-xl)`	202.5	Gap and padding, Text content
`Desktop/D Section Space XXL` `var(--section-xxl)`	303.75	Gap and padding, Text content
`Desktop/D Section Gutter` `var(--d-section-gutter)`	60	Gap and padding, Text content
`Mobile Base Spacing Value` No code syntax	24	Text content
`Mobile Spacing Scale Ratio` No code syntax	1.33	Text content
`Mobile/Mobile Section Spacing Multiplier` No code syntax	2	Text content
`Mobile/M Section Space XS` `var(--section-xs)`	27.01	Gap and padding, Text content
`Mobile/M Section Space S` `var(--section-s)`	36.01	Gap and padding, Text content
`Mobile/M Section Space M` `var(--section-m)`	48	Gap and padding, Text content
`Mobile/M Section Space L` `var(--section-l)`	63.98	Gap and padding, Text content
`Mobile/M Section Space XL` `var(--section-xl)`	85.29	Gap and padding, Text content
`Mobile/M Section Space XXL` `var(--section-xxl)`	113.69	Gap and padding, Text content
`Mobile/M Section Gutter` `var(--m-section-gutter)`	16	Gap and padding, Text content
`Desktop/D Container Gap` No code syntax	→ Desktop/D Space XXL	Gap and padding, Text content
`Desktop/D Content Gap` No code syntax	→ Desktop/D Space M	Gap and padding, Text content
`Desktop/D Grid Gap` No code syntax	→ Desktop/D Space M	Gap and padding, Text content
`Mobile/M Container Gap` No code syntax	→ Mobile/M Space XXL	Gap and padding, Text content
`Mobile/M Content Gap` No code syntax	→ Mobile/M Space M	Gap and padding, Text content
`Mobile/M Grid Gap` No code syntax	→ Mobile/M Space M	Gap and padding, Text content

Layout

Content width, the Width 10–90 scale and the full website width. Set up on the Layout screen.

Name and code syntax	Default value	Shows up in
`D Content Width` `var(--content-width)`	1280	Width and height, Text content
`M Content Width` `var(--content-width)`	390	Width and height, Text content
`D Width 10` `var(--width-10)`	128	Width and height, Text content
`D Width 20` `var(--width-20)`	256	Width and height, Text content
`D Width 30` `var(--width-30)`	384	Width and height, Text content
`D Width 40` `var(--width-40)`	512	Width and height, Text content
`D Width 50` `var(--width-50)`	640	Width and height, Text content
`D Width 60` `var(--width-60)`	768	Width and height, Text content
`D Width 70` `var(--width-70)`	896	Width and height, Text content
`D Width 80` `var(--width-80)`	1024	Width and height, Text content
`D Width 90` `var(--width-90)`	1152	Width and height, Text content
`M Width 10` `var(--width-10)`	39	Width and height, Text content
`M Width 20` `var(--width-20)`	78	Width and height, Text content
`M Width 30` `var(--width-30)`	117	Width and height, Text content
`M Width 40` `var(--width-40)`	156	Width and height, Text content
`M Width 50` `var(--width-50)`	195	Width and height, Text content
`M Width 60` `var(--width-60)`	234	Width and height, Text content
`M Width 70` `var(--width-70)`	273	Width and height, Text content
`M Width 80` `var(--width-80)`	312	Width and height, Text content
`M Width 90` `var(--width-90)`	351	Width and height, Text content
`D Website Width` No code syntax	1400	Width and height, Text content
`M Website Width` No code syntax	422	Width and height, Text content

Typography

Font sizes, line heights, weights, letter spacing, font families and heading and text colors. Set up on the Typography screen. The matching text styles are listed under Text styles.

Show all Typography variables

Name and code syntax	Default value	Shows up in
`Headings/Heading Font Family` No code syntax	Inter	Text content, Font family
`Text/Text Font Family` No code syntax	Inter	Text content, Font family
`Headings/D H1` `var(--h1)`	31	Font size, Text content
`Headings/D H2` `var(--h2)`	26	Font size, Text content
`Headings/D H3` `var(--h3)`	22	Font size, Text content
`Headings/D H4` `var(--h4)`	18	Font size, Text content
`Headings/D H5` `var(--h5)`	15	Font size, Text content
`Headings/D H6` `var(--h6)`	13	Font size, Text content
`Headings/M H1` `var(--h1)`	28	Font size, Text content
`Headings/M H2` `var(--h2)`	23	Font size, Text content
`Headings/M H3` `var(--h3)`	19	Font size, Text content
`Headings/M H4` `var(--h4)`	16	Font size, Text content
`Headings/M H5` `var(--h5)`	13	Font size, Text content
`Headings/M H6` `var(--h6)`	11	Font size, Text content
`Headings/D H1 Line Height` No code syntax	40	Line height
`Headings/D H2 Line Height` No code syntax	34	Line height
`Headings/D H3 Line Height` No code syntax	29	Line height
`Headings/D H4 Line Height` No code syntax	23	Line height
`Headings/D H5 Line Height` No code syntax	20	Line height
`Headings/D H6 Line Height` No code syntax	17	Line height
`Headings/M H1 Line Height` No code syntax	36	Line height
`Headings/M H2 Line Height` No code syntax	30	Line height
`Headings/M H3 Line Height` No code syntax	25	Line height
`Headings/M H4 Line Height` No code syntax	21	Line height
`Headings/M H5 Line Height` No code syntax	17	Line height
`Headings/M H6 Line Height` No code syntax	14	Line height
`Text/D Text XXL` `var(--text-xxl)`	31	Font size, Text content
`Text/D Text XL` `var(--text-xl)`	26	Font size, Text content
`Text/D Text L` `var(--text-l)`	22	Font size, Text content
`Text/D Text M` `var(--text-m)`	18	Font size, Text content
`Text/D Text S` `var(--text-s)`	15	Font size, Text content
`Text/D Text XS` `var(--text-xs)`	13	Font size, Text content
`Text/M Text XXL` `var(--text-xxl)`	28	Font size, Text content
`Text/M Text XL` `var(--text-xl)`	23	Font size, Text content
`Text/M Text L` `var(--text-l)`	19	Font size, Text content
`Text/M Text M` `var(--text-m)`	16	Font size, Text content
`Text/M Text S` `var(--text-s)`	13	Font size, Text content
`Text/M Text XS` `var(--text-xs)`	11	Font size, Text content
`Text/D Text XXL Line Height` No code syntax	40	Line height
`Text/D Text XL Line Height` No code syntax	34	Line height
`Text/D Text L Line Height` No code syntax	29	Line height
`Text/D Text M Line Height` No code syntax	23	Line height
`Text/D Text S Line Height` No code syntax	20	Line height
`Text/D Text XS Line Height` No code syntax	17	Line height
`Text/M Text XXL Line Height` No code syntax	36	Line height
`Text/M Text XL Line Height` No code syntax	30	Line height
`Text/M Text L Line Height` No code syntax	25	Line height
`Text/M Text M Line Height` No code syntax	21	Line height
`Text/M Text S Line Height` No code syntax	17	Line height
`Text/M Text XS Line Height` No code syntax	14	Line height
`Headings/Heading Letter Spacing` No code syntax	0	Letter spacing
`Headings/H1 Letter Spacing` No code syntax	0	Letter spacing
`Headings/H2 Letter Spacing` No code syntax	0	Letter spacing
`Headings/H3 Letter Spacing` No code syntax	0	Letter spacing
`Headings/H4 Letter Spacing` No code syntax	0	Letter spacing
`Headings/H5 Letter Spacing` No code syntax	0	Letter spacing
`Headings/H6 Letter Spacing` No code syntax	0	Letter spacing
`Headings/Heading Font Weight` No code syntax	400	Font weight
`Headings/H1 Font Weight` No code syntax	400	Font weight
`Headings/H2 Font Weight` No code syntax	400	Font weight
`Headings/H3 Font Weight` No code syntax	400	Font weight
`Headings/H4 Font Weight` No code syntax	400	Font weight
`Headings/H5 Font Weight` No code syntax	400	Font weight
`Headings/H6 Font Weight` No code syntax	400	Font weight
`Text/Text Letter Spacing` No code syntax	0	Letter spacing
`Text/Text XXL Letter Spacing` No code syntax	0	Letter spacing
`Text/Text XL Letter Spacing` No code syntax	0	Letter spacing
`Text/Text L Letter Spacing` No code syntax	0	Letter spacing
`Text/Text M Letter Spacing` No code syntax	0	Letter spacing
`Text/Text S Letter Spacing` No code syntax	0	Letter spacing
`Text/Text XS Letter Spacing` No code syntax	0	Letter spacing
`Text/Text Font Weight` No code syntax	400	Font weight
`Text/Text XXL Font Weight` No code syntax	400	Font weight
`Text/Text XL Font Weight` No code syntax	400	Font weight
`Text/Text L Font Weight` No code syntax	400	Font weight
`Text/Text M Font Weight` No code syntax	400	Font weight
`Text/Text S Font Weight` No code syntax	400	Font weight
`Text/Text XS Font Weight` No code syntax	400	Font weight
`Headings/Heading Color` `var(--heading-color)`	→ Main Colors/Neutral/Ultra-Dark	Text fill, Stroke
`Headings/H1 Color` `var(--h1-color)`	→ Main Colors/Neutral/Ultra-Dark	Text fill, Stroke
`Headings/H2 Color` `var(--h2-color)`	→ Main Colors/Neutral/Ultra-Dark	Text fill, Stroke
`Headings/H3 Color` `var(--h3-color)`	→ Main Colors/Neutral/Ultra-Dark	Text fill, Stroke
`Headings/H4 Color` `var(--h4-color)`	→ Main Colors/Neutral/Ultra-Dark	Text fill, Stroke
`Headings/H5 Color` `var(--h5-color)`	→ Main Colors/Neutral/Ultra-Dark	Text fill, Stroke
`Headings/H6 Color` `var(--h6-color)`	→ Main Colors/Neutral/Ultra-Dark	Text fill, Stroke
`Text/Text Color` `var(--body-color)`	→ Main Colors/Neutral/Ultra-Dark	Text fill, Stroke

Borders

Corner radius scale, border width and border colors. Set up on the Borders screen.

Name and code syntax	Default value	Shows up in
`Global Radius` `var(--radius)`	6	Corner radius, Text content
`Radius Scale` No code syntax	1.33	Text content
`Border Width` `var(--border-size)`	1	Stroke width
`Border Color Light` `var(--border-color-light)`	→ Main Colors/Neutral/Light	Stroke
`Border Color Dark` `var(--border-color-dark)`	→ Main Colors/Neutral/Dark	Stroke
`Radius XS` `var(--radius-xs)`	3.38	Corner radius, Text content
`Radius S` `var(--radius-s)`	4.5	Corner radius, Text content
`Radius M` `var(--radius-m)`	6	Corner radius, Text content
`Radius L` `var(--radius-l)`	8	Corner radius, Text content
`Radius XL` `var(--radius-xl)`	10.66	Corner radius, Text content
`Radius XXL` `var(--radius-xxl)`	14.21	Corner radius, Text content
`Radius 50%` `var(--radius-50)`	999	Corner radius

Backgrounds & Text

Background and text colors for light and dark areas of a design. All of them point to Color Palette variables. Set up on the Backgrounds & Text screen.

Name and code syntax	Default value	Shows up in
`Backgrounds/BG Default` No code syntax	→ Main Colors/Neutral/Ultra-Light	Frame fill, Shape fill, Effect color
`Backgrounds/BG Dark` `var(--bg-dark)`	→ Main Colors/Neutral/Dark	Frame fill, Shape fill, Effect color
`Backgrounds/BG Ultra Dark` `var(--bg-ultra-dark)`	→ Main Colors/Neutral/Ultra-Dark	Frame fill, Shape fill, Effect color
`Backgrounds/BG Light` `var(--bg-light)`	→ Main Colors/Neutral/Light	Frame fill, Shape fill, Effect color
`Backgrounds/BG Ultra Light` `var(--bg-ultra-light)`	→ Main Colors/Neutral/Ultra-Light	Frame fill, Shape fill, Effect color
`Text/Text Dark` `var(--text-dark)`	→ Main Colors/Neutral/Ultra-Dark	Text fill, Stroke
`Text/Text Dark Muted` `var(--text-dark-muted)`	→ Main Colors/Neutral/Dark	Text fill, Stroke
`Text/Text Light` `var(--text-light)`	→ Main Colors/Neutral/Ultra-Light	Text fill, Stroke
`Text/Text Light Muted` `var(--text-light-muted)`	→ Main Colors/Neutral/Light	Text fill, Stroke

Buttons & Links

Button padding, gaps, minimum width, borders and radius for the S, M and L sizes, and the link font weight. Set up on the Buttons & Links screen.

Name and code syntax	Default value	Shows up in
`Buttons/D Btn Y Padding S` No code syntax	12.75	Gap and padding
`Buttons/D Btn X Padding S` No code syntax	18.75	Gap and padding
`Buttons/D Btn Gap S` No code syntax	3.75	Gap and padding
`Buttons/M Btn Y Padding S` No code syntax	11.05	Gap and padding
`Buttons/M Btn X Padding S` No code syntax	16.25	Gap and padding
`Buttons/M Btn Gap S` No code syntax	3.25	Gap and padding
`Buttons/D Btn Y Padding M` No code syntax	15.3	Gap and padding
`Buttons/D Btn X Padding M` No code syntax	22.5	Gap and padding
`Buttons/D Btn Gap M` No code syntax	4.5	Gap and padding
`Buttons/M Btn Y Padding M` No code syntax	13.6	Gap and padding
`Buttons/M Btn X Padding M` No code syntax	20	Gap and padding
`Buttons/M Btn Gap M` No code syntax	4	Gap and padding
`Buttons/D Btn Y Padding L` No code syntax	18.7	Gap and padding
`Buttons/D Btn X Padding L` No code syntax	27.5	Gap and padding
`Buttons/D Btn Gap L` No code syntax	5.5	Gap and padding
`Buttons/M Btn Y Padding L` No code syntax	16.15	Gap and padding
`Buttons/M Btn X Padding L` No code syntax	23.75	Gap and padding
`Buttons/M Btn Gap L` No code syntax	4.75	Gap and padding
`Buttons/Btn Minimum Width` `var(--btn-min-width)`	140	Width and height
`Buttons/Btn Border Width` `var(--btn-border-width)`	1	Stroke width
`Buttons/Btn Outline Border Width` No code syntax	3	Effects
`Buttons/Btn Radius` `var(--btn-border-radius)`	→ Global Radius	Corner radius
`Links/Link Font Weight` No code syntax	400	Font weight

Forms

Spacing, borders and colors for form labels, inputs and help text, in light and dark styles. Set up on the Forms screen.

Name and code syntax	Default value	Shows up in
`Label/D Label Vertical Padding` No code syntax	→ Desktop/D Space M	Gap and padding
`Label/M Label Vertical Padding` No code syntax	→ Mobile/M Space M	Gap and padding
`Label/D Label Horizontal Padding` No code syntax	→ Desktop/D Space M	Gap and padding
`Label/M Label Horizontal Padding` No code syntax	→ Mobile/M Space M	Gap and padding
`Label/D Label Bottom Margin` No code syntax	8	Gap and padding
`Label/M Label Bottom Margin` No code syntax	6	Gap and padding
`D Form Input Y Padding` No code syntax	→ Desktop/D Space M	Gap and padding
`M Form Input Y Padding` No code syntax	→ Mobile/M Space M	Gap and padding
`D Form Input X Padding` No code syntax	→ Desktop/D Space M	Gap and padding
`M Form Input X Padding` No code syntax	→ Mobile/M Space M	Gap and padding
`Form Input Border Radius` No code syntax	→ Global Radius	Corner radius
`Form Input Border Width Vertical` No code syntax	1	Stroke width
`Form Input Border Width Horizontal` No code syntax	1	Stroke width
`Help Text/D Form Help Margin` No code syntax	8	Gap and padding
`Help Text/M Form Help Margin` No code syntax	6	Gap and padding
`Label/Form Label Text Color Light` No code syntax	→ Main Colors/Neutral/Dark	Text fill, Stroke
`Label/Form Label Background Color Light` No code syntax	→ Transparent	Frame fill, Shape fill
`Label/Form Label Asterisk Color Light` No code syntax	→ Semantic Colors/Danger/Main	Frame fill, Shape fill, Text fill, Stroke
`Input/Form Input Text Color Light` No code syntax	→ Main Colors/Neutral/Dark	Text fill, Stroke
`Input/Form Input Placeholder Color Light` No code syntax	→ Main Colors/Neutral/Dark	Text fill, Stroke
`Input/Form Input Placeholder Opacity Light` No code syntax	50	Opacity
`Input/Form Input Background Color Light` No code syntax	→ Main Colors/Neutral/Ultra-Light	Frame fill, Shape fill
`Input/Form Input Border Color Light` No code syntax	→ Main Colors/Neutral/Light	Stroke
`Help Text/Form Help Text Color Light` No code syntax	→ Main Colors/Neutral/Dark	Text fill, Stroke, Frame fill, Shape fill
`Label/Form Label Text Color Dark` No code syntax	→ Main Colors/Neutral/Ultra-Light	Text fill, Stroke
`Label/Form Label Background Color Dark` No code syntax	→ Transparent	Frame fill, Shape fill
`Label/Form Label Asterisk Color Dark` No code syntax	→ Semantic Colors/Danger/Light	Frame fill, Shape fill, Text fill, Stroke
`Input/Form Input Text Color Dark` No code syntax	→ Main Colors/Neutral/Ultra-Light	Text fill, Stroke
`Input/Form Input Placeholder Color Dark` No code syntax	→ Main Colors/Neutral/Ultra-Light	Text fill, Stroke
`Input/Form Input Placeholder Opacity Dark` No code syntax	50	Opacity
`Input/Form Input Background Color Dark` No code syntax	→ Main Colors/Neutral/Dark	Frame fill, Shape fill
`Input/Form Input Border Color Dark` No code syntax	→ Main Colors/Neutral/Main	Stroke
`Help Text/Form Help Text Color Dark` No code syntax	→ Main Colors/Neutral/Light	Text fill, Stroke, Frame fill, Shape fill

Text styles

Text styles hold font, size, line height, letter spacing and text case. They don’t include a color, so apply a color variable to the text separately. Text styles aren’t linked to variables: after changing typography settings, click Save to update them.

Name	Default
`Headings/D H1`	Inter Regular, 31 px, line height 40px
`Headings/D H2`	Inter Regular, 26 px, line height 34px
`Headings/D H3`	Inter Regular, 22 px, line height 29px
`Headings/D H4`	Inter Regular, 18 px, line height 23px
`Headings/D H5`	Inter Regular, 15 px, line height 20px
`Headings/D H6`	Inter Regular, 13 px, line height 17px
`Headings/M H1`	Inter Regular, 28 px, line height 36px
`Headings/M H2`	Inter Regular, 23 px, line height 30px
`Headings/M H3`	Inter Regular, 19 px, line height 25px
`Headings/M H4`	Inter Regular, 16 px, line height 21px
`Headings/M H5`	Inter Regular, 13 px, line height 17px
`Headings/M H6`	Inter Regular, 11 px, line height 14px
`Text/D Text XXL`	Inter Regular, 31 px, line height 40px
`Text/D Text XL`	Inter Regular, 26 px, line height 34px
`Text/D Text L`	Inter Regular, 22 px, line height 29px
`Text/D Text M`	Inter Regular, 18 px, line height 23px
`Text/D Text S`	Inter Regular, 15 px, line height 20px
`Text/D Text XS`	Inter Regular, 13 px, line height 17px
`Text/M Text XXL`	Inter Regular, 28 px, line height 36px
`Text/M Text XL`	Inter Regular, 23 px, line height 30px
`Text/M Text L`	Inter Regular, 19 px, line height 25px
`Text/M Text M`	Inter Regular, 16 px, line height 21px
`Text/M Text S`	Inter Regular, 13 px, line height 17px
`Text/M Text XS`	Inter Regular, 11 px, line height 14px
`Buttons/D Btn Text S`	Inter Regular, 15 px, line height Auto
`Buttons/M Btn Text S`	Inter Regular, 13 px, line height Auto
`Buttons/D Btn Text M`	Inter Regular, 18 px, line height Auto
`Buttons/M Btn Text M`	Inter Regular, 16 px, line height Auto
`Buttons/D Btn Text L`	Inter Regular, 22 px, line height Auto
`Buttons/M Btn Text L`	Inter Regular, 19 px, line height Auto
`Forms/D Form Label`	Inter Regular, 18 px, line height 23px
`Forms/M Form Label`	Inter Regular, 16 px, line height 21px
`Forms/D Form Input`	Inter Regular, 18 px, line height 27px
`Forms/M Form Input`	Inter Regular, 16 px, line height 24px
`Forms/D Form Help Text`	Inter Regular, 15 px, line height 18px
`Forms/M Form Help Text`	Inter Regular, 13 px, line height 16px

Effect styles

The three shadow styles from the Shadows screen. Shadows are effect styles only; there are no shadow variables.

Name	Default
`Shadows/Shadow S`	Drop shadow: X 0, Y 2, blur 2, spread 0, #161616 / 25%
`Shadows/Shadow M`	Drop shadow: X 0, Y 4, blur 4, spread 0, #161616 / 25%
`Shadows/Shadow L`	Drop shadow: X 0, Y 8, blur 8, spread 0, #161616 / 25%