Refresh
Scheme Violet Ocean Amber
Light / Dark
Foundations
FluentUI Blazor's own design tokens — surfaces, brand and semantic colors, the type scale, spacing, and corner radii. Toggle mode or palette from the header; every value below repaints live through FluentUI's token engine, no component CSS hard-codes a color.
Surfaces & lines
--colorNeutralBackground1
--colorNeutralBackground2
--colorNeutralBackground3
--colorNeutralBackground6
--colorNeutralStroke1
--colorNeutralStroke2
Brand & semantic
--colorBrandBackground
--colorBrandBackground2
--colorBrandBackgroundHover
--colorBrandForeground1
--colorBrandForeground2
--colorStatusSuccessForeground1
--colorStatusWarningForeground1
--colorStatusDangerForeground1
Type scale
--fontSizeBase100 10px Eyebrow / KPI label
--fontSizeBase200 12px Caption / metadata
--fontSizeBase300 14px Default UI text and body copy
--fontSizeBase400 16px Subtitle
--fontSizeBase500 18px Heading level 3
--fontSizeBase600 20px Heading level 2
--fontSizeBase700 24px Heading level 1
--fontSizeBase800 30px Page title
--fontSizeBase900 34px Hero figure 1,284
--fontSizeBase1000 40px Hero figure 1,284
Horizontal spacing
--spacingHorizontalXXS 4px
--spacingHorizontalXS 8px
--spacingHorizontalS 12px
--spacingHorizontalM 16px
--spacingHorizontalL 24px
--spacingHorizontalXL 32px
--spacingHorizontalXXL 40px
--spacingHorizontalXXXL 48px
Vertical spacing
--spacingVerticalXXS 2px
--spacingVerticalXS 4px
--spacingVerticalS 8px
--spacingVerticalM 12px
--spacingVerticalL 16px
--spacingVerticalXL 20px
--spacingVerticalXXL 24px
--spacingVerticalXXXL 28px
Radii
--borderRadiusSmall
--borderRadiusMedium
--borderRadiusLarge
--borderRadiusXLarge
--borderRadiusXXLarge
--borderRadiusCircular