# chatglm.cn Design System

> A high-utility AI workspace defined by clinical white surfaces, deep slate-grey borders, and high-contrast cobalt blue interaction points.

**Source:** [https://chatglm.cn](https://chatglm.cn) | **Captured:** 2026-06-17 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
The chatglm.cn interface is a "mixed" system that balances a stark, utility-first chat canvas with sophisticated elevation patterns. The primary canvas is pure white `#ffffff`, structured by a rigorous slate-grey border system `#eceeef` and `#4f5866`. Interaction is driven by two distinct modes: a deep "Obsidian" `#1a2029` for primary platform actions (Login, New Chat) and a vibrant "Cobalt" `#2454ff` for product-specific features and active UI states. Typography relies exclusively on PingFang SC, utilizing a weight-based hierarchy (400 to 600) rather than chromatic shifts to denote importance.

## Signature DNA
1. **The Slate Skeleton** (The use of `#4f5866` as both a text color and a structural border token `--bg-chat_box_border` creates a unified visual weight between content and container.)
2. **Dual-Core Primary Actions** (The system splits authority between `#1a2029` for structural navigation and `#2454ff` for "Intelligence" actions like GLM-5.2 features and primary CTAs.)
3. **Soft-Panel Elevation** (Large 24px corner radii on main surfaces combined with multi-stop shadows `rgba(0, 0, 0, 0.08) 0px 2px 6px 0px` define the workspace depth.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--el-bg-color` | `#ffffff` | Primary canvas and surface background | 39 | 1 | Computed style |
| `--bg_bt_black_1` | `#1a2029` | Primary action background, dark mode text | 51 | 1 | CSS Variable |
| `--el-text-color-primary` | `#333333` | Primary body text | 27 | 1 | CSS Variable |
| `--txt_icon_grey_6` | `#b0b7c0` | Muted labels and secondary icons | 33 | 1 | CSS Variable |
| `--main_chat_box_border` | `#eceeef` | Default structural hairlines | 18 | 1 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--bg-chat-button` | `#4f5866` | Secondary button background, structural borders | 15 | 1 | CSS Variable |
| `--bg_blue_1` | `#2454ff` | Brand primary accent, hover states, active radio | 3 | 1 | CSS Variable |
| `--vip_box_bg_1` | `#5383ff` | Promotional/Upgrade button background | 3 | 1 | Computed style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--el-color-success` | `#67c23a` | Success states |
| `--el-color-error` | `#f56c6c` | Error validation |
| `--el-color-warning` | `#e6a23c` | Warning alerts |

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

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{h1}` | 34px | 34px | normal | 600 | Page Hero | `p` |
| `{h2}` | 32px | 32px | normal | 600 | Section Header | `span` |
| `{h3}` | 20px | 28px | normal | 600 | Card Title | `p.title` |
| `{body-lg}` | 15px | 27px | normal | 400 | Chat Input Placeholder | `div.custom-placeholder` |
| `{body-md}` | 14px | 24px | normal | 400 | General Description | `p.desc` |
| `{body-sm}` | 14px | 20px | normal | 400 | Meta Labels | `span.think-label` |
| `{button}` | 14px | 28px | normal | 600 | Primary CTA Text | `div.btn` |
| `{caption}` | 12px | 12px | normal | 400 | Footer/Small Meta | `span.ellipsis` |

### Principles
1. **Weight over Size:** Distinction between primary and secondary information at 14px is handled by shifting from 400 to 600 weight.
2. **Tight Display Leading:** Large headings (32px+) use 1:1 line-height for a compact, architectural feel.
3. **Vertical Rhythm:** Body text consistently uses 20px, 24px, or 28px line-heights, maintaining a 4px-grid alignment.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 6 |
| `{space.sm}` | 8px | 3 |
| `{space.md}` | 12px | 21 |
| `{space.lg}` | 23px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Page containers | 93 occurrences |
| `{radius.sm}` | 10px | Small controls | `role: control` |
| `{radius.md}` | 12px | Standard Cards/Buttons | `radius: 12px` |
| `{radius.lg}` | 16px | Feature Cards | `radius: 16px` |
| `{radius.xl}` | 24px | Main Panels/Modals | `radius: 24px` |
| `{radius.pill}` | 100px | Search bars/Pill buttons | `radius: 100px` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | Default surfaces | Surface component |
| `low` | `rgba(0, 0, 0, 0.02) 0px 2px 4px 0px` | Standard cards | Card component |
| `medium` | `rgba(34, 34, 34, 0.08) 0px 4px 8px 0px` | Hovered feature cards | Card component |
| `high` | `rgba(0, 0, 0, 0.02) 0px 0px 6px 0px, rgba(0, 0, 0, 0.08) 0px 2px 6px 0px` | Floating Modals | Card component |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and secondary actions
**Pages observed:** All
**Spec:** Background: `#1a2029` | Text: `#ffffff` | Radius: `12px` | Padding: `6px 23px` | Typography: `14px/600`
**States observed:** Default | Hover: Captured (uses `--bg-chat-hover-button` `#2454ff`)

#### Surface
**Role:** Base layout containers
**Pages observed:** All
**Spec:** Background: `#ffffff` | Border: `0px` | Radius: `0px` | Typography: `14px/400`
**States observed:** Default

### Tier 2: Patterns
#### Standard Card
**Role:** Content grouping and feature display
**Pages observed:** All
**Spec:** Background: `#ffffff` | Border: `1px #eceeef` | Radius: `12px` | Padding: `6px 12px` | Shadow: `rgba(0, 0, 0, 0.02) 0px 2px 4px 0px`
**States observed:** Default

#### Action Pill
**Role:** Search and quick-input triggers
**Pages observed:** Home
**Spec:** Background: `#1a2029` | Text: `#ffffff` | Radius: `100px` | Typography: `14px`
**States observed:** Default

### Tier 3: Surface-specific
#### Modal Panel
**Role:** High-priority dialogs (Login, Announcements)
**Pages observed:** Home, Pricing
**Spec:** Background: `#ffffff` | Border: `1px rgba(26, 32, 41, 0.2)` | Radius: `24px` | Shadow: `medium-high`
**States observed:** Default

#### Ghost Button
**Role:** Tertiary actions
**Pages observed:** All
**Spec:** Background: `transparent` | Text: `#000000` | Border: `0px` | Radius: `10px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1440px (Desktop) |
| Sidebar Width | 280px |
| Content Gap | 12px - 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Sidebar collapses to hamburger; padding reduces to 12px |
| Desktop | 1440px | Fixed sidebar; centered chat container |

## Do's
- Use `#1a2029` for all primary "System" level buttons (Login, Submit).
- Apply `24px` radius to high-level floating containers (Modals).
- Use `#4f5866` for secondary text and structural borders to maintain low-chroma utility.
- Ensure all body text uses PingFang SC at `14px`.
- Use Cobalt `#2454ff` exclusively for active states and "Intelligence" features.

## Don'ts
- **Wrong:** Using Cobalt `#2454ff` for the main "Login" button. **Right:** Use `#1a2029`. **Reason:** Cobalt is reserved for product-specific intelligence features, not platform utility.
- **Wrong:** Using sharp corners (0px) for buttons. **Right:** Use `12px` or `100px`.
- **Wrong:** Applying heavy shadows to flat page sections. **Right:** Use shadows only for elevated cards and modals.

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #1a2029;
  --color-accent: #2454ff;
  --color-border: #eceeef;
  --color-text: #333333;
  --radius-md: 12px;
  --radius-lg: 24px;
  --shadow-low: rgba(0, 0, 0, 0.02) 0px 2px 4px 0px;
}
```

## Agent prompt examples
1. Create a Primary Action Button component using PingFang SC. Set the background to #1a2029 with #ffffff text, a border-radius of 12px, and padding of 6px 23px. Implement a hover state that transitions the background to the Cobalt accent color #2454ff. Use a font weight of 600 and a font size of 14px.

2. Build a Feature Card component for a grid layout. Use a #ffffff background with a 1px border in #eceeef and a border-radius of 12px. Apply the "low" elevation shadow: rgba(0, 0, 0, 0.02) 0px 2px 4px 0px. For the card title, use a 20px font size with 600 weight, and for the description, use #333333 text at 14px with a 24px line-height.

3. Design a Modal Panel for user settings. The container must have a #ffffff background, a 24px border-radius, and a 1px border using rgba(26, 32, 41, 0.2). Apply the high-level shadow: rgba(0, 0, 0, 0.02) 0px 0px 6px 0px, rgba(0, 0, 0, 0.08) 0px 2px 6px 0px. Ensure all internal spacing follows the 12px (md) or 23px (lg) spacing tokens.

4. Implement a Chat Input Search Bar as an "Action Pill." Use a background color of #1a2029 with #ffffff text and a pill border-radius of 100px. Set the typography to 14px PingFang SC. For the placeholder text, use a 15px font size with a 27px line-height and a color of #b0b7c0.

5. Create a Page Header component with a 34px H1 title in PingFang SC (weight 600, line-height 34px). Include a secondary "Upgrade" CTA button using the #5383ff background color, 14px bold text, and a 12px border-radius to distinguish it as a promotional "Intelligence" feature.

## Known gaps
- Hover state transitions for the sidebar icons were not explicitly captured in the token evidence.
- Mobile-specific typography scale for headings was not fully sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://chatglm.cn | 1440x900 | 2026-06-17 |
| Pricing | https://chatglm.cn/pricing | 1440x900 | 2026-06-17 |
| About | https://chatglm.cn/about | 1440x900 | 2026-06-17 |