Design Principle
Authentically digital
Rather than mimicking physical materials, Metro embraces its digital nature with purely screen-native elements. Flat color fields, scalable shapes, and resolution-independent type.
read more →Microsoft Design Language
Born from Swiss typography and transit wayfinding, Metro strips away decoration to let information speak. Bold tiles, precise grids, and kinetic motion define an authentically digital design language.
Typography
In Metro, text itself is the design element. Oversized lightweight headings create hierarchy through scale and weight, not ornament.
the quick brown fox jumps over the lazy dog
Typography-driven hierarchy and clean proportion
Content surfaces with mathematical precision
Section Labels and Category Markers
Metro's typographic system draws directly from the International Typographic Style. Every font size, weight, and spacing value is deliberate. Text is set light and open at body sizes, creating a calm reading rhythm that contrasts dramatically with the bold display headings above.
Metadata, timestamps, and supplementary labels
light on dark creates
dramatic contrast
Metro's typographic power is amplified against dark backgrounds. Ultralight white text on near-black surfaces produces the clean, luminous quality of transit signage.
Color System
Vivid, saturated accent colors against neutral backgrounds. Each hue serves a purpose: branding, status, navigation, and user personalization.
Primary Accent
Default links, active states, and brand identity across the interface
Success
Confirmations, completed actions, and positive status indicators
Alert
Errors, destructive actions, and urgent attention needed
Warning
Caution states, pending actions, and informational alerts
Start Screen
Information at a glance. Each tile is a dynamic surface that displays data, previews content, and invites interaction without opening an app.
Panoramic Layout
Content extends beyond the viewport edge, inviting lateral discovery. Section headers anchor the view while panels scroll beneath.
Inbox Zero
All messages processed. Your inbox is clear and organized.
Featured Apps
Curated picks from the Store this week. Productivity tools on sale.
Discover
New releases in ambient and electronic genres.
Photo Memories
Revisit moments from this day last year. 12 photos to explore.
Weather Ahead
Clear skies forecast through the weekend. High of 75 degrees.
Activity Goals
You have reached 80% of your daily step target. Keep going.
Components
Clean, typographic cards and controls let information take center stage. No shadows, no rounded corners. Just structure, color, and purpose.
Design Principle
Rather than mimicking physical materials, Metro embraces its digital nature with purely screen-native elements. Flat color fields, scalable shapes, and resolution-independent type.
read more →Interaction
Responsive interactions and smooth transitions create immediacy. The interface feels alive and reactive, communicating spatial relationships through purposeful animation.
read more →Philosophy
Ruthless reduction of visual noise ensures every element on screen earns its place. Negative space is an active design component, not empty filler.
read more →Craftsmanship
Every typographic detail is intentional. The design celebrates precision, alignment, and the beauty of well-set type on a clean canvas.
read more →Ecosystem
Shared grid systems, color palettes, and interaction patterns ensure users feel at home across phone, tablet, desktop, and console.
read more →Heritage
Rooted in the International Typographic Style and inspired by transit wayfinding systems, Metro bridges mid-century graphic design with modern digital interfaces.
read more →List Items
Toggle Switches
Progress Indicators
Buttons
Principles
Every design decision in Metro serves a function. These principles guide the creation of interfaces that are clear, fast, and alive.
◆
No imitation of physical materials. The interface embraces its screen-native nature with flat color fields, vector shapes, and resolution-independent typography.
▸
Interactions respond instantly. Transitions communicate spatial relationships and state changes, giving the flat interface depth through motion.
⚊
Reduce to essentials. Every element earns its place on screen. Negative space is an active design component, not empty filler.
✓
Precision in typography, alignment, and spacing. Every pixel is intentional. The beauty of well-set type on a clean canvas is the reward.
Effects & Details
Metro communicates through purposeful animation. Tiles flip, content slides, and elements scale to signal state changes without decoration.
Live Tile Flip
Rotating content surfaces
Hover Interaction
Opacity shift on contact
Press Response
Scale feedback on active
Slide Entrance
Staggered content reveal
Grid System
20px base unit precision
Accent Colors
User personalization