🌈

Rainbow kitchen sink

Design Principles

Rainbow aims for operational clarity: interfaces should be easy to scan, easy to act on, and consistent across features.

Developer reference: cloud/rainbow/DESIGN.md

This page is intentionally condensed. The full guidance and rationale live in DESIGN.md.

Clear hierarchy

Use typography and spacing to make priority obvious at a glance.

Status-first UI

Colors should communicate state, not decoration.

Dense but readable

Prefer compact layouts while preserving legibility and rhythm.

Semantic tokens

Use semantic classes so palette tweaks do not require template rewrites.

Do And Don't

Do

  • Prefer semantic tokens like _text-heading and _bg-surface.
  • Use status tokens to encode meaning: success, warning, and error.
  • Keep layouts compact and readable with clear hierarchy.
  • Reuse Rainbow patterns/macros before introducing new UI primitives.

Don't

  • Do not use Bootstrap classes in new Rainbow UI.
  • Do not use inline CSS for visual styling choices.
  • Do not hardcode hex colors directly in templates.
  • Do not use status colors decoratively when no status meaning exists.

Token Cheat Sheet

Common semantic tokens used in templates.

_text-heading _text-body _text-muted _bg-canvas _bg-surface _bg-surface-subtle _bg-warning-subtle _bg-error-subtle _bg-success-subtle

See cloud/rainbow/DESIGN.md for full guidance and rationale.

Token Examples In Action

Factory line quality check

Review visual consistency before shipping this stage.

Attention
Updated 3m ago · Owner: Design systems

Run Summary

Healthy

The semantic token layer keeps this UI readable while allowing palette changes in one place.

Escalation needed

This block demonstrates how error background, text, and border tokens combine.

Shadow Principles

Use shadows sparingly for functional elevation only. Prefer border-first structure and add shadow only when depth improves hierarchy or interaction clarity.

_shadow-2xs

Hairline lift for subtle separation.

_shadow-xs

Default small lift for section cards.

_shadow-sm

Use only for focused/active overlays.

Avoid stacking neutral borders and shadows at every nesting level.