Orbex Sonar-DB Design system

Foundations

The principles and the accessibility commitments, and the tokens every component is drawn with.

  • Principles

    What the system optimizes for, and how tokens are named, versioned and tested.

  • Accessibility

    WCAG 2.2 AA: contrast, focus, target sizes, motion, keyboard and screen readers.

  • Color

    The palette, the roles for text, surfaces and states in both themes, and the contrast of every pair.

  • Typography

    Three families and the type roles of the product, from figures in a chart to page titles.

  • Icons

    The marks the components draw, the Material Symbols the product uses, their sizes, weight and how to import them.

  • Spacing

    The spacing scale, and how cards and their content line up.

  • Shape

    Corner radii, from the tightest to fully round, and what each is for.

  • Elevation

    Shadows for cards, menus, panels and dragged cards, in both themes.

  • Motion

    Springs and fades: durations, easing, and what changes with reduced motion.