# Jiuqi.com.cn Design System

> Corporate stability rendered through high-contrast monochrome typography and structured information density.

**Source:** https://jiuqi.com.cn | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
The Jiuqi design system is a monochrome-first framework that prioritizes legibility and corporate authority. It utilizes a stark white canvas (`#ffffff`) contrasted against deep charcoal (`#212529`) and pure black (`#000000`) text. The visual language is defined by sharp 0px border radii and a strict reliance on the Microsoft YaHei (微软雅黑) typeface for structural hierarchy. While the system tokens include a broad spectrum of semantic colors (Element Plus defaults), the rendered brand experience remains strictly achromatic, using grayscale values like `#686868` for secondary information and information density to convey scale.

## Signature DNA
1. **Achromatic Hierarchy** (The brand avoids primary brand colors in favor of `#000000` and `#212529` on white, using contrast rather than hue to signal importance across all analyzed pages.)
2. **Sharp Geometry** (A universal 0px border radius is applied to containers and UI elements, creating a formal, architectural feel.)
3. **YaHei Display** (Microsoft YaHei is used at weight 700 for all "Big Titles" to anchor the page, establishing a localized corporate aesthetic.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| None      | N/A           | N/A            | N/A      | N/A       |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--el-bg-color` | `#ffffff` | Primary page background | 8 | 1.0 | Computed Style |
| `--el-color-black` | `#000000` | Primary display text / Overlays | 1 | 1.0 | Computed Style |
| `foundation-ink` | `#212529` | Primary body text | 18 | 0.8 | Computed Style |
| `foundation-muted` | `#686868` | Secondary descriptive text | 23 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--el-color-primary` | `#409eff` | Interactive states (Token only) | <5 | 0.7 | Declared Token |
| `--orange` | `#fd7e14` | Decorative warning (Token only) | <5 | 0.7 | Declared Token |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--el-color-success` | `#67c23a` | Success states |
| `--el-color-error` | `#f56c6c` | Error/Danger states |
| `--el-color-warning` | `#e6a23c` | Warning states |
| `--el-color-info` | `#909399` | Neutral information |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| 微软雅黑 (YaHei) | 400, 500, 700 | Heading & UI | Noto Sans SC | Proprietary |
| 宋体 (SimSun) | 400, 700 | Body copy | Noto Serif SC | Proprietary |
| Times New Roman | 400 | Supplemental body | FreeSerif | Public Domain |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `h1-display` | 24px | 36px | normal | 700 | Hero/Big Title | `p.big-title` |
| `h2-title` | 18px | 27px | normal | 700 | Sub-section Title | `p.big-title.small` |
| `nav-link` | 16px | 24px | normal | 400 | Top Navigation | `nav` |
| `body-lg` | 16px | 56px | normal | 400 | List Items | `li:nth-of-type(1)` |
| `body-base` | 16px | 26.25px | normal | 400 | Standard Prose | `span` |
| `body-sm` | 15px | 32px | normal | 400 | Footer/Secondary | `p:nth-of-type(3)` |
| `label-sm` | 14px | 20.25px | normal | 400 | Small Titles | `p.small-title` |
| `caption` | 12px | 18px | normal | 400 | Metadata | `li:nth-of-type(1)` |

### Principles
1. **Weight-Based Hierarchy**: Boldness (700) is reserved strictly for titles to separate them from the high-density body text.
2. **Vertical Rhythm**: Body text uses generous line heights (up to 56px for lists) to offset the density of information.
3. **Font Pairing**: Sans-serif (YaHei) is used for UI and headings, while Serif (SimSun) is used for specific content spans.

## Spacing
**Base unit:** 4px (derived)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `space-xs` | 6px | 3 |
| `space-lg` | 25px | 22 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-sharp` | 0px | Universal for cards, buttons, and containers | 60 occurrences across all pages |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | All cards and sections | Observed on homepage and about pages |

## Components

### Tier 1: Foundational

#### Top Navigation
**Role:** Primary site-wide wayfinding.
**Pages observed:** https://jiuqi.com.cn, https://jiuqi.com.cn/about
**Spec:** Background `#ffffff` / Text `#212529` / Typography `nav-link` (16px) / Height 64px.
**States observed:** Default | Hover: Captured (uses `--el-menu-hover-text-color` #409eff).

#### Footer
**Role:** Corporate information and site map.
**Pages observed:** https://jiuqi.com.cn, https://jiuqi.com.cn/about
**Spec:** Background `#2a2a2c` / Text `#ffffff` / Typography `body-sm` (15px).
**States observed:** Default | Hover: Not captured.

### Tier 2: Patterns

#### Content Card
**Role:** Feature display for services.
**Pages observed:** https://jiuqi.com.cn
**Spec:** Border 0px / Radius 0px / Typography `h1-display` for overlay text.
**States observed:** Default.

#### Information List
**Role:** High-density link groups in footer.
**Pages observed:** https://jiuqi.com.cn, https://jiuqi.com.cn/about
**Spec:** Text `#686868` / Line-height 32px / Typography `body-sm`.
**States observed:** Default.

### Tier 3: Surface-specific

#### Search Bar
**Role:** Global site search.
**Pages observed:** https://jiuqi.com.cn
**Spec:** Background `#ffffff` / Border 1px `#dcdfe6` / Radius 999px (Exception to sharp rule).
**States observed:** Default.

#### Maintenance Notice
**Role:** System status communication.
**Pages observed:** https://jiuqi.com.cn/pricing
**Spec:** Background Image (Blue Gradient) / Text `#ffffff` / Typography `h1-display`.
**States observed:** Default.

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Grid | 4-column feature grid |
| Section Padding | 25px (internal) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | Full horizontal navigation and 4-up grids |
| Mobile | 390px | Stacked footer columns and hidden nav menu |

## Imagery & decoration
The brand relies on high-resolution photography of cityscapes and technology-themed imagery (blue/dark tones) to provide color. UI elements themselves remain strictly monochrome. Decoration is limited to simple 1px dividers (`#dcdfe6`).

## Do's
- Use `#212529` for primary body text to ensure high contrast.
- Apply `radius-sharp` (0px) to all content containers.
- Use Microsoft YaHei 700 for all section headers.
- Maintain a 25px spacing unit for internal card padding.
- Ensure all text on dark backgrounds is pure `#ffffff`.

## Don'ts
- **Wrong:** Using `#409eff` (Blue) as a background for primary buttons. **Right:** Use `#000000` or `#212529`. **Reason:** The parent brand is monochrome; sub-brand colors should not bleed into parent UI.
- Do not apply rounded corners to cards or images.
- Do not use font sizes smaller than 12px for metadata.
- Avoid using drop shadows; use 1px borders for separation.

## Similar brands
- IBM (Corporate typography and grid)
- SAP (Information density and enterprise structure)
- Siemens (Monochrome industrial aesthetic)

## Quick start

```css
/* CSS Variables */
:root {
  --jiuqi-bg: #ffffff;
  --jiuqi-ink: #212529;
  --jiuqi-muted: #686868;
  --jiuqi-radius: 0px;
  --jiuqi-font-display: "Microsoft YaHei", sans-serif;
}
```

```javascript
/* Tailwind v4 Theme */
@theme {
  --color-canvas: #ffffff;
  --color-ink: #212529;
  --font-display: "Microsoft YaHei";
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Create a corporate service card with a sharp 0px border radius, using #212529 for the title and #686868 for the description text."
- "Generate a footer section with a #2a2a2c background and 4 columns of links using 15px Microsoft YaHei text."
- "Design a hero section with a large 24px bold title and a white background, ensuring no rounded corners are used."

## Known gaps
- Hover states for primary navigation were only partially captured via token declarations.
- Specific button component specs were limited as the analyzed pages favored text links and image-based CTAs.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://jiuqi.com.cn | 1440x900 | 2026-06-06 |
| About | https://jiuqi.com.cn/about | 1440x900 | 2026-06-06 |
| Pricing | https://jiuqi.com.cn/pricing | 1440x900 | 2026-06-06 |