mdshop
Back to designs
M

Design System inspired by Microsoft

Enterprise tech. Fluent Design System, four-color logo, clean corporate.

Usage
npx getdesign@latest add microsoft

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs
9
Bookmarked
0
Not an official Microsoft design system. A curated starting point for building Microsoft-like UIs with your AI coding agent.

Enterprise tech. Fluent Design System, four-color logo, clean corporate.

Preview
microsoft.design.md
Brand System Catalog

DESIGN SYSTEM INSPIRATION OF MICROSOFT

Enterprise tech. Fluent Design System, four-color logo, clean corporate.

Explore the systemView tokens

Color Palette

Enterprise tech. Fluent Design System, four-color logo, clean corporate.

Primary
MS Blue
#0078d4
Brand color
Red
#f25022
Brand color
Green
#7fba00
Brand color
Blue
#00a4ef
Brand color
Yellow
#ffb900
Brand color
Dark
#1b1b1b
Brand color
Light Gray
#f3f2f1
Brand color
White
#ffffff
Brand color
Gray
#605e5c
Brand color

Typography

A type system inspired by Microsoft.

Segoe UI
Segoe UI, Segoe UI
DISPLAY / 64px / 700 / 1.1
EVERYONE
H1 / 48px / 700 / 1.2
A disciplined editorial voice
H2 / 32px / 600 / 1.3
Section heading
BODY / 16px / 400 / 1.6
Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.
SMALL / 14px / 400 / 1.5
Small
CODE / 14px / 400 / 1.6
Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Microsoft.

Not detected on this URL

Components

Other component primitives mapped from the Microsoft spec.

Not detected on this URL