How JD Cloud Crafts a Unified Visual Identity: Design Principles & Guidelines

Design Thinking

JD Cloud faces two main challenges when visualizing cloud products: representing abstract services like cloud servers in a way that users can easily understand, and distinguishing similar products and services. The solution emphasizes a futuristic, tech‑forward feel, balancing abstraction with reality, and establishing unified design rules for consistency.

Design Principles

The design system is built on four principles:

Innovation and future‑orientation.

Balancing abstract concepts with concrete visual cues.

Maintaining a consistent visual language through unified rules.

Supporting multiple scenarios with three icon styles: 3D, 2.5D, and linear.

Visual Communication

Color Application : JD Cloud’s brand colors serve as primary or secondary tones across 3D, 2.5D, 2D, and UI designs. Neutral auxiliary colors complement the brand palette to meet diverse scenario requirements while preserving brand identity.

Texture Expression : Consistent material styles—opaque metal, matte finishes, transparent glass, and glowing effects—are applied across all icon styles to convey both virtual fluidity and tangible solidity.

Light & Shadow : Light and shadow combine real and virtual effects, creating a floating, semi‑transparent atmosphere without adhering to strict real‑world lighting directions.

Composition & Specification

Grid System : A unified grid ensures visual consistency. 2D and linear icons use a 16×16 planar grid, while 3D and 2.5D icons adopt an 8×8 isometric grid. Both systems define safe zones and element boundaries.

Size System : Icons are categorized as linear, 2D, 2.5D, and 3D. 3D icons appear on homepage banners and marketing materials; 2.5D icons are used in product detail page banners and promotional graphics; 2D icons serve as descriptive illustrations; linear icons support console and architecture diagrams.

Atomic Design Approach

The visual system follows the Atomic Design methodology, breaking down the interface into atoms (basic geometric shapes), molecules, organisms, templates, and pages. This creates a systematic, reusable design language that scales across JD Cloud’s product ecosystem.

Practical Application

The JD Cloud visual identity is applied across websites, marketing campaigns, product documentation, and internal tools, ensuring a cohesive brand experience that blends technology, virtual‑real integration, order, and multi‑scenario adaptability.