Comprehensive showcase of design system foundations including tokens, accessibility, spacing, and visual elements

DESIGN TOKENS
Atomic design system values

Border Radius

Shadows

SPACING SCALE
Consistent spacing system
4px - xs
8px - sm
16px - md
24px - lg
32px - xl
BORDER WEIGHTS
Neobrutalist border system
1px border
2px border
4px border
8px border
MICROSOFT TEAMS UI KIT - SHADOWSNew
Official shadow system from Microsoft Teams design language

Complete shadow elevation system with 6 levels for light and dark modes. Includes layered shadows for depth and definition following Teams design principles.

Shadow-2 to Shadow-64Light & Dark ModeLayered SystemCopy-ready Code
PLATFORM-SPECIFIC FONTSNew
Optimized font stacks for Web, Android, and iOS platforms

Dedicated font families for each platform: Segoe UI for Web/Desktop, Roboto for Android, and SF Pro for iOS with automatic platform detection.

Segoe UIRobotoSF ProAuto-Detection
HEADINGS
Bold typography hierarchy

H3 Heading

H4 Heading

H5 Heading
H6 Heading
BODY TEXT
Text styles and weights

Large body text - Regular

Body text - Regular

Small text - Regular

Body text - Bold

Body text - Black

Body text - Underlined

COMPLETE COLOR PALETTEAll Colors
Comprehensive color system with primary, secondary, neutral, and semantic colors

Access our complete color palette including primary & secondary colors, neutral grays, semantic colors, and comprehensive accessibility guidelines.

Primary ColorsSecondary ColorsNeutral GraysSemantic ColorsAccessibility
MICROSOFT FLUENT 2 WEBOfficial
Complete color system for Microsoft Fluent 2 Web design language

Official Fluent 2 Web color tokens including neutrals, brand colors, semantic colors, and shared colors with full light/dark theme support.

Neutral SystemBrand ColorsSemantic ColorsLight & DarkWCAG AA
MICROSOFT FABRIC VISUALS KITNew
Complete Microsoft Fabric color system with solid colors, monochromatic and polychromatic gradients

Comprehensive palette for data visualization and Microsoft Fabric experiences including 16 color families with gradients and item area mappings.

Solid ColorsMonochromatic GradientsPolychromatic GradientsWCAG AAItem Mappings
MICROSOFT FABRIC VISUALS KIT V2Accessibility
Specialized palettes for Tritanomaly and Tritanopia color vision deficiencies

Accessibility-focused color system designed for users with blue-yellow color blindness, including safe color combinations and design guidelines.

Tritanomaly SupportTritanopia SupportSafe CombinationsGuidelines
PRIMARY COLORS
Main brand colors

Black #000000

White #FFFFFF

ACCENT COLORS
Vibrant accent palette

Purple Gradient

Blue Gradient

Red #EF4444

Yellow #FACC15

SEMANTIC COLORS
Status and feedback colors
Success
Error
Warning
Info
LAYOUT GRID
Responsive grid system demonstration
1
2
3
4
5
6
7
8
9
10
11
12
1/3
1/3
1/3
2/3
1/3
PADDING SCALE
Internal spacing examples
p-1 (4px)
p-2 (8px)
p-4 (16px)
p-6 (24px)
MARGIN SCALE
External spacing examples
Element
mt-2 (8px)
mt-4 (16px)
mt-6 (24px)
mt-8 (32px)
LEVEL 1
Base elevation
Flat
LEVEL 2
Raised elevation
Raised
LEVEL 3
Floating elevation
Floating
LEVEL 4
Elevated elevation
Elevated
CONTRAST RATIOS
WCAG compliant color combinations

AAA - 21:1

Black on White

AAA - 12.6:1

Dark Gray on White

AA - 4.5:1

Blue on White

FOCUS STATES
Keyboard navigation indicators
Focusable Card
WRITING GUIDELINES
Content standards and voice

Do

  • Use clear, concise language
  • Write in active voice
  • Be conversational but professional
  • Use inclusive language

Don't

  • Use jargon or technical terms
  • Write in passive voice
  • Be overly formal or robotic
  • Use exclusionary language
CONTENT HIERARCHY
Information structure

Primary Message

Most important information first

Secondary Details

Supporting information

Tertiary Information

Additional context

ICON LIBRARYComplete Collection
Comprehensive icon collection with search, categories, and usage examples

Access our complete library of 500+ icons organized by category, with copy-to-clipboard functionality and usage guidelines.

NavigationUI ActionsSocial MediaFile TypesCommunication
ICON SIZES
Consistent scaling system

16px - Small UI elements

Like button

24px - Standard size

Profile menu

32px - Buttons & cards

48px - Headers & features

Search Feature

64px - Hero sections

Settings

Configure your app

ICON STYLES
Visual treatment variations

Filled - Primary actions

Regular - Secondary actions

Duotone - Informational

12 favorites

Bold - Brand elements

Premium Feature
USAGE GUIDELINES
Best practices for icon implementation

Do

  • Use consistent stroke width (2px)
  • Maintain 8px grid alignment
  • Keep icons simple and recognizable
  • Use semantic color coding
  • Provide alternative text

Don't

  • Mix different icon styles
  • Use icons smaller than 16px
  • Rotate or skew icons
  • Use low-contrast combinations
  • Overcomplicate designs
CUSTOM ICON CREATION RULES
Standards for creating new icons in the system

Grid System

  • 24x24px artboard
  • 8px grid alignment
  • 2px safe area margin

Stroke & Fill

2px stroke

Solid fill

Corner Radius

  • 2px for small elements
  • 4px for medium shapes
  • Avoid sharp corners

Color Palette

  • Primary: Black/White
  • Secondary: Gray tones
  • Accent: System colors

Creation Process

1

Sketch

Initial concept

2

Grid

Align to system

3

Refine

Apply rules

4

Test

Multiple sizes

5

Export

SVG format

EMPTY STATES
Engaging placeholder graphics

No items yet

Start by adding your first item

SUCCESS STATES
Positive feedback graphics

All done!

Your task completed successfully

ERROR STATES
Clear error communication

Something went wrong

Please try again later

LOGO VARIATIONS
Brand mark applications
L

Primary Logo

L

Inverted Logo

L

Brand Logo

L

Outlined Logo

LOGO USAGE
Guidelines and spacing

Do

  • Maintain clear space around logo
  • Use approved color variations
  • Keep proportions intact
  • Use high-resolution files

Don't

  • Stretch or distort the logo
  • Use unauthorized colors
  • Place on busy backgrounds
  • Use pixelated versions