How to use
How to pick up the design system, whether you are designing a screen or building one.
If you are designing
- Start from the Figma library. Its variables are the same tokens this site publishes, so a screen built from the library is already using real values.
- Choose styles by role rather than by size. A heading is a heading because of where it sits in the page structure, not because of how big you want it.
- Check whether a component already exists before drawing a new one. Most needs are a variant of something the system already has.
If you are building
- Consume the published token stylesheet and reference the semantic custom properties, for
example
var(--sr-color-interactive-primary). Do not copy hex values into your code. - Use the component classes shown on each page. Every code sample here is copyable and matches the live preview above it.
- On legacy .NET Framework screens, the tokens are still available as CSS custom properties even where the components are not.
Getting the actual files
Every code sample on this site assumes the design system's stylesheet is already loaded. See Get the files for the one CSS file to download and link, the icon sprite, and what does and does not need JavaScript.
Check your work against the tokens
If you are bringing an existing screen into the system, paste its CSS into the token translator. It matches the colours and spacing you already use against the published tokens and shows you what is an exact match, what is close enough to review, and what has no equivalent yet.
Frameworks
Every code sample is shown for the four supported targets, in the same order: HTML, React, Blazor and MAUI. HTML is the reference implementation; React and Blazor wrap the same markup and tokens.
MAUI is different, and deliberately so. It is a native platform with its own layout engine, so it does not share markup with the web: there is no web view and no shared HTML. What it does share is the layer that keeps things consistent, the design tokens, delivered as XAML resource dictionaries generated from the same source as the web stylesheet. Native MAUI styles are in progress, so a MAUI tab currently either shows real XAML or says plainly that it does not exist yet.
If something is missing or wrong
Use Report an issue for anything broken, incorrect or inaccessible. Use Contributions if you need a component, variant or token that does not exist yet.