Skip to content
design
Foundations

Foundations

The rules every component and page follows, from themes and tokens to motion, icons and accessibility.

On this page

The foundations are the rules the components are built from. A component page shows a component; a foundation page states the rule it follows, with the values read from Bosunkit’s own stylesheets, so a rule here is the rule the product ships.

Design tokensThe single source of truth for every visual decision, named by role rather than by value.Component APINames describe behavior, primitives follow Base UI, and recipes compose those primitives without changing their meaning.

Color and surfaces

ThemesFour themes for every light condition aboard, from a dark cockpit at night to direct sunlight.ColorA neutral surface, one accent, and a reserved set of colors that each carry one meaning.Control stylesSemantic palettes for control emphasis, selection and notification.ElevationFlat surfaces separated by hairlines. A raised surface marks what is active, and only overlays cast a shadow.BorderHairlines separate regions and never decorate. A colored border always carries a meaning.RadiusCorner roundness for rows, controls, pills and frames, from a few fixed steps.

Layout

SpacingOne spacing scale on a 4px grid, shared by padding, gaps and layout on every surface.GridThe app shell, report pages and the site share one set of layout rules.

Type and identity

TypographyIBM Plex Sans and IBM Plex Mono. Size carries the hierarchy, and live numbers keep their width.IconographyMaritime and interface icons, with rules for sizing and accessible names.LogosThe bosun logo and the vessel mark, and how each sits on the four themes.ContentClear labels, instructions and messages that help the crew act.

Interaction

Interaction statesWorking controls demonstrate focus, selection, unavailable actions and pending work.CursorsAn arrow for identity, a pointing hand for actions, and text and resize cursors that match what each target allows.MotionShort, functional transitions. The only thing that moves to get attention is an unacknowledged alarm.AccessibilityReadable at a glance, at night, in direct sun and under stress, by everyone aboard.
  • bosun design: the system in one view, and where each part is described.
  • Changelog: every change to the system, with what it was and why.