Alidns Brand Design System Deep-Dive

1. Brand Overview

Alidns is part of the Alibaba Cloud ecosystem — specifically, their DNS product line. This is enterprise-grade infrastructure dressed in a clean, functional UI. The design language is unapologetically utilitarian. You’re not here for playful flourishes or lifestyle imagery; you’re here to configure nameservers, manage zone records, and trust that the interface won’t get in your way.

The vibe is corporate tech with precision. Primary blue (#1366ec) is the anchor; it’s confident without being obnoxious. The typography is straightforward: PingFang SC for Chinese-language UI with a practical fallback stack for cross-platform safety. This is a system that values legibility over personality in type.

Alidns’ design philosophy leans toward flat realism — no heavy gradients, minimal shadows (and when they do use them, they’re soft and subtle). The spacing is disciplined: multiples of 8px dominate, with the occasional odd 5.6px or 7px thrown in for micro-adjustments. Everything feels grid-aligned.

This is a product for developers and IT admins. The interface avoids ambiguity. Buttons look like buttons. Links look like links. Inputs have clear boundaries. The palette is wide — not because they want visual richness, but because they’ve defined functional colors for every state: info blues, success greens, warning yellows, error reds, plus magentas and purples for secondary actions.

Alidns is also a Tailwind + Vuetify hybrid. You’ll see utility classes for quick adjustments (top-[117px]) alongside Vuetify’s structured components (v-card, v-btn). That means the design system is flexible enough for rapid iteration but still grounded in reusable patterns.

In short: precision, clarity, function over form. This is not a branding exercise in emotional storytelling; it’s a UI that says “we’re here to help you do the job right.”

2. Color System

2.1 Primary Colors

The main brand color is #1366ec (RGB 19, 102, 236). This is a saturated blue leaning slightly toward indigo. It’s used for primary CTAs, highlighted states, and active elements. Psychologically, blue conveys trust, stability, and professionalism — perfect for infrastructure products.

Compared to competitors like Cloudflare (orange-heavy) or AWS Route 53 (muted blues/grays), Alidns’ blue is brighter and higher in contrast. It stands out in a table of DNS records without being aggressive.

2.2 Complete Palette

Here’s every color extracted from the data:

Yes, it's a big palette. This is a functional system where each color has a job.

2.3 Color Relationships

Primary blue (#1366ec) against white (#ffffff) gives excellent contrast (WCAG AAA). Against #181818 (dark text), it’s still legible. Many functional colors are designed with enough contrast for overlays — e.g., success green #0f9934 on light backgrounds.

Dark mode isn’t explicitly defined here, but the presence of deep blues (#021e4f), cyans (#00243b), and near-blacks (#000000) suggests a dark variant exists.

2.4 Usage Guide

• Combine primary blue with white or very light gray for CTAs.
• Avoid pairing saturated colors like #ff6a00 (orange) with primary blue — too much chroma clash.
• Use functional colors only for their intended states (error, warning, success).
• Keep text on colored backgrounds white for accessibility, unless the background is very light.

3. Typography

3.1 Font Families

Everything uses "PingFang SC", "Helvetica Neue", "Arial", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "SimSun". No Google Fonts, no Adobe Fonts. This is a system-safe stack optimized for Chinese UI with fallback to common sans-serifs.

3.2 Type Scale

3.3 Hierarchy

H1s are huge — 44px or 34px, depending on context. This makes section headers unmistakable. Smaller headings (18px–20px) still carry weight via boldness. Buttons often use 14px or 16px text, which is comfortably large for touch targets. Captions drop to 12px or even 10px for metadata.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px. Common values:

4.2 Layout

Breakpoints: 1055px and 1056px — basically one cutoff between desktop and smaller devices.

5. Visual Elements

Border radius:

• 2px: rare, low confidence
• 4px: common for divs, spans, badges
• 18px: rounded cards
• 20px: occasional rounded blocks
• 50%: circles, avatars

Shadows: Mostly none. When used:

• rgba(0,0,0,0.05) 0px 2px 6px — subtle drop for cards
• rgba(19,102,236,0.12) 0px 12px 20px — brand-colored glow
• Other small, soft shadows for modals

Borders:

• 1px solid #e9e9e9 — neutral dividers
• 1px solid #1366ec — active states

6. Components

6.1 Buttons

Variant 1 (nav-btn score-btn text-link):

• Default: BG #f4f4f4, text #181818, padding 0 12px, no radius, no border
• Hover: text #1366ec, BG #1366ec, shadow 0 2px 10px var(--ai-assistant-assistant-shadow-color-5)
• Active: text #1366ec
• Focus: outline 0px

Variant 2 (try-btn):

• Default: transparent BG, text #3d495c, 1px solid #9ca4af, font-weight 700, font-size 16px
• No hover/active defined

6.2 Links

Variants:

• Black (#181818) normal, hover changes via var token
• White (#ffffff) for dark backgrounds
• Gray (#717171) for secondary nav
• Blue (#1366ec) for emphasis

6.3 Forms

Text input:

• BG #ffffff, text #181818, border 1px solid rgba(0,0,0,0.15), padding 0 32px 0 16px, no radius

6.4 Cards

Borders: 1px solid #e9e9e9, radius 4px or 18px, shadows sometimes for emphasis.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #1366ec;
  --color-secondary: rgba(0,0,0,0);
  --color-neutral-light: #e9e9e9;
  --color-neutral-dark: #181818;
  --color-neutral-mid: #8c8c8c;
  --color-neutral-102: #666666;
  --color-white: #ffffff;
  --color-neutral-153: #999999;
  --color-accent-orange: #ff6a00;
  --color-neutral-113: #717171;
  --color-neutral-offwhite: #f5f5f6;
  /* ... include all other tokens from cssVariables */
  
  /* Typography */
  --font-family-base: "PingFang SC","Helvetica Neue","Arial","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","SimSun";
  --font-size-h1: 44px;
  --font-weight-h1: 600;
  /* ... all type tokens from table */
  
  /* Spacing */
  --space-4: 4px;
  --space-5_6: 5.6px;
  --space-6: 6px;
  /* ... all spacing values */
  
  /* Radius */
  --radius-sm: 4px;
  --radius-md: 18px;
  --radius-lg: 20px;
  --radius-full: 50%;
  
  /* Shadows */
  --shadow-none: none;
  --shadow-soft: rgba(0,0,0,0.05) 0px 2px 6px;
  --shadow-brand-glow: rgba(19,102,236,0.12) 0px 12px 20px;
}

8. AI Coding Assistant Prompt

# Alidns Design System Specification

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

## Brand Context
Alidns is part of Alibaba Cloud's DNS product suite. The design is functional, grid-aligned, and uses a disciplined 8px spacing system. Colors are strictly functional: a confident primary blue, neutrals for structure, and defined state colors for success, warning, and error.

## Color Palette
- Primary Blue: #1366ec — CTAs, active states
- Neutral Light Gray: #e9e9e9 — Borders, background surfaces
- Neutral Dark: #181818 — Primary text
- White: #ffffff — Page background, form fields
- Accent Orange: #ff6a00 — Alerts, promotions
- Success Green: #0f9934 — Positive states
- Error Red: #eb4c34 — Error icons
- Warning Yellow: #ffac0a — Warning text
- Magenta Mid: #e54595 — Secondary accents
- Cyan Mid: #088fbd — Links, charts
- ... (include all extracted functional colors with usage)

## Typography
Font family: "PingFang SC", "Helvetica Neue", "Arial", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "SimSun"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 44px | 600 | 1.27 | Page titles |
| H1 Alt | 34px | 700 | 1.50 | Section headings |
| H2 | 26px | 700 | 1.08 | Subheading |
| Body Large | 20px | 400 | 1.20 | Paragraphs |
| Body | 16px | 400 | 1.50 | General body text |
| Button | 14px | 600 | 2.29 | CTAs |
| Caption | 12px | 400 | 2.00 | Metadata |
| Small Caption | 10px | 400 | 1.40 | Microcopy |

## Spacing & Grid
Base: 8px. Scale: 4px, 5.6px, 6px, 7px, 8px, 9px, 10px, 12px, 16px, 20px, 24px, 30px, 33px, 40px, 47px, 48px, 50px, 60px, 72px, 80px.

Map: Buttons — 0px vertical padding + 12px horizontal. Cards — 24px padding. Section gaps — 40px+.

## Border Radius
- none: 0px — tables, inputs
- sm: 4px — standard UI elements
- md: 18px — cards
- lg: 20px — larger blocks
- full: 50% — avatars, circular icons

## Shadows & Depth
- none: flat UI default
- soft: rgba(0,0,0,0.05) 0px 2px 6px — cards
- brand glow: rgba(19,102,236,0.12) 0px 12px 20px — hover emphasis

## Components

### Primary Button
```css
.btn-primary {
  background: #1366ec;
  color: #ffffff;
  padding: 0px 12px;
  border-radius: 0px;
  font-weight: 400;
  font-size: 12px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #094ebd; /* hover token */
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(19,102,236,0.12);
}
.btn-primary:focus { outline: 0; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #3d495c;
  padding: 0;
  border: 1px solid #9ca4af;
  font-weight: 700;
  font-size: 16px;
}
```

### Navigation Links
Default color per variant; no underline. Hover changes color via `--ai-assistant-color-link-hover`.

### Input Fields
```css
.input {
  background: #ffffff;
  color: #181818;
  border: 1px solid rgba(0,0,0,0.15);
  padding: 0 32px 0 16px;
  border-radius: 0px;
}
```

### Cards
```css
.card {
  background: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  padding: 24px;
  box-shadow: none;
}
```

## Layout & Responsive Rules
- Breakpoints: 1055px, 1056px
- Desktop: full-width container, 24px side padding
- Mobile: stack elements vertically, maintain 16px side padding

## Interaction Rules
- Transition timing: 150ms ease for hover/focus changes
- Focus indicators: color shifts, no heavy outlines
- Loading states: fade-in/out with opacity changes

## DO List
- Use ONLY colors from palette
- Maintain 8px grid — all spacing must be multiples
- Use PingFang SC for headings and body
- Apply correct functional colors for states
- Keep buttons rectangular unless specified

## DON'T List
- Don't invent new colors
- Don't mix rounded and sharp corners in same component
- Don't use heavy shadows
- Don't remove padding from buttons
- Don't use underlines on links

## Code Examples

Primary Button in Tailwind:
```html
<button class="bg-[#1366ec] text-white px-3 py-0 text-sm font-normal hover:bg-[#094ebd] hover:shadow-[0_2px_10px_rgba(19,102,236,0.12)]">Submit</button>
```

Card:
```html
<div class="bg-white border border-[#e9e9e9] rounded-[4px] p-6">
  <h2 class="text-[34px] font-bold">DNS Settings</h2>
</div>
```

Input:
```html
<input type="text" class="bg-white text-[#181818] border border-[rgba(0,0,0,0.15)] px-8 py-0 rounded-none" placeholder="Domain name">
```

9. Summary

TL;DR — Alidns’ design system is functional, precise, and built for clarity. Blue drives action, neutrals structure the interface, and a wide functional palette covers every state.

Brand Keywords:

• grid-disciplined
• function-first
• corporate-tech
• color-coded-states
• flat-clarity