Sina Design System Deep Dive

1. Brand Overview

Sina is one of China's digital media giants — a sprawling news portal that’s been around for decades. The homepage is dense, text-heavy, and unapologetically functional. This is not a “white space” brand. It’s a brand for people who want information fast, in volume, and in a familiar, trusted layout. Think classic portal design: multiple columns, strong link hierarchy, and small type that packs headlines tightly.

The design philosophy is utilitarian. Colors are chosen for clarity and contrast, not subtlety. Typography leans on Chinese system fonts — SimSun, Microsoft YaHei — for maximum compatibility and readability across devices in China. Rounded corners are rare; most elements are square or have tiny radii. This makes the site feel “content-first” rather than “UI-first.”

For designers and developers, the takeaway is: Sina’s system values density, legibility, and predictable patterns over aesthetic experiments. If you’re building with this system, you’re building for speed — both in user scanning and in visual rendering. Their palette is a mix of deep navy (#122e67), bright functional orange (#ff8400), and a range of grays for text. Blues are reserved for interactive elements like buttons. Oranges highlight key actions or section markers. Grays and black handle the bulk of typography.

There’s a strong link state system: default grays, hover orange. This creates a consistent “read → hover → click” rhythm. Fonts are small (12–16px) with tight line heights. Spacing is shallow; margins rarely exceed 20px. Shadows are minimal — they use borders for separation instead of depth.

The vibe: news urgency meets old-school web pragmatism. If you’re used to designing airy, minimalist interfaces, Sina’s system will feel cramped but purposeful. It’s not trying to be “beautiful.” It’s trying to be clear and fast.

2. Color System

2.1 Primary Colors

The primary brand colors are:

• Deep Navy (#122e67) — This is the anchor color. It’s used for bold links and main accents. Dark, saturated, and authoritative. It works well against white backgrounds and signals trust and seriousness.
• Functional Orange (#ff8400 / #e66100 / #e67902) — Multiple shades of orange appear in buttons, borders, and highlights. These are attention-grabbing, used sparingly to mark important actions or section dividers.
• Primary Blue (#3484df) — Used in buttons (btn-compare01) and bold links. It’s a mid-bright blue with good contrast against white.

Psychology: Navy + orange is a classic high-contrast duo — navy for stability, orange for urgency. The blue adds a friendly, clickable hue for CTAs.

Compared to competitors: Many Chinese portals use red as primary — Sina opts for a mix of navy, orange, and blue. This is slightly less aggressive than pure red, but still high-energy.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid between text and backgrounds — black/gray on white, white on blue/orange buttons. The orange (#ff8400) on black text is unusual — normally you’d expect white text, but Sina goes black, which is readable given the brightness of the orange. Blue (#3484df) on white is safe, but hover state replaces it with orange, maintaining contrast.

Accessibility: Most text colors meet WCAG AA against white backgrounds. The lighter grays (#939393, #7a7a7a) are borderline — they may fail for small text.

Dark mode: Not implemented. Palette is tuned for light backgrounds.

2.4 Usage Guide

• Pair navy (#122e67) with white for headlines and key links.
• Use orange shades for CTAs and hover states — limit to one per viewport to avoid visual fatigue.
• Blue (#3484df) is the “safe click” color — buttons, important links.
• Avoid using light gray (#dbdee1) for text — it’s meant for borders.
• Never use hover orange (#e67902) as a default — it’s intended for interaction feedback.

3. Typography

3.1 Font Families

Two primary families:

• SimSun — Classic serif-like Chinese font. Fallbacks: Arial Narrow, Helvetica.
• Microsoft YaHei — Sans-serif Chinese font. Multiple fallback stacks: SimHei, 宋体.

No Google or Adobe fonts. All are system-safe for Chinese users.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle — 18px SimSun for major headings, 16px YaHei for sub-headings and main links, then a quick drop to 14px and 12px for dense lists. Bold weights are used sparingly — mostly to flag key links. Line heights are variable; some are tight (1.13), others are tall (2.19) to increase touch area.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px system, but with many odd values.

4.2 Layout

No breakpoints detected — likely static widths with minimal responsive adjustments. Expect fixed container widths and manual mobile layouts.

5. Visual Elements

Border Radius

Shadows

Minimal:

• rgba(0,0,0,0.1) 3px 3px 3px — soft drop
• Others are rare.

Borders

Heavy use of 1px solid in grays (#dbdee1, #d6dad... etc). Borders separate content blocks instead of shadows.

6. Components

6.1 Buttons

Submit Second Button (submit-second-btn):

• Default: bg #ff8400, text #000, padding 0 6px, radius 0, no border.
• Hover: bg #ff9900.
• Focus: text transparent.

Compare Button (btn-compare01):

• Default: bg #3484df, text #fff, no padding, radius 0.
• Hover: text #ee8934, bg #ff9900, border 1px solid #eec57c, opacity 0.5.
• Active: text #ff8400, bg #fff, opacity 0.8.
• Focus: text transparent, bg #fff, opacity 0.8.

6.2 Links

Default colors vary (#4c4c4c, #a7a5a0, #666, #000, #3484df, #8a8a8a, #fff, #ff8400). Hover: always #cc6600.

No underlines.

6.3 Forms

Text inputs: bg #fff, text #666, no border, padding 9px 0 9px 14px. Focus: text transparent (odd choice).

6.4 Cards

No explicit card component detected — use divs with borders.

7. Design Tokens

:root {
  /* Colors */
  --color-navy: #122e67;
  --color-gray-medium: #666666;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-orange-burnt: #e66100;
  --color-blue-primary: #3484df;
  --color-gray-light: #dbdee1;
  --color-gray-mid: #7a7a7a;
  --color-charcoal: #434242;
  --color-orange-bright: #ff8400;
  --color-gray-soft: #939393;
  --color-gray-dark: #4c4c4c;
  --color-slate: #58677a;
  --color-gray-pale: #edeef0;
  --color-gray-warm: #938f8f;
  --color-orange-hover: #e67902;
  --color-cream: #fff5da;

  /* Typography */
  --font-simsun: "SimSun", "Arial Narrow", "Helvetica";
  --font-yahei: "Microsoft YaHei", "SimHei", "宋体";

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-20: 20px;
  --space-25: 25px;
  --space-35: 35px;
  --space-60: 60px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 60px;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.1) 3px 3px 3px 0px;
}

8. AI Coding Assistant Prompt

# Sina Design System Specification

You are a Sina design expert. Build UIs matching their visual language exactly.

## Brand Context
Sina is a dense, content-heavy news portal. The design is utilitarian: small type, tight spacing, strong link states. Colors are high-contrast navy, orange, and blue. Borders define structure; shadows are minimal.

## Color Palette
- Deep Navy: #122e67 — Primary accent, bold links
- Medium Gray: #666666 — Body text
- Black: #000000 — High-contrast text
- White: #ffffff — Backgrounds
- Burnt Orange: #e66100 — Highlight links
- Primary Blue: #3484df — Buttons, key links
- Light Gray: #dbdee1 — Borders
- Mid Gray: #7a7a7a — Secondary text
- Dark Charcoal: #434242 — Headings
- Bright Orange: #ff8400 — CTA buttons
- Soft Gray: #939393 — Disabled text
- Dark Gray: #4c4c4c — Links
- Slate: #58677a — Captions
- Pale Gray: #edeef0 — Hover/focus backgrounds
- Warm Gray: #938f8f — Hover/focus backgrounds
- Orange Variant: #e67902 — Hover accent
- Cream: #fff5da — Hover background

## Typography
Fonts:
- SimSun, Arial Narrow, Helvetica
- Microsoft YaHei, SimHei, 宋体

Type scale:
| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 | SimSun | 18px | 400 | 1.13 | Page titles |
| H1 alt | YaHei | 16px | 400 | 2.19 | Section headings |
| Link bold | YaHei | 16px | 700 | 1.25 | Key links |
| Caption | SimSun | 14px | 400 | 2.36 | Meta info |
| Button | YaHei | 14px | 400 | 2.07 | UI buttons |
| Caption small bold | YaHei | 12px | 700 | 1.67 | Labels |

## Spacing & Grid
Base: 8px, with 1–60px values.
Tokens: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 12px, 20px, 25px, 35px, 60px.

## Border Radius
- sm: 3px — divs
- md: 4px — buttons
- full: 60px — avatars

## Shadows & Depth
Minimal:
- rgba(0,0,0,0.1) 3px 3px 3px

## Component Specifications

### Primary Button (`submit-second-btn`)
Default:
- background: #ff8400
- color: #000
- padding: 0 6px
- radius: 0px
Hover:
- background: #ff9900
Focus:
- color: transparent

### Secondary Button (`btn-compare01`)
Default:
- background: #3484df
- color: #fff
Hover:
- background: #ff9900
- color: #ee8934
- border: 1px solid #eec57c
- opacity: 0.5
Active:
- background: #fff
- color: #ff8400
- opacity: 0.8
Focus:
- background: #fff
- color: transparent
- opacity: 0.8

### Navigation Links
Default: various grays
Hover: #cc6600
No underline.

### Input Fields
Default:
- background: #fff
- color: #666
- padding: 9px 0 9px 14px
Focus: color transparent

## Layout & Responsive Rules
Fixed width, no breakpoints detected. Use tight spacing.

## Interaction Rules
- Transition: 150ms ease on hover/focus
- Hover states use orange
- Focus states may hide text (set to transparent)

## DO List
- Use only palette colors
- Keep spacing tight (max 20px margins)
- Use SimSun for H1, YaHei for body
- Maintain hover orange for interactive states
- Use borders for separation, not shadows

## DON'T List
- Don't add new colors
- Don't round corners beyond defined radii
- Don't add drop shadows
- Don't increase font sizes beyond defined scale

## Code Examples

Primary Button:
```css
.submit-second-btn {
  background: #ff8400;
  color: #000;
  padding: 0 6px;
  border-radius: 0;
}
.submit-second-btn:hover {
  background: #ff9900;
}
```

Secondary Button:
```css
.btn-compare01 {
  background: #3484df;
  color: #fff;
}
.btn-compare01:hover {
  background: #ff9900;
  color: #ee8934;
  border: 1px solid #eec57c;
  opacity: 0.5;
}
```

Input:
```css
.input-text {
  background: #fff;
  color: #666;
  padding: 9px 0 9px 14px;
}
.input-text:focus {
  color: transparent;
}
```

9. Summary

TL;DR — Sina’s design system is dense, functional, and color-driven. Navy, orange, and blue create a clear interactive hierarchy. Fonts are small, spacing is tight, borders replace shadows. Build for clarity, not flair.

Brand Keywords — news-dense, utilitarian, high-contrast, border-heavy, system-font