Microsoft Power Automate

Overview

Microsoft Power Automate is an enterprise-grade workflow automation platform that embodies 'Confident Minimalism'—a design philosophy that prioritizes clarity, trust, and operational precision over visual ornamentation. The brand serves business process owners, IT professionals, and enterprise teams who demand reliability and speed. The aesthetic is clean, professional, and purposeful: a light, airy canvas (rgb(251, 251, 251)) anchored by Microsoft's signature Fluent Blue (#0078d4), with supporting accents in cyan and slate that evoke technology, intelligence, and forward momentum. The UI conveys competence through generous whitespace, deliberate typography hierarchy, and subtle depth cues that guide users through complex automation workflows without cognitive friction.

The brand voice is authoritative yet approachable—technical without jargon, confident without arrogance. Vocabulary emphasizes outcomes: 'optimize,' 'scale,' 'empower,' 'transform.' Tone is direct and action-oriented, avoiding hype. Example sentence in brand voice: 'Automate your most critical processes in minutes, not months—then scale with confidence.'

Colors

The color system is built on a foundation of trust and clarity. Primary (#0078d4) is Microsoft's Fluent Blue—the dominant accent used on all call-to-action buttons, links, focus states, and brand-critical interactive elements. It conveys reliability and enterprise credibility. Secondary (#0067b8) is a deeper blue reserve, used for hover states and secondary navigation to create visual hierarchy without introducing new hues. Tertiary (#3aa0fa) is a brighter cyan accent reserved for highlights, badges, and supporting UI elements that need to pop against the neutral palette.

The surface stack is deliberately light and spacious: surface (#fbfbfb) is the default page background, with surface-container variants ranging from #f8f9fa (lowest) to #dee2e6 (highest) to create subtle layering in card

Typography

The type system uses Segoe UI Variable (with fallback to system fonts) across all weights and sizes, creating a cohesive, modern voice. Display (60px, 700 weight) and Headline-lg (44px, 500 weight) are reserved for page titles and hero sections, using negative letter-spacing (-0.04em to -0.02em) to tighten the letterforms and convey confidence. Headline-md (32px, 600 weight) and Title-lg (20px, 600 weight) structure content hierarchy within sections. Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) are the workhorse sizes for descriptions, card content, and form labels, set at 28px and 24px line-height respectively to ensure comfortable reading at arm's length. Label-md (14px, 600 weight) and Label-sm (13px, 400 weight) are used for buttons, badges, and UI chrome. When small label

Layout

The layout follows a 12-column grid with a maximum container width of 1600px, allowing content to breathe on large displays while remaining readable on tablets and mobile. The page rhythm is built on the spacing scale: lg (40px) separates major sections (hero, features, pricing), md (24px) is the default gutter between cards and components, and sm (12px) is used for internal padding within buttons and form fields. The design favors asymmetrical layouts—hero sections often use a 60/40 split (text left, imagery right) to create visual interest while maintaining focus on the call-to-action. Whitespace is generous: the hero section has 64px (xl) padding on the left, with the main heading (44px) sitting in the upper third of the viewport. Cards are typically 24px padding (md) with 12px gaps bet

Elevation & Depth

Depth in Power Automate is achieved through subtle, layered shadows and strategic use of background color shifts—never through darkness or blur. The elevation system has three levels: Level 1 (Base) uses no shadow, relying on the surface color (#fbfbfb) and 1px outline (#dee2e6) to define boundaries. Level 2 (Cards, Inputs) applies box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), a soft, close shadow that lifts elements 2–4px off the page. Level 3 (Modals, Dropdowns) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger spread shadow that creates clear separation. Hover states on interactive ele

Shapes

The shape philosophy is 'Functional Precision'—rounded corners are used sparingly and purposefully to soften hard edges without introducing playfulness or informality. Buttons use rounded.md (0.75rem / 12px), a subtle curve that feels modern and approachable while remaining distinctly corporate. Cards and containers use rounded.lg (1rem / 16px), creating a gentle frame that doesn't distract from content. Input fields and smaller UI elements use rounded.DEFAULT (0.5rem / 8px), a minimal radius that maintains visual consistency. Badges and pills use rounded.full (9999px) to create a distinct vis

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (#0078d4, 40px height, 12px vertical / 24px horizontal padding) is used for the most important action on each page (e.g., 'Try for free,' 'Get Started'). On hover, the background shifts to #0067b8 with a soft shadow (0 2px 8px rgba(0, 120, 212, 0.25)) and a 200ms transition. Button-secondary (transparent background, 2px primary border, same padding) is used for secondary actions like 'Take a guided tour' or 'Learn more.' On hover, the background fills with primary-container (#e1f5fe) while the border remains primary, creating a clear visual progression. Button-tertiary (transparent, 1px outline border in #dee2e6) is for tertiary actions; on hover, the background becomes surface-container-high (#e8e9eb). All but

Do's and Don'ts

**Do**

• Do use primary (#0078d4) exclusively for the most critical call-to-action on each page—never use it for secondary or decorative elements.
• Do maintain at least 40px minimum touch target height for all interactive elements (buttons, links, form fields) to meet WCAG AA accessibility standards.
• Do apply 24px (md) spacing between major sections and 12px (sm) spacing within component groups to create visual rhythm and scanability.
• Do use Segoe UI Variable typography with explicit font-weight declarations (400, 500, 600, 700) to ensure consistent rendering across browsers and devices.
• Do apply soft shadows (0 2px 8px rgba(0, 0, 0, 0.15)) on hover states with 200ms transitions to provide tactile feedback without jarring motion.
• Do use the full surface-container stack (lowest through highest) to create subtle layering in complex layouts—never skip levels or invent intermediate values.

**Don't**

• Don't use secondary or tertiary colors as primary call-to-action buttons—primary (#0078d4) must remain the dominant accent for user actions.
• Don't apply border-radius > 1rem (16px) to buttons or cards; the brand uses functional precision, not playful rounding.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; always use the defined surface and on-surface tokens to maintain the light, professional aesthetic.
• Don't mix font families; Segoe UI Variable is the only approved typeface—system font fallbacks are acceptable, but never introduce serif or display fonts.
• Don't apply shadows with blur radius > 24px or spread radius > 0px; the elevation system is restrained and uses close, soft shadows only.
• Don't use color alone to convey status or meaning; always pair color with icons, text labels, or borders to ensure accessibility for color-blind users.