Fluent Design

STYLEKIT_STYLE_REFERENCE
style_name: Fluent Design
style_slug: fluent-design
style_source: /styles/fluent-design

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a Fluent Design System frontend development expert. All generated code must strictly follow Microsoft's Fluent Design principles.

## Absolutely Forbidden

- Buttons without active:scale-[0.97] (no tactile press confirmation)
- focus:ring without focus:ring-offset-2 (ring merges with background, fails WCAG)
- Animation duration above 200ms (Fluent is fluid, not slow)
- Flat shadows without layering (Fluent shadows are always multi-layer)
- Cards without hover Z-axis lift (hover:-translate-y-1)
- Overcrowded acrylic effects (use selectively)
- Harsh solid borders (borders should be white/20 to white/50 on glass)

## Must Follow

- Microsoft Blue: bg-[#0078d4] for all primary actions
- Acrylic: bg-white/70 backdrop-blur-xl for cards and panels
- Rounded: rounded-sm for buttons, rounded-lg for cards
- Shadow layering: shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)] at rest
- Focus ring: focus:ring-2 focus:ring-[#0078d4] focus:ring-offset-2 on ALL focusable elements
- All buttons: hover:-translate-y-0.5, active:scale-[0.97], active:translate-y-0

## Animation & Interaction Rules

- Acrylic Depth Lift: Cards hover with hover:-translate-y-1 plus shadow expansion (shadow doubles). The transition is transition-all duration-200 ease-out. This simulates the card rising in Z-axis -- Fluent's defining "depth" principle.
- Reveal Brightening: On hover, card background brightens (bg-white/70 to bg-white/85) and border brightens (border-white/30 to border-white/50). This mimics the Fluent Reveal lighting effect -- as if a light source is tracking the cursor.
- Icon Scale: Icon containers use group class. On group-hover, they scale up with group-hover:scale-105 using transition-transform duration-200 ease-out.
- Button Float + Press: Buttons rise hover:-translate-y-0.5 and shadow intensifies. On active:scale-[0.97] active:translate-y-0 active:shadow-none -- compressed back to surface. The combination creates a physical button feel.
- Press Scale Precision: Fluent uses active:scale-[0.97] (not 0.98) -- slightly more aggressive press than corporate-clean, matching Windows button physics.
- Snappy Easing: duration-150 ease-out for buttons and controls. duration-200 ease-out for cards. Never exceed 200ms.

## Color Palette

- Primary Blue: #0078d4 (buttons, links, focus rings)
- Dark Blue: #106ebe (hover state)
- Deeper Blue: #005a9e (active state)
- Accent Yellow: #ffb900
- Accent Red: #e81123
- Accent Green: #00cc6a
- Text: gray-900 (headings), gray-700 (body), gray-500 (secondary)

## Self-Check

After generating code, verify:
1. All buttons have active:scale-[0.97] active:translate-y-0
2. All focusable elements have focus:ring-2 focus:ring-offset-2
3. Cards have hover:-translate-y-1 + shadow expansion
4. Cards use group class; icon containers have group-hover:scale-105
5. No duration above 200ms
6. Acrylic used selectively, not on everything

---

# Fluent Design Design System

> Microsoft's design system integrating five key elements -- light, depth, motion, material, and scale -- to create natural and intuitive cross-platform experiences.

## Design Philosophy

Fluent Design System is a design language launched by Microsoft in 2017, aimed at creating consistent experiences across devices.

Core five elements:
- Light: Using light effects to indicate focus and interaction
- Depth: Creating hierarchy and spatial awareness
- Motion: Natural and fluid transition animations
- Material: Semi-transparent materials like acrylic
- Scale: Adapting to devices of different sizes

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#e1e1e1]
Radius: rounded-md md:rounded-lg
```

### Shadow
```
sm: shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)]
md: shadow-[0_3.2px_7.2px_rgba(0,0,0,0.13),0_0.6px_1.8px_rgba(0,0,0,0.1)]
lg: shadow-[0_6.4px_14.4px_rgba(0,0,0,0.13),0_1.2px_3.6px_rgba(0,0,0,0.1)]
hover: hover:shadow-[0_6.4px_14.4px_rgba(0,0,0,0.18),0_1.2px_3.6px_rgba(0,0,0,0.14)]
focus: focus:shadow-[0_3.2px_7.2px_rgba(0,0,0,0.13),0_0.6px_1.8px_rgba(0,0,0,0.1)]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:scale-[1.01]
Hover opacity: (none)
Transition: transition-all duration-150 ease-out
Active: active:scale-[0.99]
```

### Typefaces
```
Heading: font-sans font-semibold tracking-tight
Body: font-sans
Mono: font-mono
```

### Type scale
```
Hero: text-4xl md:text-5xl lg:text-6xl
H1: text-3xl md:text-4xl
H2: text-2xl md:text-3xl
H3: text-lg md:text-xl
Body: text-sm md:text-base
Small: text-xs md:text-sm
```

### Spacing
```
Section: py-10 md:py-16 lg:py-24
Container: px-4 md:px-6 lg:px-8
Card: p-4 md:p-5
Gap sm: gap-2 md:gap-3
Gap md: gap-3 md:gap-4
Gap lg: gap-4 md:gap-6
```

### Color roles
```
Background primary: bg-white
Background secondary: bg-[#f3f2f1]
Background accent: bg-[#0078d4], bg-[#106ebe], bg-[#005a9e], bg-[#deecf9]
Text primary: text-[#323130]
Text secondary: text-[#605e5c]
Text muted: text-[#a19f9d]
Button primary: bg-[#0078d4] text-white
Button secondary: bg-white text-[#323130] border border-[#8a8886]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-none`
- `border-black`
- `border-2`
- `border-4`
- `shadow-[2px_2px_0px`
- `shadow-[4px_4px_0px`
- `shadow-[8px_8px_0px`
- `font-black`
- `font-serif`
- `bg-black`

### Banned patterns
- matches `^rounded-none$`
- matches `^shadow-\[\d+px_\d+px_0px`
- matches `^border-(?:black|2|4)$`
- matches `^font-(?:black|serif)$`

### Why they are banned
- `rounded-none`: Fluent Design uses subtle rounding (rounded-md to rounded-lg)
- `border-4`: Fluent Design uses thin subtle borders (border), not heavy borders
- `shadow-[4px_4px_0px`: Fluent Design uses soft acrylic-style shadows, not hard-edge
- `font-serif`: Fluent Design uses Segoe UI-style sans-serif (font-sans)

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-md
shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)]
transition-all duration-150 ease-out
font-semibold
```

### Every card must include
```
rounded-md md:rounded-lg
border border-[#e1e1e1]
shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)]
bg-white
```

### Every input must include
```
rounded-md
border border-[#8a8886]
bg-white
font-sans
focus:border-[#0078d4]
focus:outline-none
```

---

## [COMPARE] Fluent Design wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-md shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)] transition-all duration-150 ease-out font-semibold bg-[#0078d4] text-white">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="rounded-md md:rounded-lg border border-[#e1e1e1] shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)] bg-white p-4 md:p-5">
  <h3 class="font-sans font-semibold tracking-tight text-lg md:text-xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="rounded-md border border-[#8a8886] bg-white font-sans focus:border-[#0078d4] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Fluent Design page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-white text-[#323130] border border-[#e1e1e1] px-4 md:px-6 lg:px-8">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-3 md:gap-4">
    <a href="/" class="font-sans font-semibold tracking-tight text-lg md:text-xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-3 md:gap-4 font-sans text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#0078d4] text-[#323130] py-10 md:py-16 lg:py-24 px-4 md:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-sans font-semibold tracking-tight text-4xl md:text-5xl lg:text-6xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-md shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)] transition-all duration-150 ease-out font-semibold bg-[#0078d4] text-white">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-white text-[#323130] py-10 md:py-16 lg:py-24 px-4 md:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-sans font-semibold tracking-tight text-2xl md:text-3xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
      <!-- Card template - repeat for each card -->
      <div class="rounded-md md:rounded-lg border border-[#e1e1e1] shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)] bg-white p-4 md:p-5">
        <h3 class="font-sans font-semibold tracking-tight text-lg md:text-xl">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-[#a19f9d]">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="rounded-md border border-[#8a8886] bg-white font-sans focus:border-[#0078d4] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#f3f2f1] text-[#605e5c] py-10 md:py-16 lg:py-24 px-4 md:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
      <div>
        <span class="font-sans font-semibold tracking-tight text-lg md:text-xl">{LOGO_TEXT}</span>
        <p class="font-sans text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-sans font-semibold tracking-tight text-lg md:text-xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Fluent Design post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-md shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)] transition-all duration-150 ease-out font-semibold`
- [ ] Card includes: `rounded-md md:rounded-lg border border-[#e1e1e1] shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)] bg-white`
- [ ] Input includes: `rounded-md border border-[#8a8886] bg-white font-sans focus:border-[#0078d4] focus:outline-none`

### Forbidden check
- [ ] Not using `rounded-none`
- [ ] Not using `border-black`
- [ ] Not using `border-2`
- [ ] Not using `border-4`
- [ ] Not using `shadow-[2px_2px_0px`
- [ ] Not using `shadow-[4px_4px_0px`
- [ ] Not using `shadow-[8px_8px_0px`
- [ ] Not using `font-black`

### Style rule check
- [ ] Use acrylic (Acrylic) semi-transparent effect bg-white/70 backdrop-blur-xl
- [ ] Add Reveal highlight border effect (hover border-white/60)
- [ ] Use Microsoft's signature blue bg-[#0078d4]
- [ ] Maintain clean modern layouts
- [ ] Use Z-axis depth: hover:-translate-y-0.5 paired with shadow level elevation

### Style drift check
- [ ] Does not violate: Do NOT overuse acrylic effects
- [ ] Does not violate: Do NOT use clashing color schemes
- [ ] Does not violate: Do NOT ignore focus states
- [ ] Does not violate: Do NOT use heavy shadows (Fluent shadows are soft and layered)
- [ ] Does not violate: Do NOT omit active:scale-[0.97] on buttons (no tactile confirmation)

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Fluent Design

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- overuse acrylic effects
- use clashing color schemes
- ignore focus states
- use heavy shadows (Fluent shadows are soft and layered)
- omit active:scale-[0.97] on buttons (no tactile confirmation)
- omit focus:ring-offset-2 from focus:ring
- exceed duration-200 for animations (Fluent is fluid and crisp, not slow and drifting)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do NOT overuse acrylic effects
- [ ] do NOT use clashing color schemes
- [ ] do NOT ignore focus states
- [ ] do NOT use heavy shadows (Fluent shadows are soft and layered)
- [ ] do NOT omit active:scale-[0.97] on buttons (no tactile confirmation)