HoloLake Fifth Domain Workspace Design System

Product expression

HoloLake is a calm operational workspace, not a dashboard wall and not a themed chat client. The user should immediately understand three levels: the signed-in human and server, the active channel, and the module currently opened inside that channel.

Visual direction

Keep the deep lake-night palette, but use it as a quiet frame around readable work surfaces.
Use one cyan accent only for the active state, primary action, and verified connection.
Remove decorative Chinese-character avatars. Never use the character 湖 as an icon or logo.
The HoloLake orbit mark is a small geometric identifier, never a large empty-state illustration.
Prefer open spacing and tonal separation over nested borders and boxed panels.
Avoid gradients, glass effects, excessive pills, oversized titles, and ornamental typography.

Hierarchy

Global identity and server session: always discoverable, visually compact.
Active channel: one clear label, not repeated across the top bar and sidebar.
Active module: the dominant work context.
Document or task content: receives most screen space.
Agent: an on-demand work surface, collapsed by default; model and repository configuration live in Settings.

Typography

Interface: Inter, PingFang SC, system sans-serif.
Reading content may use Songti SC only inside the document canvas when the user selects a serif preference.
Default interface size 14 px; supporting text 12 px; document body 16-18 px.
Limit interface headings to 20-24 px. Do not use display-size Chinese characters as symbols.

Layout and spacing

8 px spacing grid.
Global rail: 56-64 px when collapsed, up to 224 px only when explicitly expanded.
Context sidebar: 240-280 px and collapsible.
Main work surface: flexible, minimum readable width 640 px.
Agent drawer: 360-420 px, overlay or resizable; never compress the document below readable width.
Radius: 8 px controls, 12 px surfaces. Avoid nesting more than one bordered surface.

States and language

A saved API key is not an online Agent. Show 已保存, 正在检测, 可用, and 不可用 as separate states.
The primary signed-out action is 登录第五域; after login show the human account and node ID.
Local-only and server-hosted knowledge are explicit choices. Server hosting is unavailable until the human is authenticated.
Errors state the failed layer and a useful next action.

Accessibility

Minimum 4.5:1 text contrast.
Every icon-only control requires an accessible label and visible hover/focus state.
Do not communicate connection state by color alone.

2.6 KiB Raw Blame History