Appearance

Color System ​

Varo borrows the layered palette method without copying another product's brand. The default primary remains WeChat Green. Every brand and semantic color exposes stable Dark / Base / Light / Soft levels, while text, border, fill, and background use independent neutral scales.

Runtime Palette

Base is the solid state, Dark is pressed or emphasized, Light is hover, and Soft is the quiet background. H5 and mini-program runtimes share the same contract.

PrimaryWeChat Green#07C160
Primary#07C160Dark #06AD56 · Light #38CD80 · Soft #E6F9EF

WeChat primary for actions, links, selection, and focus.

Success#13B248Dark #10973D · Light #42C16D · Soft #E7F7EC

Completion, approval, and continuation.

Warning#FA9200Dark #D57C00 · Light #FBA833 · Soft #FEF4E5

Attention and recoverable risk.

Danger#EB3437Dark #C82C2F · Light #EF5D5F · Soft #FDEAEB

Failure, deletion, and irreversible action.

Component States

Components use Base, Light, and Soft for default, hover, and quiet feedback. Variants never replace a semantic tone with generic gray.

PrimaryDefault / Hover#07C160 → #38CD80
SuccessComplete / Soft#13B248 / #E7F7EC
WarningAttention / Soft#FA9200 / #FEF4E5
DangerRisk / Soft#EB3437 / #FDEAEB

Primary

Dark#06AD56
Base#07C160
Light#38CD80
Soft#E6F9EF

Success

Dark#10973D
Base#13B248
Light#42C16D
Soft#E7F7EC

Warning

Dark#D57C00
Base#FA9200
Light#FBA833
Soft#FEF4E5

Danger

Dark#C82C2F
Base#EB3437
Light#EF5D5F
Soft#FDEAEB
Primary Text#303133--varo-ui-text
Regular Text#606266--varo-ui-text-regular
Secondary Text#909399--varo-ui-text-muted
Placeholder#A8ABB2--varo-ui-text-placeholder
Base Border#DCDFE6--varo-ui-border
Base Fill#F0F2F5--varo-ui-fill
Page Background#F2F3F5--varo-ui-bg
Surface#FFFFFF--varo-ui-surface

Usage Notes ​

  • Solid components use Base, hover uses Light, and pressed or emphasized states use Dark.
  • Soft is only a quiet background; text and borders keep the matching semantic Base color.
  • Body, secondary, placeholder, and disabled text use separate neutral roles.
  • Borders and fills use named levels rather than ad-hoc opacity.
  • Dark mode retains semantic colors and remaps text, border, fill, and background levels.