Microsoft 365 Design System
Light · Generated 13/04/2026 · 19 colors · 37 type tokens · 26 spacing steps · 27 breakpoints · 3 motion tokens
v1.0.0
Color Palette
Background Colors
Black
#000000
White
#FFFFFF
Light Gray 2
#F2F2F2
Light Gray 3
#E6E6E6
White 3
#F5F5F5
Text Colors
Dark Gray
#262626
Blue
#0000EE
Dark Gray 2
#616161
Dark Blue
#121D2F
Dark Blue 2
#17253D
Dark Gray 3
#605E5C
Dark Gray 4
#333333
Dark Gray 5
#323130
Border Colors
Light Gray
#EDEBE9
Light Gray 4
#E1E1E1
Fill & Gradient Colors
Blue 2
rgba(70,79,235,.05)
Blue 3
rgba(123,104,238,.05)
Blue 4
#0066FF
White 2
#F7F5F4
Brand
M365 Brand
#464FEB
Typography
--font-family-3 · Segoe UI
Segoe UI
Create, collaborate, and get more done with Microsoft 365 — AI-powered productivity tools across Word, Excel, PowerPoint, Outlook, and Teams.
Regular · 400 Medium · 500 SemiBold · 600 Bold · 700
--font-family-base · Times
Times
Body copy rendered in Times — the base font family extracted from the office.com stylesheet.
Regular · 400 Bold · 700
Copilot for Microsoft 365
--font-size-48px · 48px · SemiBold · line-height: 58px · letter-spacing: −3.1px
Write, Create & Collaborate
--font-size-6xl · 40px · SemiBold · line-height: 40px · letter-spacing: −2px
Productivity reimagined with AI
--font-size-5xl · 32px · SemiBold · line-height: 40px · letter-spacing: −1.6px
Word · Excel · PowerPoint · Teams · Outlook
--font-size-4xl · 24px · SemiBold · line-height: 28px · letter-spacing: −0.6px
Empower every person and organization on the planet to achieve more through intelligent cloud, intelligent edge, and AI computing.
--font-size-2xl · 18px · Regular · line-height: 28px · letter-spacing: −0.48px
Get more done with Microsoft 365 — premium Office apps, 1TB OneDrive cloud storage, advanced security, and more.
--font-size-xl · 16px · Regular · line-height: 26px · letter-spacing: −0.3px
Subscription auto-renews. Cancel any time. See offer terms at checkout.
--font-size-base · 14px · Regular · line-height: 20px
WORD · EXCEL · POWERPOINT · TEAMS · OUTLOOK · COPILOT
--font-size-2xs · 11px · SemiBold · uppercase · letter-spacing: 0.6px
Line Heights
Tight
3px
Snug
16px
Normal
20px
Relaxed
22px
Loose
24px
LH-6
25px
LH-7
26px
LH-8
28px
LH-9
40px
LH-10
48px
LH-11
58px
Letter Spacing
Microsoft 365
Tight
−3.1px · hero display
Copilot AI
Wide
−2px · large headings
Productivity
Wider
−1.6px · sub-headings
Cloud & AI
Widest
−0.6px · section headings
Body text
LS-6
−0.48px · comfortable body
Body copy
LS-7
−0.3px · readable body
Spacing
Spacing Scale
26 tokens — 1px → 232px
1
2
3
4
5
6
7
8
10
12
15
18
20
24
30
32
36
40
48
56.6
80
96
100
208
232
Borders
Border Radii
SM
3px
MD
4px
LG
8px
XL
24px
Circle
50%
Fluent-aligned radius scale. Cards and overlays use --radius-lg: 8px. Pill buttons and command chips use --radius-xl: 24px. Circle avatars use --radius-2xl: 50%. The site-wide custom property is --newexp-border-radius: 8px.
Border Widths
Hairline
1px · ×127
Thin
2px · ×10
Two border widths. Hairline is the dominant choice — dividers, card outlines, input fields. The 2px thin variant is reserved for focused or active interactive states. --border-width-hairline: 1px · --border-width-thin: 2px
Shadows / Elevation
Shadow Tokens
2 tokens — soft ambient elevation system
Card Shadow
×8
rgba(0,0,0,0.08) 0px 4px 16px — feature cards, panels, dropdowns
Tight Shadow
×3
rgba(0,0,0,0.1) 0px 0px 8px — input focus rings, tooltips, small overlays
Z-Index
LayerValueUsage
Behind-2Background canvas, behind-content decorative elements
Base2Base content, slightly elevated elements
Overlay502Dropdowns, popovers, command bar flyouts
Panel700Side panels, settings panes, Microsoft 365 suite bar
Top Panel701Elements above the suite bar, tooltips over panels
Breakpoints
--breakpoint-xs
320px
Extra small mobile
--breakpoint-sm
480px
Small mobile
--breakpoint-2xl
540px
Tablet start
--breakpoint-bp-8
640px
Tablet landscape
--breakpoint-bp-10
768px
Standard tablet
--breakpoint-bp-11
860px
Wide tablet
--breakpoint-bp-13
1023px
Desktop start
--breakpoint-bp-14
1024px
Wide desktop
--breakpoint-bp-17
1084px
Large desktop
--breakpoint-bp-18
1200px
XL desktop
--breakpoint-bp-20
1300px
Wide layout
--breakpoint-bp-22
1399px
Near-2K
--breakpoint-bp-23
1600px
2K / QHD
--breakpoint-bp-26
1800px
Wide 2K
--breakpoint-bp-27
1920px
Full HD max
Opacity
Opacity Tokens
No standalone opacity tokens defined in the Microsoft 365 design system.
The Microsoft 365 design system (office.com) defines no named opacity tokens. Transparency is expressed inline through rgba() color values — for example, gradient fills use rgba(70, 79, 235, 0.05) and rgba(123, 104, 238, 0.05) for subtle tinted backgrounds. There is no opacity section in the DTCG JSON output.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-dark-gray--color-black1.39:1Fail
--color-dark-gray--color-white15.13:1AAA
--color-dark-gray--color-light-gray-213.52:1AAA
--color-dark-gray--color-light-gray-312.13:1AAA
--color-dark-gray--color-white-313.88:1AAA
--color-blue--color-black2.23:1Fail
--color-blue--color-white9.4:1AAA
--color-blue--color-light-gray-28.39:1AAA
--color-blue--color-light-gray-37.53:1AAA
--color-blue--color-white-38.62:1AAA
--color-dark-gray-2--color-black3.39:1AA Large
--color-dark-gray-2--color-white6.19:1AA
--color-dark-gray-2--color-light-gray-25.53:1AA
--color-dark-gray-2--color-light-gray-34.96:1AA
--color-dark-gray-2--color-white-35.68:1AA
--color-dark-blue--color-black1.24:1Fail
--color-dark-blue--color-white16.9:1AAA
--color-dark-blue--color-light-gray-215.1:1AAA
--color-dark-blue--color-light-gray-313.54:1AAA
--color-dark-blue--color-white-315.5:1AAA
--color-dark-blue-2--color-black1.37:1Fail
--color-dark-blue-2--color-white15.35:1AAA
--color-dark-blue-2--color-light-gray-213.71:1AAA
--color-dark-blue-2--color-light-gray-312.3:1AAA
--color-dark-blue-2--color-white-314.08:1AAA
CSS Variables Reference
Background Colors 5 tokens
Black--color-black#000000
White--color-white#FFFFFF
Light Gray 2--color-light-gray-2#F2F2F2
Light Gray 3--color-light-gray-3#E6E6E6
White 3--color-white-3#F5F5F5
Text, Border & Fill Colors 14 tokens
Dark Gray--color-dark-gray#262626
Blue--color-blue#0000EE
Dark Gray 2--color-dark-gray-2#616161
Dark Blue--color-dark-blue#121D2F
Dark Blue 2--color-dark-blue-2#17253D
Dark Gray 3--color-dark-gray-3#605E5C
Dark Gray 4--color-dark-gray-4#333333
Dark Gray 5--color-dark-gray-5#323130
Light Gray (border)--color-light-gray#EDEBE9
Light Gray 4 (border)--color-light-gray-4#E1E1E1
M365 Brand--brand-m365-160#464FEB
Blue 4--color-blue-4#0066FF
Blue 2 (tint)--color-blue-2rgba(70,79,235,.05)
White 2--color-white-2#F7F5F4
Typography 37 tokens
Times (base)--font-family-baseTimes
SegoeUI (2)--font-family-2SegoeUI
Segoe UI (3)--font-family-3Segoe UI
Regular--font-weight-regular400
Medium--font-weight-medium500
SemiBold--font-weight-semibold600
Bold--font-weight-bold700
Caption--font-size-2xs11px
XS--font-size-xs13px
SM--font-size-sm13.33px
Base--font-size-base14px
LG--font-size-lg15px
XL--font-size-xl16px
2XL--font-size-2xl18px
3XL--font-size-3xl20px
4XL Heading--font-size-4xl24px
5XL Heading--font-size-5xl32px
6XL Heading--font-size-6xl40px
Display 48--font-size-48px48px
Tight (−3.1px)--letter-spacing-tight−3.1px
Normal (−3%)--letter-spacing-normal−3%
Wide (−2px)--letter-spacing-wide−2px
Wider (−1.6px)--letter-spacing-wider−1.6px
Widest (−0.6px)--letter-spacing-widest−0.6px
LS-6 (−0.48px)--letter-spacing-ls-6−0.48px
LS-7 (−0.3px)--letter-spacing-ls-7−0.3px
Spacing 26 tokens
Space 1--space-11px
Space 2--space-22px
Space 3--space-33px
Space 4--space-44px
Space 5--space-55px
Space 6--space-66px
Space 8--space-87px
Space 10--space-108px
Space 12--space-1210px
Space 16--space-1612px
Space 20--space-2015px
Space 32--space-3218px
Space 40--space-4020px
Space 48--space-4824px
Space 64--space-6430px
Space 80--space-8032px
Space 96--space-9636px
Space 128--space-12840px
Space 160--space-16048px
Space 192--space-19256.65px
Space 23--space-2380px
Space 24--space-2496px
Space 25--space-25100px
Space 26--space-26208px
Space 27--space-27232px
Borders & Radius 7 tokens
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Small--radius-sm3px
Medium--radius-md4px
Large--radius-lg8px
XL / Pill--radius-xl24px
Circle--radius-2xl50%
Motion & Layers 9 tokens
Instant--duration-instant200ms
Fast--duration-fast300ms
Ease In-Out--easing-ease-in-outease-in-out
Card Transition--card-transitionall 0.2s ease-in-out
Transition Dur.--newexp-transition-duration0.2s
No opacity tokens defined — see fallback in Opacity section.
Behind--z-1-2
Base--z-22
Overlay--z-3502
Panel--z-4700
Top Panel--z-5701
Design System Preview · Microsoft 365 (Light) · Generated 13/04/2026 · 19 color tokens · 12 font-size · 3 font-family · 4 font-weight · 11 line-height · 7 letter-spacing · 26 spacing · 5 radius · 2 border-width · 2 shadow · 2 duration · 1 easing · 5 z-index · 27 breakpoints · 0 opacity