Visual system laboratory

For the composer, compact controls, menus, focus, and palettes, visit the Desktop laboratory.

This page dogfoods Aidos's surface, navigation, input, and control foundations. Each example uses library components and public props, so the page reflects the system applications actually receive.

Surface placement and elevation

The default card remains the baseline. Tonal cards separate content through color, floating cards use external elevation, and the aurora material adds an atmospheric blue-green surface treatment.

Default
Current Aidos card treatment
Tonal
Separation without elevation
Floating
External ambient elevation

Atmospheric materials

Materials describe how a surface looks rather than where it belongs. Each treatment adapts to light and dark themes and can be combined independently with a Card elevation variant.

Aurora
Diffuse blue-green light
Dawn
Pale sky, peach, and restrained gold
Mist
Neutral, milky diffusion
Twilight
Deep indigo with fading violet warmth

Text input

Fields have a flat surface and an integrated focus indicator. Buttons inside a field receive their own indicator rather than lighting up the whole frame.

Tabs

Existing underline treatment
Segmented treatment

Tab bar material