Aliyun Brand Design System Deep-Dive

1. Brand Overview

Aliyun (Alibaba Cloud) is China’s heavyweight in the cloud computing space, and their design language reflects that scale. The site is not whimsical. It’s functional, corporate, and clearly engineered for enterprise customers, developers, and tech decision-makers. The vibe: confident, high-performance, transactional.

The first impression is dominated by a sharp orange (rgb(255, 106, 0) / #ff6a00) — an aggressive, high-energy primary that says “action” and “brand recognition” more than “calm elegance.” It’s paired with a restrained set of neutrals and a few functional blues. This isn’t a playful palette; it’s a business toolkit.

Typography is all Roboto — sans-serif, modern, and neutral — with weights ranging from 300 to 700 and a wide range of sizes for different heading contexts. The choice of Roboto keeps things readable at scale, works well in UI-heavy environments, and avoids any personality clash with the strong brand color.

Spacing is disciplined. They’re on an 8px scale, with some 4px and 2px sub-units for fine adjustments. You can tell they use Tailwind CSS and Bootstrap — the utility-first classes and grid system are present — but they also have custom tweaks layered in.

Shadows are minimal. Borders do most of the work defining space. The few shadows that exist are subtle (rgba(0, 0, 0, 0.1) at small blurs). Corners swing between sharp (0px radius) and fully pill-shaped (40px+) depending on component function — an interesting duality.

Buttons are direct: either flat, high-contrast orange CTAs, or more neutral white/blue variants. Links are color-coded by function: white on dark backgrounds, black for normal text, orange for emphasis, blue for actions.

This looks like a system designed for scale — hundreds of pages, multiple product verticals — with strict adherence to tokenized values. It’s not trying to be “design-y”; it’s trying to be consistent, fast, and accessible to a global audience.

2. Color System

2.1 Primary Colors

The main brand color is rgb(255, 106, 0) (#ff6a00). In color psychology terms: orange signals energy, urgency, and confidence. It's less aggressive than pure red, but more assertive than yellow. In tech, orange is often used to stand out in dense UI environments — AWS uses a similar tone for branding.

Aliyun’s orange is used for:

• Primary buttons
• Link highlights
• Borders on active cards
• Accent lines

It’s paired with neutral grays and pure white for contrast. This works because orange pops against white and dark gray without needing extra saturation elsewhere.

2.2 Complete Palette

2.3 Color Relationships

Orange (#ff6a00) on white is high contrast — WCAG AAA for large text, AA for normal text. Orange on near-black (#0d0d0e) also passes comfortably.

The action blue (#1354ee) is a deep, saturated hue — safe for white text overlays, fine for link text, though contrast against dark grays will need checking.

Light gray-blue (#eff3f5) is a low-contrast background tone. Works well as a neutral canvas behind dark or colored elements. Not suitable for text foregrounds without a dark overlay.

Dark mode? Not evident here. The palette is built for light backgrounds.

2.4 Usage Guide

Works well:

• Orange (#ff6a00) + white text for CTAs
• Blue (#1354ee) + white text for secondary actions
• White background + near-black text for primary content
• Light gray-blue background + dark text for secondary content blocks

Avoid:

• Orange text on light gray-blue — low contrast
• Blue text on dark gray — borderline contrast
• Using more than one accent color in the same component — splits focus

3. Typography

3.1 Font Families

Primary font: Roboto.
Fallbacks: "Helvetica Neue", Helvetica, Tahoma, Arial.
No Google Fonts import detected — likely self-hosted.
Special fonts: iconfont, FontAwesome, Roboto Condensed, RobotoRegular, cloud-iconfont.

Roboto is pragmatic — clean, legible, and neutral. Condensed weights are used for uppercase captions.

3.2 Type Scale

…and many more micro-variants for icons and small text.

3.3 Hierarchy

It’s a wide scale — from 74px hero headings down to 9px captions. The jump from 74px to 40px is huge but fits a homepage hero vs subheading pattern.

Weights are used to differentiate — 400 for normal, 500 for emphasis, 700 for strong emphasis. Uppercase condensed at 14px is used for labels and navigation.

Readability is high due to generous line heights (1.5+ for body sizes). No decorative fonts — everything is functional.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px.
Common values:

4.2 Layout

Breakpoints detected:

• 375px, 425px — mobile
• 600px, 675px — small tablet
• 960px, 991px — tablet/desktop transition
• 1200px — large desktop

Grid: Bootstrap container/row/col + Tailwind utilities. Responsive modifiers (sm:, md:, etc.) are in use.

5. Visual Elements

Border Radius

Range from sharp (0px) to pill (50%). Examples:

• 2px — badges
• 10px — small spans
• 20px — span/a tags
• 21px — buttons
• 40px — pill buttons, li
• 50% — avatars

Shadows

Mostly absent. A few:

• rgba(0, 0, 0, 0.1) 0px 0px 5px — subtle inner shadow
• rgba(0, 0, 0, 0.1) 0px 5px 20px — soft card shadow

Borders

Functional, often in brand orange for active states:

• 1px solid #dedede — neutral dividers
• 1px solid #ff6a00 — active component borders
• none none solid solid #ff6a00 — card edges

6. Components

6.1 Buttons

White pill button (ai-search-btn):

• Default: background: #fff, color: #181818, padding: 4px 17px 4px 15px, border-radius: 40px, no border.
• Focus: outline none.

Primary blue (btn btn-primary btn-lg):

• Default: background: #1354ee, color: #fff, padding: 12px 24px, radius 0.
• Hover: background rgba(255,255,255,0.24), text stays white.
• Active: background rgba(255,255,255,0.32).
• Focus: box-shadow layered white + blue.

Outlined white:

• Default: transparent bg, color: #fff, border: 1px solid #fff.
• Hover: color stays white.

Brand orange:

• Default: background: #ff6a00, color: #fff, border: 1px solid #ff6a00.
• Hover: no change.

6.2 Links

Variants:

• White text, no underline (nav links)
• Near-black text, no underline (body links)
• Blue text, no underline (interactive)
• Orange text, underline (emphasis)
• Gray text, no underline (secondary)

6.3 Forms

No text input styles extracted — likely default Bootstrap + custom.

6.4 Cards

Borders in orange for active, neutral gray for default. Padding often 24px. Shadows minimal.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #0d0d0e;
  --color-gray-dark: #3d3d3d;
  --color-gray-mid: #919293;
  --color-gray-cool: #818184;
  --color-gray-light: #eff3f5;
  --color-orange-primary: #ff6a00;
  --color-blue-action: #1354ee;
  --color-blue-swiper: #007aff;

  /* Typography */
  --font-roboto: "Roboto", "Helvetica Neue", Helvetica, Tahoma, Arial;
  --font-roboto-condensed: "Roboto Condensed";
  --font-roboto-regular: "RobotoRegular";
  --font-iconfont: "iconfont";
  --font-fontawesome: "FontAwesome";
  --font-cloud-iconfont: "cloud-iconfont";

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-36: 36px;
  --space-50: 50px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-10: 10px;
  --radius-20: 20px;
  --radius-21: 21px;
  --radius-40: 40px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.1) 0px 5px 20px 0px;
}

8. AI Coding Assistant Prompt

# Aliyun Design System Specification

You are an Aliyun design expert. Build UIs matching their visual language exactly.

## Brand Context
Aliyun’s design is enterprise-focused, functional, and token-driven. Strong brand orange meets disciplined neutrals. Roboto typography keeps UI clean and scalable. Minimal shadows, borders for definition.

## Color Palette
- White: #ffffff — Backgrounds, text on dark
- Near-black: #0d0d0e — Primary body text
- Dark gray: #3d3d3d — Secondary text
- Mid gray: #919293 — Descriptive text, captions
- Cool gray: #818184 — Icons, subtle UI text
- Light gray-blue: #eff3f5 — Surface backgrounds
- Primary Orange: #ff6a00 — CTAs, active borders, emphasis links
- Action Blue: #1354ee — Secondary actions, hover/focus states
- Swiper Theme Blue: #007aff — Swiper component accents

## Typography
Fonts:
- Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial
- Roboto Condensed — uppercase captions
- RobotoRegular — body/link variants
- iconfont, FontAwesome, cloud-iconfont — icons

Sizes:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 Hero | 74px | 400 | 1.18 | Homepage hero |
| H1 | 40px | 400 | 1.20 | Section titles |
| H2 | 36px | 400 | 1.33 | Subsection titles |
| H3 | 32px | 400 | 1.50 | Content headings |
| Body lg | 24px | 400-500 | 1.50-1.67 | Key content |
| Body md | 18px | 400-700 | 1.17-1.50 | UI text |
| Body sm | 16px | 400-500 | 1.50 | Labels |
| Caption | 14px | 300-500 | 1.43-2.86 | Meta info |

## Spacing & Grid
Base: 8px grid
Scale: 2px, 4px, 8px, 12px, 16px, 24px, 36px, 50px
Use for:
- Buttons: 4–17px horizontal, 4px vertical
- Cards: 24px padding
- Sections: 36–50px padding

## Border Radius
- sm: 2px — badges
- md: 10px — small elements
- lg: 20px — spans, a tags
- pill: 21px — buttons
- full-pill: 40px+ — large pill buttons
- circle: 50% — avatars

## Shadows & Depth
Subtle: use `rgba(0,0,0,0.1)` 0px 0px 5px or 0px 5px 20px for cards. Mostly flat design.

## Components

### Primary Button (Orange)
Default:
```css
background: #ff6a00;
color: #fff;
padding: 6px 32px 7px;
border: 1px solid #ff6a00;
border-radius: 0;
font-size: 14px;
font-weight: 400;

Hover: color stays #fff
Focus: outline none

Secondary Button (Blue)

Default:

background: #1354ee;
color: #fff;
padding: 12px 24px;
border: none;
border-radius: 0;

Hover: background rgba(255,255,255,0.24)
Active: background rgba(255,255,255,0.32)
Focus: box-shadow white 0 0 0 1px, #3699f1 0 0 0 4px

Outlined Button (White)

background: transparent;
color: #fff;
border: 1px solid #fff;
padding: 6px 12px 7px;
border-radius: 0;

Links

• White: nav links
• Near-black: body links
• Blue: interactive
• Orange: emphasis (underline)

Cards

Padding: 24px
Border: 1px solid #dedede or #ff6a00 for active
Shadow: optional, subtle

Layout & Responsive Rules

Breakpoints:

• Mobile: <375px
• Tablet: 600px–960px
• Desktop: >1200px

Interaction Rules

Transitions: 150ms ease for hover/focus
Focus indicators: box-shadow for blue buttons, none for orange/white

DO

• Use ONLY palette colors
• Maintain 8px spacing multiples
• Use Roboto for all text
• Keep shadows subtle
• Use brand orange for CTAs only

DON'T

• Add extra colors
• Mix rounded and sharp corners in one element
• Overuse shadows
• Use orange for body text

Code Examples

Primary Button:

.btn-primary-orange {
  background: #ff6a00;
  color: #fff;
  padding: 6px 32px 7px;
  border: 1px solid #ff6a00;
  border-radius: 0;
  font-size: 14px;
}
.btn-primary-orange:hover { color: #fff; }

Card:

.card {
  background: #fff;
  padding: 24px;
  border: 1px solid #dedede;
  border-radius: 10px;
}

Link:

.link-orange {
  color: #ff6a00;
  text-decoration: underline;
}

---

## 9. Summary

**TL;DR** — Aliyun’s design system is corporate, disciplined, and built for scale. Strong orange CTAs, Roboto everywhere, minimal shadows, and an 8px grid keep things consistent.

**Brand Keywords**:
- enterprise-functional
- tech-confident
- token-disciplined
- minimal-shadows
- orange-accent