# Shunwang Design System

> A high-contrast corporate canvas where Microsoft Yahei typography anchors a monochrome foundation, punctuated by deep system blues.

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

## TL;DR
Shunwang utilizes a "monochrome-plus" system where the interface is primarily driven by pure black `#000000` text and white `#ffffff` surfaces. The visual hierarchy is established through a rigid typographic scale using Microsoft Yahei for functional UI and Times New Roman for specific heading accents. While the core system is achromatic, a high-saturation blue `#0000ee` serves as the primary interactive signal for links and specific card actions. Layouts are characterized by sharp geometry (0px radius) for structural containers, contrasted with soft 5px to 10px radii for interactive components and inputs.

## Signature DNA
1. **Achromatic Dominance** (The system relies on `#000000` and `#ffffff` for 90% of UI elements, creating a stark, utility-first corporate aesthetic across all analyzed pages).
2. **Sharp-to-Soft Contrast** (Structural surfaces use `{rounded.sharp}` 0px borders, while interactive elements like buttons and inputs transition to `{rounded.input}` 5px or `{rounded.control}` 10px).
3. **Bilingual Type Pairing** (The systematic use of Microsoft Yahei for Chinese interface text paired with Times New Roman for Western-style headings and body paragraphs).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
| :--- | :--- | :--- | :--- | :--- |
| Shunwang (Parent) | #000000 | Corporate Grids | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.ink}` | `#000000` | Primary text, headings | 51 | 0.8 | computed_style |
| `{color.canvas}` | `#ffffff` | Page background, surface fill | 16 | 0.8 | computed_style |
| `{color.slate}` | `#72767e` | Secondary body text, descriptions | 26 | 0.8 | computed_style |
| `{color.charcoal}` | `#2a2c2e` | Navigation links, sub-headers | 21 | 0.8 | computed_style |
| `{color.ash}` | `#b0b7c1` | Muted metadata, timestamps | 12 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.link}` | `#0000ee` | Hyperlinks, active states | 25 | 0.8 | computed_style |
| `{color.silver}` | `#bcbdbe` | Decorative borders, separators | 4 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Microsoft Yahei | 400 | Primary UI, Body, Headings | Noto Sans SC | Proprietary |
| Times New Roman | 400, 700 | Serif Headings, Body | Tinos | System Default |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{text.display}` | 36px | normal | normal | 400 | Main Section Titles | `h3.index-title` |
| `{text.h1}` | 32px | normal | normal | 700 | Page Hero (Serif) | `h1` |
| `{text.h5}` | 20px | normal | normal | 400 | Component Headers | `h5` |
| `{text.body-lg}` | 17px | normal | normal | 400 | Featured Body | `div.title` |
| `{text.nav}` | 16px | 60px | normal | 400 | Header Navigation | `li.item` |
| `{text.subheading}` | 16px | normal | normal | 400 | Section Subtitles | `h4.index-sub-title` |
| `{text.body}` | 16px | normal | normal | 400 | Standard Paragraph | `p` |
| `{text.link}` | 16px | 22px | normal | 400 | "More" Links | `a.more` |
| `{text.caption}` | 12px | normal | normal | 400 | Small UI Labels | `div.header` |

### Principles
1. **Vertical Rhythm via Line-Height:** Navigation items use an exaggerated 60px line-height to define header height without explicit padding.
2. **Serif for Authority:** Times New Roman is reserved for top-level `h1` elements to provide a traditional corporate contrast to the modern sans-serif UI.
3. **Blue for Action:** Any text rendered in `#0000ee` is strictly interactive; static emphasis is handled via weight or grayscale shifts.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 12px | 16 |
| `{space.sm}` | 20px | 23 |
| `{space.md}` | 32px | 5 |
| `{space.lg}` | 40px | 14 |
| `{space.xl}` | 60px | 4 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Main containers, surfaces | Observed on 134 elements |
| `{radius.sm}` | 5px | Cards, Input fields | `div.card` |
| `{radius.md}` | 10px | Buttons, controls | `div.control` |
| `{radius.lg}` | 35px | Large panels, decorative blocks | `div.panel` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | none | All observed components | No box-shadows captured in source |

## Components

### Tier 1: Foundational

#### Header Navigation
**Role:** Primary site-wide navigation
**Pages observed:** shunwang.com, shunwang.com/about
**Spec:** Background `#ffffff` / Text `#2a2c2e` / Radius 0px / Height 60px / Typography `{text.nav}`
**States observed:** Default: captured | Hover: not captured

#### Footer
**Role:** Corporate information and legal links
**Pages observed:** shunwang.com, shunwang.com/pricing
**Spec:** Background `#ffffff` / Text `#72767e` / Border-top 1px `#bcbdbe` / Typography `{text.body-sm}`
**States observed:** Default: captured

### Tier 2: Patterns

#### Content Card
**Role:** Feature display and product links
**Pages observed:** shunwang.com
**Spec:** Background `#ffffff` / Text `#0000ee` / Radius 5px / Border 0px / Shadow none
**States observed:** Default: captured

#### Section Surface
**Role:** Large layout blocks for content grouping
**Pages observed:** shunwang.com
**Spec:** Background `#ffffff` / Padding 40px 20px / Radius 0px / Typography `{text.caption}`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### More Link
**Role:** Secondary call to action
**Pages observed:** shunwang.com
**Spec:** Text `#0000ee` / Typography `{text.link}` / Line-height 22px
**States observed:** Default: captured

#### Metadata Label
**Role:** Timestamps and info tags
**Pages observed:** shunwang.com
**Spec:** Text `#b0b7c1` / Typography `{text.body-sm}` (15px)
**States observed:** Default: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px (estimated from desktop screenshots) |
| Grid System | Flexbox-based 3-column and 4-column grids |
| Section Padding | 40px vertical |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; grid columns stack vertically; padding reduces to 20px. |

## Imagery & decoration
Shunwang uses high-tech, abstract photography featuring blue light trails and server-room aesthetics to reinforce the "Cloud" and "Internet" brand positioning. UI decoration is minimal, relying on thin 1px lines and large whitespace.

## Do's
- Use `#000000` for all primary headings to maintain high contrast.
- Apply `{radius.sm}` (5px) to all interactive card elements.
- Ensure all body text uses Microsoft Yahei at 16px for legibility.
- Use `#0000ee` exclusively for text-based triggers and links.
- Maintain a 60px height for top-level navigation items.

## Don'ts
- **Wrong:** Using a blue background for a primary button. **Right:** Use a white background with blue text or border. **Reason:** The parent brand is monochrome; saturated fills are reserved for sub-brands or specific product heroes.
- Do not use Times New Roman for functional UI labels; it is reserved for display headings.
- Do not apply shadows to cards; use 1px borders or whitespace for separation.
- Do not use rounded corners on main section containers; keep them 0px.

## Similar brands
- Lenovo (Corporate typography focus)
- China Telecom (Monochrome + Blue accent)
- IBM (High-contrast utility aesthetic)

## Quick start

### CSS Custom Properties
```css
:root {
  --sw-color-ink: #000000;
  --sw-color-canvas: #ffffff;
  --sw-color-link: #0000ee;
  --sw-color-slate: #72767e;
  --sw-font-main: "Microsoft Yahei", sans-serif;
  --sw-font-serif: "Times New Roman", serif;
  --sw-radius-sm: 5px;
  --sw-radius-md: 10px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-ink: #000000;
  --color-link: #0000ee;
  --font-sans: "Microsoft Yahei";
  --font-serif: "Times New Roman";
  --radius-sm: 5px;
  --spacing-section: 40px;
}
```

## Agent prompt examples
- "Create a content card for Shunwang using a white background, 5px border radius, and 17px Microsoft Yahei text in #000000."
- "Generate a footer component with a 1px top border in #bcbdbe and 14px text in #72767e."
- "Design a hero section with a 32px Times New Roman bold heading and a 16px Microsoft Yahei sub-header."

## Known gaps
- Hover and Active states for buttons were not captured in the automated crawl.
- Specific hex codes for the "Cloud" product gradients were not tokenized as they appear as background images rather than CSS tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://shunwang.com | 1440px | 2026-06-06 |
| Pricing | https://shunwang.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://shunwang.com | 390px | 2026-06-06 |