Digital products
Design system
Tokens, components and states connected to the project code.
Components and states
Examples use real shared/ui components. Use Tab to inspect focus; the visual focus specimen does not move your keyboard focus.
Content states
No results for this selection. Change your criteria or reset the filter.
Semantic colors
--background--foreground--surface--muted--muted-foreground--primary--primary-foreground--accent--accent-foreground--destructive--destructive-foreground--border--ring- --radius
- …
- --page-gutter
- …
- --hero-font-size
- …
- --hero-letter-spacing
- …
- --text-scale
- …
- --motion-fast
- …
- --motion-normal
- …
- --motion-expressive
- …
- --motion-collapse
- …
Interface contrast
A check of the current screen colors for normal text. This does not establish WCAG conformance for the entire site. Print specifications require a separate physical proof.
| Pair | Ratio | Text AA · 4.5:1 |
|---|---|---|
--foreground--background | —:1 | — |
--muted-foreground--background | —:1 | — |
--primary-foreground--primary | —:1 | — |
--accent-foreground--accent | —:1 | — |
--destructive-foreground--destructive | —:1 | — |
Source of decisions
Semantic colors, radii, text scale and motion durations are defined by CSS variables. Sky blue is the default accent; critical states use an independent red --destructive / --destructive-foreground pair. Documentation reads actual values from the selected preferences.
The base radius is 0.75rem; spacing uses a 4 px step and text uses rem. Each token has one role; components do not invent local brand colours. Shared containers define full width and safe areas.
Components and states
Primary buttons lead to the main action; outline buttons offer alternatives. Focus is always visible. Explain unavailable actions; states do not rely on colour alone. The specimens below use real shared/ui buttons.
Inputs have persistent labels and errors explain the correction. Cards have one main link. Dialogs return focus; notifications state outcomes. Loading, error and empty states offer a clear next step.
Unified settings panel
The header button opens a panel with RU/EN, theme, 100/125/150% text size, motion, standard/high contrast and five accents. Text, a checkmark and radio state show the selection. Keyboard access, Escape and focus return are supported.
Changes apply immediately, persist in this browser and restore before the first page paint. Reset restores the system theme and default appearance while retaining language. If storage is unavailable, preferences apply for the current visit with a notice.
The panel uses compact segmented controls and a single row of color swatches with the selected accent’s name. At standard text size, all six settings fit HD 1280×720 without scrolling. Touch targets are at least 44 px. Reset, Done and feedback remain at the bottom. When height is insufficient for the text size, the whole panel scrolls so fixed elements cannot cover settings.
Connection to implementation
Each component includes purpose, accessibility, permitted variants and its implementation location in the project. Token changes are checked in both languages and themes.
Use Tailwind/shadcn and Radix components through shared/ui public exports. Repeated patterns become shared components; accessibility states use semantic markup.
Component contracts
| Component | Required behaviour | Use |
|---|---|---|
| Button | 44 px, visible focus, disabled; buttons for actions, links for navigation. | One primary button per meaningful block. |
| Input | Persistent label, hint, aria-describedby and aria-invalid for errors. | Correct errors beside the field without losing input. |
| Dialog | Title, description, Escape, focus containment and return. | Clarifies a choice; does not block reading unnecessarily. |
| ChoiceGroup | Group name, radio state, keyboard and selection marker. | Mutually exclusive choices: theme, size, density. |
| Accordion | Button with expanded state and content association; one open menu group. | Navigation and short answers; important terms stay visible. |
| Notification | Status for ordinary outcomes, alert for errors; textual messages. | Does not move focus or rely on colour alone. |
Shared state set
| State | Content | Next step |
|---|---|---|
| Loading | Reserved geometry and accessible status. | Controls are not blocked indefinitely; retry is possible. |
| Empty | Reason for no results; filters and input remain. | Reset filters or contact us for fitting. |
| Error | Failed action and correction; red is accompanied by text. | Retry without re-entering data. |
| Offline | Saved articles are available; current availability is not implied. | Read cached content or retry when connected. |
| Success | Saved result and a concrete next step. | Review details, continue or return. |
Component changes
Colours, type, spacing and motion use shared/colors, shared/typography, shared/layout and shared preferences. Export UI primitives through shared/ui; domain scenarios remain in entities/features/widgets under FSD.
New variants describe a task and states, retain keyboard and preferences, and are checked in RU/EN at 320 px and with larger text. Browser enhancements retain a working baseline.