# 广西信合 · Design System

A Claude-inspired, warm, document-style design system for **广西信合 (gxxh.tech)** — the authorized Guangxi-region service provider for an AI Execution Workspace ("团队的 AI 执行工作台"). This system powers the independent marketing site at `gxxh.tech` and any supporting materials (proposals, one-pagers, internal decks).

## 1 — Company & Product Context

- **Company:** 广西信合 (Guǎngxī Xìnhé). Domain: `gxxh.tech`.
- **Role:** Authorized regional agent / service provider in 广西壮族自治区 (Guangxi) for an AI Execution Workspace desktop product. The parent product is referenced internally as "team AI execution workspace" — NOT a chat tool, but an agent that reads local files and produces deliverables (Word / Excel / PPT / Markdown / CSV).
- **Audience:** Local Guangxi SMEs and government/enterprise (政企) buyers — 13 cities covered: 南宁 / 柳州 / 桂林 / 梧州 / 北海 / 玉林 / 百色 / 贺州 / 河池 / 防城港 / 钦州 / 来宾 / 崇左.
- **Services:** Localized deployment, custom skill development, on-site training, long-term support. Private-cloud / intranet-isolated deployment is a key selling point for regulated industries.
- **Reference structure (skeleton only, visuals NOT copied):** `https://jimoclaw.jimo.studio`.
- **Tone:** 克制 / 温暖 / 可信 / 专业 — restrained, warm, trustworthy, professional. NOT cold-tech, NOT playful-gradient-startup.

### Sources explored

- `广西信合/index.html` — canonical single-page reference site in the attached codebase (Claude-inspired cream + book-cloth-orange palette). All core tokens were lifted from here and extended.
- `广西信合/西江监狱/*` — a separate training/salon project (西江监狱 AI 沙龙). Uses a totally different dark-neon Material 3 aesthetic. **Ignored for this brand system** — kept in-tree but not referenced as a style source.

## 2 — What's in this folder

| Path | Purpose |
|---|---|
| `README.md` | this file — the manifest |
| `SKILL.md` | Claude Skill entrypoint for reusing this system |
| `colors_and_type.css` | core CSS variables: colors, type, spacing, radius, shadow, motion |
| `tokens.json` | same tokens in JSON (for downstream tooling) |
| `base.css` | resets + semantic element defaults |
| `components.css` | component styles (button, nav, hero, card, form, …) |
| `fonts/` | Noto Serif SC + Inter variable woff2 files |
| `assets/` | logo marks (SVG), favicon, OG image, placeholder imagery |
| `preview/` | individual design-system cards (one card per concept) |
| `ui_kits/website/` | full UI kit for the marketing site — 4 pages as JSX components |
| `components.html` | single-page gallery showing every component state |

## 3 — Content Fundamentals

The 广西信合 site sounds like a serious mid-career Chinese product manager: calm, specific, confident, zero exclamation marks.

### Voice

- **Language:** simplified Chinese, `lang="zh-CN"`. Latin terms (AI, PDF, Excel) are allowed mid-sentence — keep a hair of breathing room around them.
- **Person:** implied second person. Site says "你的本地资料" ("your local files"), "交给业务与运营团队放心托管". Never "we will" / "we believe"; instead state capabilities as facts about the product.
- **Casing:** Chinese has no case; Latin acronyms are uppercase (AI, PDF, CSV), product/interface names are Title Case (Workspace, Windows 10+, Mac · Apple Silicon).
- **Number style:** half-width digits, full-width punctuation. Use ` · ` (middle dot, spaced) as the universal separator in meta lines: `南宁 · 柳州 · 桂林`.

### Tropes to use

- **Verb-led promises.** "让 AI 真正替团队完成工作，交付可用的结果。" Action + deliverable.
- **Concrete deliverables over abstractions.** Name the files it produces: `招标摘要.xlsx`, `风险提示.md`, `项目初审.docx`. These appear as monospace chips in the UI.
- **Numbered steps.** 01/02/03/04 for workflows and scenarios. Serif numerals, color-accented.
- **Specific place names.** 南宁 / 柳州 / 桂林 appear in hero eyebrow, pills, FAQ, footer. They ground the brand regionally.

### Tropes to avoid

- **No emoji.** Anywhere. Not in body, not in buttons, not in section headers.
- **No "赋能" / "一站式" / "打造" marketing slop.** The brief explicitly asks for a 克制 (restrained) tone.
- **No glass-morphism hype copy** ("颠覆"、"革命"、"重新定义"). Stay specific.
- **No question-mark headlines** unless it's a FAQ entry.
- **No all-caps Latin as decoration.** The only uppercase runs are the eyebrow labels and ICP text in the footer.

### Length targets

- Hero H1: 14–22 Chinese characters, often in two lines via `<br/>`.
- Lede paragraph: 40–70 characters, one sentence.
- Card title: 6–10 characters. Card body: 1 sentence, 20–40 characters.
- FAQ answer: 1–3 sentences.

## 4 — Visual Foundations

### 4.1 Colors

- **Base is jade-cream, not white.** `--gx-cream #ECF1E6` is the page background; the site never sits on `#FFF`. Elevated cards use `--gx-paper #F5F8EF` (a warmer off-jade).
- **Primary is 青绿 `#3E7A6B`.** A muted 山水 / 壮锦 green drawn from the Guangxi landscape. Used for: primary buttons, accent numerals, serif numerals (`01` in scenario list), eyebrow-label text color, link hover, focus rings. Muted, not saturated.
- **Cameo is Book Cloth Orange `#C15F3C`.** Warm terracotta reserved for cameo moments: the 信 seal mark, highlight chips, the occasional warm pull-quote. Also powers the opt-in `data-theme="orange"` full theme via `theme-orange.css`. Use **sparingly**.
- **Ink is warm near-black `#15221C`, not `#000`.** Body copy is `--gx-ink-soft #4F6159`. Dividers are `#BFCDBE` (desaturated jade).
- **Semantic colors** are all *muted* — no bright candy success-green or scream-red error. See `tokens.json > semantic`.
- **Dark mode** keeps the warm-cool jade character: dark ink paper `#0F1714`, not pure black. Qing brightens to `#7DB5A6` for legibility.
- **Theme switching** — the UI kit ships with a Tweaks panel that toggles between default Qing and the Orange opt-in theme; both palettes ship in `tokens.json`.

### 4.2 Typography

- **Serif display = Noto Serif SC.** (Source Han Serif SC is the upstream; Noto is the open redistribution.) Weight 500 for headings — not 700. Tracking tightened to `-0.01em`. Used for: H1–H4, big serif numerals in scenario list, brand wordmark.
- **Sans body = Inter.** (PingFang SC on Apple, Microsoft YaHei on Windows — the stack lets each platform render Chinese natively.) Weight 400 / 500 / 600 only. 16px base, 1.65 line-height. Eyebrow labels and button text are sans.
- **Mono = `ui-monospace`** (native). Used only for file-chip tokens like `招标摘要.xlsx` and for code examples.
- **CJK/Latin mixing:** add `word-spacing: 0.05em` in mixed-script paragraphs; keep a thin space (` `) around Latin tokens inside Chinese sentences.

### 4.3 Spacing & rhythm

- 4pt baseline. Common container: `max-width: 1160px`, side padding `24px`.
- Section vertical rhythm: `88px` top/bottom on desktop, collapsed to `56px` mobile. Top border of `1px solid var(--line)` between adjacent sections — never a colored band unless it's `--gx-cream-2`.
- Generous line-length cap — `max-width: 52ch` for ledes, `56ch` for section heads. Never full-bleed paragraphs.

### 4.4 Backgrounds, imagery, decoration

- **No stock photography.** Marketing imagery is UI mock (the "Workspace" card on the homepage) — a literal recreation of the desktop product's chrome rendered in brand colors.
- **No illustrations generated by AI / no 3D renders.** If an illustration is needed it is geometric, flat, and made from serif characters + simple shapes (e.g., the "文件 → 结果" flow). Placeholders are plain `<div>` with a `1 / 1` aspect ratio filled with `--gx-cream-2` and a tiny caption.
- **No gradients on surfaces.** The only gradient usage allowed is a very gentle radial "light" behind the hero headline if needed.
- **No background patterns** except the faint dot-grid used in the workspace mock header.

### 4.5 Corners, borders, shadows

- **Radii:** `14px` default card, `22px` for the workspace / download blocks, `999px` for buttons, pills and chips. `6–10px` for inputs and small chips.
- **Borders:** `1px solid var(--line)` — always. Borders are used **in addition to** shadow, not instead of, so cards still read on any background.
- **Shadows** are low-opacity, warm, and lifted off-screen (`-20px y-offset`). Three tiers: `flat` / `soft` / `lift`. No hard drop shadows, no glow, no neon.
- **No colored-left-border cards.** (The brief is explicit.)

### 4.6 Motion

- **Durations:** `fast 120ms` (buttons), `base 200ms` (default), `slow 320ms` (modal / drawer).
- **Easing:** `cubic-bezier(.2,.0,.2,1)` standard. Emphasized curve for entrances.
- **What moves:** button `translateY(-1px)` on hover, link color fade, FAQ details open/close, mobile drawer slide-in.
- **What does NOT move:** no parallax, no scroll-triggered reveals, no auto-playing carousels, no Lottie, no text-scramble effects.

### 4.7 Hover, focus, press

- **Hover (button):** background darkens one step (`--gx-accent` → `--gx-accent-ink` on primary), plus a `translateY(-1px)`.
- **Hover (link):** color swap to `--gx-accent`.
- **Hover (card):** optional — border darkens one notch; no scale, no shadow change.
- **Focus-visible:** 2px solid `--gx-accent` outline, `offset 3px`, `border-radius 4px`. Never removed.
- **Press:** `transform: translateY(0)` returns, no shrink/scale gimmick.
- **Disabled:** `opacity 0.5`, `cursor: not-allowed`, no color change.

### 4.8 Layout rules

- **Fixed elements:** sticky top nav only, with `backdrop-filter: saturate(180%) blur(10px)` on a translucent cream background. Nothing else is fixed.
- **No overlay modals** on the marketing site. Mobile nav uses a full-page drawer sliding in from the right.
- **Grid:** 12-col mental model, but CSS uses `grid-template-columns: repeat(N, 1fr)` with `gap: 20–24px`. Mobile collapses to `1fr`.

### 4.9 Transparency, blur

- `backdrop-filter` used **only** on the sticky nav. Nowhere else.
- No frosted-glass cards, no floating translucent panels.

## 5 — Iconography

See `ICONOGRAPHY.md` (inline below) for full detail.

### Approach

- **No icon font shipped.** The reference site uses zero icons in its chrome — this is a deliberate design choice (serif numerals + monospace file chips carry the visual load instead of iconography).
- **Where icons are needed** (forms, mobile nav toggle, external-link arrows), the system uses **Lucide** (stroke-only, 1.5px, 24px box) loaded from CDN:
  `https://unpkg.com/lucide@latest`
  — chosen because its even stroke weight matches the restrained, document-like feel.
- **Logo / brand mark:** a single seal-style "信" (Xìn) character in Book Cloth Orange — provided as SVG in three variants (`assets/logo-mark.svg`, `-reverse.svg`, `-mono.svg`) plus the full wordmark (`assets/logo-wordmark.svg`).
- **Emoji:** never.
- **Unicode as decoration:** allowed only for the check mark in the security list (`✓` in accent color) and `→` inside buttons.

### Substitution flag

> ⚠️ **Font substitution:** Noto Serif SC variable woff2 files are expected in `/fonts` but could not be fetched during this build (no outbound network). The CSS `@font-face` rule points at the expected path; if `fonts/NotoSerifSC-VF.woff2` is absent at runtime the stack falls back to `Source Han Serif SC` / `Times New Roman`. Replace with the real files before shipping, or wire up the Google Fonts CDN link in the HTML head.
>
> ⚠️ **Icon substitution:** Lucide is used as the closest CDN match; if an existing internal icon set is preferred, drop it into `assets/icons/` and update `SKILL.md`.

## 6 — Index

- **Design system cards:** `preview/*.html` — rendered in the Design System tab.
- **Component gallery (all states):** `components.html`.
- **UI kit — marketing site:** `ui_kits/website/index.html` (full click-through prototype of the 4 pages).
- **Tokens:** `tokens.json`, `colors_and_type.css`.
- **Brand assets:** `assets/`.
- **Fonts:** `fonts/`.

## 7 — Fields the user needs to supply later

- Real ICP 备案号 (currently "申请中" placeholder).
- Actual hero illustration / workspace screenshot (mocked for now).
- Phone / WeChat QR for the contact page.
- Real case-study logos for the logo cloud.
- Final Noto Serif SC + Inter woff2 files (or a signed-off CDN plan).