Design

The Snabplus interface follows a calm, structured visual system built around clarity, deference to data, and visible hierarchy.

Design principles

Clarity

Every element should be immediately understandable. Text must be legible, icons unambiguous, and hierarchy obvious without effort.

Deference

The UI supports business data instead of competing with it. Tables, workflows, documents, and status changes stay primary; navigation and chrome stay secondary.

Depth

Hierarchy is communicated with floating surfaces, shadows, blur, and background separation rather than thick borders or loud decoration.

Core token families

The live token source remains apps/web/src/app/globals.css.

Color

• warm neutral page backgrounds
• soft elevated surfaces for cards and drawers
• quiet border tones
• clear success and error semantics
• blue gradient primary action

Typography

• Montserrat for body copy, forms, tables, and descriptions
• IBM Plex Sans for headings and navigation
• a compact scale from caption labels to display headings

Shape

• consistent squircle-based radii
• smaller controls use smaller radii
• pills are reserved for counters, chips, and avatar circles only

Motion

• functional transitions only
• hover and standard motions stay fast
• accordion motion is slightly slower to explain spatial change
• reduced motion support is mandatory

Component areas covered by the UI Kit

• buttons
• form fields
• badges and status tags
• cards
• modals and drawers
• inline notice banners
• empty states
• skeleton loading
• avatars
• tables
• sidebar navigation
• typography hierarchy
• interactive states
• access-control color semantics

Next reading

• UI Kit (EN)
• UI Kit (RU)