Mastering Consistent UI Design: Color, Typography, and Component Guidelines

Unified Style Specification

A consistent visual language ensures a uniform look across an entire system. Product managers should be aware of basic design principles when creating prototypes. The guide references open‑source design specifications such as Element Plus color, Arco Design style guide, and Ant Design global styles.

Element Plus Color: https://element-plus.org/zh-CN/component/color.html

Arco Design Style Guide: https://arco.design/docs/spec/style-guideline

Ant Design Global Style: https://ant.design/docs/spec/colors-cn

1. Color

1.1 Primary Color

The primary color represents the product and is usually tied to the brand. It is used for main buttons, highlighted text, key actions, alerts, and empty states. Arco’s default primary color is #165DFF, with derived states for hover, active, etc. Backend systems often favor blue tones, while front‑end products may use brand‑specific colors like red.

1.2 Functional (Auxiliary) Colors

Functional colors convey success, warning, error, link, and other statuses based on common user perception. They are applied to feedback icons, status tags in tables, and similar UI elements.

1.3 Neutral Colors

Neutral (achromatic) colors balance the palette, supporting primary and auxiliary colors while establishing visual hierarchy. They are used for text, backgrounds, icons, borders, and dividers. Darker neutrals highlight important content; lighter neutrals are for secondary information.

1.4 Mask Colors

Mask colors are used for overlay effects, such as modal backdrops, to dim underlying content.

2. Typography

2.1 Font Family

Arco recommends a generic font stack based on product experience, typically using PingFang SC for Chinese interfaces.

2.2 Font Size and Line Height

Guidelines provide recommended font sizes and corresponding line heights to ensure readability and visual consistency across components.

2.3 Font Weight

Different font weights (e.g., Regular, Medium, Bold) are assigned to headings, body text, and emphasis to create a clear information hierarchy.

2.4 Font Color

Standard font colors include a primary dark shade #1D2129 for main text and lighter shades for secondary or auxiliary information.

2.5 Paragraph Spacing

Consistent paragraph spacing, margins, and paddings are defined to improve content legibility and layout balance.

3. Component Styles

Rounded corners

Border styles

Background blur

Shadow effects

Mask overlays

4. Layout

Page margins

Inner padding

Module spacing

Utility icons

Decorative icons

5. Axure Custom Component Styles

5.1 Defining Custom Component Styles

In Axure, click the plus sign to add a custom style, give it a descriptive name (e.g., “Body‑Regular‑Large‑Emphasis”), configure the style, and confirm.

Border visibility: none

Font: PingFang SC

Font size: 14

Font color: #1D2129 Font style: Regular

5.2 Applying Custom Component Styles

Apply the defined style to components throughout the prototype to maintain a unified visual language.

5.3 Style Set Definition

To achieve project‑wide consistency, create a comprehensive UI design system that includes all component styles.

Naming Conventions

Use prefixes to indicate element type and hierarchy, then list key attributes. Examples:

Text – Title – Emphasis: for large headings.

Text – Title – Sub‑Emphasis: for secondary headings.

Text – Body – Regular – Medium – Black: for primary body text.

Text – Body – Regular – Medium – Dark Gray: for secondary body text.

Text – Body – Auxiliary – Small – Light Gray: for annotations.

Button Naming

Prefix with “Button” and list important attributes, e.g., “Button – Rounded – Red Fill – No Border – White Text” for primary actions, or “Button – Rounded – Gray Fill – No Border – White Text” for disabled states.