Personal Research

microsoft-fluent

4 min read

Microsoft Fluent 2

1. Why this system is relevant

Fluent 2 spans consumer and complex productivity software but does not expose a universal web density mode in the captured React v9 implementation. It uses global/alias design tokens plus explicit component sizes, with different size ranges by component. That makes it a useful counterexample to mode-first architecture.

2. Density terminology

Public guidance typically uses component size (small, medium, large, sometimes extra-small). Some guidance refers to a user-chosen “small or compact density layout,” but there is no corresponding global density theme API in the captured web components. Info label target guidance

3. Density model

  • Global tokens define stable spacing and type ramps.
  • Components expose their own size props and decide which metric categories change.
  • Button and Input support small/medium/large; Table supports extra-small/small/medium.
  • Cards and dialog surfaces have layout/size behavior but no inherited density prop in the captured source.
  • Different sizes can coexist freely on one page. The system relies on contextual composition rather than one descendant-changing mode.

4. Token architecture

The typical path is:

component size prop → Griffel size style → global/alias tokens + occasional exact component metrics → rendered component

Fluent documents global tokens and alias tokens. The code uses global spacing/type tokens (tokens.spacingHorizontalS, tokens.fontSizeBase200) inside per-size styles, with some component heights encoded as exact component metrics. Theme providers swap token objects primarily for brand/color themes; the captured theme token layer does not include a density axis. Design tokens

Global spacing values in the pinned source are 0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32px.

ComponentSmall / compactMediumLarge
Input minimum height24px32px40px
Table cell height24px (extra-small)34px (small)44px (medium)
Button typeBase 200Base 300Base 400
Button horizontal paddingspacing S (8px)spacing M (12px)spacing L (16px)
Input icon16px20px24px

Button size styles also change line height and corner treatment. Input size changes field height, horizontal padding, and icon size, while its text inherits the surrounding typography. Table sizing changes cell height/min-height but retains common cell padding and type unless a child component changes it. spacings.ts useInputStyles.styles.ts useTableCellStyles.styles.ts

6. Typography behaviour

There is no global density-driven type ramp. Individual component sizes decide. Button uses Base 200/300/400 as small/medium/large, so its text and line height change. Input text inherits type while its geometry and icons change. Table cell size changes height but not automatically its body typography. Fluent’s named type presets remain independent. Fluent typography Text presets

7. Representative component examples

  • Button: size="small|medium|large" selects padding, type, icon, and focus-radius styles while appearance keeps semantic/visual emphasis separate.
  • Input/select-like fields: size changes 24/32/40px height, padding, and 16/20/24px icons.
  • Table/DataGrid: Table context supplies extra-small|small|medium; cells render 24/34/44px. DataGrid builds on the Table primitives.
  • Tree/navigation: public guidance uses 12px indentation for small and 24px for medium tree items.
  • Card/dialog: do not expose a captured density control; card adapts to content/user dimensions, and dialog uses surface layout tokens.

Tree sizing Button.types.ts Table.types.ts

8. Design/Figma implementation

Fluent’s web UI kit uses component properties/variants that map to code props, while Figma variables hold global and alias styling such as theme values. Public guidance does not document a density variable mode matching the React size APIs. Design with Fluent

9. Code implementation

<Button appearance="primary" size="large">Buy now</Button>
<Button appearance="primary" size="small">Run</Button>
<Input size="small" />
<Table size="extra-small">…</Table>

Each component maps its own size prop to style objects. Two densities can coexist without nested providers or separate token packages.

10. Accessibility constraints

Fluent’s layout guidance recommends 44px touch targets on web/iOS and 48px on Android. The smallest input/table values are below those touch recommendations, so their appropriateness depends on input context, spacing, and equivalent controls. Info label guidance permits a 20 × 20px small target only with at least 2px separation and only when the user explicitly chose a compact layout. Keyboard behavior and responsive/400% zoom handling remain component-specific; drawer guidance, for example, removes sticky regions at 400% zoom. Fluent layout Info label guidance Drawer zoom behavior

11. Limitations / unavailable evidence

  • Fluent is multi-platform; this report is specifically about Fluent 2 Web / React v9 source and should not be projected onto Windows, iOS, or Android packages.
  • “Compact” appears in contextual guidance but not as a verified global web theme API.
  • Table’s 34px size is component-specific, illustrating that component ramps are not one shared 4/8px mathematical density sequence.
  • Exact internal Figma authoring implementation is not fully public.

Graph View

Backlinks