1xBet

Overview

1xBet is a regulated international sports betting and gaming platform serving millions of users across multiple jurisdictions. The design system embodies a "Regulatory Minimalism" aesthetic—a sophisticated, trust-centric visual language that prioritizes clarity, compliance, and user confidence over decorative flourish. The interface uses a deep blue foundation (rgb(29, 66, 104)) paired with crisp light neutrals and accent blues to convey stability, security, and professionalism. The emotional response is one of reassurance: users encounter a platform that feels vetted, organized, and legally sound, with every interaction reinforcing the brand's commitment to responsible gaming and transparent operations.

The brand voice is formal yet approachable, multilingual (supporting Arabic, English, and others), and always compliant-first. Tone: precise, never casual; informative, never promotional; respectful of regulatory constraints. Vocabulary emphasizes verification, account security, responsible play, and transparent terms. Example sentence in brand voice: "Your account has been verified. Please review our responsible gaming guidelines before placing your first wager."

Colors

The color system is anchored in a deep, trust-inducing blue (#1d4268 / rgb(29, 66, 104)) that serves as the primary surface and background, creating a calm, professional environment. Primary accent color is #276aa5 (rgb(39, 106, 165)), used exclusively on interactive CTAs, links, and focus states—this is the only color users should click on. Secondary accent #44bbdd (cyan) provides visual relief and highlights secondary actions or status indicators. Error states use #f27474 (a warm red-orange) for immediate recognition without aggression. The surface stack progresses from darkest (#0a1620 for container-lowest) through mid-tone (#1d4268 for standard container) to lighter (#3a7ab8 for container-highest), enabling subtle depth without leaving the blue family. On-surface text is pure white (#f

Typography

The type system uses Roboto exclusively, a sans-serif that conveys modern professionalism and ensures legibility across all screen sizes and languages (including Arabic script). Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and error messages; Headline-lg (40px, 700 weight) for page titles; Headline-md (28px, 600 weight) for section breaks; Title-lg (20px, 600 weight) for card headers and form labels. Body-lg (18px, 400 weight, 0.02em letter-spacing) is used for primary body copy and explanatory text; Body-md (16px, 400 weight) for standard paragraph text and list items. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text, form labels, and badges; Label-sm (12px, 500 weight, 0.02em letter-spacing) for helper text, timestamps, and

Layout

The layout uses a 12-column grid system with a max-width of 1366px, maintaining a fluid design that adapts from mobile (320px) to desktop (1920px+). Gutter spacing is 24px (md spacing token) between columns; container padding is 24px on desktop, reducing to 12px on tablet and 8px on mobile. The page rhythm follows a modular scale: major sections are separated by lg spacing (40px), subsections by md spacing (24px), and inline elements by sm spacing (12px). The error page (as seen in the screenshot) centers content vertically and horizontally with max-width: 80rem (1280px), padding-left/right: 4rem (64px) on desktop. White-space is intentional and generous—never crowd elements. Use the spacing scale consistently: never hardcode arbitrary pixel values. Container backgrounds use surface or sur

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than bright highlights or glassmorphism. Level 1 (Base): page background uses surface (#1d4268) with no shadow. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: surface-container (#1d4268), border: 1px solid outline-variant (#5a7a8a). Level 3 (Modals/Elevated Surfaces): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), background: surface-container-high (#2a5a8a), border: 1px solid outline (#8a9aaa). Modal overlays use background-color: rgba(0, 0, 0, 0.5) with backdrop-filter: blur(4px) to create a subtle de

Shapes

The shape philosophy is "Regulated Geometry"—clean, predictable, and accessible. Border-radius follows a strict scale: sm (0.25rem / 4px) for small UI elements like buttons and inputs; DEFAULT (0.5rem / 8px) for standard cards and form fields; md (0.75rem / 12px) for larger cards and containers; lg (1rem / 16px) for prominent CTAs and modals; xl (1.5rem / 24px) for hero sections and large containers; full (9999px) for badges and pill-shaped elements. Buttons use lg (1rem) to signal interactivity; form inputs use DEFAULT (0.5rem) for a more subtle appearance. Cards use lg (1rem) to create visua

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses primary-container (#d4dee8) background with on-primary-container text (#276aa5), 8px 40px padding, 40px height, lg rounded (1rem), and label-md typography. On hover, shift background to #c4d4e0 with a 0.2s ease transition. Button-secondary uses transparent background with 1px solid primary border, same padding and height, and primary text color; on hover, fill the background with primary-container. All buttons must have a minimum touch target of 40px height. Avoid disabled buttons; instead, hide them or use opacity: 0.5 with cursor: not-allowed.

Containers & Surfaces Cards are the standard container for grouped content. Use background: surface-container (#1d4268), rounded: lg (1rem), padding: md (24px

Do's and Don'ts

**Do**

• Do use primary (#276aa5) exclusively for CTAs, links, and focus states—it is the only color users should expect to click on.
• Do maintain the deep blue surface (#1d4268) as the page background; never substitute white or light grays.
• Do apply the spacing scale (xs, sm, md, lg, xl) consistently; never hardcode arbitrary pixel values outside the scale.
• Do use Roboto at the specified weights (400, 500, 600, 700) and sizes; avoid custom font sizes or weights.
• Do include a 1px solid border on all cards and containers using outline-variant (#5a7a8a) to define edges in the dark theme.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and modals for subtle depth.
• Do use label-md (14px, 600 weight) for all button text and form labels.
• Do ensure all interactive elements have a minimum 40px height for touch accessibility.

**Don't**

• Don't use white (#ffffff) or near-white backgrounds; the brand is built on deep blue surfaces.
• Don't apply shadows larger than 0 4px 12px rgba(0, 0, 0, 0.08); keep shadows soft and restrained.
• Don't use secondary (#44bbdd) or tertiary (#3085d6) for primary CTAs; reserve primary (#276aa5) for all main actions.
• Don't hardcode colors inside component definitions; always use token references like {colors.primary}.
• Don't use system fonts or generic sans-serif; Roboto is mandatory for all text.
• Don't apply border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full).
• Don't use opacity changes alone for disabled states; combine with color shifts to on-surface-variant.
• Don't place small text (label-sm) over busy backgrounds without text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15).