This specification only consolidates reusable design values and interaction patterns (spacing, dimensions, color values, structure, flow), and does not cover component implementation for specific projects.
Before starting, first read the corresponding reference file according to the scenario, this file only contains content that must be followed every time.
Scenario Routing
| What to do | Read this file |
|---|---|
| Create a new HTML page (must copy the skeleton first） | assets/page-frame.html |
| Create a new page, calculate container height, determine page type | layout.md |
| Table list page (cluster / instance / ticket / resource) | list-page.md |
| Toolbox submission page (form + editable table) | toolbox-page.md |
| Detail page, detail panel, KV information display | detail-page.md |
| Modal, side panel, popconfirm, message prompt | overlay.md |
| Button theme, copy, position | button.md |
Four Types of Page Skeletons
The system has only 4 types of page skeletons, and new pages must fall into one of them; do not invent a fifth type.
| Skeleton | Determination condition | Top-level structure | Bottom action |
|---|---|---|---|
| List page | Display a filterable collection | Action area + table + pagination | None, actions are inline or in the batch area |
| Toolbox submission page | Submit a one-time change ticket | Prompt bar + form table | Fixed bottom bar 52px: Submit + Reset |
| Detail page | Read-only display of a single entity | Gray background summary bar + card stack / Tab | Fixed bottom bar: Clone / Undo, etc. |
| Configuration management page | CRUD for a small number of records | Action area + table + side panel form | Side panel footer: Submit + Cancel |
Design Tokens
Spacing is only 8 / 16 / 20 / 24
Do not use intermediate values such as 10 / 12 / 18.
| Value | Usage |
|---|---|
| 8px | Between buttons, between icon and text |
| 16px | Between action area and table, between cards |
| 20px | Between top prompt bar and form |
| 24px | Page left and right padding, Tab container |
| 88px | footer primary button min-width |
| 52px | Unified height for top bar / breadcrumb / fixed bottom bar |
| 2px | The only border radius site-wide |
Font size is only 12 / 14 / 16
| Font size | Usage |
|---|---|
| 12px | Content area baseline: table, form label, detail KV, Tag |
| 14px | Global default, some buttons, toolbox page title |
| 16px | Detail main title (cluster domain, ticket type), breadcrumb title |
Global default is 14px, but content-area components (tables, form labels, checkboxes, dropdowns) are uniformly compressed to 12px. Business pages are effectively a 12px system, and newly written content-area text defaults to 12px.
Color
Do not introduce new color values outside the semantics.
| Semantics | Color value | Usage |
|---|---|---|
| Primary color | #3a84ff | Links, primary buttons, selected states, hover icons |
| Secondary text | #979ba5 | Secondary text, detail labels, meta information |
| Body text | #63656e | Default body text, table body text |
| Weak text | #c4c6cc | Disabled text, offline rows, default icon state |
| Heading | #313238 | Headings, detail values, bold labels |
| Border divider | #dcdee5 | Borders, dividers, scrollbar thumb |
| Danger | #ea3636 | Delete / terminate buttons, validation errors |
| Success | #2dcb56 | Status dots, NEW labels |
| Warning | #ff9c01 | Notice bars, disabled labels |
| Light gray background | #f5f7fa | Content-area background, explanation block background |
| Dark gray background | #f0f1f5 | Detail summary bar background, table header background |
Site-wide iron rules
- Render empty values as
--, do not use empty strings, do not useN/A, do not use0。 - All copy must be internationalized, and Chinese must not be hardcoded.
- Footer primary button min-width 88px, button spacing 8px, primary button on the left.
- Danger-colored buttons are only for irreversible operations(delete, terminate). Keep them scarce; scarcity is the semantic meaning.
- Use text link buttons for inline actions, do not use solid buttons.
- Operations involving resource changes must be connected to permission control, gray out when unauthorized and guide the user to apply.
- Disabled buttons must have a tooltip explaining why they are disabled.
- Do not add another 24px padding to non-fullscreen pages, the framework already provides
20px 24px 0, which would stack to 44px. - Deliver the HTML prototype as a single standalone file, and attached resources such as iconfont/ and logos are not allowed. Favorite icon fonts should have woff converted to base64 and inlined, keeping only the icon rules used by the page; images should be converted to base64 data URIs, and the copied resource files should be deleted after inlining.
Self-check list
After changing the page, check item by item:
- Spacing uses only 8 / 16 / 20 / 24
- Font sizes use only 12 / 14 / 16
- All colors come from the semantic palette, with no newly added color values
- Empty values are all rendered as
-- - All copy is internationalized
- Footer primary button minimum width 88px, button spacing 8px
- Sensitive operations are connected to permission control
- The page skeleton belongs to one of the four categories, with no self-invented structure
- The HTML prototype is a single standalone file, fonts / icons / images are all inlined, with no attached resources