风格 · 09
Fluent 设计 Fluent 设计 = 克制的控件、4 像素圆角、单一工作蓝，用发丝线而非阴影做分隔。
冷静的 chrome、4px 圆角、单一工作蓝、发丝级层次。
标本 North Workspace Search files New doc Calm chrome. Quiet depth. Calm chrome over a productive canvas. Hairline depth, one work blue.
Docs 1,284 Org
Edits 9.2k 24h
Storage 62% Pool
Sync OK All
Name Owner Status Modified
Q3 plan North Synced 2m
Design review Avery Editing now
Roadmap North Synced 1h
整页 整体 整页 复制 Prompt
配方保持英文，便于直接贴进工具。
BUILD
- Build a complete Fluent-style productivity app home. Not a card, not an isolated navbar, not a marketing page, not a tabs widget.
- Domain: an org workspace where a command bar, a rail, and a data grid carry the identity.
STYLE
- Fluent: near-white canvas #FAFAFA, white surfaces, 4-8px corners, hairline separators
- Type #242424, mute #616161, work blue #0F6CBD for actions and selection only
- Depth is a 1px border rgba(0,0,0,0.06) plus shadow 0 1px 2px rgba(0,0,0,0.1); hover deepens to 0 4px 10px
- System UI stack for type, tabular numerals for data. No display fonts
LAYOUT
- Top bar as page chrome: wordmark North, command-style search, CTA New doc (#0F6CBD, 4px radius, white type)
- Left rail with mark + Home / Files / Apps; content canvas and status footer beside it
- Finished app home: four KPI tiles, a bar chart, a data grid with header row, status footer
SECTIONS
1. KPI row: Docs / Edits / Storage / Sync
2. Bar chart panel with #0F6CBD bars on white
3. Data grid: Name / Owner / Status / Modified, hairline row rules
4. Status footer: Synced · org-east · v3.1
INTERACTION
- Hover deepens panel shadows and tints rows #F5F5F5. Nothing translates, nothing glows
TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to Fluent tokens - not default shadcn. One app route.
DON'Ts
- No pill buttons, no 12px+ radius, no gradients, no second accent
- No emoji icons. No marketing hero on an app shell
- Do not output only a headline plus two empty cells
MOTION
- Reveal highlight follows the pointer at 120ms ease-out.
- Expand and collapse: 200ms ease-out.
- Elements entering the viewport stagger ~100ms.
- prefers-reduced-motion: drop the pointer highlight.
标本 标本
Fluent Design Calm chrome, 4px corners, one work blue, hairline depth.
Continue 卡片 卡片 复制 Prompt
配方保持英文，便于直接贴进工具。
Build a single Fluent card. Not a page, not a dashboard.
STYLE
- Fluent: calm chrome, hairline depth, one work blue
- Card #FFFFFF, 8px radius, 1px border rgba(0,0,0,0.06) plus shadow 0 1px 2px rgba(0,0,0,0.1)
- Kicker SPECIMEN in #0F6CBD, title #242424, body #616161. Stage is canvas #F5F5F5
LAYOUT
- One card: kicker SPECIMEN, title, one-line summary, one primary button
- No extra tiles, no navbar
INTERACTION
- Hover deepens the shadow to 0 4px 10px rgba(0,0,0,0.14). The card never moves
CONSTRAINTS
- One accent #0F6CBD. No fills darker than #FAFAFA, no shadows heavier than 0 4px 10px
TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to these tokens - not default shadcn
按钮 按钮 复制 Prompt
配方保持英文，便于直接贴进工具。
Build a Fluent button row only: Continue (primary), Save (secondary), Skip (ghost). Not a card, not a page.
STYLE
- Continue: #0F6CBD fill, white type, 4px radius, no shadow at rest
- Save: white fill, type #242424, 1px border #D1D1D1, 4px radius
- Skip: ghost type #0F6CBD, transparent. Stage is canvas #F5F5F5
LAYOUT
- One horizontal row, 10px gap, 32px height, no wrapping card
INTERACTION
- Hover darkens the primary to #115EA3 and tints the secondary #F5F5F5. No translate, no glow
CONSTRAINTS
- One work blue #0F6CBD. No pills, no gradients, no 12px+ radius
TECHNICAL
- React, Tailwind CSS, restyle shadcn Button - do not keep default shadcn look
标本 North Overview Billing Open
顶栏 顶栏 复制 Prompt
配方保持英文，便于直接贴进工具。
Build a Fluent app top bar only. Not tabs, not a page.
STYLE
- White bar with an inset 0 -1px 0 #E0E0E0 hairline; command-bar rhythm, 48px tall
- Wordmark North #242424; links Overview and Billing #424242; New doc #0F6CBD, white type, 4px radius
LAYOUT
- Single horizontal chrome: wordmark, two links, New doc. No panel, no pill shapes
INTERACTION
- Hover on links tints them #F5F5F5 with #242424 type. The bar itself never lifts
CONSTRAINTS
- Hairlines only, one work blue #0F6CBD, no pills
TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation - not default shadcn
标本 Overview Billing Activity
SECTION
Two lines of English dummy for Overview. Plan usage and upcoming invoices stay in this panel.
标签 标签 复制 Prompt
配方保持英文，便于直接贴进工具。
Build a Fluent Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.
STYLE
- Selected: type #0F6CBD weight 600 with a 2px #0F6CBD bottom rule
- Unselected: type #424242, transparent rule
- Panel: white, 8px radius, 1px border rgba(0,0,0,0.06), shadow 0 1px 2px rgba(0,0,0,0.08)
LAYOUT
- Horizontal tablist + one panel. No wordmark, no CTA
INTERACTION
- Hover on unselected: type darkens to #242424 and the rule shows #D1D1D1. No fill pills
CONSTRAINTS
- Underline indicators only, one work blue #0F6CBD. No pill fills
TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs - do not keep default shadcn look
Fluent 设计是什么？ Fluent 是生产力 chrome：近白画布、4–8px 圆角、发丝分隔线、一个可靠的工作蓝，深度低声细语。不写命令栏节奏，模型就会交出喧闹的消费级页面。
典型色 #0F6CBD #242424 #FAFAFA #E0E0E0 复制 Prompt BUILD
- Build a complete Fluent-style productivity app home. Not a card, not an isolated navbar, not a marketing page, not a tabs widget.
- Domain: an org workspace where a command bar, a rail, and a data grid carry the identity.
STYLE
- Fluent: near-white canvas #FAFAFA, white surfaces, 4-8px corners, hairline separators
- Type #242424, mute #616161, work blue #0F6CBD for actions and selection only
- Depth is a 1px border rgba(0,0,0,0.06) plus shadow 0 1px 2px rgba(0,0,0,0.1); hover deepens to 0 4px 10px
- System UI stack for type, tabular numerals for data. No display fonts
LAYOUT
- Top bar as page chrome: wordmark North, command-style search, CTA New doc (#0F6CBD, 4px radius, white type)
- Left rail with mark + Home / Files / Apps; content canvas and status footer beside it
- Finished app home: four KPI tiles, a bar chart, a data grid with header row, status footer
SECTIONS
1. KPI row: Docs / Edits / Storage / Sync
2. Bar chart panel with #0F6CBD bars on white
3. Data grid: Name / Owner / Status / Modified, hairline row rules
4. Status footer: Synced · org-east · v3.1
INTERACTION
- Hover deepens panel shadows and tints rows #F5F5F5. Nothing translates, nothing glows
TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to Fluent tokens - not default shadcn. One app route.
DON'Ts
- No pill buttons, no 12px+ radius, no gradients, no second accent
- No emoji icons. No marketing hero on an app shell
- Do not output only a headline plus two empty cells
MOTION
- Reveal highlight follows the pointer at 120ms ease-out.
- Expand and collapse: 200ms ease-out.
- Elements entering the viewport stagger ~100ms.
- prefers-reduced-motion: drop the pointer highlight.