UX-guideline and interface standards

1) Principles

Clarity before beauty. Meaning and action are obvious in 1-2 seconds.
One target per screen. Everything else is secondary or hidden.
Consistency. Same patterns = same expectations.
Default availability. Contrast, focus, keyboard, voice acting.
Contextuality. Tips and texts are exactly where they are needed.
Localization-first. Line lengths, formats, culture - in the design initially.
Reversibility. Any risky action can be canceled/confirmed.
Measurability. Each rule is with a metric (step conversion, time, errors).

2) Grid, indents and rhythm

Grid: 4/8-pt pitch; columns: 12 (desktop), 6 (tablet), 4 (mobile).
Internal component indents: multiples of 4; external - 8/ 12/16/24.
Vertical rhythm: title → subtitle → → action content (CTA).
Borders and dividers: economical; prefer "air" and the hierarchy of typography.

3) Typography

Pin scale: 12/14/ 16/20/24/32/40 (body 16).
Row height: 1. 4–1. 6 for text, 1. 2–1. 3 for titles.
Line length: 45-75 characters (desktop), 35-55 (mobile).
Highlighting: bold for semantic accents; caps - only in labels.
Readability aloud: texts should sound natural.

4) Colour and contrast

Semantics: 'success/info/warning/error/neutral'.
Contrast: WCAG minimum 2. 1 AA (text/background ≥ 4. 5:1; large ≥ 3:1).
Color ≠ the only signal. Add an icon/text/form.
Focus ring: always visible (do not disable in CSS).

5) Navigation and information architecture

User path: "Where am I? What's here? What next" - obviously.
Menu hierarchy: ≤ 2 levels in the main navigation.
Breadcrumbs: for deep sections.
Search: available globally on complex directories; hotkey '/'.
Navigation states: The active tab/page is highlighted with tokens.

6) Components and patterns

We use the components of the design system (without "homemade").
One primary-CTA per screen; the others are secondary/tertiary.
States: default/hover/focus/active/disabled/loading - mandatory for each interactive.
Empty states: context + value + CTA (+ secondary link).
Common alerts: one page-alert per screen + local inline prompts.

7) Forms, validation and errors

The label is mandatory. Placeholder is an example of a format, not a replacement.
Inline validation for blur, summary errors for submit.
Error message: what's wrong + how to fix + constraint/format.
Auto-scroll and focus to the first error; 'aria-invalid', 'aria-descripedby'.
Masks and formats: prompt, but do not break the input (paist is possible).
Data safety: do not lose anything during reboot/error.

8) Conditions and feedback

Success: toast 2-4 s, neutral-positive tone, CTA "what's next."

Info/notice: soft banner/type, does not block the stream.
Warning/Error/Critical: hierarchy visually/semantically; critical - modal/banner with explicit action.
Loading: skeleton> spinner; evaluation of waiting time> 3 s.

9) Content and microcopy

The rule of three answers: what is happening → why → what to do next.
CTA: action verb + object ("Save changes," "Pass verification").
Numbers/dates/currencies: local formats.
Tone: friendly; in stressful steps (payment/security) - neutral.

10) Availability (A11y)

Full keyboard navigation; logical tabbing order.
Roles and'aria- 'for interactive, live regions for toasts/statuses.
Contrasts, focus rings, interactive sizes ≥ 44 × 44 px.
Text alternatives for icons/images; tables with 'th '/' scope'.
Checks: automatic (linter/scanner) + manual scripts of the screen reader.

11) Localization and internationalization

All strings are in context i18n keys.
Test of "long languages" (DE/TR), RTL modes.
Numbers/currencies/times - formatting utilities.
Tone-map: degree of formality/emotion by scenario (onboarding/payments/security).

12) Responsiveness and †

Breakpoints: 360 / 768 / 1024/1280 +.
Mobile-first: Critical path available with one hand, CTA in thumb area.
Gestures and keyboard: gestures are duplicated with buttons; on desktop - hotkeys.
Density: on desktop - "air," on mobile - vertical savings without compromising clickability.

13) Dark theme

Contrast by WCAG is maintained; avoid "pure black" for background (dark gray).
Glow/shadows - weakened; focus ring contrast.
Illustrations and logos - with inverted versions.
Transition policy: save the user's choice (system/light/dark).

14) Animations and motion

Duration: 120-200 ms (small), 200-300 ms (transitions).
Acceleration functions are natural (cubic-bezier with slight deceleration).
Animations should not block flow and impair readability.
Respect 'prefers-reduced-motion'.

15) Performance

LCP ≤ 2. 5s, TTI/TBT in green; code-splicing; lazy media loading.
Virtualization of long lists; data caching.

Skeleton for speed perception; minimize layout "junk."

16) Security and privacy in UI

Clear explanations of the reasons for requests (camera, KYC, geo).
Transparent deadlines/commissions/limits; without "instantaneous" if delays are possible.

Confidential data - masking, explicit "show/hide."

Confirmations for irreversible actions; Activity Log/Login Notifications.

17) UX Quality Metrics

Step conversion and time to completion.
Error rate by fields/steps and Time-to-Fix.
CTR by CTA and scenario repeatability.
Drop-off after error/after loading> N seconds.
Support calls by topic (before/after changes).
A11y-defects for release (target - 0 critical).

18) Checklists

Pre-release screen

• One primary target and one primary-CTA.

[The] navigation and where-I-am status are obvious.

• Short content: 1-2 sentences per block.
• States: loading/empty/error/success are covered.
• A11y: AA contrast, focus visible, 'aria-' on interactive.
• Localization: string lengths/formats/RTL checked.
• Performance: No "heavy" blocks needlessly.

Pre-Release Form

• Labels and sample formats are present.
• Inline validation + summary to submit.
• Scroll to the first error, focus in the box.
• Messages: what/how/why; without 500/400 codes for the user.
• Data is not lost on errors/reboot.

19) Anti-patterns

"OK" as CTA on semantic steps.
Placeholder instead of label.
Color as the only status signal.
Spinners with no time estimate and no alternative.
Modal windows without focus trap and ESC closing.
Mixing styles/icons, duplicating components outside the design system.
Humor/emoji in critical scenarios (payment/security).

20) Before/after examples

Form error

Before: "Error 400"

After: "Invalid date format. Use DD. MM. YYYY"

Empty state

Before: "It's empty here"

After: "The history of operations after the first replenishment will appear here. [Top Up]"

Success message

To: "Done"

After: "Payment accepted. Balance updated. [View History]"

Navigation

Before: It's unclear where the user is

After: active tab + bread crumbs + explicit page title

21) Templates for Design Review

Screen frame

Title → short description → content/list → feedback/statuses → actions.

Mold frame

Header → prompt → field (label + helper + error) → CTA → secondary actions → notes.

Microcopy template

Title (ex)

1-2 sentences: context + next step

CTA: action + object

Secondary link: help/rules

22) Processes and maintenance of standards

Definition of Done (UX): layout + texts + states + A11y + i18n + metrics.
UX review in PR: checklist from sections 18-21.
Documentation: each feature adds/updates a guide to the wiki/Storybook.
Audit once a quarter: content, A11y, performance, consistency.

Final cheat sheet

One target, one main CTA.
States and feedback are designed in advance.

A11y and localization - from scratch, not "later."

Fewer colors - more semantics and rhythm.
Measure: conversion, errors, time, reversals.
All through the design system: the same rules → the same expectations → predictable UX.

I can supplement this guide with ready-made templates for your key scenarios (registration/CUS, deposit/withdrawal, bonuses/tournaments) and collect checklists for your review process.