# open.bigmodel.cn Design System

> A high-contrast intelligence canvas where electric blue accents punctuate a structured, data-heavy environment of stark whites and deep obsidian.

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

## TL;DR
The BigModel design system is built for technical authority and clarity. It utilizes a "Mixed" system type, alternating between a clean white canvas (`#ffffff`) for documentation and pricing, and a deep obsidian (`#0a0a0f`) for high-impact hero sections. The primary brand voltage is carried by an electric blue (`#134cff`), used for primary actions and critical information. Typography is strictly **PingFang SC**, maintaining a clean, sans-serif aesthetic across all weights (300-600). Geometry is functional: 8px-12px radii for interactive elements, with 20px radii reserved for large content containers.

## Signature DNA
1. **The Electric Primary** (`#134cff`): A high-saturation blue used as a functional beacon for CTAs and "Info" states, maintaining a 6.0:1 contrast ratio against white.
2. **Obsidian Footers & Heroes** (`#0a0a0f`): Large-scale structural bands that ground the page, often featuring geometric wireframe patterns or high-contrast white text.
3. **Structured Data Density**: Extensive use of clean, borderless tables and cards with 20px internal padding to organize complex model pricing and technical specifications.

## Family Map
Not captured in source (no sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--mainTextColor` | `#131212` | Primary body text and dark UI elements | 437 | 1 | Computed Style |
| `--colorBgCard` | `#ffffff` | Primary page background and card surfaces | 169 | 1 | CSS Variable |
| `--pageBgColor` | `#f7f8fa` | Secondary section backgrounds and table rows | 18 | 1 | CSS Variable |
| `--glm-coding-1024-bg-dark` | `#0a0a0f` | High-impact hero and footer backgrounds | 2 | 0.8 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--primaryColor` | `#134cff` | Primary CTA background, links, and info states | 6 | 1 | CSS Variable |
| `--primaryActiveColor` | `#0035e5` | Button press states | 1 | 0.8 | CSS Variable |
| `--primaryHoverColor` | `#406eff` | Button hover states | 1 | 0.8 | CSS Variable |
| `accent-blue-deep` | `#0746ff` | Decorative card backgrounds and text | 17 | 0.8 | Computed Style |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `--successColor` | `#06bf7f` | Success indicators |
| `--errorColor` | `#f01d24` | Error states |
| `--warningColor` | `#fac123` | Warning alerts |
| `--infoColor` | `#134cff` | General information |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| PingFang SC | 300, 400, 500, 600 | Universal (Display, Body, UI) | Noto Sans SC | Proprietary (Apple) |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 40px | 48px | normal | 500 | Section Titles | `h2.section-title` |
| `{text.h1}` | 36px | 45px | normal | 500 | Model Titles | `h3.model-title` |
| `{text.h2}` | 24px | 32px | normal | 600 | Top Section Titles | `h3.top-section-title` |
| `{text.h3}` | 20px | 28px | normal | 600 | Component Titles | `div.model-title` |
| `{text.body-lg}` | 18px | 28px | normal | 400 | Model Descriptions | `p.model-desc` |
| `{text.body}` | 16px | 24px | normal | 400 | Default Body Copy | `div.card-content-title` |
| `{text.body-sm}` | 14px | 22px | normal | 500 | Nav & Menu Items | `div.menu-item-name` |
| `{text.caption}` | 12px | 16px | 0.56px | 400 | Nav Titles / Tags | `h2.nav-title.fs12` |

### Principles
1. **Weight-Based Hierarchy**: Uses weight 600 for sub-headers (`20px`) and weight 500 for main displays (`40px`) to balance visual gravity.
2. **Tight Display Tracking**: Large headers use "normal" spacing, while small captions (`12px`) use expanded tracking (`0.56px`) for legibility.
3. **Vertical Rhythm**: Line heights are consistently 1.2x to 1.5x the font size, except in navigation where they match the container height (e.g., 72px).

## Spacing
**Base unit:** 4px (Inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 35 |
| `{space.sm}` | 12px | 19 |
| `{space.md}` | 16px | 12 |
| `{space.lg}` | 20px | 31 |
| `{space.xl}` | 24px | 22 |
| `{space.section}` | 80px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.input}` | 4px | Form elements / Tags | `div.model-tag` |
| `{radius.control}` | 8px | Primary Buttons | `Rounded Button` component |
| `{radius.md}` | 12px | Standard Cards | `Card` (Home page) |
| `{radius.lg}` | 20px | Pricing Cards | `Card` (Pricing page) |
| `{radius.pill}` | 999px | Special CTAs | Evidence radii array |

## Elevation
Not captured in source (system uses flat design with borders and background shifts).

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary Action
**Pages observed:** Home, Pricing
**Spec:** Background: `#131212` / Text: `#ffffff` / Radius: `8px` / Padding: `12px 16px` / Font: `14px`
**States observed:** Default: captured | Hover: not captured | Active: not captured

#### Surface (Dark)
**Role:** Hero and Footer structural bands
**Pages observed:** Home, Pricing
**Spec:** Background: `#0a0a0f` / Text: `#ffffff` / Radius: `0px` / Padding: `0px`
**States observed:** Default: captured

### Tier 2: Patterns
#### Content Card (Light)
**Role:** Feature display
**Pages observed:** Home
**Spec:** Background: `#ffffff` / Text: `#131212` / Radius: `12px` / Border: `0px` / Font: `16px`
**States observed:** Default: captured

#### Pricing Card
**Role:** Model tier selection
**Pages observed:** Pricing
**Spec:** Background: `#f7f8fa` / Text: `#080808` / Radius: `20px` / Padding: `8px 15px`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Model Tag
**Role:** Metadata labeling
**Pages observed:** Home, Pricing
**Spec:** Background: `#f7f8fa` / Text: `#5e5e66` / Radius: `4px` / Font: `12px` / Padding: `2px 8px`
**States observed:** Default: captured

#### Data Table Row
**Role:** Technical specification display
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` / Text: `#131212` / Border-bottom: `1px #eeeeee` / Font: `14px`
**States observed:** Default: captured

## Layout
| Property | Value |
|------|-------|
| Max-width | 1440px (Desktop) |
| Content Gutter | 24px |
| Section Gap | 80px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero cards stack vertically; Section padding reduces. |

## Imagery & decoration
The brand uses abstract 3D gradients (blue-to-purple) within feature cards and geometric wireframe patterns (cubes/grids) in dark sections to represent "Big Model" architecture. It avoids literal photography of people.

## Do's
- Use `#134cff` for all primary user intents.
- Maintain a minimum of 20px padding inside content cards.
- Use weight 600 for headings to ensure hierarchy on high-density pages.
- Alternate between `#ffffff` and `#f7f8fa` for long list/table readability.
- Apply `20px` radius to large pricing or container modules.

## Don'ts
- **Wrong:** Using `#00d4ff` (sub-brand accent) as the primary button color. **Right:** Use `#134cff`. **Reason:** Maintain parent brand authority.
- Do not use drop shadows; rely on background color shifts (`#f7f8fa`) for depth.
- Do not use serif fonts; PingFang SC is the exclusive typeface.
- Do not use the primary blue for large background surfaces; it is an accent only.
- Do not mix border radii within the same component group.

## Similar brands
- Anthropic (structured, technical)
- OpenAI (clean, high-contrast)
- Mistral AI (geometric, data-centric)

## Quick start
```css
:root {
  --primary: #134cff;
  --bg-page: #ffffff;
  --bg-secondary: #f7f8fa;
  --text-main: #131212;
  --text-secondary: #5e5e66;
  --radius-md: 12px;
  --radius-lg: 20px;
}
```

## Agent prompt examples
- "Generate a pricing card using background #f7f8fa, a 20px border radius, and a primary button using #134cff."
- "Create a technical data table with 14px PingFang SC text and #eeeeee dividers."
- "Design a hero section with background #0a0a0f and white text headings at 40px weight 500."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the rendered components.
- Shadow tokens were not detected, suggesting a purely flat or border-based elevation system.

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