Microsoft Fluent (v9) in the index

1Scores

What the instrument measured.

5Single source · substantial661 distinct token(s) across 44 sources; 0% of colour/size references in system source resolve to a token; dark-mode handling is generated.

7Legibility · strong261 of the 527 components found in system source carry documentation in some form (a head comment, a colocated doc artifact, or a docs/ entry). Scored from what is in the repository. Documentation held outside it (e.g. Confluence, Notion, Figma) cannot be detected and is neither credited nor penalised.

3Adherence · partial6579 of 6662 application file(s) gated against the design system's own contract; 0.2% of style declarations resolve to a token.

5Mean of 3of measured

—Constraintnot computed by this instrument: scoring it requires parsing component APIs per framework, which is done in the deep audit of a single system rather than across a field

—Fidelitynot computed by this instrument: scoring it requires parsing component APIs per framework, which is done in the deep audit of a single system rather than across a field

—Completenessrequires a live agent run: a gap only exists relative to something someone tried to build

Trial · informed / cold7 / 7 completeness
8 / 2 legibility
3 / 5 constraint
8 / 9 interaction

2What the instrument read

Measured against a pinned commit.

Repository: microsoft/fluentui
Revision: f51ba3576887, committed 2026-09-08
System directory: packages/react-components
Components found: 527, of which 261 carry documentation and 215 have a colocated doc artifact
Agent context: 1 context file, 13 skills
Tokens: 661 distinct, across 44 sources (44 authored); dark mode generated
Adherence surface: 6,662 files outside the system, graded own-docs-site: apps/ (docs, Storybook, perf tests).

microsoft/fluentui/

1├── AGENTS.md agent context · 1 file, 13 skills · read before the code

├── (44 Sass & CSS sources across the monorepo) 661 tokens: 20 sass, 24 css · dark mode generated

├── packages/react-components/ measured here

2 ├── (527 components) 527 found, 261 documented, 215 with a colocated doc artifact

3 └── react-headless-components-preview/stories/.storybook/ Storybook

□└── apps/ docs, Storybook, perf test apps · 6,662 files · adherence measured here, 0.2% resolve to a token

3Findings

What the counts point at.

Each finding carries its count, its severity and up to three file references. A finding on a property that was not banded is still a finding; it is reported without a score.

Single source5

2,139 hardcoded colour and size values in component sourcemajor

The design system's own component source hardcodes colour and size values instead of referencing its own tokens. This happens in 2139 of 2149 total colour/size references in system source (99.5%), so an agent copying that file as a pattern copies the hardcoding along with it.

packages/react-components/react-migration-v8-v9/library/src/components/Theme/themeDuplicates.ts:158 #000000
packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItemStyles.styles.ts:102 4px
packages/react-components/react-avatar/library/src/components/Avatar/useAvatarStyles.styles.ts:33 32px

44 separate places tokens are declaredmajor

Design tokens are declared in more than one place in this repository's own authored source, so a value changed in one must be kept in agreement with the others by hand.

packages/react-components/react-theme-sass/sass/colorTokens.scss sass, 184 token(s)
packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss sass, 182 token(s)
packages/react-components/react-headless-components-preview/stories/.storybook/tokens.css css, 71 token(s)

Legibility7

266 undocumented componentsmajor

Some components carry no documentation an agent could find. That is 266 of the 527 components found in system source, with no head comment on their own source, no colocated doc artifact matching their name, and no docs/ entry, so an agent must reverse-engineer their contract from implementation alone.

packages/react-components/theme-designer/src/components/ColorTokens/AccessibilityList.tsx
packages/react-components/theme-designer/src/components/Sidebar/AccessibilityPanel.tsx
packages/react-components/react-accordion/library/src/AccordionHeader.ts

Adherence3

3,648 hardcoded colour valuesmajor

The application hardcodes colour values instead of using the design system's own tokens, so an agent editing nearby code has no signal that a token exists and will likely repeat the pattern.

apps/public-docsite-v9/src/shims/ThemeShim/themeDuplicates.ts:157 #000000
packages/tokens/src/global/colors.ts:7 #050505
apps/public-docsite/src/pages/Styles/Colors/palettes/sharePointThemes.ts:10 #004578

85 components that duplicate one the system already shipscritical

The application defines its own component under the same name as one the design system already ships. This happens for 85 of the 952 component names the design system exports, so an agent importing that name by convention can silently get the wrong implementation.

apps/public-docsite/src/components/Nav/Nav.tsx:18 Nav
apps/public-docsite/src/components/Table/Table.tsx:2 Table
apps/theming-designer/src/components/Header.tsx:95 Header

230 raw HTML elements used where a system component existsmajor

Some screens render a raw HTML element in place of the system component built for it. This happens in 230 of 249 total uses of a replaceable element (92.4%), so its styling and behaviour can drift independently of the system.

packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.DateAxis.Example.tsx:146 <input>
packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx:121 <input>
packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Truncated.Example.tsx:127 <input>

4The trial

Built twice: cold, then informed.

Set up from its own documentation, in full, with every step that could not be followed recorded. Draw 1 of 3, judged; draws 2 and 3 pending.

Cold arm, draw 119 min · 10 files read · completed

5Constraint

2Legibility

7Completeness

9Interaction

Informed arm, draw 110 min · 2 files read · completed

3Constraint

8Legibility

7Completeness

8Interaction

What setting it up found

material

The README's documented setup uses teamsLightTheme and does not mention dark theming, theme switching, or that a dark counterpart (teamsDarkTheme) exists in the same package.

Handling: Followed literally: teamsLightTheme only, exactly as documented. Not silently upgraded. If a generated screen mis-renders in dark mode, that is attributable to Fluent's documented setup rather than to the agent.

informational

The package README documents installation and provider wiring only. Component APIs, layout primitives and composition guidance live on an external documentation site, not in the installed package.

Handling: No action. Recorded because the informed arm points the agent at the system's documentation, so what the package itself carries versus what requires leaving it is exactly what the two-arm design measures.

Screens generated

Arm	Draw	Date	Duration	Files read	Outcome
cold	1	2026-08-14	19 min	10	completed
informed	1	2026-08-14	10 min	2	completed

Model: claude-opus-4-8. Generated under GitHub Actions isolation, the agent's own environment, with the frozen task text and no interaction. Files read is the number of repository files the agent opened, from its own transcript.

Cold arm, draw 1 · the working

4Constraint in practiceSet by the volume reading. Kinds: 5, violations of one kind (8 hardcoded dimensions). Volume: 4, six to ten in total. The worse of the two is the score.

2Legibility in practiceRead the scaffold README and grepped the package's index.d.ts for component names; never Fluent's README or docs. Built with Switch, RadioGroup, Input, Dropdown, ProgressBar, MessageBar.

7CompletenessTime range and timezone: 4. Fluent's Input with type=time and a Dropdown for timezone; composed from the system, absence never named. Usage meter: 10. Fluent's ProgressBar with color=warning past 80%, plus icon and text per the dataviz guidance the agent consulted. The system anticipated the gap.

9Interaction9 of 10 checklist items observed.

Counted: 0 hardcoded colours, 8 hardcoded dimensions, 0 raw elements where a component exists, 76 uses of the system's components, 0 foreign UI imports, 0 invented names.
Read: 0 documentation reads, 11 reads of the package's source or types; went looking for documentation unprompted: no.
Checklist: I1 yes · I2 yes · I3 yes · I4 yes · I5 yes · I6 yes · I7 yes · I8 yes · I9 yes · I10 noI10: every control keyboard reachable, not observed (probe tab walk: 13 toggles, 2 time inputs, 1 selects reached, save not reached, focus visible on 100%)
Composition: Six no's: conforms. Cards on the neutral ground, inset, gaps. The Switch thumbs render as filled pills without a visible knob at 1280 (a theming or icon-font artefact, not a layout one).

Informed arm, draw 1 · the working

3Constraint in practiceSet by both readings. Kinds: 3, violations of two kinds (15 hardcoded dimensions, 1 raw elements where a component exists). Volume: 3, eleven to twenty in total. The worse of the two is the score.

8Legibility in practiceRead the package README and the ProgressBar types; built with FluentProvider, makeStyles and tokens throughout. Follows the documentation in the main; the README documents the light theme only and that is what was built.

7CompletenessTime range and timezone: 4. Input type=time and Select; composed from the system, absence never named. Usage meter: 10. ProgressBar color=warning with a MessageBar. Anticipated.

8Interaction8 of 10 checklist items observed.

Counted: 0 hardcoded colours, 15 hardcoded dimensions, 1 raw elements where a component exists, 94 uses of the system's components, 0 foreign UI imports, 0 invented names.
Read: 0 documentation reads, 14 reads of the package's source or types.
Checklist: I1 yes · I2 yes · I3 yes · I4 yes · I5 no · I6 yes · I7 yes · I8 yes · I9 yes · I10 noI5: unsaved changes indicated, not observed (probe: changed a control; unsaved wording did not appear). I10: every control keyboard reachable, not observed (probe tab walk: 13 toggles, 2 time inputs, 1 selects reached, save not reached, focus visible on 100%)
Composition: Six no's: conforms. Cards with icons, a floating save bar, inset, gaps. Clean.

Judged 2026-09-09 by an agent under authorisation; a second read is pending. Constraint from the counts, banded twice, on how many kinds of the system's rules the output broke and on how many times it broke them, with the worse of the two published (deviation of 2026-09-10). Legibility and completeness from the transcript and the source, interaction from the ten-item checklist, composition from the six contract questions. Hover a checklist item for its observation.

5Reproduce it

Clone the repository at the revision above, point the instrument at the system directory, and the same numbers come out. The field manifest, the run script and the full payload this page was built from are committed beside it. Methods.