Fluent 2

Also called: Microsoft Fluent, Fluent UI, Fluent Design

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

“Windows 11 look”Platform Design SystemsEra: 2021 → today (Windows 11, Microsoft 365)CalmTrustworthySeriousTechy

Open full screen ↗

fluent-2 / landingEN

fluent-2 / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm2pxRadius md4pxRadius lg8pxRadius xl12pxDensity×0.95Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

Mica backgroundacrylic blur bars4px cornersbrand blue #0F6CBDpill selection indicatorbottom-stroke inputssoft layered shadowsSegoe-like humanist type

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

Not to be confused with

Enterprise SaaS →Enterprise SaaS is navy and indigo with a dark sidebar and dense ruled tables; Fluent 2 is light grey Mica with acrylic bars, pill indicators and a single bright blue.Flat Design →Flat design removes all depth and uses many bright colours; Fluent keeps soft layered shadows, translucent acrylic and a neutral palette.Glassmorphism →Glassmorphism makes every panel frosted over vivid blobs; Fluent uses acrylic only on bars and flyouts over a nearly neutral canvas.

On mobile

On phones Fluent becomes a calm list app: acrylic top and bottom bars, grouped white lists on a grey canvas, 8px cards and a brand-blue active tab with a small pill indicator. Drop the Mica wash to a flat grey and keep blur to the bars only.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinOpen Sans · 600/700

The quick brown fox

Heading · ThaiNoto Sans Thai · 600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinOpen Sans · 400/600

Clear words make shared decisions.

Body · ThaiNoto Sans Thai · 400/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Open Sans shares Segoe UI’s designer and humanist shapes; loopless Noto Sans Thai matches Windows’ Leelawadee UI with the same calm, open proportions.

Colour palette

Light

Dark

Design tokens

Radius	`sm 2px · md 4px · lg 8px · xl 12px · pill 999px`
Border	`1px`
Shadow	`0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)`
Display	`clamp(2.5rem, 5vw, 4.25rem)`
Motion	`200ms cubic-bezier(0.1, 0.9, 0.2, 1)`
Density	`×0.95`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Fluent 2 (fluent-2) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Noto+Sans+Thai:wght@400;600;700&display=swap
 */
:root {
  --radius: 8px;
  --background: #F3F3F3;
  --foreground: #242424;
  --card: #FFFFFF;
  --card-foreground: #242424;
  --popover: #FFFFFF;
  --popover-foreground: #242424;
  --primary: #0F6CBD;
  --primary-foreground: #FFFFFF;
  --secondary: #EBF3FC;
  --secondary-foreground: #0F548C;
  --muted: #FAFAFA;
  --muted-foreground: #5C5C5C;
  --accent: #FAFAFA;
  --accent-foreground: #242424;
  --destructive: #C50F1F;
  --border: #D1D1D1;
  --input: #D1D1D1;
  --ring: #0F6CBD;
  --chart-1: #0F6CBD;
  --chart-2: #00A5AF;
  --chart-3: #8764B8;
  --chart-4: #C239B3;
  --chart-5: #F7630C;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #242424;
  --sidebar-primary: #0F6CBD;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #FAFAFA;
  --sidebar-accent-foreground: #242424;
  --sidebar-border: #D1D1D1;
  --sidebar-ring: #0F6CBD;
}

.dark {
  --background: #202020;
  --foreground: #FFFFFF;
  --card: #2B2B2B;
  --card-foreground: #FFFFFF;
  --popover: #2B2B2B;
  --popover-foreground: #FFFFFF;
  --primary: #115EA3;
  --primary-foreground: #FFFFFF;
  --secondary: #082338;
  --secondary-foreground: #B4D6FA;
  --muted: #252525;
  --muted-foreground: #ADADAD;
  --accent: #252525;
  --accent-foreground: #FFFFFF;
  --destructive: #DC626D;
  --border: #474747;
  --input: #474747;
  --ring: #115EA3;
  --chart-1: #479EF5;
  --chart-2: #4FD2DA;
  --chart-3: #B696E0;
  --chart-4: #EE7ADF;
  --chart-5: #F98845;
  --sidebar: #2B2B2B;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #115EA3;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #252525;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #474747;
  --sidebar-ring: #115EA3;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Fluent 2 (fluent-2) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Noto+Sans+Thai:wght@400;600;700&display=swap
 */
@theme {
  --color-bg: #F3F3F3;
  --color-surface: #FFFFFF;
  --color-surface-2: #FAFAFA;
  --color-text: #242424;
  --color-text-muted: #5C5C5C;
  --color-primary: #0F6CBD;
  --color-on-primary: #FFFFFF;
  --color-secondary: #EBF3FC;
  --color-on-secondary: #0F548C;
  --color-accent: #0078D4;
  --color-border: #D1D1D1;
  --color-success: #107C10;
  --color-warning: #BC4B09;
  --color-danger: #C50F1F;
  --color-chart-1: #0F6CBD;
  --color-chart-2: #00A5AF;
  --color-chart-3: #8764B8;
  --color-chart-4: #C239B3;
  --color-chart-5: #F7630C;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
  --shadow-md: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
  --shadow-lg: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14);
  --font-heading: "Open Sans", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Open Sans", "Noto Sans Thai", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace;
}

.dark {
  --color-bg: #202020;
  --color-surface: #2B2B2B;
  --color-surface-2: #252525;
  --color-text: #FFFFFF;
  --color-text-muted: #ADADAD;
  --color-primary: #115EA3;
  --color-on-primary: #FFFFFF;
  --color-secondary: #082338;
  --color-on-secondary: #B4D6FA;
  --color-accent: #479EF5;
  --color-border: #474747;
  --color-success: #54B054;
  --color-warning: #F98845;
  --color-danger: #DC626D;
  --color-chart-1: #479EF5;
  --color-chart-2: #4FD2DA;
  --color-chart-3: #B696E0;
  --color-chart-4: #EE7ADF;
  --color-chart-5: #F98845;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Fluent 2 (fluent-2). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Noto+Sans+Thai:wght@400;600;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9529,
            0.9529
          ],
          "hex": "#f3f3f3"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9804,
            0.9804,
            0.9804
          ],
          "hex": "#fafafa"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.1412,
            0.1412
          ],
          "hex": "#242424"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3608,
            0.3608,
            0.3608
          ],
          "hex": "#5c5c5c"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.4235,
            0.7412
          ],
          "hex": "#0f6cbd"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9216,
            0.9529,
            0.9882
          ],
          "hex": "#ebf3fc"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.3294,
            0.549
          ],
          "hex": "#0f548c"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.4706,
            0.8314
          ],
          "hex": "#0078d4"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8196,
            0.8196,
            0.8196
          ],
          "hex": "#d1d1d1"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0627,
            0.4863,
            0.0627
          ],
          "hex": "#107c10"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7373,
            0.2941,
            0.0353
          ],
          "hex": "#bc4b09"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7725,
            0.0588,
            0.1216
          ],
          "hex": "#c50f1f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.4235,
            0.7412
          ],
          "hex": "#0f6cbd"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.6471,
            0.6863
          ],
          "hex": "#00a5af"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5294,
            0.3922,
            0.7216
          ],
          "hex": "#8764b8"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7608,
            0.2235,
            0.702
          ],
          "hex": "#c239b3"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.3882,
            0.0471
          ],
          "hex": "#f7630c"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1255,
            0.1255,
            0.1255
          ],
          "hex": "#202020"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1686,
            0.1686
          ],
          "hex": "#2b2b2b"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1451,
            0.1451,
            0.1451
          ],
          "hex": "#252525"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6784,
            0.6784,
            0.6784
          ],
          "hex": "#adadad"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.3686,
            0.6392
          ],
          "hex": "#115ea3"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.1373,
            0.2196
          ],
          "hex": "#082338"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.8392,
            0.9804
          ],
          "hex": "#b4d6fa"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2784,
            0.6196,
            0.9608
          ],
          "hex": "#479ef5"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2784,
            0.2784,
            0.2784
          ],
          "hex": "#474747"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3294,
            0.6902,
            0.3294
          ],
          "hex": "#54b054"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9765,
            0.5333,
            0.2706
          ],
          "hex": "#f98845"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8627,
            0.3843,
            0.4275
          ],
          "hex": "#dc626d"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2784,
            0.6196,
            0.9608
          ],
          "hex": "#479ef5"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.8235,
            0.8549
          ],
          "hex": "#4fd2da"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7137,
            0.5882,
            0.8784
          ],
          "hex": "#b696e0"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.4784,
            0.8745
          ],
          "hex": "#ee7adf"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9765,
            0.5333,
            0.2706
          ],
          "hex": "#f98845"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 14,
            "unit": "px"
          },
          "blur": {
            "value": 28,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Open Sans",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Open Sans",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.1,
      0.9,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.95
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!