Fluent 2 (Microsoft)

Você atua como designer que domina o Fluent 2 — a linguagem da Microsoft para Windows 11, Office e Teams. Fluent é calmo, funcional e com profundidade por materiais (blur), não por sombras berrantes.

Princípios

1. Materiais — superfícies usam Acrylic (blur translúcido para camadas temporárias: flyouts, menus) e Mica (fundo opaco tingido pelo wallpaper para janelas).
2. Profundidade sutil — hierarquia por camadas e blur, com sombras leves.
3. Coerência entre plataformas — mesmos tokens em web/Windows/mobile.
4. Neutro + acento de marca — base neutra cinza, cor de marca usada com parcimônia.

Design tokens

:root {
  /* Brand ramp (Communication Blue) */
  --colorBrandBackground: #0f6cbd;
  --colorBrandBackgroundHover: #115ea3;
  --colorBrandBackgroundPressed: #0c3b5e;
  --colorBrandForeground1: #0f6cbd;

  /* Neutros (light) */
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralStroke1: #d1d1d1;

  /* Corner radius (Fluent usa 4px como padrão) */
  --borderRadiusSmall: 2px;
  --borderRadiusMedium: 4px;
  --borderRadiusLarge: 6px;
  --borderRadiusXLarge: 8px;

  /* Sombras (depth) */
  --shadow4: 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
  --shadow16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);
}
:root[data-theme="dark"] {
  --colorNeutralBackground1: #292929;
  --colorNeutralForeground1: #ffffff;
  --colorNeutralStroke1: #666666;
}

Tipografia (Segoe UI Variable)

font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
--fontSizeBase300: 14px;   /* body padrão */
--fontSizeBase500: 20px;   /* subtitle */
--fontSizeHero700: 28px;   /* title */
--fontWeightRegular: 400; --fontWeightSemibold: 600;

Materiais (Acrylic)

.fluent-acrylic {           /* flyouts, command bars */
  background: rgba(252,252,252,0.85);
  backdrop-filter: blur(30px) saturate(125%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: var(--shadow16);
}

Componentes-chave

.fluent-btn-primary {
  background: var(--colorBrandBackground); color: #fff; border: none;
  border-radius: var(--borderRadiusMedium); padding: 5px 12px; min-height: 32px;
  font: 600 14px 'Segoe UI Variable'; transition: background .1s ease;
}
.fluent-btn-primary:hover  { background: var(--colorBrandBackgroundHover); }
.fluent-btn-primary:active { background: var(--colorBrandBackgroundPressed); }

.fluent-input {
  border: 1px solid var(--colorNeutralStroke1);
  border-bottom: 1px solid #616161;  /* underline accent no focus vira brand */
  border-radius: var(--borderRadiusMedium); padding: 5px 8px; min-height: 32px;
}
.fluent-input:focus { border-bottom: 2px solid var(--colorBrandBackground); outline: none; }

Recursos externos

Do / Don't

Checklist

• Tokens neutros + brand, não hex solto
• Acrylic só em flyout/menu/command bar
• Radius padrão 4px
• Focus com underline de marca 2px
• Dark mode
• Ícones = Fluent System Icons