Accessibility First
Grade B compliance to Microsoft Accessibility Standards, which include WCAG 2.0 standards.
Powering Microsoft Learn
Atlas Design System
Build accessible, high-quality, and consistent experiences at scale with a CSS-first design system.
30+
Components
3+
Themes
5
Layouts
Why Atlas?
Built for web developers who care about quality and standards
CSS-First
Zero-dependency approach. JavaScript only where required for accessibility and behavior.
RTL Support
Full right-to-left reading direction support via logical properties.
Themeable
Light, Dark, and High Contrast themes included. Add unlimited custom themes.
VS Code Extension
Atlas Design System Tools provides IntelliSense and class completion for faster development in your IDE.
NPM Published
Easy installation via npm. Available as @microsoft/atlas-css and @microsoft/atlas-js.
Site Layouts
Pre-built responsive layouts for common site structures like sidebars, headers, and content areas. Just add classes to your HTML element to switch layouts.
Tested with Playwright
Interactive components are tested in CI with Playwright to ensure quality.
CSS first. Zero friction.
Just add classes to your HTML and ship.
- ✓ Large component library for styling
- ✓ Semantic HTML that works everywhere
- ✓ Utility classes for rapid prototyping and maximum flexibility
- ✓ Framework agnostic—works with any stack
- ✓ Accessible by default
Component Showcase
View source code
HTML
<div class="field">
<label class="field-label" for="home-example-input">Text input</label>
<div class="field-body">
<input class="input" id="home-example-input" type="text" placeholder="Enter text..." />
</div>
</div>
<div class="field">
<label class="field-label" for="home-example-select">Select</label>
<div class="field-body">
<div class="select">
<select id="home-example-select">
<option value="">Choose an option</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="field-label" for="home-example-textarea">Textarea</label>
<div class="field-body">
<textarea class="textarea" id="home-example-textarea" rows="2" placeholder="Enter description..."></textarea>
</div>
</div>
<div class="field">
<div class="field-body">
<label class="checkbox">
<input type="checkbox" id="home-example-checkbox" checked />
<span class="checkbox-check" role="presentation" aria-hidden="true"></span>
<span class="checkbox-text">Checkbox option</span>
</label>
</div>
</div>
<div class="buttons margin-top-sm">
<button class="button button-primary" id="home-example-button-submit">Submit</button>
<button class="button button-clear" id="home-example-button-cancel">Cancel</button>
</div>
View source code
HTML
<div class="textarea-form">
<textarea
class="textarea"
rows="3"
placeholder="Ask a question or describe what you'd like to do"
></textarea>
<div class="textarea-form-footer">
<div class="textarea-form-footer-left">
<span class="color-text-subtle">0 / 500</span>
</div>
<div class="textarea-form-footer-right">
<button class="button button-clear" aria-label="Attach (non functional)">
<span class="icon font-size-lg">
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<path class="fill-current-color" d="M4.82841 10.4848..." />
</g>
</svg>
</span>
</button>
<span class="textarea-form-footer-divider" aria-hidden="true"></span>
<button class="button button-clear" aria-label="Send">
<span class="icon font-size-lg">
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path class="fill-current-color" d="M4.12775 6.9639..." />
</svg>
</span>
</button>
</div>
</div>
</div>
View source code
HTML
<div class="display-grid gap-sm" style="grid-template-columns: repeat(2, 1fr);">
<article class="card">
<div class="card-content">
<p class="card-supertitle">Component</p>
<a href="#" class="card-title">Button</a>
<p class="card-content-description">Interactive elements for user actions</p>
</div>
</article>
<article class="card">
<div class="card-content">
<p class="card-supertitle">Component</p>
<a href="#" class="card-title">Card</a>
<p class="card-content-description">Container for related content</p>
</div>
</article>
<article class="card" style="grid-column: span 2">
<div class="card-template">
<p class="card-supertitle">Component</p>
<a href="#" class="card-title">Template card</a>
<img aria-hidden="true" class="card-template-icon" src="..." />
<div class="card-template-detail">
<p>Additional details or elements can be placed here.</p>
</div>
</div>
<div class="card-footer">
<div class="card-footer-item">
<progress class="progress-bar" style="width: 60px;" max="100" value="70"></progress>
</div>
<div class="card-footer-item">
<button class="button button-primary button-filled button-sm">Continue</button>
</div>
</div>
</article>
</div>Title
A notification about something happening in the world Link
Success notification Link
Danger notification Link
View source code
HTML
<div class="notification">
<div class="notification-content">
<p class="notification-title">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
<path
d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
/>
</svg>
</span>
<span>Title</span>
</p>
<p>A notification about something happening in the world <a href="#">Link</a></p>
</div>
</div>
<div class="notification notification-success">
<div class="notification-content">
<p>Success notification <a href="#">Link</a></p>
</div>
</div>
<div class="notification notification-danger">
<div class="notification-content">
<p>Danger notification <a href="#">Link</a></p>
</div>
</div>
Tag
Tag
Tag
Interactive tag
Content.
View source code
HTML
<span class="tag">Tag</span>
<span class="tag tag-filled">Tag</span>
<span class="tag tag-primary">Tag</span>
<span class="tag tag-interactive">
<details class="popover tag-popover">
<summary class="tag-summary">Interactive tag</summary>
<div class="popover-content">
<p>Content.</p>
</div>
</details>
</span>
View source code
HTML
<button class="button">Default</button>
<button class="button button-primary">Primary</button>
<button class="button button-primary button-filled">Filled</button>
<button class="button button-clear">Clear</button>
<button class="button button-danger">Danger</button>
<button class="button button-sm">Small</button>-
Project deployed to production
Feb 2, 2026, 11:30 AM
-
Pull request merged
Feb 2, 2026, 10:00 AM
-
Pull request approved
Feb 1, 2026, 4:30 PM
-
Pull request opened
Jan 30, 2026, 9:15 AM
View source code
HTML
<ol class="timeline">
<li class="timeline-item">
<div class="timeline-item-badge">
<span class="badge badge-success">
<span class="icon" aria-hidden="true">...</span>
</span>
</div>
<div class="timeline-item-template">
<p class="timeline-item-template-title">Project deployed to production</p>
<p class="timeline-item-template-time">Feb 2, 2026, 11:30 AM</p>
</div>
</li>
<li class="timeline-item">...</li>
<li class="timeline-item">...</li>
</ol>Ready to build?
Get up and running in seconds
terminal
# Install with npm
npm install @microsoft/atlas-css
# Or use from CDN
https://unpkg.com/@microsoft/atlas-cssThen dive into our documentation or explore the source.