UI Kit (EN)

This page is a public-facing summary of the living Snabplus design system from the repository UI Kit.

Philosophy

Clarity: interfaces should be readable instantly.
Deference: the UI must not compete with the user's data.
Depth: layered surfaces and transitions should explain hierarchy.

Key design tokens

Colors

Token	Value
`--bg`	`#f3efe6`
`--bg-accent`	`#e6dcc8`
`--surface`	`rgba(255, 252, 246, 0.9)`
`--text`	`#221b14`
`--muted`	`#6f6355`
`--ok`	`#1f7a52`
`--error`	`#b2432f`

Primary and secondary button tokens:

--button-primary-bg: linear-gradient(135deg, #3b71dd, #2b57b0)
--button-secondary-bg: #efe4d2
--button-ghost-border: rgba(72, 61, 43, 0.12)

Typography

--font-body: Montserrat, sans-serif
--font-display: IBM Plex Sans, sans-serif
body scale: 13px to 16px
display scale: 28px to 46px

Radius and materiality

buttons and inputs use the standard button radius token
cards scale from compact (12px) to extra-large shell containers (28px)
shadows stay soft and low-contrast

Motion

hover: 150ms
standard transforms: 200ms
accordion: 320ms
always support prefers-reduced-motion

Component inventory

The current UI Kit covers:

primary, secondary, ghost, and toolbar buttons
inputs, selects, textareas, and search fields
status badges, counters, chips, and “coming soon” labels
cards from compact widgets to page-level shells
modals and drawers
banners, empty states, skeletons, avatars, and tables
sidebar navigation, typography hierarchy, and consistency rules

Usage rules

hard-coded token values inside components are not allowed
serif fonts are not used
small buttons must not become pill-shaped
heavy opaque shadows are prohibited
animation should explain state change, not decorate it

Full repository scope

The source document also contains implementation snippets and detailed pattern-by-pattern rules for:

buttons and form controls
badges, cards, modals, and drawers
tables and sidebars
access-control color semantics
prohibited visual patterns