Style · 09

Fluent Design

Fluent = calm chrome, 4px corners, one work blue, and hairlines that separate instead of shadows.

Calm chrome, 4px corners, one work blue, hairline depth.

Page Overall

Page

Formulas stay in English so you can paste them straight into your tool.

BUILD
- Build a complete Fluent-style productivity app home. Not a card, not an isolated navbar, not a marketing page, not a tabs widget.
- Domain: an org workspace where a command bar, a rail, and a data grid carry the identity.

STYLE
- Fluent: near-white canvas #FAFAFA, white surfaces, 4-8px corners, hairline separators
- Type #242424, mute #616161, work blue #0F6CBD for actions and selection only
- Depth is a 1px border rgba(0,0,0,0.06) plus shadow 0 1px 2px rgba(0,0,0,0.1); hover deepens to 0 4px 10px
- System UI stack for type, tabular numerals for data. No display fonts

LAYOUT
- Top bar as page chrome: wordmark North, command-style search, CTA New doc (#0F6CBD, 4px radius, white type)
- Left rail with mark + Home / Files / Apps; content canvas and status footer beside it
- Finished app home: four KPI tiles, a bar chart, a data grid with header row, status footer

SECTIONS
1. KPI row: Docs / Edits / Storage / Sync
2. Bar chart panel with #0F6CBD bars on white
3. Data grid: Name / Owner / Status / Modified, hairline row rules
4. Status footer: Synced · org-east · v3.1

INTERACTION
- Hover deepens panel shadows and tints rows #F5F5F5. Nothing translates, nothing glows

TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to Fluent tokens - not default shadcn. One app route.

DON'Ts
- No pill buttons, no 12px+ radius, no gradients, no second accent
- No emoji icons. No marketing hero on an app shell
- Do not output only a headline plus two empty cells

MOTION
- Reveal highlight follows the pointer at 120ms ease-out.
- Expand and collapse: 200ms ease-out.
- Elements entering the viewport stagger ~100ms.
- prefers-reduced-motion: drop the pointer highlight.

Card

Formulas stay in English so you can paste them straight into your tool.

Build a single Fluent card. Not a page, not a dashboard.

STYLE
- Fluent: calm chrome, hairline depth, one work blue
- Card #FFFFFF, 8px radius, 1px border rgba(0,0,0,0.06) plus shadow 0 1px 2px rgba(0,0,0,0.1)
- Kicker SPECIMEN in #0F6CBD, title #242424, body #616161. Stage is canvas #F5F5F5

LAYOUT
- One card: kicker SPECIMEN, title, one-line summary, one primary button
- No extra tiles, no navbar

INTERACTION
- Hover deepens the shadow to 0 4px 10px rgba(0,0,0,0.14). The card never moves

CONSTRAINTS
- One accent #0F6CBD. No fills darker than #FAFAFA, no shadows heavier than 0 4px 10px

TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to these tokens - not default shadcn

Buttons

Formulas stay in English so you can paste them straight into your tool.

Build a Fluent button row only: Continue (primary), Save (secondary), Skip (ghost). Not a card, not a page.

STYLE
- Continue: #0F6CBD fill, white type, 4px radius, no shadow at rest
- Save: white fill, type #242424, 1px border #D1D1D1, 4px radius
- Skip: ghost type #0F6CBD, transparent. Stage is canvas #F5F5F5

LAYOUT
- One horizontal row, 10px gap, 32px height, no wrapping card

INTERACTION
- Hover darkens the primary to #115EA3 and tints the secondary #F5F5F5. No translate, no glow

CONSTRAINTS
- One work blue #0F6CBD. No pills, no gradients, no 12px+ radius

TECHNICAL
- React, Tailwind CSS, restyle shadcn Button - do not keep default shadcn look

Navbar

Formulas stay in English so you can paste them straight into your tool.

Build a Fluent app top bar only. Not tabs, not a page.

STYLE
- White bar with an inset 0 -1px 0 #E0E0E0 hairline; command-bar rhythm, 48px tall
- Wordmark North #242424; links Overview and Billing #424242; New doc #0F6CBD, white type, 4px radius

LAYOUT
- Single horizontal chrome: wordmark, two links, New doc. No panel, no pill shapes

INTERACTION
- Hover on links tints them #F5F5F5 with #242424 type. The bar itself never lifts

CONSTRAINTS
- Hairlines only, one work blue #0F6CBD, no pills

TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation - not default shadcn

Tabs

Formulas stay in English so you can paste them straight into your tool.

Build a Fluent Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.

STYLE
- Selected: type #0F6CBD weight 600 with a 2px #0F6CBD bottom rule
- Unselected: type #424242, transparent rule
- Panel: white, 8px radius, 1px border rgba(0,0,0,0.06), shadow 0 1px 2px rgba(0,0,0,0.08)

LAYOUT
- Horizontal tablist + one panel. No wordmark, no CTA

INTERACTION
- Hover on unselected: type darkens to #242424 and the rule shows #D1D1D1. No fill pills

CONSTRAINTS
- Underline indicators only, one work blue #0F6CBD. No pill fills

TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs - do not keep default shadcn look

What is Fluent Design?

Fluent UI is productivity chrome: near-white canvas, 4-8px corners, hairline separators, one dependable work blue, and depth that whispers. If you skip the command-bar rhythm, the model ships a loud consumer page.

Elements

4px corners
Hairline depth
One work blue

Put this word in the prompt.

Typical colors

#0F6CBD
#242424
#FAFAFA
#E0E0E0

Use on

Productivity
Admin tools
Data grids

Prompt formula

[Component] + Fluent + Hairline + Work blue + 4px

Fluent Design

Calm chrome. Quiet depth.

Fluent Design

What is Fluent Design?

Elements

Typical colors

Use on

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns