WPS Brand Design System Deep Dive

1. Brand Overview

WPS is not trying to be "cutesy" or overly flashy — this is a productivity brand, squarely aimed at getting work done with minimal distraction. The design reads corporate, but not stiff. Primary colors are crisp and purposeful; typography leans modern sans-serif with a utility-first mindset. The WPS landing environment shows you what you need: download buttons, core features, and straightforward navigation.

The vibe: "We know you're here to work, so let's make it easy." That shows up in the button hierarchy — clear contrasts, heavy type weights for CTAs, none of the ghost-button ambiguity a lot of SaaS products fall into. The color palette is restrained — black (#000000), white (#ffffff), a single primary blue (#1e5fc7). Everything else is functional gray (#7e8c8d) to support rather than compete with primary action colors.

The typography split between Inter and Noto Sans/Noto Serif suggests a deliberate separation between headings (Inter) and system text (Noto Sans). Inter is the more design-forward choice, giving the site a contemporary tech feel. Noto Sans is a dependable UI workhorse — its glyph coverage is wide, important for a global user base.

A lot of WPS’s design system is about trust and efficiency. Rounded corners are there but measured. You don't see extreme pill shapes — even large 24px radii feel controlled. Shadows are mostly soft, high-blur drop shadows, which makes components hover slightly above the background without screaming "depth." That’s important — too much shadow in productivity UI starts to feel ornamental, not utilitarian.

Overall design philosophy:

• Functional minimalism: avoid extra flourishes unless they add clarity.
• High legibility: weights and sizes are chosen for fast scanning.
• Straightforward hierarchy: primary vs secondary actions are visually obvious.
• International reach: font choices work for multi-language contexts.

If you’re a designer or developer building inside this system: know that WPS’s brand is about confident, focused, visually clean interactions. Every deviation from that has the potential to look "off-brand" very fast.

2. Color System

2.1 Primary Colors

There’s no doubt what the brand’s primary action color is: Blue (#1e5fc7). It appears on banner links and high-value actions. This is not a pastel or muted tone — it’s deep enough to read as serious, bright enough to draw the eye without being neon. Compared to Microsoft Office’s warmer orange and green CTAs, WPS’s blue is cooler and feels more tech-forward.

That primary blue works psychologically as "trustworthy + stable," tapping into the same associations as IBM’s corporate blue or Facebook’s link blue. It’s not over-used — primary actions only. Links, some buttons, and highlights carry this tone, which preserves contrast and ensures the blue signals interactivity every time.

The dominant structural colors are black (#000000) and white (#ffffff), forming the canvas and primary text contrast. Supporting gray (#7e8c8d) plays the secondary text role — like a sidekick to black, useful in captions or less important links.

2.2 Complete Palette

2.3 Color Relationships

Contrast stays functional:

• Black (#000000) on white (#ffffff): WCAG AAA for text of any size.
• Primary blue (#1e5fc7) on white: strong enough for AAA for large text, good AA for small text in UI use.
• Gray (#7e8c8d) on white: functional for secondary labels but too low contrast for main body text — hence why they reserve it for “secondary” contexts.

Dark mode is not explicitly defined here — most values are high-contrast light-theme defaults. Shadow values also suggest light backgrounds rather than dark UI.

2.4 Usage Guide

Works well:

• Blue (#1e5fc7) for clickable elements with white text.
• Black text for all body content; gray for captions.
• White backgrounds for maximum clarity in content areas.

Avoid:

• Using blue for non-interactive text — breaks the interaction affordance.
• White text on gray backgrounds — loses contrast quickly.
• Too much black overlay (#000000 at 80%) — feels heavy in this otherwise airy system.

3. Typography

3.1 Font Families

Headings: Inter, fallbacks: Noto Sans, Segoe UI, Avenir, Helvetica, Arial
Buttons and captions: Noto Sans, fallbacks: Segoe UI, Avenir, Helvetica, Arial
Special cases: Noto Serif for certain 18px bold headings — suggests content or marketing segments.

Fonts are not loaded via Google or Adobe Fonts here — possibly self-hosted for performance and control. No variable font implementation in the extract.

3.2 Type Scale

Full extracted sizes:

3.3 Hierarchy

They aren't shy about big headings — 60px and 48px on an H1 give clear entry points. The jump from large headings to the mid-range 28px/24px variants keeps subheads noticeable but not dominant. Heavy button weights (700) ensure CTA text remains legible — asynchronous with a lot of SaaS UI where button text is too light.

Line heights vary a lot, suggesting tuning per context rather than a single vertical rhythm — good for a site where headings and UI labels have very different needs.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. All values are multiples except for a few quirks (7px, 13px) — probably adjusted for optical balance.

4.2 Layout

Breakpoints run from mobile 412px up to huge desktop 2560px:

[412, 420, 480, 481, 540, 600, 768, 780, 920, 968, 992, 1024, 1099, 1190, 1200, 1260, 1280, 1366, 1440, 1600, 1920, 1921, 2200, 2560]

Responsive approach: many micro-breakpoints suggest fine-tuned adjustments at specific widths — not just generic mobile/tablet/desktop. Likely adjustments for specific OS window sizes.

5. Visual Elements

Border Radius System

Values range from sharp corners to heavy rounds:

• 0px variants for flat edges — often on code-like sections.
• 3px — subtle rounding for small UI elements.
• 6px — small buttons/sections.
• 8px — buttons and small containers.
• 16px top-only — images or modals.
• 24px — large containers/cards.
• 48px — rare, maybe hero cards.
• 50% — perfect circles (avatars).
• 100px — stylised spans.

You can feel the consistency: 3/6/8 for UI-level elements, 24 for large blocks.

Shadows

Soft drop shadows dominate:

• Common: rgba(176, 176, 176, 0.25) 0px 4px 48px 0px — diffuse, neutral.
• Deeper: rgba(176, 176, 176, 0.25) 0px 4px 95px 0px for bigger surfaces.
• Sometimes tinted: rgba(0, 79, 201, 0.1) 0px 1px 3px 0px for buttons.

Shadows are not hard-edged — all high-blur values. Means UI feels airy without harsh separation.

Borders

Functional and restrained:

• 0px 0px 1px solid rgb(0, 0, 0) for dividers.
• Subtle rgba(13, 13, 13, 0.12) for containers.
• Occasional colored border (rgb(144, 105, 255)) — maybe brand highlights in marketing sections.

6. Components

6.1 Buttons

Download-btn small (header):

• Default: bg #333333, text #ffffff, padding 0 16px, radius 8px, light shadow rgba(0, 79, 201, 0.1).
• Hover: inset shadow, bg rgba(16, 153, 104, 0.8), text dimmed to rgba(0, 0, 0, 0.4), opacity 0.4.
• Active: similar to hover but bg rgb(14, 155, 105).
• Focus: bg rgb(14, 155, 105), text white, no outline.

Large blue CTA:

• Default: bg #3265f3, white text, padding 0 30px, radius 8px, complex two-layer shadow.
• Hover: bg #eeeeee (!!), indicating a controversial state change — color flips drastically.
• Active: same as hover.
• Focus: bg rgb(14, 155, 105) — odd choice, maybe multi-purpose button style.

Language-btn:

• Default: translucent bg rgba(0,0,0,0.1), text rgba(0,0,0,0.6), padding 9px 12px, radius 8px.
• Hover/Active: fades opacity to 0.6.

6.2 Links

Variants:

1. Gray link: #7e8c8d, no underline.
2. Black link: underlined default, hover to #417ff9.
3. Blue link: #1e5fc7 fixed — no hover change.
4. White link — used on dark backgrounds.

6.3 Forms

This extract doesn't list text inputs — probably styled simply with Noto Sans, subtle borders, and hover/focus cues.

6.4 Cards

Shadows: usually large blur neutral grays. Border radii at 24px. Cards are airy — plenty of 32px padding based on spacing counts.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-primary-blue: #1e5fc7;
  --color-secondary-gray: #7e8c8d;
  --color-overlay-light: #0d0d0d;
  --color-overlay-dark: #000000;

  /* Typography */
  --font-inter: 'Inter', 'Noto Sans', 'Segoe UI', 'Avenir', 'Helvetica', 'Arial';
  --font-noto-sans: 'Noto Sans', 'Segoe UI', 'Avenir', 'Helvetica', 'Arial';
  --font-noto-serif: 'Noto Serif', 'Inter', 'Noto Sans', 'Segoe UI', 'Avenir', 'Helvetica', 'Arial';

  /* Spacing (8px scale base) */
  --space-2: 2px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-16: 16px;
  --space-18: 18px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-32: 32px;
  --space-40: 40px;
  --space-42: 42px;
  --space-48: 48px;
  --space-63: 63px;
  --space-64: 64px;
  --space-74: 74px;
  --space-84: 84px;
  --space-128: 128px;

  /* Border radius */
  --radius-0: 0px;
  --radius-3: 3px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16-top: 16px 16px 0px 0px;
  --radius-24: 24px;
  --radius-48: 48px;
  --radius-100: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft-lg: rgba(176, 176, 176, 0.25) 0px 4px 48px 0px;
  --shadow-soft-xl: rgba(176, 176, 176, 0.25) 0px 4px 95px 0px;
  --shadow-btn: rgba(0, 79, 201, 0.1) 0px 1px 3px 0px;
}

8. AI Coding Assistant Prompt

# WPS Office Design System Specification

System Prompt:
You are a WPS design expert. Build UIs matching their visual language exactly.

Brand Context:
WPS values functional minimalism, legibility, and clear hierarchy. Actions should be unmistakable, content easy to scan, and typography consistent across platforms. Corners are softly rounded, shadows diffuse, and color usage restrained — only blue signals interactivity.

Color Palette:
- Black: #000000 — Primary text, headers
- White: #ffffff — Backgrounds, button text
- Primary Blue: #1e5fc7 — CTAs, banner links
- Secondary Gray: #7e8c8d — Secondary text, low-priority links
- Light Overlay: #0d0d0d — Hover/focus overlays
- Dark Overlay (80%): #000000 — Semi-transparent hover overlays

Typography:
- Headings: "Inter", Noto Sans, Segoe UI, Avenir, Helvetica, Arial
- Body/UI: "Noto Sans", Segoe UI, Avenir, Helvetica, Arial
- Special headings: "Noto Serif" for select content  
Sizes:
| Level       | Font       | Size  | Weight | LH   | Use |
|-------------|------------|-------|--------|------|-----|
| H1 Large    | Inter      | 60px  | 700    | 1.13 | Hero titles |
| H1          | Inter      | 48px  | 700    | 1.17 | Main page headings |
| H2          | Inter      | 28px  | 700    | 1.29 | Section headings |
| Button Lg   | Noto Sans  | 24px  | 700    | 2.50 | Primary CTAs |
| Button      | Inter      | 18px  | 700    | 1.11 | Secondary CTAs |
| Caption     | Noto Sans  | 14px  | 400    | 2.71 | Meta info |
| ... include rest from extracted scale ...

Spacing & Grid:
Base: 8px grid.
Scale: 2px, 7px, 8px, 10px, 12px, 13px, 16px, 18px, 22px, 24px, 26px, 32px, 40px, 42px, 48px, 63px, 64px, 74px, 84px, 128px

Border Radius:
- none: 0px — tables, code
- sm: 3px — small UI
- md: 6px — buttons/input
- md2: 8px — modals/buttons
- lg: 24px — cards
- full: 50% — avatars

Shadows & Depth:
- Soft-lg: rgba(176,176,176,0.25) 0px 4px 48px
- Soft-xl: rgba(176,176,176,0.25) 0px 4px 95px
- Button: rgba(0,79,201,0.1) 0px 1px 3px

Component Specifications:
Primary Button:
Default: bg #3265f3, text #ffffff, padding 0 30px, radius 8px, shadow double-layer blue.
Hover: bg #eeeeee, text rgba(0,0,0,0.4)
Active: same as hover
Focus: bg #0e9b69, text #ffffff

Secondary Button (header small):
Default: bg #333333, text white, radius 8px, padding 0 16px
Hover: bg rgba(16,153,104,0.8), text rgba(0,0,0,0.4)
Active: bg #0e9b69
Focus: bg #0e9b69, text white

Navigation Links:
Gray link: #7e8c8d no underline
Black link: underline default, hover blue #417ff9
Blue link: #1e5fc7 fixed

Layout & Responsive Rules:
Breakpoints: 412px, 420px, 480px, 481px, 540px, 600px, 768px, 780px, ..., 2560px
Max widths adjust per breakpoint, maintain generous 32px padding on desktop.

Interaction Rules:
Transitions: 150ms ease for hover/focus changes
Focus: remove default outline, use bg change and maintain color contrast

DO List:
- Use only colors defined
- Maintain 8px-based spacing (or specified values)
- Use proper font families
- Keep corners consistent per component
- Reserve primary blue for interactive elements
- Use shadows specified, avoid inconsistent depths

DON'T List:
- Invent new colors
- Mix sharp and rounded corners
- Apply primary blue to non-interactive text
- Overuse heavy black overlays
- Use line heights outside set values

Code Examples:
```css
.btn-primary {
  background: #3265f3;
  color: #ffffff;
  padding: 0 30px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 24px;
  border: none;
  box-shadow: rgba(50,101,243,0.16) 0px 24px 24px, rgba(50,101,243,0.12) 0px 20px 8px -12px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #eeeeee;
  color: rgba(0,0,0,0.4);
}
```

```css
.card {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px;
  box-shadow: rgba(176,176,176,0.25) 0px 4px 48px;
}
```

```css
.input {
  border: 1px solid rgba(13,13,13,0.12);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--font-noto-sans);
}
```

9. Summary

TL;DR — WPS’s visual language is clean, restrained, and action-focused. Blue is sacred (interactive only), typography is modern and readable, spacing is strictly on-grid. Shadows are soft and functional, edges pleasantly rounded without indulgence.

Brand Keywords:

• action-focused
• legibility-first
• corporate-minimalist
• trust-blue
• grid-disciplined