---

name: brand-guidelines description: Apply Microsoft branding to frontend applications using Fluent 2 design system colors, typography, and styling patterns

Microsoft Brand Guidelines

Apply consistent Microsoft branding to frontend applications using the Fluent 2 design system, official colors, typography, and styling patterns.

Quick Reference: Microsoft Brand Colors

Primary Colors

Neutral Palette (Fluent 2)

Brand Accent Colors

Status Colors

Dark Theme Colors

Typography

Font Family

Microsoft uses Segoe UI as the primary font family:

Copyfont-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;

Type Scale (Fluent 2)

Font Weights

Spacing & Layout

Spacing Scale (Fluent 2)

Border Radius

Features

Smart Theme Application

When applying Microsoft branding, the skill automatically:

1. Detects context - Light vs dark mode preferences
2. Applies semantic tokens - Uses Fluent 2 design token naming
3. Ensures accessibility - Maintains WCAG 2.1 AA contrast ratios
4. Handles states - Hover, pressed, focused, disabled states

CSS Custom Properties

Apply branding using CSS custom properties for easy theming:

Copy:root {
  /* Brand */
  --brand-primary: #0078D4;
  --brand-primary-hover: #106EBE;
  --brand-primary-pressed: #005A9E;
  
  /* Neutral */
  --neutral-foreground-1: #242424;
  --neutral-foreground-2: #424242;
  --neutral-background-1: #FFFFFF;
  --neutral-background-2: #FAFAFA;
  --neutral-stroke-1: #D1D1D1;
  
  /* Typography */
  --font-family-base: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  --font-size-base-300: 14px;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  
  /* Spacing */
  --spacing-s: 8px;
  --spacing-m: 12px;
  --spacing-l: 16px;
}

React/Fluent UI Integration

For React applications, use @fluentui/react-components:

Copyimport { FluentProvider, webLightTheme } from '@fluentui/react-components';

function App() {
  return (
    <FluentProvider theme={webLightTheme}>
      <YourApp />
    </FluentProvider>
  );
}

Logo Usage

Microsoft Logo Guidelines

• Clear space: Maintain minimum clear space equal to the height of the "M" around the logo
• Minimum size: 16px height for digital, 0.5 inches for print
• Background: Use on white or light neutral backgrounds; use white logo on dark backgrounds
• No modifications: Never stretch, rotate, apply effects, or change colors

Logo Versions

Best Practices

Color Usage

1. Primary actions: Use #0078D4 (Microsoft Blue) for primary buttons and CTAs
2. Text hierarchy: Use neutral foreground colors (1, 2, 3) for text hierarchy
3. Backgrounds: Use neutral background colors for layering content
4. Status indicators: Use semantic status colors consistently

Typography Usage

1. Headings: Segoe UI Semibold (600) for all headings
2. Body text: Segoe UI Regular (400) at 14px base
3. Line height: 1.4-1.5 for optimal readability
4. Contrast: Ensure 4.5:1 minimum for body text, 3:1 for large text

Accessibility

1. Color contrast: Minimum 4.5:1 for text, 3:1 for UI components
2. Focus indicators: Use visible focus rings with brand color
3. High contrast mode: Support Windows High Contrast themes
4. Motion: Respect prefers-reduced-motion preferences

Resources

• Fluent 2 Design System
• Fluent UI React
• Microsoft Trademark Guidelines
• Fluent 2 Figma Toolkit

File References

For detailed implementation guidance, see:

• references/colors.md - Complete color palette with all variants
• references/typography.md - Typography scale and font guidance
• references/logo-usage.md - Logo guidelines and assets
• scripts/apply-brand-css.ts - CSS styling utilities
• scripts/apply-brand-react.tsx - React component styling
• examples/brand-tokens.css - Complete CSS custom properties