Design

Ason applications speak the same language: one accent color, two typefaces, a fixed scale and quiet surfaces. This section describes the rules and values of that language.

Principles

• One accent

  The brand color is the only interactive color. Success, warning and error colors only report status; they are never decoration.

• Quiet surfaces

  No shadows. Surfaces are separated by background color and thin separator lines.

• Emphasis through weight

  Emphasis comes from font weight and color; italics are not used.

• The user's text size

  The type scale is in rem units; when users enlarge text in their browser, the interface grows with it.

• One definition

  Every value is defined in one source; applications use a copy, and automated checks verify the copy matches the source.

• Accessible by default

  Every control works with a keyboard, the focus ring stays visible and the reduced-motion preference is respected.

• Color

  The brand color and the color tokens of both themes.

• Typography

  Typefaces, weights and the type scale.

• Spacing and corners

  Spacing scale, standard gap, row density and corner radii.

• Materials

  The glass material of the application shell.

• Motion

  Ason Motion: durations, curves, springs and reduced motion.

• Components

  Panel, menu, table, report and tiles.

• Libraries

  The interface parts the applications share, what they do and where they are used.

• Token API

  Versioned, machine-readable JSON endpoints of the tokens.