--- version: alpha name: Fluent 2 Enterprise Workbench Interface description: "A Fluent 2-inspired enterprise workbench interface for Microsoft-like productivity surfaces, internal tools, AI copilots, command bars, data grids, approval flows, and cross-platform business applications. It uses neutral surfaces, semantic alias tokens, Segoe-style typography, restrained brand blue, high-contrast-aware focus, command bars, side navigation, cards, panels, and AI assist surfaces without copying Microsoft product identity." colors: primary: "#0f6cbd" primary-hover: "#115ea3" on-primary: "#ffffff" brand-soft: "#ebf3fc" canvas: "#f5f5f5" surface-card: "#ffffff" surface-soft: "#fafafa" surface-layer: "#f0f0f0" surface-selected: "#ebf3fc" surface-hover: "#f3f2f1" ink: "#242424" body: "#424242" muted: "#616161" subtle: "#8a8886" hairline: "#d1d1d1" hairline-strong: "#8a8886" focus: "#000000" success: "#0e700e" success-surface: "#dff6dd" warning: "#bc4b09" warning-surface: "#fff4ce" danger: "#c50f1f" danger-surface: "#fde7e9" copilot: "#8a3ffc" copilot-surface: "#f3edff" inverse-canvas: "#1b1a19" inverse-surface: "#292827" inverse-ink: "#f5f5f5" typography: display-xl: fontFamily: "Segoe UI, Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 1.08 letterSpacing: 0 heading-lg: fontFamily: "Segoe UI, Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 32px fontWeight: 600 lineHeight: 1.16 letterSpacing: 0 heading-md: fontFamily: "Segoe UI, Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0 body: fontFamily: "Segoe UI, Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "Segoe UI, Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.42 letterSpacing: 0 caption: fontFamily: "Segoe UI, Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 11px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0 mono: fontFamily: "Cascadia Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" fontSize: 12px fontWeight: 500 lineHeight: 1.45 letterSpacing: 0 rounded: none: 0px xs: 2px sm: 4px md: 6px lg: 8px xl: 12px pill: 9999px spacing: base: 4px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 72px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 8px 14px button-subtle: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 8px 12px command-bar: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: 8px work-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 16px copilot-panel: backgroundColor: "{colors.copilot-surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xl}" padding: 18px data-row: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 10px 12px status-pill: backgroundColor: "{colors.success-surface}" textColor: "{colors.success}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 3px 8px layout: shell: "Enterprise app shell with side navigation, top command bar, central work queue, detail panel, and optional AI assist rail." density: "Medium-to-high density. Daily work surfaces should scan quickly but leave enough space for focus, keyboard navigation, and status text." grid: "Use a persistent rail/sidebar plus 12-column content grid on desktop. Compact screens collapse side navigation into a top entry and stack work queue, detail, and assist panel." accessibility: "Focus states need thick visible outlines, not only color changes. Semantic color must pair with text, icon, or status label." guidance: do: - "Use global and alias tokens so color, type, spacing, radius, and elevation are not hardcoded in components." - "Keep brand blue restrained for primary actions, links, selection, and information states." - "Use command bars, side navigation, cards, data rows, panels, and banners as the main enterprise building blocks." - "Reserve Copilot-like purple or gradient treatment for assistive AI surfaces, not ordinary decoration." - "Support light, dark, high-contrast, and branded themes through semantic tokens." dont: - "Do not copy Microsoft product logos, M365 app chrome, Fluent illustration, or proprietary product layouts." - "Do not use semantic red, yellow, or green for decoration." - "Do not hide keyboard focus inside subtle shadows." - "Do not make AI panels look like magic overlays without task context, citations, status, and undo paths." - "Do not overload every surface with brand color." caseStudy: source: "Fluent 2 Design System, Fluent UI, Fluent color guidance, design tokens, and design principles" urls: - "https://fluent2.microsoft.design/" - "https://fluent2.microsoft.design/design-principles" - "https://fluent2.microsoft.design/design-tokens" - "https://fluent2.microsoft.design/color" - "https://fluent2.microsoft.design/get-started/design" - "https://developer.microsoft.com/en-us/fluentui" - "https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/design-tokens" analysis: "Fluent 2 emphasizes cross-platform familiarity, focus, inclusion, product recognition, robust token layers, semantic color, high-contrast-aware theming, and component handoff from Figma to code libraries. This Interface abstracts those lessons for enterprise workbench generation: build with semantic tokens, neutral hierarchy, restrained brand color, command surfaces, visible focus, and task-aware AI assistance rather than copying Microsoft product UI." --- # Fluent 2 Enterprise Workbench Interface Use this system for enterprise SaaS, productivity surfaces, internal tools, approval queues, admin consoles, sales and support workspaces, M365-like add-ins, and AI-assisted business workflows. The posture is calm, familiar, and work-focused. A user should know where they are, what changed, what needs attention, and how to act without visual noise. ## Overview Fluent 2 Enterprise Workbench is a page-wide Interface language for daily business software. It uses neutral surfaces, restrained blue, semantic alias tokens, side navigation, command bars, work cards, data rows, detail panels, and AI assist surfaces. The goal is not to clone Microsoft products; it is to encode the reusable system behavior: cross-platform familiarity, focus, inclusion, semantic state, and reliable handoff from design to code. ## Colors ### Brand & Accent - `primary` (#0f6cbd) is for primary action, link, selected navigation, and information emphasis. - `brand-soft` (#ebf3fc) is a quiet selected or informational surface. - `copilot` (#8a3ffc) is reserved for assistive AI surfaces and should not become a general accent. ### Surface - `canvas` (#f5f5f5) is the application floor. - `surface-card` (#ffffff) is the default panel and command bar surface. - `surface-soft`, `surface-layer`, `surface-hover`, and `surface-selected` define hierarchy and interaction without heavy decoration. ### Text - `ink` (#242424) is for headings and core labels. - `body` (#424242) carries readable UI text. - `muted` and `subtle` are for timestamps, metadata, and secondary descriptions. ### Hairlines & Borders Use `hairline` (#d1d1d1) for panels, data rows, and command surfaces. Use `hairline-strong` and `focus` for visible keyboard distinction. Focus must remain obvious in high contrast. ### Semantic Semantic red, yellow, and green only communicate actual status, risk, or feedback. Pair them with text, icons, or status labels. ## Typography ### Font Family Use Segoe UI where available. Inter or system UI can substitute, but keep the quiet weight and clear role hierarchy. ### Hierarchy Display type should remain moderate. Most enterprise surfaces rely on `heading-md`, `body`, `body-sm`, and `caption`. Avoid oversized marketing headlines inside work tools. ### Principles Typography should keep users in flow: readable labels, compact metadata, and stable command names. Avoid expressive letter spacing or decorative type inside dense work surfaces. ### Note on Font Substitutes If Segoe UI is unavailable, use system UI and preserve size, weight, line-height, and role boundaries. ## Layout ### Spacing System Base spacing is 4px. Use 8/12px for commands and rows, 16/24px for cards and panels, 32px for large group separation, and 72px for full sections. ### Grid & Container Desktop uses a persistent navigation rail or sidebar, central work area, and optional right-side detail or AI assist panel. Compact screens collapse navigation and stack work queue, detail, and assistant. ### Whitespace Philosophy Whitespace is pragmatic. It should support scanning, grouping, focus rings, and keyboard paths. It should not turn a dashboard into a marketing landing page. ## Elevation & Depth Keep depth subtle. Use borders, surface layers, and small shadows for panels, menus, callouts, and overlays. Avoid glassmorphism and glow unless the product has a specific branded reason. ## Shapes Use 4-8px radii for most enterprise components. Use 12px only for larger panels or AI assist surfaces. Use pills for compact status, filter chips, or selected labels. ## Components ### Buttons Primary buttons use brand blue. Subtle buttons use white or neutral surfaces. Dangerous actions must be visually and semantically distinct. ### Cards & Containers Work cards contain object, owner, status, timestamp, and next action. They should be scan-friendly, not decorative. ### Inputs & Forms Fields need visible labels, clear borders, focus states, help/error text, and preservation of user input on validation errors. ### Navigation Navigation should be stable and predictable. Use selected state, label, icon, and route grouping rather than color alone. ### Signature Components Command bar, side navigation, data row, status pill, detail panel, banner, and AI assist panel are the core modules. ## Do's and Don'ts Do define global and alias tokens before styling components. Do support light, dark, high-contrast, and brand variants through semantic roles. Do show AI output with task context, citations, confidence, undo, and retry paths when relevant. Don't copy Microsoft logos, app chrome, Fluent illustrations, or proprietary M365 layouts. Don't use brand blue as a decorative wash over every card. Don't rely on subtle color shifts as the only focus or selected state. ## Responsive Behavior ### Breakpoints Compact: collapse nav, stack work list, detail, and assistant. Medium: rail navigation plus content cards. Expanded: side navigation, command bar, work queue, detail panel, and optional assistant rail. ### Touch Targets Touch targets should be at least 40px in compact mode. Dense desktop rows can be smaller only when keyboard and pointer targets remain clear. ### Collapsing Strategy Move low-frequency commands into an overflow menu. Keep search, selected object, primary action, and status visible. ### Image Behavior Enterprise workbenches should use product states, avatars, documents, charts, or object previews. Avoid atmospheric stock imagery. ## Iteration Guide 1. Define the work object, status model, permissions, and next action. 2. Build the app shell with navigation, command bar, content, and detail zones. 3. Map global values to semantic alias tokens. 4. Add command, data, panel, and AI-assist components. 5. Verify focus, keyboard flow, high contrast, dark mode, and semantic status. 6. Remove decorative color and oversized marketing sections that do not help daily work. ## Known Gaps This resource does not reproduce proprietary Microsoft product layouts, icons, logos, illustrations, or Copilot brand assets. Exact platform-specific Fluent implementations and Figma UI kit internals are outside the resource; use official Fluent UI libraries when building Microsoft-aligned products.