# Jingdigital Design System

> Deep royal purple anchors a high-contrast B2B canvas where sharp-edged functionalism meets soft-shadowed isometric intelligence.

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

## TL;DR
Jingdigital utilizes a high-contrast "Deep Royal" palette (#4b2282) against a pure white foundation (#ffffff) to establish a professional B2B SaaS atmosphere. The system relies heavily on **PingFang SC** for legibility across Chinese and English technical contexts, maintaining a rigid 4px-based geometry for inputs and cards. Visual interest is driven by isometric 3D illustrations and subtle depth markers, such as the purple-tinted shadow `rgba(110, 91, 184, 0.1)`, rather than complex gradients or organic shapes.

## Signature DNA
1. **The Royal Anchor** (#4b2282): This specific purple is used as the primary signal for all high-value actions, headers, and brand-critical borders, creating a singular focal point against the achromatic background.
2. **Isometric Intelligence**: Complex marketing concepts are visualized through isometric 3D scenes that use the brand's secondary lavender (#9861e6) and violet (#703cc7) tones to imply technological depth.
3. **Rigid Functionalism**: A preference for 4px and 0px radii (sharp corners) on primary containers and inputs signals a "tools-first" enterprise reliability.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.white}` | `#ffffff` | Page background, button text, card surface | 126 | 1.0 | Computed |
| `{color.ink.deep}` | `#303133` | Primary body text | 239 | 0.8 | Computed |
| `{color.ink.pure}` | `#000000` | Headings, emphasized labels | 156 | 0.8 | Computed |
| `{color.ink.muted}` | `#666666` | Secondary descriptions, footer text | 148 | 0.8 | Computed |
| `{color.surface.soft}` | `#f5f5f5` | Secondary section backgrounds | 6 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#4b2282` | Primary CTA background, brand headers | 66 | 1.0 | Brand Page |
| `{color.primary.light}` | `#703cc7` | Secondary buttons, hover states | 18 | 0.8 | Computed |
| `{color.accent.lavender}` | `#9861e6` | Decorative surface fills, icon accents | 21 | 0.8 | Computed |
| `{color.border.deep}` | `#441a99` | Strong component borders (decorative_only) | 4 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| PingFangSC-Semibold | 600 | Display, Hero Headings | Noto Sans SC (Bold) | Proprietary |
| Helvetica | 400, 600, 700 | English Headings, UI | Inter | Proprietary |
| PingFangSC-Regular | 400 | Body, Inputs, Links | Noto Sans SC | Proprietary |
| iconfont | 400 | UI Icons, Menu triggers | FontAwesome | Custom |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.lg}` | 40px | 56px | normal | 600 | Hero Titles | `div.title` |
| `{type.heading.md}` | 24px | 28.8px | normal | 600 | Section Headers | `h3` |
| `{type.heading.sm}` | 20px | 28px | normal | 600 | Card Titles | `h4` |
| `{type.body.lg}` | 18px | 30px | normal | 400 | Intro Paragraphs | `p` |
| `{type.body.md}` | 16px | 26px | normal | 600 | Subheadings | `h3` |
| `{type.body.sm}` | 15px | 26.25px | normal | 400 | Nav Links | `a.index-fourth-screen-track` |
| `{type.caption}` | 14px | 24.5px | normal | 400 | Footer Links | `li` |
| `{type.legal}` | 10px | 17.5px | normal | 400 | Copyright | `a` |

### Principles
1. **Bilingual Hierarchy**: English text (Helvetica) often sits at a slightly larger optical weight (700) than Chinese counterparts (600) to maintain visual balance.
2. **Generous Leading**: Body text maintains a line-height ratio of ~1.6x (18px/30px) to ensure readability in dense technical descriptions.
3. **Icon Alignment**: UI icons (`iconfont`) are strictly sized to 20px to align with standard heading-sm heights.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 26 |
| `{space.sm}` | 12px | 7 |
| `{space.md}` | 20px | 50 |
| `{space.lg}` | 42px | 3 |
| `{space.xl}` | 100px | 7 |
| `{space.section}` | 120px | 8 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Section containers, primary buttons | 730 occurrences |
| `{radius.sm}` | 4px | Form inputs, feature cards | `radius: 4px` |
| `{radius.md}` | 8px | Hover-state cards | `radius: 8px` |
| `{radius.full}` | 50px | Floating action buttons | `radius: 50px` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.brand}` | `rgba(110, 91, 184, 0.1) 0px 0px 8px 0px` | Feature cards (purple tint) | Observed on 10 elements |
| `{shadow.standard}` | `rgba(0, 0, 0, 0.12) 1px 1px 8px 1px` | Navigation/Dropdowns | Observed on 4 elements |
| `{shadow.bottom}` | `rgba(0, 0, 0, 0.6) 0px 4px 10px -10px` | Subtle section lift | Observed on 3 elements |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background `{color.primary}` (#4b2282) | Text `{color.white}` (#ffffff) | Radius 4px | Padding 0px 16px | Typography `{type.caption}` (14px)
**States observed:** Default | Active: Captured

#### Text Input
**Role:** Lead generation and search
**Pages observed:** homepage
**Spec:** Background `#fafafa` | Border `{color.ink.muted}` (#999999) | Radius 4px | Padding 10px 15px | Typography 14px
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Product capability display
**Pages observed:** All
**Spec:** Background `{color.white}` (#ffffff) | Border `rgba(74, 35, 130, 0.1)` | Radius 16px | Shadow `{shadow.brand}`
**States observed:** Default | Hover: Captured

#### Solution Card
**Role:** Industry-specific links
**Pages observed:** All
**Spec:** Background `{color.surface.soft}` (#f5f5f5) | Radius 4px | Typography `{type.body.md}` (16px)
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Tier selection
**Pages observed:** pricing
**Spec:** Background `{color.white}` (#ffffff) | Border `{color.primary}` (#4b2282) 1px | Radius 4px | Padding 13px 31px
**States observed:** Default

#### Floating Sidebar
**Role:** Quick contact / WeChat access
**Pages observed:** All
**Spec:** Background `{color.primary.light}` (#703cc7) | Radius 50px | Icon `{type.heading.sm}` (20px)
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1200px |
| Section padding (vertical) | 100px - 120px |
| Grid Gutter | 20px |

## Do's
- Use `#4b2282` for all primary "Submit" or "Book Demo" buttons.
- Apply `{shadow.brand}` with its purple tint to cards on white backgrounds.
- Maintain a 120px vertical gap between major homepage sections.
- Pair Helvetica for numerals and English terms within PingFang SC sentences.
- Use 4px border radius for all interactive form elements.

## Don'ts
- **Wrong:** Using `#007aff` (Swiper theme) for primary brand buttons. **Right:** Use `#4b2282`. **Reason:** Swiper blue is a library default, not a brand token.
- Do not use gradients on primary button backgrounds; keep them solid `#4b2282`.
- Do not use sharp 0px corners on form inputs; these must be 4px.
- Do not use `#000000` for long-form body text; use `#303133` for better readability.

## Quick start

### CSS Variables
```css
:root {
  --jing-primary: #4b2282;
  --jing-primary-light: #703cc7;
  --jing-ink-deep: #303133;
  --jing-white: #ffffff;
  --jing-shadow-brand: 0px 0px 8px 0px rgba(110, 91, 184, 0.1);
  --jing-radius-sm: 4px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #4b2282;
  --color-primary-light: #703cc7;
  --color-ink-deep: #303133;
  --shadow-brand: 0 0 8px 0 rgba(110, 91, 184, 0.1);
  --radius-sm: 4px;
}
```

## Known Gaps
- Mobile-specific hover states were not captured due to touch-interface limitations.
- Error states for form validation (red/orange) were not present in the analyzed lead-gen flows.
- Dark mode tokens are not defined as the site is strictly light-mode.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | `https://jingdigital.com` | 1440px | 2026-06-06 |
| Pricing | `https://jingdigital.com/pricing` | 1440px | 2026-06-06 |
| About | `https://jingdigital.com/about` | 1440px | 2026-06-06 |