# Xingshulin Design System

> A clinical white canvas structured by precise grayscale typography and punctuated by a single high-visibility orange accent.

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

## TL;DR
Xingshulin utilizes a monochrome foundation of pure white (#ffffff) and deep charcoal (#383838) to establish a professional medical atmosphere. The system is characterized by a strict reliance on Arial for all functional and display typography, maintaining a weight of 400-500 even at large display sizes (50px). A singular accent color, "Medical Orange" (#ff9900), is used exclusively for critical data points, active navigation states, and specific call-to-action borders. Layouts are defined by generous vertical spacing (100px sections) and sharp-edged or subtly rounded (8px) containers that prioritize information density and legibility.

## Signature DNA
1. **The Data Highlight** (Large numeric displays in #ff9900 at 40px/50px weight 500, used to anchor impact statistics on the homepage and mobile views).
2. **Achromatic Hierarchy** (A tiered scale of grays from #383838 for primary text down to #c1c1c1 for disabled states, ensuring depth without introducing secondary hues).
3. **Clinical Spacing** (Strict 100px section padding on desktop and 40px on mobile, creating a rhythmic "breathing" space between dense medical service blocks).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Xingshulin (Parent) | #000000 | Medical photography/icons | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | #ffffff | Page background and surface base | 19 | 0.8 | computed_style |
| `{color.ink.primary}` | #383838 | Primary body text and headings | 19 | 0.8 | computed_style |
| `{color.ink.secondary}` | #676767 | Secondary descriptions and labels | 14 | 0.8 | computed_style |
| `{color.ink.muted}` | #8a8a8a | Tertiary text and footer links | 11 | 0.8 | computed_style |
| `{color.border.dark}` | #000000 | High-contrast borders and icons | 14 | 0.8 | computed_style |
| `{color.surface.soft}` | #fcf2f2 | Subtle section background (alternating) | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent}` | #ff9900 | Data highlights, active nav, primary borders | 15 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Arial | 400, 500 | Display, Heading, Body, UI | Arial (System) | Proprietary |
| iconfont | 400 | UI Icons and social glyphs | Material Icons | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 50px | 60px | 3px | 500 | Hero title | `h1.title` |
| `{type.display.lg}` | 40px | 57.14px | normal | 400 | Statistic numbers | `span.num.timer` |
| `{type.heading.md}` | 28px | 40px | normal | 400 | Desktop item titles | `div.items-desktop` |
| `{type.heading.sm}` | 24px | 26.4px | normal | 400 | Section slogans | `h2.subtitle.slogan` |
| `{type.title.md}` | 20px | 22px | normal | 500 | Component headers | `h4` |
| `{type.body.lg}` | 18px | 28.8px | normal | 400 | Primary paragraph | `p` |
| `{type.body.md}` | 16px | 20px | normal | 500 | Navigation links | `a` |
| `{type.body.sm}` | 14px | 20px | normal | 400 | Small descriptions | `header.site-header` |

### Principles
1. **Display weight is restrained.** Even at 50px, weight never exceeds 500.
2. **Letter spacing for impact.** Large display titles use wide 3px tracking to increase authority.
3. **Color-coded data.** Numeric values representing scale (e.g., "240万") always adopt the accent color #ff9900.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 19 |
| `{space.sm}` | 20px | 17 |
| `{space.md}` | 40px | 3 |
| `{space.lg}` | 60px | 3 |
| `{space.section}` | 100px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default sections, large cards | 109 occurrences |
| `{radius.sm}` | 3px | Buttons, small input fields | `radius: 3px` |
| `{radius.md}` | 8px | Service feature cards | `radius: 8px` |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|---|
| Flat | none | All cards and sections | `shadow: none` |

## Components

### Tier 1: Foundational

#### Primary Action (Bordered)
**Role:** Main site CTAs and navigation highlights.
**Pages observed:** Homepage, About.
**Spec:** Background: transparent / Text: #ff9900 / Border: 1px #ff9900 / Radius: 8px / Padding: 26px 24px 24px / Typography: 14px Arial.
**States observed:** Default: captured | Hover: not captured.

#### Ghost Button
**Role:** Secondary navigation and header actions.
**Pages observed:** Homepage.
**Spec:** Background: transparent / Text: #ffffff / Border: 0px / Radius: 3px / Padding: 10px 30px / Typography: 16px Arial.
**States observed:** Default: captured.

### Tier 2: Patterns

#### Statistic Card
**Role:** Displaying company impact metrics.
**Pages observed:** Homepage, Mobile.
**Spec:** Background: #ffffff / Text: #ff9900 (numbers) and #676767 (labels) / Radius: 0px / Padding: 20px.
**States observed:** Default: captured.

#### Partner Logo Grid
**Role:** Trust building with medical institutions.
**Pages observed:** Homepage.
**Spec:** Background: #ffffff / Border: 1px #000000 (implied grid) / Padding: 10px.
**States observed:** Default: captured.

### Tier 3: Surface-specific

#### Alternating Section
**Role:** Breaking up long-form content.
**Pages observed:** Homepage.
**Spec:** Background: #fcf2f2 / Text: #383838 / Padding: 100px 0px / Typography: 14px Arial.
**States observed:** Default: captured.

#### Footer Block
**Role:** Site-wide navigation and legal.
**Pages observed:** All pages.
**Spec:** Background: #1a1a1a (visual) / Text: #8a8a8a / Typography: 14px Arial / Padding: 60px 0px.
**States observed:** Default: captured.

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Section Gap | 100px |
| Grid | 4-column (stats), 6-column (partners) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Section padding reduces to 40px; Stats stack vertically. |
| Desktop | 1440px | 100px section padding; Horizontal flex layouts. |

## Imagery & decoration
- **Photography:** High-key medical equipment (stethoscopes, tablets) on white backgrounds.
- **Iconography:** Custom thin-stroke icons using `{color.ink.secondary}`.
- **Avoids:** Heavy shadows, gradients, and rounded corners exceeding 8px.

## Do's
- Use #ff9900 for all numeric data that represents "success" or "scale."
- Maintain 100px vertical gaps between major content blocks.
- Use Arial 500 for display titles to ensure a professional, non-stylized tone.
- Keep backgrounds pure white (#ffffff) for 90% of the interface.
- Use `{radius.none}` for large structural containers.

## Don'ts
- **Wrong:** Using a saturated blue for primary buttons. **Right:** Use #ff9900 or #383838. **Reason:** Blue is not part of the Xingshulin parent palette.
- **Wrong:** Applying heavy drop shadows to cards. **Right:** Use 1px borders or flat backgrounds. **Reason:** The brand DNA is strictly flat/monochrome.
- **Wrong:** Using weight 700 (Bold) for headlines. **Right:** Use weight 500. **Reason:** Xingshulin maintains a lighter typographic touch.
- Do not mix different sans-serif families; stick to Arial.
- Do not use the accent color for body text paragraphs.

## Similar brands
- Mayo Clinic (Typography-first, clinical white)
- DXY.cn (Medical data visualization style)
- IQVIA (Professional grayscale with single-color accents)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-canvas: #ffffff;
  --color-ink-primary: #383838;
  --color-accent: #ff9900;
  --font-main: 'Arial', sans-serif;
  --space-section: 100px;
  --radius-control: 8px;
}
```

## Agent prompt examples
- "Generate a service feature card using a white background, an 8px border radius, and a 1px border in #ff9900. Use Arial 20px weight 500 for the title."
- "Create a hero section with a 100px top padding, a 50px Arial title with 3px letter spacing, and a primary action button with a 3px border radius."
- "Design a data grid where the numbers are #ff9900 at 40px and the labels are #676767 at 14px."

## Known gaps
- Hover and Active states for buttons were not captured in the source.
- Specific shadow tokens are missing as the analyzed pages use a flat design language.
- Form input validation states (Success/Error) were not present on the analyzed landing pages.

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