The Alius Design System is the unified design language and execution standard for the Alius embodied intelligence platform.

It serves:

  • Website and documentation center
  • Software clients
  • AI Agent / CLI / Agent tools
  • Hardware product appearance and packaging
  • Open-source project pages
  • Vendor material production
  • Community contributor collaboration

It is not simply a “color and font specification” — it is a long-term design infrastructure connecting brand mission, product positioning, user experience, interaction science, visual system, component resources, and engineering implementation.

Design Values

Open

Design should express an open, shared, participatory community atmosphere.

  • Clear document structure, downloadable resources
  • Reusable components, specifications understandable by external vendors
  • Design language that is not overly closed or aloof

Accessible

Alius targets people who want to enter the robotics industry. Design must reduce comprehension costs.

  • Clear page hierarchy with text and imagery combined
  • Prominent key paths with thorough terminology explanations
  • Clear entry points for beginners

Engineering-driven

Alius is a robotics and AI engineering platform. Design should reflect reliability, precision, and executability.

  • Parametric specifications: component sizes, spacing, radii, shadows, and fonts all follow rules
  • Consistent icon style; every design decision is explainable

Garage-built

Alius should not only have cold corporate tech aesthetics — it should retain the creative spirit of “do it yourself, iterate fast.”

  • Retain a sense of tools; design should not be overly luxurious
  • Showcase prototypes, structures, modules, assemblies, and experimental scenes
  • Image assets include workbenches, parts, development boards, and 3D prints

Mature

Avoid overly “AI-flavored” complex gradients, glows, and meaningless decoration.

  • Restrained colors, rational layout, information-first
  • Visual elements serve content
  • No滥用 glow effects, glassmorphism, or complex gradients

Design Philosophy

Interaction Science

The Alius Design System can be defined as a form of “interaction science.” It is not simply beautifying interfaces, but using scientific, verifiable, and reusable design rules to help users understand faster, make fewer mistakes, and complete tasks more easily in complex robotic systems.

Core goals:

  • Reduce cognitive load
  • Increase operational certainty
  • Improve readability of complex information
  • Make tools feel like tools
  • Keep professional systems accessible

Parametric Design

All core visual elements should be parametric, including radii, spacing, font sizes, line heights, shadows, borders, icon sizes, card sizes, button heights, input heights, and page max-widths.

Parameters are not set arbitrarily — they correspond to the brand story:

  • Smaller radii: engineering precision
  • Moderate radii: friendliness and openness
  • Consistent spacing: structural clarity
  • Restrained shadows: mature reliability
  • Clear borders: tool feel and readability

Design Principles

Proximity

Related content stays together; unrelated content keeps its distance. Applies to form fields, document sections, card content, image captions, and button groups.

Alignment

All page elements follow a unified grid. Applies to headings, body text, icons, cards, tables, buttons, and images.

Contrast

Establish hierarchy through font size, weight, color, and spacing. Headings stand out, body text is comfortable, annotations are subdued, warnings are prominent, and primary buttons are clear.

Repetition

Reuse the same visual patterns to reduce user learning costs. Applies to card styles, button styles, icon sizes, page layouts, code block styles, and table structures.

Simplicity

Complex systems must be simplified through design. No stacking of meaningless information, no complex backgrounds, no decoration abuse — every element should have a purpose.

Explainability

Design decisions must be explainable. For example: Why is the button height this specific value? Why is the border radius not a perfect right angle? Why do icons maintain a linear style?