Size

44px
66px
88px
1212px
1616px
2020px
2424px
2828px
3232px
4040px
4444px
4848px
5656px
6464px
7272px
8080px
8888px
9696px

Purpose

The vocabulary of widths and heights that are not distances between things: how tall a control is, how big an icon is, the smallest box a finger can hit, how wide a column of content may grow, and the widths at which a layout may change shape. Spacing says how far apart; size says how big.

How it is structured

Primitives come in three runs. A run of small steps for controls, icons and boxes; a run of widths for columns, panels and pages; and a run of viewport widths that name the structural breakpoints. They share a group because they are all sizes, but they are read by different roles and are not interchangeable.

The semantic roles say what is being sized:

Control — the height of interactive things: buttons, fields, selects.
Icon — the box an icon glyph is drawn into, from the smallest inline marker to the large decorative size.
Target — the tap-area floors: the minimum the accessibility guidelines allow, and a more comfortable target for primary touch actions.
Selection — the box of a checkbox or radio.
Mark — the size of a small fixed mark inside a component: a dot, a bar, a key.
Content — the widths a column of content may grow to, from a narrow prose measure to the full page line.
Layout — a page's container widths, the measure of its text, the least width of a column, and the header's height.
List, tooltip and table — the most a scrolling list grows, the widest a tooltip gets, and the narrowest and widest a column of prose in a table.
Sidebar — the width of the expanded sidebar, authored here because Figma has no place for it.

Tiers

Both tiers reach CSS. Use a semantic role wherever the thing being sized has a name in the list above, because that is what lets a density change move every control together. A primitive step is for a fixed internal measurement with no role — the width of a caret, the thickness of a progress bar.

The viewport steps are primitives with no semantic layer, on purpose: a breakpoint is a structural fact about a layout, not a design intent, and a breakpoint belongs where the content needs a structural change rather than at a named device. The semantics that do sit on viewport steps are the breakpoints, documented under Breakpoints.

Context behavior

Density changes the control heights and nothing else in this group. Compact controls are one step shorter, except the smallest, which does not shrink because it is already at the minimum target floor. Icons, targets, selection boxes and content widths are the same under both densities, and target floors in particular must never compress.

A touch screen keeps every size. Nothing is drawn bigger or further apart for a finger. Instead, a control drawn smaller than the comfortable target takes an invisible press area round it, out to the comfortable target where nothing else pressable stands closer, and halfway to its neighbour where one does, so no two areas meet. No press area is ever smaller than the minimum target. A laptop with a touch screen and a mouse keeps the mouse behaviour.

The header's height is the one size that follows the screen: it has a phone value and a desktop value, which switch at the layout breakpoint and follow the layout attribute, as the components' narrow and wide forms do.

Theme and text size do not touch size.

Usage rules

Do

Size a control by its role, never by a primitive, so that density reaches it.
Give every interactive element at least the minimum target, and primary touch actions the comfortable target, even when the visible control is smaller. Padding or a pseudo-element can carry the difference.
Size icons by the icon roles, and let them inherit their color from the text they sit beside.
Cap reading text at a content width. Readability depends on line length, and the content roles are the sanctioned measures.

Don't

Write a pixel width or height in component CSS. The conformance checker rejects it.
Use a control height as a spacing value, or a spacing step as a height. The two groups look similar in value and mean different things.
Reference a viewport step inside a component to change its own layout. A component responds to the space it is given with a container query; viewport steps are for page-level structure.
Shrink a target below the minimum floor for any density.
Put a viewport step's custom property in a media query. CSS cannot read a custom property in a media query's condition, so take the number from the build's TypeScript or JSON output at build time instead.
Size a checkbox or radio box with an icon size, or an icon with a selection size. Some match in value today by coincidence, and either can change without the other.

103 tokens in 12 groups. Open a group to see its tokens. The button beside a CSS name copies it, ready to paste; open a row for what the token is for and which components read it.

Scaleprimitive · 18 tokens

Size tokens: Scale
Token	Value	CSS
`4`	4px	`--smbk-size-4`
Raw size step, 4 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.4` Used by Curve editor Line chart Progress ring Radio Ruler Sidebar Slider Table
`6`	6px	`--smbk-size-6`
Raw size step, 6 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.6` Used by Meter Progress ring Radio Ruler Slider Sparkline Tree view
`8`	8px	`--smbk-size-8`
Raw size step, 8 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.8` Used by Capacity meter Diff stat Line chart Sidebar Slider Status dot Timeline
`12`	12px	`--smbk-size-12`
Raw size step, 12 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.12` Used by Curve editor Heatmap Legend item Slider Switch
`16`	16px	`--smbk-size-16`
Raw size step, 16 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.16` Used by Card Color swatch Slider Splitter
`20`	20px	`--smbk-size-20`
Raw size step, 20 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.20` Used by Avatar Calendar Capacity meter Color slider Color swatch List Picture tile Toolbar
`24`	24px	`--smbk-size-24`
Raw size step, 24 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.24` Used by Avatar Avatar group Chip Color slider Color swatch Corner sample Curve editor Dropdown Ruler Splitter Toolbar
`28`	28px	`--smbk-size-28`
Raw size step, 28 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.28` Used by Heatmap Uptime bar
`32`	32px	`--smbk-size-32`
Raw size step, 32 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.32` Used by Avatar Chip Color swatch Ruler Skeleton Sparkline
`40`	40px	`--smbk-size-40`
Raw size step, 40 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.40` Used by Avatar Color range Skeleton Table
`44`	44px	`--smbk-size-44`
Raw size step, 44 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.44` Used by Its semantic tokens, never a component
`48`	48px	`--smbk-size-48`
Raw size step, 48 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.48` Used by Contrast pair Shadow editor Skeleton Table
`56`	56px	`--smbk-size-56`
Raw size step, 56 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.56` Used by Skeleton Table
`64`	64px	`--smbk-size-64`
Raw size step, 64 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.64` Used by App bar Avatar Shadow editor Skeleton Slider Table
`72`	72px	`--smbk-size-72`
Raw size step, 72 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.72` Used by Page header Table
`80`	80px	`--smbk-size-80`
Raw size step, 80 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.80` Used by Combobox Table
`88`	88px	`--smbk-size-88`
Raw size step, 88 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.88` Used by Avatar Page header Picture tile Table
`96`	96px	`--smbk-size-96`
Raw size step, 96 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here. Token `size.96` Used by Table

Viewportprimitive · 6 tokens

Size tokens: Viewport
Token	Value	CSS
`320`	320px	`--smbk-size-viewport-320`
Raw screen width, 320 px: the breakpoints point here. Token `size.viewport.320` Used by Its semantic tokens, never a component
`640`	640px	`--smbk-size-viewport-640`
Raw screen width, 640 px: the breakpoints point here. Token `size.viewport.640` Used by Its semantic tokens, never a component
`768`	768px	`--smbk-size-viewport-768`
Raw screen width, 768 px: the breakpoints point here. Token `size.viewport.768` Used by Its semantic tokens, never a component
`1024`	1024px	`--smbk-size-viewport-1024`
Raw screen width, 1024 px: the breakpoints point here. Token `size.viewport.1024` Used by Its semantic tokens, never a component
`1280`	1280px	`--smbk-size-viewport-1280`
Raw screen width, 1280 px: the breakpoints point here. Token `size.viewport.1280` Used by Its semantic tokens, never a component
`1440`	1440px	`--smbk-size-viewport-1440`
Raw screen width, 1440 px: the breakpoints point here. Token `size.viewport.1440` Used by Its semantic tokens, never a component

Widthprimitive · 12 tokens

Size tokens: Width
Token	Value	CSS
`240`	240px	`--smbk-size-width-240`
A fixed width of 240 px: a narrow column, a list’s greatest height. Semantic sizes point here. Token `size.width.240` Used by Card Curve editor Description list Navigation menu Page header Sidebar Table
`320`	320px	`--smbk-size-width-320`
A fixed width of 320 px: a narrow column, a list’s greatest height. Semantic sizes point here. Token `size.width.320` Used by Footer Page header Table
`400`	400px	`--smbk-size-width-400`
A fixed width of 400 px: a narrow column, a list’s greatest height. Semantic sizes point here. Token `size.width.400` Used by Donut chart Table
`480`	480px	`--smbk-size-width-480`
A fixed width of 480 px. size/content points here. Token `size.width.480` Used by Page header Table
`640`	640px	`--smbk-size-width-640`
A fixed width of 640 px. Raw step: use a semantic size. Token `size.width.640` Used by Empty state Table
`720`	720px	`--smbk-size-width-720`
A fixed width of 720 px. size/content points here. Token `size.width.720` Used by Table
`960`	960px	`--smbk-size-width-960`
A fixed width of 960 px. size/content points here. Token `size.width.960` Used by Table
`1200`	1200px	`--smbk-size-width-1200`
A fixed width of 1200 px. Raw step: use a semantic size. Token `size.width.1200` Used by Its semantic tokens, never a component
`1280`	1280px	`--smbk-size-width-1280`
Token `size.width.1280` Used by Its semantic tokens, never a component
`1360`	1360px	`--smbk-size-width-1360`
A fixed width of 1360 px. size/content points here. Token `size.width.1360` Used by Its semantic tokens, never a component
`1440`	1440px	`--smbk-size-width-1440`
Token `size.width.1440` Used by Its semantic tokens, never a component
`1920`	1920px	`--smbk-size-width-1920`
Token `size.width.1920` Used by Its semantic tokens, never a component

Iconsemantic · 6 tokens

Size tokens: Icon
Token	Value	CSS
`xs`	12px	`--smbk-size-icon-xs`
Icon box, extra small. Token `size.icon.xs` Points at `size.12` Used by Avatar Badge Board column Breadcrumbs Button Checkbox Chip Description list Icon Link Navigation item Picture tile Progress bar Slider Stepper Switch Table Table of contents Tabs Tag Text area Toggle button Tooltip Tree view
`sm`	16px	`--smbk-size-icon-sm`
Icon box, small. Token `size.icon.sm` Points at `size.16` Used by Accordion Avatar Badge Breadcrumbs Button Button note Checkbox Chip Code block Combobox Date and time picker Description list Dropdown Field message File row Icon Input Label Link List Navigation item Number field Page header Password field Popover Progress bar Search field Segmented control Shadow editor Sidebar Skeleton Slider Spinner Splitter Table Tabs Theme switch Timeline Toggle button Toolbar Tree view
`md`	20px	`--smbk-size-icon-md`
Icon box, medium. Token `size.icon.md` Points at `size.20` Used by Accordion Alert Avatar Banner Button Card Collapsible Combobox Command palette Dropdown Empty state Error summary Icon Input Link List Navigation item Navigation menu Number field Search field Segmented control Select Sidebar Skeleton Slider Spinner Tabs Text area Theme switch Toast Toggle button
`lg`	24px	`--smbk-size-icon-lg`
Icon box, large. Token `size.icon.lg` Points at `size.24` Used by Alert dialog App bar Avatar Card Empty state File upload Header Icon Modal Popover Segmented control Sidebar Skeleton Spinner Theme switch
`xl`	32px	`--smbk-size-icon-xl`
Icon box, extra large. Token `size.icon.xl` Points at `size.32` Used by App bar Avatar Card Footer Header Icon
`2xl`	40px	`--smbk-size-icon-2xl`
Icon box, 2× large. Token `size.icon.2xl` Points at `size.40` Used by Avatar Empty state File row Icon

Selectionsemantic · 3 tokens

Size tokens: Selection
Token	Value	CSS
`sm`	16px	`--smbk-size-selection-sm`
Checkbox and radio box, small. Token `size.selection.sm` Points at `size.16` Used by Checkbox Radio Slider Switch Table
`md`	20px	`--smbk-size-selection-md`
Checkbox and radio box, medium. Token `size.selection.md` Points at `size.20` Used by Checkbox Choice card Radio Slider Switch
`lg`	24px	`--smbk-size-selection-lg`
Checkbox and radio box, large. Token `size.selection.lg` Points at `size.24` Used by Slider Switch

Contentsemantic · 4 tokens

Size tokens: Content
Token	Value	CSS
`sm`	480px	`--smbk-size-content-sm`
Widest a content column may grow, small. Token `size.content.sm` Points at `size.width.480` Used by Card Footer Toast
`md`	720px	`--smbk-size-content-md`
Widest a content column may grow, medium. Token `size.content.md` Points at `size.width.720` Used by Empty state
`lg`	960px	`--smbk-size-content-lg`
Widest a content column may grow, large. Token `size.content.lg` Points at `size.width.960` Used by Page header
`xl`	1360px	`--smbk-size-content-xl`
Widest a content column may grow, extra large. Token `size.content.xl` Points at `size.width.1360` Used by No component yet

Marksemantic · 4 tokens

Size tokens: Mark
Token	Value	CSS
`sm`	16px	`--smbk-size-mark-sm`
Small fixed marks inside components (dots, bars, keys), small. Token `size.mark.sm` Points at `size.16` Used by Kbd Skeleton Timeline
`md`	20px	`--smbk-size-mark-md`
Small fixed marks inside components (dots, bars, keys), medium. Token `size.mark.md` Points at `size.20` Used by Badge Divider Kbd Skeleton Table
`lg`	24px	`--smbk-size-mark-lg`
Small fixed marks inside components (dots, bars, keys), large. Token `size.mark.lg` Points at `size.24` Used by Badge Combobox Dropdown Kbd Navigation menu Skeleton Tag
`xl`	32px	`--smbk-size-mark-xl`
Small fixed marks inside components (dots, bars, keys), extra large. Token `size.mark.xl` Points at `size.32` Used by Badge Logo

Modalsemantic · 3 tokens

Size tokens: Modal
Token	Value	CSS
`sm`	400px	`--smbk-size-modal-sm`
Token `size.modal.sm` Used by Alert dialog Modal
`md`	560px	`--smbk-size-modal-md`
Token `size.modal.md` Used by Alert dialog Modal
`lg`	800px	`--smbk-size-modal-lg`
Token `size.modal.lg` Used by Alert dialog Modal

Controlsemantic · 4 tokens

Size tokens: Control
Token	Comfortable	Compact	CSS
`xs`	24px	24px	`--smbk-size-control-xs`
Height of the extra-small control: 24 in both densities, the smallest target allowed. Dashboard recipe: use compact density; 40 for the page’s one main action and for forms; 32 for toolbars and filters, the size used most; 28 for actions inside table rows and cards. On phones switch to comfortable density, or give small controls an invisible 44 px tap area (size/target/comfortable). Token `size.control.xs` Points at `size.24` Used by Board column Button Code block Navigation item Number field Page header Password field Shadow editor Splitter Stepper Table Tabs Toggle button
`sm`	32px	28px	`--smbk-size-control-sm`
Height of a small control: 32 comfortable, 28 compact. Dashboard recipe: use compact density; 40 for the page’s one main action and for forms; 32 for toolbars and filters, the size used most; 28 for actions inside table rows and cards. On phones switch to comfortable density, or give small controls an invisible 44 px tap area (size/target/comfortable). Token `size.control.sm` Points at `size.32` Changes with density Used by Button Color picker Combobox Command palette Dropdown Field Footer Input Navigation item Number field Pagination Password field Popover Segmented control Select Sidebar Skeleton Slider Table Table of contents Tabs Theme switch Toggle button Toolbar Tree view
`md`	40px	32px	`--smbk-size-control-md`
Height of a medium control, where controls insert by default: 40 comfortable, 32 compact. Dashboard recipe: use compact density; 40 for the page’s one main action and for forms; 32 for toolbars and filters, the size used most; 28 for actions inside table rows and cards. On phones switch to comfortable density, or give small controls an invisible 44 px tap area (size/target/comfortable). Token `size.control.md` Points at `size.40` Changes with density Used by Alert dialog App bar Banner Button Calendar Collapsible Color picker Combobox Command palette Drawer Dropdown Header Input List Modal Navigation item Page header Segmented control Select Sidebar Skeleton Slider Table Tabs Theme switch Toggle button
`lg`	48px	40px	`--smbk-size-control-lg`
Height of a large control: 48 comfortable, 40 compact. A page may use it for its main call to action; apps use md. Dashboard recipe: use compact density; 40 for the page’s one main action and for forms; 32 for toolbars and filters, the size used most; 28 for actions inside table rows and cards. On phones switch to comfortable density, or give small controls an invisible 44 px tap area (size/target/comfortable). Token `size.control.lg` Points at `size.48` Changes with density Used by Button Card Header Input List One-time code input Search field Segmented control Skeleton Slider Table Tabs Theme switch Toggle button

Columnsemantic · 3 tokens

Size tokens: Column
Token	Value	CSS
`sm`	240px	`--smbk-size-column-min-sm`
The narrowest grid column, small: 240. Each value points to a density token, so compact density still applies. Token `size.column.min.sm` Points at `size.width.240` Used by No component yet
`md`	320px	`--smbk-size-column-min-md`
The narrowest grid column, medium: 320. Each value points to a density token, so compact density still applies. Token `size.column.min.md` Points at `size.width.320` Used by No component yet
`lg`	400px	`--smbk-size-column-min-lg`
The narrowest grid column, large: 400. Each value points to a density token, so compact density still applies. Token `size.column.min.lg` Points at `size.width.400` Used by Board column

Layoutsemantic · 12 tokens

Size tokens: Layout
Token	Value	CSS
Container10
`md`	720px	`--smbk-size-layout-container-md`
Page container max width, 720 px. Token `size.layout.container.md` Points at `size.width.720` Used by No component yet
`default`	1360px	`--smbk-size-layout-container-default`
The default page container max width: 3xl, 1360 px. Full width (the space available) is the Fill sizing in Figma and size/layout/container/full (100%) in code, which Figma cannot hold as a number. Token `size.layout.container.default` Points at `size.layout.container.3xl` Used by App bar Footer Header
`3xl`	1360px	`--smbk-size-layout-container-3xl`
Page container max width, 1360 px. Token `size.layout.container.3xl` Points at `size.width.1360` Used by No component yet
`xs`	480px	`--smbk-size-layout-container-xs`
Page container max width, 480 px. Token `size.layout.container.xs` Points at `size.width.480` Used by No component yet
`sm`	640px	`--smbk-size-layout-container-sm`
Page container max width, 640 px. Token `size.layout.container.sm` Points at `size.width.640` Used by No component yet
`lg`	960px	`--smbk-size-layout-container-lg`
Page container max width, 960 px. Token `size.layout.container.lg` Points at `size.width.960` Used by No component yet
`xl`	1200px	`--smbk-size-layout-container-xl`
Page container max width, 1200 px. Token `size.layout.container.xl` Points at `size.width.1200` Used by No component yet
`2xl`	1280px	`--smbk-size-layout-container-2xl`
Page container max width, 1280 px. Token `size.layout.container.2xl` Points at `size.width.1280` Used by No component yet
`4xl`	1440px	`--smbk-size-layout-container-4xl`
Page container max width, 1440 px. Token `size.layout.container.4xl` Points at `size.width.1440` Used by No component yet
`5xl`	1920px	`--smbk-size-layout-container-5xl`
Page container max width, 1920 px. Token `size.layout.container.5xl` Points at `size.width.1920` Used by No component yet
Measure2
`body`	640px	`--smbk-size-layout-measure-body`
Longest a line of running text may be: about 70 to 80 characters of Body MD. Paragraphs stop here even inside a wider container. Token `size.layout.measure.body` Points at `size.width.640` Used by No component yet
`heading`	720px	`--smbk-size-layout-measure-heading`
Longest a heading or a lede may run before it wraps, so a big title does not stretch across the whole page. Token `size.layout.measure.heading` Points at `size.content.md` Used by No component yet

Other size tokenssemantic · 28 tokens

Size tokens: Other size tokens
Token	Phone	Desktop	CSS
Target2
`min`	24px	24px	`--smbk-size-target-min`
Smallest tap area allowed (24, WCAG 2.2). Token `size.target.min` Points at `size.24` Used by Alert Checkbox Chip Combobox Command palette Progress bar Radio Search field Slider Switch Table Tag Toast
`comfortable`	44px	44px	`--smbk-size-target-comfortable`
Comfortable touch target (44). Token `size.target.comfortable` Points at `size.44` Used by Accordion Alert App bar Banner Board column Breadcrumbs Button Button group Calendar Card Checkbox Chip Code block Collapsible Color picker Color slider Color swatch picker Combobox Command palette Dropdown Error summary File row Filter bar Footer Header Input Link List Navigation item Number field Password field Progress bar Radio Ruler Search field Segmented control Select Shadow editor Sidebar Slider Splitter Switch Table Table of contents Tabs Tag Theme switch Timeline Toast Toggle button Toolbar Tree view
List1
`max-height`	320px	320px	`--smbk-size-list-max-height`
The greatest height of a scrolling list or menu (the select, the dropdown, the combobox): 320 (decision H). The list scrolls inside it. Token `size.list.max-height` Points at `size.width.320` Used by Dropdown Log
Tooltip1
`max-width`	240px	240px	`--smbk-size-tooltip-max-width`
Placeholder:. The widest a tooltip bubble grows before its text wraps. Points at size/width/240 for now. Token `size.tooltip.max-width` Points at `size.width.240` Used by Tooltip
Table2
`prose-min`	240px	240px	`--smbk-size-table-prose-min`
Placeholder:. The narrowest a prose column gets in a table before it wraps. Token `size.table.prose-min` Points at `size.width.240` Used by Table
`prose-max`	480px	480px	`--smbk-size-table-prose-max`
Placeholder:. The widest a prose column grows in a table, so lines stay readable. Token `size.table.prose-max` Points at `size.width.480` Used by Table
Sidebar1
`width`	280px	280px	`--smbk-size-sidebar-width`
Width of the expanded sidebar. Not a step on any primitive scale. Token `size.sidebar.width` Used by App bar Sidebar
Drawer1
`width`	384px	384px	`--smbk-size-drawer-width`
Width of a drawer from the left or right edge. A fixed frame width in Figma with no variable behind it; it should become one. Token `size.drawer.width` Used by Drawer
Dropdown2
`width`	240px	240px	`--smbk-size-dropdown-width`
Least width of the dropdown menu panel, which grows from it to fit its longest item on one line. A fixed frame width in Figma with no variable behind it; it should become one. Token `size.dropdown.width` Used by Dropdown
`max-width`	320px	320px	`--smbk-size-dropdown-max-width`
Greatest width of the dropdown menu panel: past it a long item's words wrap inside the panel. Not in Figma, which draws the panel at one width. Token `size.dropdown.max-width` Points at `size.width.320` Used by Dropdown
Command palette1
`width`	640px	640px	`--smbk-size-command-palette-width`
Width of the command palette. A fixed frame width in Figma with no variable behind it; it should become one. Token `size.command-palette.width` Used by Command palette
Search1
`width`	320px	320px	`--smbk-size-search-width`
Width of the search field in the wide app bar. A fixed frame width in Figma with no variable behind it; it should become one. Token `size.search.width` Used by App bar
Preview1
`narrow`	360px	360px	`--smbk-size-preview-narrow`
Width of Figma's phone frames, used for the narrow previews of components that reflow. Not a viewport step; the steps in the size foundation are the layout breakpoints. Token `size.preview.narrow` Used by No component yet
Table of contents1
`width`	240px	240px	`--smbk-size-table-of-contents-width`
Width of the table of contents card. A fixed frame width in Figma with no variable behind it. Token `size.table-of-contents.width` Used by Table of contents
Popover1
`width`	320px	320px	`--smbk-size-popover-width`
Width of the popover panel. A fixed frame width in Figma with no variable behind it; it should become one. Token `size.popover.width` Used by Popover
Field1
`control.width`	200px	200px	`--smbk-size-field-control-width`
Width of the control in a side-by-side field, the label taking the rest of the row. A fixed frame width in Figma with no variable behind it; it should become one. Token `size.field.control.width` Used by Field
Button note1
`width`	240px	240px	`--smbk-size-button-note-width`
Width of the note beside, under or at the end of a button: beside it, the note stays there while this much room is left after the button and moves under it otherwise. A fixed frame width in Figma with no variable behind it; it should become one. Token `size.button-note.width` Used by Button note
Date picker2
`date-min-width`	168px	168px	`--smbk-size-date-picker-date-min-width`
Least width of the date field beside the time field in a date and time picker; with less room the time field moves under it. A fixed frame width in Figma with no variable behind it; it should become one. Token `size.date-picker.date-min-width` Used by Date and time picker
`time-width`	144px	144px	`--smbk-size-date-picker-time-width`
Width of the time field beside the date field in a date and time picker. A fixed frame width in Figma with no variable behind it; it should become one. Token `size.date-picker.time-width` Used by Date and time picker
Filter bar1
`sort-width`	240px	240px	`--smbk-size-filter-bar-sort-width`
Width of the sort list in a wide filter bar, beside the search field and the filters button. A fixed frame width in Figma with no variable behind it; it should become one. Token `size.filter-bar.sort-width` Used by Filter bar
Toolbar1
`field-width`	200px	200px	`--smbk-size-toolbar-field-width`
Width of a field in a toolbar: the list that picks what the bar acts on, a search field, a time range. A fixed frame width in Figma (the Picker, the Filter tools' search) with no variable behind it; it should become one. Token `size.toolbar.field-width` Used by Toolbar
Chart2
`plot-height`	196px	196px	`--smbk-size-chart-plot-height`
Height of a line or bar chart's plot, the grid lines and the marks between its value labels. A fixed frame height in Figma with no variable behind it; it should become one. Token `size.chart.plot-height` Used by Bar chart Line chart
`donut`	140px	140px	`--smbk-size-chart-donut`
Width and height of a donut chart's ring. A fixed frame size in Figma with no variable behind it; it should become one. Token `size.chart.donut` Used by Donut chart
Progress ring2
`md`	72px	72px	`--smbk-size-progress-ring-md`
Token `size.progress-ring.md` Used by Progress ring
`sm`	36px	36px	`--smbk-size-progress-ring-sm`
Token `size.progress-ring.sm` Used by Progress ring
Color area1
`width`	224px	224px	`--smbk-size-color-area-width`
Greatest width of the color area, which is square and fills the width it is given up to this. A fixed frame width in Figma with no variable behind it; it should become one. Token `size.color-area.width` Used by Color area
Color picker1
`width`	256px	256px	`--smbk-size-color-picker-width`
Width of the color picker panel. A fixed frame width in Figma with no variable behind it; it should become one. Token `size.color-picker.width` Used by Color picker
Header1
`height`	56px	80px	`--smbk-size-header-height`
The sticky header’s height, for scroll padding so a focused item is never hidden under it: 56 on a phone, 80 on a desktop. Each value points to a density token, so compact density still applies. Token `size.header.height` Points at `size.56` Changes with layout Used by App bar

Menu

Size scale

Guidelines