ARO Media • Design System

Arodum Engine UI

The canonical design language of the ARO Media network: a handcrafted token stylesheet and a small set of vanilla behaviors shared by the aro.media marketing site and the Arodum operator dashboard. Surfaces are liquid glass and machined metal; burnt gold appears only on controls, and every state change is rendered as a liquid pour.

View Components Registry 01 · 15 specs · no build step
15 Spec sections
05 Button anatomies
02 Typefaces
00 Dependencies
The aro spectrum · warm archival stone
Light · #f0ede7
Mid · #8a8070
Dark · #29261e
Deep · #191712
Gold · controls only
Tokens
One source of truth

Every color, glass, metal, liquid, and type value is a custom property declared once in :root. Re-theme by overriding tokens, never by editing component rules.

Liquid
States pour, fully liquid UI/UX

Hover wells the gold up gently; pressing floods the vessel at once. A prefers-reduced-motion query collapses every transition and animation in the system.

Vanilla
Zero dependencies

Plain CSS and a single IIFE of JavaScript that auto-initializes on DOMContentLoaded. No framework, no bundler; the files are served exactly as written.