# HarmonyOS Design (HarmonyOSデザイン)

> Huawei's visual language reorganizes cards, spacing, arcs, variable type and translucent light materials across different screen sizes and connected devices, favoring continuity of information and action over one fixed screen.

- IndexStyle No.601 — https://indexstyle.org/styles/harmonyos
- Kind: Style · Family: Platform Screen Languages · Era: 2019–
- Mood: Futurity, Intimacy, Technique
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- Large rounded cards grouping information by function
- Wide space on light fields with a few saturated accents
- Arcs, concentric circles and gentle scaling for operation states
- Cards and variable type recomposed to suit device size

## Best used for

- Recomposing the same information across phones, tablets, vehicles and wearables
- Explaining continuity across devices through shared cards, motion and hierarchy

## Composition recipe

- Typography & lettering: Adapt the weight and width of a variable sans to the display and enlarge short headings and numbers.
- Layout & structure: Group by function; spread cards sideways on wide screens and stack them by importance on small ones.
- Material & texture: Start with bright neutrals, reserve diffusion and translucency for the control layer, and keep one accent family.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #F5F7FA
- The colour it is remembered by: #0A59F7
- Text and outlines: #172033

## What to avoid

Rounded cards alone are not HarmonyOS. Information priority and action continuity must survive the move between devices.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: Large rounded cards grouping information by function
- [ ] Visible in the piece: Wide space on light fields with a few saturated accents
- [ ] Visible in the piece: Arcs, concentric circles and gentle scaling for operation states
- [ ] Visible in the piece: Cards and variable type recomposed to suit device size
- [ ] The layout follows: Group by function; spread cards sideways on wide screens and stack them by importance on small ones.
- [ ] The lettering follows: Adapt the weight and width of a variable sans to the display and enlarge short headings and numbers.
- [ ] The material and surface follow: Start with bright neutrals, reserve diffusion and translucency for the control layer, and keep one accent family.
- [ ] The colour relation holds: #F5F7FA as ground, #0A59F7 carrying the style, #172033 for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Material You (Material You)** — Material You makes adaptability itself consistent: dynamic color, generous shapes and personalized motion vary by person while semantic roles stay stable. → https://indexstyle.org/styles/material-you
- **Liquid Glass (リキッドガラス)** — Unifies the floating control and navigation layer as a fluid glass material that refracts and adapts to the content beneath. → https://indexstyle.org/styles/liquid-glass

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=harmonyos+material-you

## Further study

- HarmonyOS design principles
- Multi-device adaptive layout
- Cards, variable type and light material

## Reference works

- Huawei Developer — HarmonyOS Design Guidelines: Design Principles — https://developer.huawei.com/consumer/en/doc/design-guides-V1/principle-0000001156667269-V1

## Source of record

- Huawei Developer — HarmonyOS Design Guidelines: Design Principles — https://developer.huawei.com/consumer/en/doc/design-guides-V1/principle-0000001156667269-V1

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/harmonyos
- Image-generation prompt (legally clean): https://indexstyle.org/styles/harmonyos/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)