AZRA Design Language

Cyber Intelligence Design System

The tokens, typography and component patterns behind every AZRA surface — open standards for developers building on the platform.

Design tokens
Deep-space dark base, thin blue-grey borders, 12px radii, vivid blue accents — the same palette in every app AZRA builds.

Brand blue

hsl(224 100% 55%)

Loading amber

hsl(45 100% 51%)

Success green

hsl(160 65% 40%)

Danger red

hsl(6 78% 52%)

Panel border

hsl(218 24% 16%)

Surface base

hsl(220 23% 5%)

Typography scale
Inter throughout — dense, professional, data-first.

Display — Water intelligence, delivered

Command-center headings

Section — Water intelligence, delivered

Panel titles

Body — Water intelligence, delivered

Default reading size on data-dense surfaces

Caption — Water intelligence, delivered

Labels and metadata

Component patterns
The atoms every AZRA app composes from — panel cards, semantic badges, calm controls.
new
info
muted

Deterministic progress

Parameter sliders

Accessibility patterns
Non-negotiable standards enforced platform-wide.

  • ARIA-first controls

    Every switch, slider and checkbox carries an aria-label; switches use role=switch with aria-checked.

  • Focus visibility

    Interactive rows and graph nodes expose focus-visible ring states for full keyboard traversal.

  • Reduced motion

    All ambient animation (pulse, orbits, loading slides) is disabled under prefers-reduced-motion.

  • Contrast

    Semantic status hues are re-tuned in night mode so text keeps AA contrast on dark panels.

  • Descriptive tables

    Data tables use scope and sr-only headers; charts provide table fallbacks with the same numbers.