Lenovo DESIGN.md

Brands

Computing and device retail with black-red branding, practical hierarchy, and broad catalog structure. Lenovo's public site uses a black-white base, red brand accents, and hardware-forward merchandising.

Raw DESIGN.md

At a glance

Group: Brands
Main color: #e2231aRed design systems
Fonts: Lato SF Mono

Colors in this file

#e5e5e5
Unnamed
#e2231a
Unnamed
#111111
Unnamed
#ffffff
Unnamed
#f7f7f7
Unnamed
#6b7280
Unnamed

Computing and device retail with black-red branding, practical hierarchy, and broad catalog structure. Lenovo's public site uses a black-white base, red brand accents, and hardware-forward merchandising.

1. Visual Theme & Atmosphere

Overall Aesthetic

Lenovo feels like global device commerce with practical, high-contrast product hierarchy.

Mood & Feeling

Practical
Global-tech
Business-capable
Hardware-led
Mainstream

Design Density

Medium to high density. Many categories and promos are present.

Visual Character

Black, white, and red brand framing
Hardware and laptop imagery
Broad category modules
Straightforward retail-tech presentation

2. Color Palette & Roles

Token	Hex	Role
`--lenovo-red`	`#E2231A`	Primary brand accent
`--lenovo-black`	`#111111`	Text and strong contrast
`--lenovo-white`	`#FFFFFF`	Main surface
`--lenovo-surface`	`#F7F7F7`	Background
`--lenovo-muted`	`#6B7280`	Secondary text
`--lenovo-border`	`#E5E5E5`	Borders

3. Typography Rules

Font Stack

css--font-display: "Lato", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Lato", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 50/700, H1 36/700, H2 28/700, Body 16/400, Small 14/400

4. Component Stylings

css.button-primary { background:#e2231a; color:#fff; border:none; border-radius:999px; min-height:42px; padding:0 18px; font-weight:700; }
.button-secondary { background:#fff; color:#111; border:1px solid #e5e5e5; border-radius:999px; min-height:42px; padding:0 18px; }
.card { background:#fff; border:1px solid #e5e5e5; border-radius:14px; }

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48px

Layout Behavior

Organize by brand line, use case, and buyer type
Keep hardware and sale promotions scannable

6. Depth & Elevation

Lenovo uses simple commerce-card depth with strong contrast and clear modules.

7. Do's and Don'ts

Do

Keep it hardware-focused and practical
Use red as the brand signal
Preserve broad catalog hierarchy

Don't

Don’t turn it into abstract premium lifestyle tech
Don’t clutter category paths

8. Responsive Behavior

Breakpoints

Mobile <768px
Tablet 768px-1023px
Desktop 1024px+

Responsive Rules

Stack hardware sections and preserve category access

9. Agent Prompt Guide

textDesign this like Lenovo: black-white-red technology retail UI with practical hardware merchandising, simple category structure, and broad computing-product clarity.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/lenovo.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "lenovo" })

Capital One

Brands · Optimist

National bank design with bold red identity, confident card surfaces, clean Sans typography, and accessible financial clarity.

Redis

Brands · Inter

Fast data-platform design with bold red identity, black technical contrast, and performance-first product framing.

Mistral

Brands · Arial

Frontier AI platform design with sharp black foundations, a warm orange-to-yellow signature spectrum, and highly controlled enterprise product framing. Mistral combines open-model energy with direct, no-frills…

McDonald

Brands · Speedee

Fast-food commerce with strong red-and-yellow branding, friendly utility, and mainstream consumer accessibility. McDonald's public site uses bright brand color, white space, large food imagery, and clear app/deal CTAs.

KRAFTON

Brands · Poppins

KRAFTON is a South Korean game publisher and developer whose digital identity is built entirely in monochrome — deep black surfaces carry white type and logotypes while a proprietary KRAFTON typeface, Zalando Sans…

eBay

Brands · Market Sans

eBay is a global e-commerce marketplace connecting buyers and sellers worldwide. Founded in 1995, eBay has evolved from an auction-only platform to a comprehensive marketplace featuring fixed-price listings, deals,…

All Design.md files Browse by font