# Fluent 2

> Microsoft-inspired calm productivity UI: light grey Mica canvas, frosted acrylic bars, 4px corners, brand blue #0F6CBD and pill selection indicators.

- Nickname: Windows 11 look
- Also called: Microsoft Fluent, Fluent UI, Fluent Design
- Category: Platform Design Systems
- Moods: Calm, Trustworthy, Serious, Techy
- Industries: SaaS, Corporate & B2B, Education, Government & Nonprofit
- Style page: https://uilingo.dev/styles/fluent-2/

Fluent 2 is the language of Windows 11, Teams and Microsoft 365: quiet neutral greys, white card layers with very soft two-part shadows, 4px control corners and 8px card corners, and one confident brand blue. The window background is Mica (a faint wallpaper-tinted wash) and transient bars are acrylic (blurred, translucent, with fine noise). Selection is shown by a small rounded brand pill — under a tab, beside a nav item — and inputs carry a darker bottom stroke that turns blue on focus.

## Best for
- Productivity and collaboration SaaS
- Internal tools and Microsoft 365 / Teams add-ins
- Windows desktop and Electron apps
- Settings-heavy admin screens

## Avoid for
- Playful consumer or kids brands
- Fashion, luxury and editorial storytelling
- Products that must feel native on iOS/Android

## Do
- Keep controls compact: 32–40px tall, 4px radius, 600-weight labels
- Show selection with a 3px rounded brand pill (16px long beside nav items, full width under tabs)
- Use acrylic only on bars, menus and flyouts — content cards stay solid white

## Don't
- Don’t use large radii (>8px) on cards or pill-shaped buttons
- Don’t introduce a second saturated brand colour
- Don’t use heavy drop shadows — two soft layers (2px ambient + key) at ≤14% opacity

## Audit
Passed after 1 round · builder unknown · auditor unknown

## Prompt
Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page.

```markdown
# Build a landing web page in the "Fluent 2" UI style

Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light

## The style in one line
Microsoft-inspired calm productivity UI: light grey Mica canvas, frosted acrylic bars, 4px corners, brand blue #0F6CBD and pill selection indicators.
Design keywords: Mica background, acrylic blur bars, 4px corners, brand blue #0F6CBD, pill selection indicator, bottom-stroke inputs, soft layered shadows, Segoe-like humanist type.

## Visual language
Calm Microsoft productivity UI in the manner of Windows 11, Teams and Microsoft 365. A light grey canvas (#F3F3F3) carries a barely visible Mica wash of blue and violet light from the corners; content sits on solid white layers with 8px corners and soft two-part shadows; bars, menus and the sticky top nav are acrylic — translucent white with a 30px blur and a fine noise grain. Controls are compact (32–40px), 4px-rounded and set in a Segoe-like humanist sans at 600 for labels. One brand blue (#0F6CBD) marks the primary action and every selection indicator.

## Signature details (must be visible)
- Mica canvas: #F3F3F3 with radial-gradient washes of rgba(15,108,189,.16) top-right and rgba(135,100,184,.10) bottom-left
- Acrylic bars: rgba(252,252,252,.74) + backdrop-filter blur(30px) saturate(140%) + an SVG feTurbulence noise layer at ~9% opacity, 1px rgba(0,0,0,.07) hairline
- Layer shadows: 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14) at rest; 0 4px 8px on hover; 0 14px 28px for windows/flyouts
- Selection pill: 3px tall, 2px-radius brand-blue bar under the active tab/nav link, and a 3×16px vertical pill at the left of the active sidebar item
- Inputs: 1px #D1D1D1 border with a darker #616161 bottom stroke; focus turns the bottom stroke brand blue (2px visual)
- Corners: 4px on buttons, inputs, chips and badges; 8px on cards, lists and windows; nothing larger
- Window chrome motif: product shots framed as a Windows 11 window with ─ ☐ ✕ caption buttons on an acrylic title bar

## Design tokens — use these exact values
Colours (light mode):
  - background #F3F3F3
  - surface #FFFFFF
  - surface-2 #FAFAFA
  - text #242424
  - text-muted #5C5C5C
  - primary #0F6CBD (text on it #FFFFFF)
  - secondary #EBF3FC (text on it #0F548C)
  - accent #0078D4
  - border #D1D1D1
  - success #107C10 · warning #BC4B09 · danger #C50F1F
  - chart series #0F6CBD, #00A5AF, #8764B8, #C239B3, #F7630C
Radius: sm 2px, md 4px, lg 8px, xl 12px, pill 999px
Border width: 1px
Shadows: sm `0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)`, md `0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)`, lg `0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14)` (where shadows reference var(--c-border) use the border colour)
Spacing: 8px base unit × 0.95 density
Motion: 200ms cubic-bezier(0.1, 0.9, 0.2, 1)

## Typography (Latin + Thai)
- Headings: Open Sans 600/700 with Thai fallback Noto Sans Thai 600/700
- Body: Open Sans 400/600 with Thai fallback Noto Sans Thai 400/600
- Google Fonts URL: https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Noto+Sans+Thai:wght@400;600;700&display=swap
- CSS stacks: heading `"Open Sans", "Noto Sans Thai", system-ui, sans-serif`; body `"Open Sans", "Noto Sans Thai", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face.
- Display size clamp(2.5rem, 5vw, 4.25rem), heading weight 600, heading tracking -0.01em (Latin only), sentence-case labels.
- Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side.
- Why this pairing: Open Sans shares Segoe UI’s designer and humanist shapes; loopless Noto Sans Thai matches Windows’ Leelawadee UI with the same calm, open proportions.

## Components
- Primary button: #0F6CBD fill, white 600 label, 4px radius, 32–40px tall; hover #115EA3, pressed #0C3B5E; no lift or shadow
- Secondary button: white fill, 1px #D1D1D1 border with a slightly darker bottom edge; hover #FAFAFA
- Subtle/ghost button: transparent, hover rgba(0,0,0,.045), pressed rgba(0,0,0,.08)
- Cards: white, 8px radius, 1px rgba(0,0,0,.07) stroke, shadow-2; feature icons in 40px #EBF3FC tiles with brand-blue glyphs
- Badges and tags: 4px radius 'tint' appearance — #EBF3FC fill, #B4D6FA border, #0F548C text; status tints mix 10% of the status colour into white
- Switch: 40×20 pill track with 1px #616161 outline and 12px grey thumb when off; brand fill with white thumb when on
- Checkbox: 18px, 4px radius, 1px #616161 border; checked = brand fill with white tick
- NavigationView sidebar: transparent over Mica, 36px items with 4px radius, hover rgba(0,0,0,.045), active item tinted with the vertical brand pill
- Data grid: 600-weight sentence-case headers, 10px rows separated by hairlines, hover row tint
- Progress bar: 4px tall brand fill on a 12% grey track

## Layout for this web page
Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer.
Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → features → showcase → steps → testimonials → pricing → faq → cta. Feature section as grid.
Landing: acrylic sticky nav with pill-underlined current link, split hero with a 600-weight headline, compact blue + outline buttons and the product shot framed as a Windows window. Then a quiet logo row, a 4-column grid of white feature cards with tinted icon tiles, a showcase with a TabList, numbered steps in tinted 4px squares, testimonials, pricing with a brand-blue featured plan, FAQ as stacked white accordion cards and a left-aligned blue gradient CTA. Dashboard: NavigationView sidebar sitting directly on Mica, transparent top bar with an acrylic search box, white KPI cards, line chart, system status, data grid and activity feed.

## Content
Use realistic product copy (fictional brand) suited to: Productivity and collaboration SaaS. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match.

## Do
- Keep controls compact: 32–40px tall, 4px radius, 600-weight labels
- Show selection with a 3px rounded brand pill (16px long beside nav items, full width under tabs)
- Use acrylic only on bars, menus and flyouts — content cards stay solid white

## Don't
- Don’t use large radii (>8px) on cards or pill-shaped buttons
- Don’t introduce a second saturated brand colour
- Don’t use heavy drop shadows — two soft layers (2px ambient + key) at ≤14% opacity
- Pill-shaped buttons or radii above 8px — that reads as Material or iOS
- A dark navy sidebar or dense uppercase table headers — that is Enterprise SaaS
- Glass on content cards or colourful blobs behind everything — acrylic is for bars and flyouts only
- More than one saturated brand colour
- Heavy 700+ display headlines or tight negative tracking
- Big drop shadows or hover lifts on cards

## Stack notes
One self-contained HTML file with a <style> block. Declare all tokens as CSS custom properties on :root and build every component from them. No frameworks.

## Acceptance checklist
- Someone who knows the "Fluent 2" style recognises it at a glance from the signature details.
- Every colour, radius, border and shadow comes from the tokens above.
- Thai and English text both render in their intended fonts with comfortable line-height.
- Text contrast meets WCAG AA (4.5:1 body, 3:1 large text) unless the style explicitly trades this off.
- Interactive elements have hover, focus-visible and pressed states in the style's language.
```