Microsoft Teams' page feels like a sunlit open-plan office — bright white expanses punctuated by the distinctive Teams violet-purple (#5d5bd4) and dense navy text (#17253d). The light is almost clinical, with near-zero ambient color tinting, pulling all chromatic attention to the vivid Teams purple accent and photography. Segoe UI Variable's tight negative tracking at display sizes (−0.025em at 48px) is the typographic signature — Microsoft's own variable font doing what no system font substitute can replicate, with headlines that compress horizontally as they scale up. Cards sit as floating white rectangles with a 24px corner radius and a paired micro-shadow system, never harsh — rgba(0,0,0,0.12) 0px 0px 2px plus rgba(0,0,0,0.14) 0px 2px 4px creates a faint lift without drama. The only pill-shaped element (200px radius) reserved for one secondary UI button variant signals interactivity hierarchy without color alone.
#5d5bd4Primary CTA buttons, active nav underlines, badge backgrounds — the single saturated signal on an otherwise achromatic page. Vivid violet-purple stands apart from Microsoft blue (#0067b8) to brand Teams distinctly within the Microsoft ecosystem.
#333275Hover and pressed states for Teams Violet buttons, nav link active text — darker violet that deepens without shifting hue.
#424197Button pressed/focus states — intermediate violet between Teams Violet and Teams Midnight.
#0067b8Link text, icon fills, navigation affordances — the legacy Microsoft hyperlink blue used on informational elements, never on CTA buttons.
#17253dPrimary text, headings, body copy, icons — near-black with a distinct blue cast that avoids pure black harshness.
#0e1726Darkest heading weight, button text on transparent dark-background variants.
#616161Secondary body text, captions, placeholder text, icon color for inactive states.
#262626Nav link text, body text at medium emphasis.
#ffffffPage backgrounds, card surfaces, button text on dark.
#f2f2f2Footer background, alternate section background.
#fbf5fbSubtle lilac-tinted surface for decorative hero background areas.
#e6f2fbBadge borders, light blue-tinted separator lines.
#bdc5d2Subtle borders, dividers, input outlines in resting state.
#fefefeCard surface background — one step off pure white to reduce glare on elevated surfaces.
100px · 400 · 1.06The quick brown fox jumps
62px · 500 · 1.16 · -0.62px trackingThe quick brown fox jumps
48px · 500 · 1.17 · -0.48px trackingThe quick brown fox jumps
32px · 500 · 1.25 · -0.48px trackingThe quick brown fox jumps
24px · 600 · 1.33 · -0.48px trackingThe quick brown fox jumps
20px · 600 · 1.4 · -0.5px trackingThe quick brown fox jumps
16px · 400 · 1.5 · -0.4px trackingThe quick brown fox jumps
15px · 600 · 1.47The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
The primary workhorse: all headings, body text, nav labels, buttons, badges. Microsoft's own variable font whose optical sizing axis auto-adjusts letterform construction at different sizes — tighter tracking at display scale (48px at −0.01em to −0.025em) is baked into the font's design intent, not added post hoc.
Hero and section headings at large scale — the Display optical axis activates wider, more open letterforms than the Text axis at the same point size, making headlines feel more authoritative at 48px and above.
Tight-tracked small labels and fine-print contexts.
System fallback used in footer, some nav utility links, and browser-rendered UI chrome. No tracking adjustments — falls back to OS default rendering.
24px3px8px8px8px200px0px1px2px4px6px8px10px11px12px16px20px24px30px32px36px48px64px71px72px96pxbackgroundColor=#5d5bd4, color=#ffffff, borderRadius=8px, padding=8px 16px, font: Segoe UI Variable Text 500 15px. Hover darkens to #424197. The 8px radius is a hard corner relative to the 24px card radius — buttons feel precise, not soft.
backgroundColor=transparent, color=#262626, border=1px solid transparent (visual separation via spacing only), borderRadius=0px, padding=16px 30px 16px 12px. Zero border radius — purely typographic with no frame.
backgroundColor=transparent, color=#0e1726, borderBottom=2px solid #0e1726, borderRadius=0px, padding=0 0 32px 0. Bottom border only — tab indicator with generous 32px bottom padding to position the underline at baseline distance.
backgroundColor=transparent, color=#ffffff, borderRadius=200px, padding=16px. Full pill shape reserved for white-text variants appearing over imagery — the only element with >24px radius, creating maximum contrast with sharp-cornered primary buttons.
backgroundColor=transparent, borderRadius=0px, boxShadow=none, padding=0. Used for grid cells that rely on surrounding whitespace rather than a surface for grouping.
backgroundColor=transparent, color=#17253d, borderRadius=0px, padding=0. Uppercase tracking at +0.08em (letterSpacing=0.08em via Segoe UI Variable Text), weight 600, 12px. Zero-padding text label — no visual container, relying on tracking and weight for distinction.
backgroundColor=#fefefe, color=#17253d, borderRadius=8px, padding=4px 8px. White card-colored surface with same 8px radius as buttons — system-consistent without hierarchical confusion.
backgroundColor=#ffffff, height=54px, borderBottom=1px solid #bdc5d2. Product name 'Teams' in Segoe UI Variable Text 600 at 15px. Nav items at 14px weight 400 #262626 with dropdown chevrons. Right-side CTAs use Ghost and Primary Button styles.
backgroundColor=#ffffff, borderBottom=1px solid #bdc5d2, height=56px. Active item uses Underline Navigation Button style. Right-aligned CTA button uses Primary CTA Button style at #5d5bd4.
backgroundColor=#ffffff (with #fbf5fb lilac tint at far right). Headline: Segoe UI Variable Display 600 48px tracking −0.01em, color=#0e1726. Body: 16px 400 #616161. CTA: Primary CTA Button. Right half: 3D product screenshot floating on illustrated background — image is contained, not full-bleed.
Uses Elevated Content Card as container. Image fills top of card with no padding, borderRadius=24px 24px 0 0 clipping. Title: Segoe UI Variable Text 600 20px #17253d. Body: 14px 400 #616161. Footer: 'Más información' link in Microsoft Blue (#0067b8) with right-arrow icon, 16px padding all sides.
backgroundColor=#ffffff, borderRadius=24px 0 0 24px (left-side pill), boxShadow=rgba(0,0,0,0.12) 0px 0px 2px 0px, rgba(0,0,0,0.14) 0px 2px 4px 0px. Icon color #17253d. Positioned fixed right:0, vertically centered.
#ffffffDefault page canvas
#f2f2f2Footer and alternate section bands
#fefefeElevated content cards floating above page background
#fbf5fbHero decorative background wash behind product imagery
Shadow is used exclusively to lift white surfaces off the white page — not for drama or depth hierarchy. Both shadow layers operate below 15% opacity, making the elevation invisible on colored backgrounds and only readable white-on-white. The 0px 0px 2px ambient layer defines the card edge; the 0px 2px 4px directional layer suggests physical thickness. No element uses shadows above 4px vertical offset — depth is minimal by design.
rgba(0, 0, 0, 0.12) 0px 0px 2px 0px, rgba(0, 0, 0, 0.14) 0px 2px 4px 0px
rgba(0, 0, 0, 0.12) 0px 0px 2px 0px, rgba(0, 0, 0, 0.14) 0px 2px 4px 0px
Max-width content is approximately 1600px centered, but hero and nav bands run visually full-bleed. The hero is a 2-column split: left third for headline + CTA text, right two-thirds for the floating product visual — asymmetric, image-heavy. Below the hero a sticky horizontal tab navigation bar with CTA button spans full width. Section rhythm alternates #ffffff bands: featured news in 2-column card grid, then a full-width text section for solutions, continuing downward. Cards in the news grid are equal-height 2-up at the viewport shown. Navigation is a fixed top bar (54px) with logo left, nav center, actions right — mega-menu dropdowns on hover. A fixed right-edge floating icon bar for contact actions provides persistent access without breaking the main layout. Vertical section gaps are 64-96px, giving the page a spacious corporate breathing room between each content band.
The hero features a 3D-rendered product screenshot composite — the Teams app UI rendered as a floating tablet/screen with illustrated lavender and teal decorative elements beneath it, plus emoji reaction graphics floating around it. The treatment is product-showcase-first: the interface itself is the hero visual, not people or lifestyle. Below the fold, editorial photography takes over: tightly cropped portraits and workspace candids at 16:9 ratio filling the top half of article cards — warm ambient light, realistic color grading, no duotone or filters. Photography is lifestyle-adjacent but workspace-focused (people at desks, on video calls) rather than abstract or staged against solid colors. Icon style throughout is Microsoft Fluent: filled with rounded corners, monochromatic #17253d at nav size, multicolor Microsoft flag logo as the single exception. Image density is moderate — alternating text-dominant and image-plus-text sections, cards always lead with the image.
QUICK COLOR REFERENCE: • Body text: #17253d • Page background: #ffffff • Card surface: #fefefe • Primary CTA (Teams Violet): #5d5bd4 • Link / icon accent: #0067b8 • Secondary text: #616161 • Border / divider: #bdc5d2 EXAMPLE COMPONENT PROMPTS: 1. HERO SECTION: White (#ffffff) background, left column 40% width. Headline at 48px Segoe UI Variable Display weight 600, color #0e1726, letterSpacing −0.01em, lineHeight 1.17. Subtext at 16px Segoe UI Variable Text weight 400, color #616161, lineHeight 1.50. CTA button: backgroundColor #5d5bd4, color #ffffff, borderRadius 8px, padding 8px 16px, font 500 15px. Right column: floating product screenshot with lilac (#fbf5fb) background wash. 2. ARTICLE PREVIEW CARD: backgroundColor #fefefe, borderRadius 24px, boxShadow rgba(0,0,0,0.12) 0px 0px 2px 0px and rgba(0,0,0,0.14) 0px 2px 4px 0px. Top: 16:9 image fills card width, clipped to 24px 24px 0 0 radius. Content padding 24px. Category label: 12px weight 600 #17253d letterSpacing +0.08em uppercase. Title: 20px weight 600 #17253d lineHeight 1.40. Body: 14px weight 400 #616161. Footer link: 'Más información' in #0067b8 with right-arrow icon. 3. PRIMARY CTA BUTTON: backgroundColor #5d5bd4, color #ffffff, borderRadius 8px, padding 8px 16px, fontFamily Segoe UI Variable Text, fontSize 15px, fontWeight 500. Hover: backgroundColor #424197. Focus: outline 2px solid #5d5bd4, outlineOffset 2px. 4. HORIZONTAL TAB NAV: backgroundColor #ffffff, borderBottom 1px solid #bdc5d2, height 56px, display flex, alignItems center, gap 0. Tab items: 14px weight 400 #262626, padding 0 16px 32px 12px. Active tab: color #0e1726, borderBottom 2px solid #0e1726. Right-aligned CTA: backgroundColor #5d5bd4, color #ffffff, borderRadius 8px, padding 8px 16px. 5. SECTION CATEGORY LABEL: fontFamily Segoe UI Variable Text, fontSize 12px, fontWeight 600, color #17253d, letterSpacing +0.08em (0.96px), textTransform uppercase, lineHeight 1.43. No background, no border, no padding — standalone typographic label above section heading.
Horizontal tab navigation bar with active-underline indicator, card-grid news section, and a single brand-accent color on all primary CTAs with white/light page.
Product-screenshot-as-hero-visual on white background, editorial photography in 2-column card grid, corporate-light palette with single vivid accent.
Light enterprise SaaS page with sticky secondary nav, floating 3D product visual in hero, and photography cards below fold.
Deep navy text on white with a vivid single-hue accent, 24px rounded cards, and mixed photography/illustration visual language.
Enterprise collaboration product with near-identical hero pattern: product UI screenshot composite right-aligned against white left-side headline.
Use the design exports or connect Musterlab to your AI.
