{"id":"fluent-design","no":140,"name":"Fluent 2","ja":"フルーエント2","era":"2022–","family":"Microsoft UI","kind":"スタイル","collection":"Dictionary expansion 07","addedAt":"2026-08-18","source":{"title":"Microsoft Fluent 2 — Material","url":"https://fluent2.microsoft.design/material"},"reference":{"status":"verified","pageUrl":"https://fluent2.microsoft.design/material","credit":"Microsoft Fluent 2 — Material","gallery":[{"imageUrl":"/quotes/fluent-design.jpg","pageUrl":"https://fluent2.microsoft.design/color","credit":"Fluent 2 Design System（Microsoft）より引用"}]},"essence":"色・文字・間隔・角丸・奥行きをトークン化し、Solid、Acrylic、Mica、Smokeという素材を用途ごとに使い分けてMicrosoft製品を横断する。","cues":["MicaとAcrylic","中立色の階層","柔らかな角丸","トークン化された奥行き"],"intents":["信頼","技術","静けさ"],"works":["WindowsやMicrosoft 365に馴染む業務UI","複数製品で一貫するテーマと状態表現"],"recipe":{"type":"参照作品の文字・記号・スケールを観察する","layout":"視線と情報を支配する構造を一つ抽出する","material":"時代・地域・制作工程に固有の素材と挙動を確認する"},"avoid":"ぼかしや影を見た目だけで使わず、面の役割、ウィンドウ状態、ライト・ダーク・高コントラストを対応させる。","colors":["#f1f3f5","#6b8eaa","#242a31"],"motif":"ui","pair":["glassmorphism","material-you"],"study":["Fluent 2","Acrylic","Mica","design tokens"],"en":{"essence":"Tokenizes color, type, spacing, radius and depth, deploying Solid, Acrylic, Mica and Smoke materials by role across Microsoft products.","cues":["Mica and Acrylic","Neutral tonal hierarchy","Soft corner radii","Tokenized depth"],"works":["Work UI at home in Windows and Microsoft 365","Themes and states consistent across many products"],"recipe":{"type":"Observe the letters, signs and scale of reference works","layout":"Extract the one structure that governs gaze and information","material":"Verify the materials and behaviors specific to era, region and process"},"avoid":"Never use blur and shadow as mere looks. Map surface roles, window states, light, dark and high contrast.","study":["Fluent 2","Acrylic","Mica","design tokens"]}}