Lenovo Brand Design System Deep Dive

1. Brand Overview

Lenovo’s Singapore site is exactly what you expect from a global tech brand that sells hardware at scale: clean, confident, functional. No fluff. The design is built for conversion and product discovery, not for storytelling or lifestyle vibes. This is a site for people who already know they want a laptop, desktop, or accessory — the job is to get them to the right SKU quickly.

The overall vibe is utilitarian-modern. Black, white, and greys dominate, with sharp hits of red for brand presence and blue for functional CTAs. It’s a color language that says: “We’re serious about tech, we’re not here to entertain you.” Unlike Apple’s airy minimalism, Lenovo’s palette is heavier and more grounded. It feels like walking into a tech retail store: lots of product, clear signage, strong category separation.

Typography is consistent, with Lato doing most of the heavy lifting and Montserrat showing up in some headings. Both are approachable sans-serifs, but Lato’s softer curves contrast with Montserrat’s more geometric feel. The type scale is big — 50px headings are common — which makes sense for selling hardware where product shots and spec tables need strong hierarchy.

Spacing is based on an 8px grid, with some oddball values (7px, 9px, 25.5px) creeping in. You can tell this is an evolved design system that’s been patched over time, not a fresh-from-the-agency single-spec rollout. Border radii range from sharp (0px) to soft (12px, 50% circles), with plenty of rounded cards and buttons.

Components lean toward flat design — shadows exist but are subtle and rare. Borders do more of the separation work than depth effects. Buttons range from corporate-blue CTAs to brand-red purchase triggers, with functional shapes (3px radius, pill shapes for pagination). Inputs are standard: white background, black or grey borders, no fancy focus animation.

This design system is practical. It’s built to handle hundreds of SKUs, multiple product categories, and global content variations without breaking. It’s not trying to win a design award — it’s trying to keep Lenovo’s brand consistent across markets and make buying a ThinkPad or Legion gaming rig painless.

2. Color System

2.1 Primary Colors

The Lenovo brand red is here: #ff0000 and #b8252e in buttons and accents. It’s aggressive, high-contrast, impossible to miss. This red is about urgency — “Buy now,” “Limited offer,” “You’re in Lenovo territory.” Compared to Dell’s corporate blue or HP’s muted palette, Lenovo’s red is louder and more confident.

The other workhorse is black (#000000 and #171717). Black is everywhere: text, headers, borders. White (#ffffff) is the default background for most content surfaces. Blue (#294E95) shows up for links and certain CTAs — a calmer, trustworthy accent that balances the aggressive red.

2.2 Complete Palette

2.3 Color Relationships

Black/white contrast is perfect for WCAG AAA. Red on white is fine for accessibility if text size is large enough. Blue (#294E95) on white passes comfortably. Dark mode is not present — this system is optimized for light backgrounds.

The relationship is functional: red is always for brand or primary CTAs. Blue is for links or navigation. Black and grey handle text and structure. White is the default canvas.

2.4 Usage Guide

• Red + white = high urgency (buy buttons, sale banners). Avoid using red for non-interactive elements — it dilutes the urgency.
• Blue + white = trusted links. Don’t use blue for body text unless it’s a link.
• Black text on white background is the default — don’t invert unless you’re in a hero banner.
• Light gray backgrounds help separate sections without heavy borders.
• Avoid mixing brand red with blue in a single element — they fight for attention.

3. Typography

3.1 Font Families

Primary font: Lato with fallbacks to Helvetica and Arial. Lato appears in multiple weights (100–700) and sometimes with uppercase transform. Montserrat shows up in headings for a sharper, geometric feel. Noto Sans is used for some small headings and captions. icomoon provides icon glyphs.

No Google Fonts or Adobe Fonts are actively loaded in this extract — these are likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

Big headings (48–50px) dominate hero sections and product category pages. Mid-size headings (24–32px) handle subcategories. Body text at 16px is readable and works well with the high contrast palette. Captions drop to 12–14px but stay legible. Uppercase transforms are used for emphasis in headings and buttons — but not everywhere, avoiding overuse.

4. Spacing & Layout

4.1 Spacing Scale

Lenovo runs on an 8px base grid, but they have deviations.

4.2 Layout

Breakpoints:
480px, 730px, 750px, 1023px, 1280px, 1920px — typical mobile/tablet/desktop splits with some extra for specific device widths. This is a responsive system, scaling typography and spacing at these points.

5. Visual Elements

Border Radius

Values range from 0px (square) to 50% (circles).

Shadows

Mostly subtle:

• rgba(30, 0, 19, 0.5) 0px 2px 4px
• rgba(0, 0, 0, 0.4) 0px 2px 4px
• rgba(0, 0, 0, 0.16) 0px 3px 6px

Not a shadow-heavy brand. Borders do more work.

Borders

Common: 1px solid #171717 for buttons, 1px solid #000000 for form inputs.

6. Components

6.1 Buttons

Example: Red CTA button

Default:

• background: #b8252e
• color: #ffffff
• padding: 7px 20px
• radius: 3px
• border: 1px solid #b8252e

Hover: background: var(--pale-gray-2) (light gray), text to black.

Other buttons:

• Blue (#294E95) border and background for email capture
• Black pill (100px) for swiper navigation
• Circle (50%) white border for pagination bullets

6.2 Links

Variants:

• Black (#000000) with underline on default.
• Blue (#294E95) bold for emphasis — no underline.

Hover state often keeps color, removes underline.

6.3 Forms

Inputs:

• White background
• Black or grey border (#000000 / #bcbcbc)
• 3px or 4px radius
• Padding ~ 0px 10px
• Focus: no outline

Selects:

• White background
• Black border
• 3px radius
• Shadow: rgba(0,0,0,0.4) 0px 2px 4px

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-dark-gray: #171717;
  --color-white: #ffffff;
  --color-medium-gray: #3a3a3a;
  --color-muted-purple-gray: #4e444e;
  --color-brand-red: #ff0000;
  --color-light-gray: #f5f5f5;
  --color-mid-blue: #294E95;
  --color-pale-blue: #007aff;
  --color-border-grey: #CCCCCC;
  --color-wish-btn-grey: #e4e4e4;
  --color-pagination-bg: #090f207f;

  /* Typography */
  --font-primary: "Lato", Helvetica, Arial, sans-serif;
  --font-secondary: "Montserrat", sans-serif;
  --font-tertiary: "Noto Sans", sans-serif;
  --font-icon: "icomoon";

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-23: 23px;
  --space-24: 24px;
  --space-25-5: 25.5px;
  --space-30: 30px;
  --space-32: 32px;
  --space-48: 48px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 12px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-dark: rgba(30, 0, 19, 0.5) 0px 2px 4px;
  --shadow-black-40: rgba(0, 0, 0, 0.4) 0px 2px 4px;
  --shadow-light-16: rgba(0, 0, 0, 0.16) 0px 3px 6px;
}

8. AI Coding Assistant Prompt

# Lenovo Design System Specification

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

## Brand Context
Lenovo's design is functional, high-contrast, and built for product-heavy pages. Black, white, and grey form the foundation, with red for brand and urgency, and blue for functional accents. Typography is clean sans-serif, large-scale for hierarchy.

## Color Palette
- Black: #000000 — Base text, headers, borders
- Dark Gray: #171717 — Secondary text, header backgrounds
- White: #ffffff — Main background
- Medium Gray: #3a3a3a — Secondary UI text
- Muted Purple-Gray: #4e444e — Decorative borders
- Brand Red: #ff0000 — Brand accents, urgent CTAs
- Light Gray: #f5f5f5 — Section backgrounds
- Mid Blue: #294E95 — Links, secondary CTAs
- Pale Blue: #007aff — Swiper theme color
- Border Grey: #CCCCCC — Form borders
- Wish Btn Grey: #e4e4e4 — Wishlist buttons
- Pagination BG: #090f207f — Overlay backgrounds

## Typography
Fonts:
- Primary: "Lato", Helvetica, Arial
- Secondary: "Montserrat"
- Tertiary: "Noto Sans"
- Icons: "icomoon"

Type Sizes:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 50px | 400 | 1.20 | Page titles |
| H1 Bold | 50px | 700 | 1.20 | Page titles strong |
| H1 | 48px | 700 | 1.00 | Hero headings |
| Body | 16px | 400 | 1.19 | Main text |
| Caption | 12px | 700 | 1.25 | Labels |

## Spacing & Grid
Base: 8px grid  
Scale: 4px, 5px, 7px, 8px, 9px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 23px, 24px, 25.5px, 30px, 32px, 48px

## Border Radius
- none: 0px — square buttons
- sm: 3px — inputs
- md: 4px — buttons, cards
- lg: 12px — modals, images
- pill: 100px — navigation pills
- circle: 50% — pagination dots

## Shadows & Depth
- rgba(30,0,19,0.5) 0 2px 4px — subtle depth
- rgba(0,0,0,0.4) 0 2px 4px — hover states

## Component Specifications

### Primary Button (Red CTA)
Default: background #b8252e; color #fff; padding 7px 20px; radius 3px; border 1px solid #b8252e; font-size 18px; font-weight 300.  
Hover: background var(--pale-gray-2); color #000.  
Focus: outline 0; background var(--pale-gray-2); color #000.

### Secondary Button (Blue CTA)
Default: background #294E95; color #fff; border 1px solid #294E95; radius 3px; font-size 18px.  
Hover: background var(--pale-gray-2); color #000.

### Navigation Links
Black #000000, underline default; hover removes underline.

### Input Fields
White background; border 1px solid #000; radius 3px or 4px; padding 0 10px; focus outline none.

### Card
Background #fff; radius 12px; padding 16px–24px; border 1px solid #ccc or subtle shadow.

## Layout & Responsive Rules
Breakpoints: 480px, 730px, 750px, 1023px, 1280px, 1920px.  
Mobile: full-width containers, 16px padding.  
Desktop: max width ~1280px, 32px section gaps.

## Interaction Rules
- Transition: 150ms ease on hover/focus
- Focus indicators: color change + background tint
- No complex animations

## DO List
- Use only provided hex colors
- Keep spacing to 8px grid or listed exceptions
- Use Lato for all body and headings unless specified
- Keep borders consistent (1px solid)
- Maintain high contrast for text

## DON'T List
- Don't invent new colors
- Don't mix sharp and rounded corners in same component
- Don't add heavy shadows
- Don't use red for non-interactive elements

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #b8252e;
  color: #ffffff;
  padding: 7px 20px;
  border-radius: 3px;
  border: 1px solid #b8252e;
  font-size: 18px;
  font-weight: 300;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #f5f5f5;
  color: #000000;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #CCCCCC;
}
```

### Input
```css
.input {
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 3px;
  padding: 0 10px;
  font-size: 16px;
}
.input:focus {
  outline: none;
}
```

9. Summary

TL;DR — Lenovo’s design system is built for scale: functional, high-contrast, brand-red urgency, blue trust accents, big sans-serif type, flat UI with subtle borders. It’s not minimal for art’s sake — it’s minimal for speed and clarity.

Brand Keywords:

• functional-tech
• high-contrast
• brand-red-urgency
• global-retail
• utilitarian-modern