1xBet Design System

Overview

The 1xBet access-denied page presents a cool, technical aesthetic built on a blue-gray tonal foundation. The design communicates restriction and geographic gating through a carefully orchestrated visual language: a dominant {colors.canvas} background (#d4dee8) sets a subdued, institutional tone while allowing the brand's signature blue ({colors.primary} — #276aa5) to carry informational hierarchy. The page feels like a secure portal—deliberately restrained, functional, yet visually engaging through its centerpiece 3D globe illustration.

Brand voltage concentrates in two places: the bold 1xBet wordmark logo in the upper-left corner (rendered in {colors.primary-dark} — #224f7c at heavy weight), and the interactive-looking contact buttons stacked below the explanatory copy. Between these brand moments, the system relies on typographic weight rather than color variation to create hierarchy—the headline "Access denied!" strikes at {typography.display-lg} (40px, weight 700) in a darker blue ({colors.heading-dark}), while body copy sits comfortably at {typography.body-md} (16px, weight 400) in the standard ink color.

The single typography move defining this system is bold-as-hierarchy: there are no light or thin weights in active use. Every text element either reads at 400 (body/caption) or 700 (headings/logo). This binary weight strategy creates clear demarcation between instructional text and attention-capturing elements without resorting to aggressive color contrasts. The shape language favors moderate rounding—{rounded.DEFAULT} (8px) for most containers and buttons, expanding to {rounded.xl} (16px) for the prominent illustration panel and icon badges. Nothing approaches sharp corners; even technical elements like the country code hash badge wear softened edges.

A notable sub-system emerges in the illustration zone: the right-side globe assembly uses a layered card architecture with {component.icon-badge-location}, {component.icon-badge-lock}, and {component.icon-badge-map} floating around a central sphere. These badges share a common pattern—white {colors.surface-card} backgrounds, generous {rounded.lg} (12-16px) rounding, and coral-colored {colors.accent-coral} icon centers—that creates visual cohesion amid the 3D complexity. The "LOCKED" ring text orbiting the globe introduces a translucent, atmospheric element in {colors.muted-soft} that reinforces the access-denied narrative without competing with foreground readability.

Key Characteristics:

• Canvas is a cool blue-gray ({colors.canvas} — #d4dee8), never pure white, establishing immediate technical/institutional mood.
• All text lives within the blue spectrum: {colors.ink} (#276aa5) for body, {colors.heading-dark} (#224f7c) for emphasis.
• Headlines use weight 700 exclusively—no decorative light weights; authority comes from mass, not elegance.
• Illustration panels receive extra rounding ({rounded.xl} — 16px) to signal their special, non-interactive status.
• Coral accents ({colors.accent-coral} — #ff6b6b) appear only in icon centers, acting as semantic "warning/denied" markers.
• Contact buttons use elevated surface backgrounds ({colors.surface} — #e9eef2) with generous padding ({spacing.lg} — 24px vertical).
• The country code badge combines a flag icon, region label, and hash string in a compact horizontal capsule.
• Spacing follows an 8px base unit rhythm with strategic jumps to 32px, 40px, and 110px for major layout zones.

Colors

Brand & Accent

• Primary ({colors.primary} — #276aa5): The core brand blue used for body text, logo base color, links, and primary informational elements. Appears in 21+ text instances across the page.
• Primary Dark ({colors.primary-dark} — #224f7c): A deeper, more authoritative blue reserved for the headline "Access denied!" and the brand wordmark logo. Provides visual weight where 700 font-weight alone isn't sufficient.
• Primary Light ({colors.primary-light} — #4a8bc7): A brighter blue variant for hover states and subtle emphasis (inferred from gradient transitions in the brand palette).
• Accent Coral ({colors.accent-coral} — #ff6b6b): Warm red-coral used exclusively inside icon badges (location pin, lock, map) to signal "blocked/restricted" semantics. Creates critical contrast against the cool blue field.
• Accent Coral Soft ({colors.accent-coral-soft} — #ffa8a8): A desaturated coral for subtle glow effects behind icon badges, adding depth without introducing new hues.

Surface

• Canvas ({colors.canvas} — #d4dee8): The page-level background—a medium-light blue-gray that avoids both clinical white and dark-mode heaviness. Sets the overall cool, institutional temperature.
• Surface ({colors.surface} — #e9eef2): Slightly lighter than canvas, used for elevated elements like contact buttons and input backgrounds. Creates one step of elevation through value shift alone.
• Surface Soft ({colors.surface-soft} — #f0f4f7): Near-white blue, used for the illustration panel background to make the 3D globe "pop" visually while staying harmonious.
• Surface Card ({colors.surface-card} — #ffffff): Pure white, reserved for floating elements that need maximum contrast: icon badges, the country code container, and potential modal/card content.
• Surface Glow ({colors.surface-glow} — #e8f0f8): A luminous blue-tinted surface for decorative glow effects behind the globe illustration (inferred from radial gradients).

Text & Ink

• Ink ({colors.ink} — #276aa5): The default text color matching primary blue. Used for all body copy, button labels, and general UI text. Ensures text and brand color are semantically linked.
• Heading Dark ({colors.heading-dark} — #224f7c): Darker blue for H1/H2 headings ("Access denied!"). Combined with weight 700, this creates the page's strongest typographic moment.
• Body ({colors.body} — #276aa5): Synonymous with ink in this system; paragraph text inherits primary blue directly.
• Muted ({colors.muted} — #5a8ab7): Medium-light blue for secondary information, footer text, and less critical labels. Maintains hue consistency at lower contrast.
• Muted Soft ({colors.muted-soft} — #8faecf): Very light blue for tertiary text like the "LOCKED" ring labels around the globe and placeholder/hint text.
• On Primary ({colors.on-primary} — #ffffff): White text for rendering on primary-colored backgrounds (buttons, filled badges). Satisfies AA contrast against {colors.primary}.
• On Dark ({colors.on-dark} — #ffffff): White text reserved for any dark-surface contexts (not actively used on this page but available for modal/header inversion).
• On Surface ({colors.on-surface} — #224f7c): Dark text for white/light surface cards ensuring readability against {colors.surface-card}.

Hairlines & Borders

• Hairline ({colors.hairline} — #c5d4e4): Subtle dividers and borders that separate without dominating. Matches the canvas family but with more definition.
• Border Soft ({colors.border-soft} — #b8cde0): Slightly stronger than hairline for button borders and input fields needing clearer containment.
• Border Strong ({colors.border-strong} — #a0bdd8): The most visible border color, used for focus rings and active states requiring unmissable indication.

Semantic

• Error ({colors.error} — #c13515): Deep red for validation errors and critical failure states (standard semantic assignment, not visible on current page).
• Success ({colors.success} — #1e7b4e): Green for confirmation states (standard assignment).
• Warning ({colors.warning} — #c77b00): Amber/orange for cautionary messages (standard assignment).
• Info ({colors.info} — #276aa5): Mapped to primary blue for informational callouts.
• Link ({colors.link} — #276aa5): Standard link color identical to primary/ink—links don't get special treatment in this palette.
• Link Active ({colors.link-active} — #224f7c): Darker shade for visited/active link states.

Typography

Font Family

The typeface stack is Roboto, served as a variable font (woff2-variations format) supporting weights 400–700 with automatic adjustment. Fallback is sans-serif. The @font-face declarations reveal a comprehensive Roboto deployment including LightItalic (300), Regular (400), Medium (500), Bold (700), and Black (900) variants in both upright and italic styles, plus a separate Roboto Condensed family available for space-constrained contexts. A Righteous display face (weight 400) is loaded but not actively used on this page—it likely serves marketing/landing pages outside the technical-error context.

Roboto plays every role here: the logo, the headline, the body copy, the buttons, and the captions. There's no serif counterpoint, no monospace exception (despite the hash string appearing in the country code badge, it renders in proportional Roboto). This mono-family approach reinforces the utilitarian, systems-oriented voice of an access-control page.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 48px | 700 | 1.175 | -0.01em | Reserved for future larger hero contexts | | {typography.display-lg} | 40px | 700 | 1.175 | 0 | Main page headline "Access denied!" | | {typography.title-md} | 40px | 700 | 1.175 | 0 | Alternative title role (same specs as display-lg) | | {typography.title-sm} | 24px | 700 | 1.25 | 0 | Section subheadings (not used on current page) | | {typography.body-md} | 16px | 400 | 1.25 | 0 | Primary body text, explanatory paragraphs | | {typography.body-sm} | 14px | 400 | 1.4 | 0 | Secondary text, button labels, metadata | | {typography.caption} | 13px | 400 | 1.38 | 0 | Tertiary text, "LOCKED" ring labels, timestamps | | {typography.button} | 14px | 500 | 1.25 | 0 | Button text (medium weight for slight prominence) | | {typography.label-md} | 13px | 500 | 1.38 | 0.02em | Form labels, badge text with slight expansion | | {typography.code-inline} | 14px | 400 | 1.4 | 0 | Hash strings, technical identifiers (fallback to Roboto) |

Principles

The typography system trusts weight and size to create almost all hierarchy. There is no italic usage on this page, no uppercase transformations (the headline reads "Access denied!" in sentence case), and no letter-spacing manipulation beyond the tiny -0.01em kerning adjustment on display-xl. This restraint signals a technical, no-nonsense context—the page isn't selling anything; it's explaining a block.

The jump from {typography.body-md} (16px/400) to {typography.display-lg} (40px/700) is dramatic—2.5x size increase combined with a 75% weight increase. This creates a clear "headline vs. everything else" split without intermediate steps. If this pattern scaled to a full site, we'd expect title-sm (24px/700) to handle card titles and section headers, maintaining that bold-or-nothing philosophy.

Color variation plays a secondary hierarchical role: the headline shifts to {colors.heading-dark} (darker blue) while body stays at {colors.ink} (standard blue). This is subtle—both are blue—but the ~15% darkness difference helps the heading recede slightly (paradoxically making it feel more solid and anchor-like). Caption text in {colors.muted-soft} provides the bottom of the hierarchy, readable but intentionally quiet.

Note on Font Substitutes

Roboto is a Google Font freely available via CDN. For exact matching, import the variable font from Google Fonts:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

CSS variables to define:

--font-family-base: 'Roboto', sans-serif;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;

The Righteous face (loaded but unused) can be substituted with Bangers or Lobster from Google Fonts if display contexts require it. Roboto Condensed has no close Google Fonts equivalent—use standard Roboto with transform: scaleX(0.9) as an emergency fallback for condensed layouts.

Layout

Spacing System

• Base unit: 8px (powers the {spacing.sm} token and all multiples thereof).

• Tokens:

  • {spacing.xxs} (2px): Micro-adjustments, hairline offsets.
  • {spacing.xs} (4px): Icon internal padding, tight gaps.
  • {spacing.sm} (8px): Most common spacing—between icon and text in badges, between lines in compact stacks.
  • {spacing.md} (12px): Small component gaps, form field margins.
  • {spacing.base} (16px): Standard internal padding for small components.
  • {spacing.lg} (20px): Vertical padding on contact buttons.
  • {spacing.xl} (24px): Gap between body text and contact button stack.
  • {spacing.xxl} (32px): Major section-internal separation.
  • {spacing.section} (40px): Vertical padding for the hero band container.
  • {spacing.section-xl} (80px): Full-section vertical rhythm (reserved for multi-section pages).
  • {spacing.hero-gap} (110px): Horizontal gap between text column and illustration column.
  • {spacing.illustration-width} (757px): Fixed width allocation for the right-side globe panel.

• Section padding (vertical): {spacing.section} (40px) — applied to the hero band wrapping both text and illustration columns.

• Card internal padding: {component.country-code-badge} uses "8px 16px"; {component.card-surface} would use {spacing.xl} (24px).

• Gutters: The layout appears to use a centered max-width container (estimated 1200–1400px) with auto horizontal margins. Internal gutters between the text column (~580px wide) and illustration column (~757px wide) measure {spacing.hero-gap} (110px).

Grid & Container

The page employs a two-column asymmetric grid for the hero section: a narrower left column carrying textual content (headline, explanation, country code, contacts) and a wider right column hosting the 3D globe illustration. The text column maxes out around 55–60% of available width, while the illustration consumes the remainder. This 45/55 or 40/60 split prioritizes visual storytelling over dense information—the "denied" message is short, so the globe gets real estate to convey the "global restriction" concept atmospherically.

At desktop widths, the layout is editorial-dense rather than marketplace-gridded. There are no card grids, no 3-column feature lists, no pricing tables. It's a single narrative flow: logo → headline → explanation → metadata → contacts ← (parallel) → illustration. This linear, almost letter-like structure suits an error/access page where users need quick comprehension, not browsing.

Whitespace Philosophy

The system embraces generous but purposeful whitespace. The {spacing.hero-gap} of 110px between text and illustration is substantial—nearly double the vertical section padding. This breathing room prevents the dense blue-gray background from feeling oppressive. However, whitespace isn't "airy" in the editorial sense; it's architectural, creating clear zones (text zone / illustration zone) rather than luxury margin. The contact buttons stack vertically with {spacing.base} (16px) between them—tight enough to read as a group, loose enough to tap accurately on touch devices.

Header Architecture

┌─────────────────────────────────────────────────────────────┐
│ [1xBET Logo]                                               │
│                                                             │
│                                                             │
│                                                             │
│   Access denied!          ┌─────────────────────┐           │
│                          │                     │           │
│   Make sure that your   │    [GLOBE IMAGE]    │           │
│   country is not...      │                     │           │
│                          │   ○ 📍              │           │
│   [🌐 US] 2605:4c40...  │        🔒    🗺️     │           │
│                          │    LOCKED RING      │           │
│   [+44 127 325-69-87]   │                     │           │
│   [info-en@1xbet.com]   └─────────────────────┘           │
│                                                             │
└─────────────────────────────────────────────────────────────┘

The header is minimal: just the brand logo positioned top-left with approximately {spacing.xl} (24px) padding from viewport edge. No navigation menu, no user avatar, no search bar—this is a dead-end error page, so chrome is stripped to the minimum. A full nav implementation would likely add center-aligned menu items and right-aligned utilities (login, language selector, balance display) within a 64px-tall {component.top-nav} bar.

Hero Section

┌─ TEXT COLUMN (flex: 0 0 auto, max-width ~580px) ─┐
│                                                    │
│  [Logo area - 40px below top edge]                 │
│                                                    │
│  ACCESS DENIED!                                    │
│  (display-lg, 40px, 700, heading-dark)             │
│                                                    │
│  Make sure that your country is not included...   │
│  (body-md, 16px, 400, ink)                         │
│                                                    │
│  [🌐 US]  2605:4c40:40:f110::c533                │
│  (country-code-badge, surface-card bg)             │
│                                                    │
│  [+44 127 325-69-87]                              │
│  (contact-phone-button, surface bg, rounded-lg)    │
│                                                    │
│  [info-en@1xbet.com]                              │
│  (contact-email-button, surface bg, rounded-lg)    │
│                                                    │
└────────────────────────────────────────────────────┘

          ← 110px gap (hero-gap) →

┌─ ILLUSTRATION COLUMN (flex: 1 1 757px) ───────────┐
│                                                    │
│  ┌──────────────────────────────────────────┐     │
│  │                                          │     │
│  │         [📍 location badge]              │     │
│  │                                          │     │
│  │    ╭────────────────────────╮            │     │
│  │    │    🌍 GLOBE (3D)       │            │     │
│  │    │         🔒             │            │     │
│  │    ╰────────────────────────╯            │     │
│  │                                          │     │
│  │                  [🗺️ map badge]          │     │
│  │                                          │     │
│  │    ~~~ LOCKED ~~~ LOCKED ~~~ (ring)      │     │
│  │                                          │     │
│  └──────────────────────────────────────────┘     │
│  (illustration-panel, surface-soft bg, xl round)  │
└────────────────────────────────────────────────────┘

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | {colors.canvas} background, no shadow | Page body, header background | | 1 (Raised) | {colors.surface} background, optional {extensions.shadows.sm} | Contact buttons, input fields | | 2 (Floating) | {colors.surface-card} background, {extensions.shadows.md} | Icon badges, country code badge | | 3 (Modal) | {colors.surface-card} background, {extensions.shadows.lg} | Potential modals, dropdowns (not visible) | | 4 (Decorative) | Radial gradient glow ({colors.surface-glow}), no shadow | Behind globe illustration |

The elevation system is color-block dominant rather than shadow-dependent. Most depth cues come from background value progression: canvas (#d4dee8) → surface (#e9eef2) → surface-soft (#f0f4f7) → surface-card (#ffffff). Each step lighter signals "closer to viewer." Shadows exist in the token set but are conservatively applied—this page shows no explicit box-shadows in the extracted CSS, suggesting either inline styles, JavaScript-applied styles, or a flat-design preference for this particular template.

The philosophy here is layered flatness: elements stack through background color differences and rounding, not through cast shadows. The globe illustration introduces the only true depth—its 3D rendering, glowing atmosphere, and floating icon badges create a "window into dimensional space" effect that contrasts with the flat UI surrounding it. If shadows were enabled globally, they'd likely be cool-toned (blue tint) to match the palette, avoiding warm gray/black drop shadows that would clash with the blue-gray environment.

Decorative Depth

The right-side illustration constitutes the entire decorative depth system. Key techniques observed:

• Radial glow: A soft blue-white gradient behind the globe suggests ambient light, likely implemented as a radial-gradient or pseudo-element with {colors.surface-glow} at center fading to transparent.
• Floating badges: The three icon badges (location, lock, map) appear to hover above the globe surface with subtle {extensions.shadows.sm} or {extensions.shadows.md} separation.
• Orbital ring: The "LOCKED" text ring uses opacity layering ({colors.muted-soft} at ~40-60% opacity) to appear ethereal and distant, creating atmospheric perspective.
• 3D globe shading: The sphere itself carries its own lighting model (specular highlight upper-left, shadow lower-right) independent of CSS box-shadow—this is asset-native depth.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Tiny elements, inner corners, tags | | {rounded.DEFAULT} / {rounded.md} | 8px | Standard buttons, inputs, badges, most containers | | {rounded.lg} | 12px | Contact buttons, icon badges (slightly friendlier) | | {rounded.xl} | 16px | Illustration panel, cards needing extra softness | | {rounded.pill} | 9999px | Pills, avatars, fully rounded ends | | {rounded.left-only} | 8px 0px 0px 8px | Left half of split/button-group | | {rounded.right-only} | 0px 8px 8px 0px | Right half of split/button-group |

The shape vocabulary is consistently rounded—there are zero sharp-cornered rectangles in the interface. Even the illustration panel, which could justify sharp edges to contrast with its organic globe content, receives {rounded.xl} (16px). This uniformity creates a friendly, approachable feeling that softens the harsh "access denied" message. The presence of {rounded.left-only} and {rounded.right-only} tokens indicates the design system anticipates segmented controls or button groups where adjacent elements share edges—common in betting interfaces for odds displays or tab switching.

Photography Geometry

This page contains no photographic imagery—the visual content is entirely 3D illustration (globe + icons). However, based on the illustration panel's treatment, we can infer how photography would be handled:

• Aspect ratio: The illustration panel appears roughly 4:3 or 16:10 (757px wide × estimated 560px tall).
• Corner rounding: All image containers would receive {rounded.xl} (16px) matching the illustration panel.
• Background treatment: Images sit on {colors.surface-soft} or {colors.surface-card} depending on whether they need to blend or pop.
• Full-bleed: Not observed; all imagery appears contained within rounded panels rather than edge-to-edge.

For avatar/user imagery (not present but expected in authenticated flows), the system would likely use {rounded.pill} (circular) or {rounded.lg} (squircle) based on modern betting-app conventions.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & Actions

{component.brand-logo} — The 1xBet wordmark positioned top-left. Renders in {colors.primary-dark} (#224f7c) at {typography.display-lg} (40px/700) using the Righteous or bold Roboto face. No background (transparent), minimal padding ({spacing.base} horizontal). In a full site implementation, this would link to the homepage and potentially swap to a white version when overlaid on dark photography.

{component.button-primary} — The primary call-to-action button pattern (not actively rendered on this error page but defined for system completeness). Background {colors.primary} (#276aa5), text {colors.on-primary} (#ffffff) at {typography.button} (14px/500). Rounded {rounded.DEFAULT} (8px), padded "10px 20px". Active state {component.button-primary-active} darkens background to {colors.primary-dark}. Transition should apply to background-color over 200ms ease-out per {extensions.motion}.

{component.button-primary-active} — Pressed/active state for primary buttons. Background shifts to {colors.primary-dark} (#224f7c) providing tactile feedback. All other properties inherit from {component.button-primary}.

{component.button-secondary} — Outlined or surface-filled secondary action. Background {colors.surface} (#e9eef2), text {colors.primary} (#276aa5) at {typography.button}. Same dimensions as primary. Active state {component.button-secondary-active} deepens background to {colors.border-soft}. Would be used for "Learn More" or "Contact Support" actions alongside a primary CTA.

{component.contact-phone-button} — The phone number button visible on the page. Background {colors.surface} (#e9eef2), text {colors.ink} (#276aa5) at {typography.body-md} (16px/400). Generously rounded at {rounded.lg} (12px) with padding {spacing.lg} vertical (20px) and {spacing.xxl} horizontal (32px). Full-width within the text column. Appears as a tappable/contactable element—likely wraps a tel: link. No visible border, relying on background contrast against {colors.canvas}.

{component.contact-email-button} — The email address button below the phone button. Identical styling to {component.contact-phone-button}: {colors.surface} background, {rounded.lg} (12px), same padding. Stacks vertically with {spacing.base} (16px) gap between them. Wraps a mailto: link. Together, the two contact buttons form a contact action group—visually unified by shared surface treatment, rounded corners, and vertical stacking.

Cards & Containers

{component.hero-band} — The full-width section containing both text and illustration columns. Background {colors.canvas} (#d4dee8), padding {spacing.section} (40px) vertical. Centers its children (text column + illustration column) within a max-width container. Establishes the page's primary zoning.

{component.illustration-panel} — The right-side container holding the 3D globe. Background {colors.surface-soft} (#f0f4f7), heavily rounded at {rounded.xl} (16px). Fixed width {spacing.illustration-width} (757px). Padding internally is handled by the {component.globe-container} child which adds 32px of breathing room. This two-layer padding strategy (panel + inner container) ensures the globe never touches the panel edge regardless of responsive scaling.

{component.globe-container} — Inner wrapper within the illustration panel. Transparent background, {rounded.xl} (16px) inherited or matched, padding 32px all sides. Centers the 3D globe asset and positions the floating icon badges absolutely relative to this container (or uses CSS Grid for badge placement). Acts as the coordinate system for the orbital "LOCKED" ring animation.

{component.country-code-badge} — The horizontal capsule showing the US flag, "US" label, and IPv6 hash. Background {colors.surface-card} (#ffffff), text {colors.ink} (#276aa5) at {typography.body-sm} (14px/400). Rounded {rounded.DEFAULT} (8px), padded "8px 16px". Contains inline elements: a flag emoji/icon, the region code, and a monospace-style hash string (rendered in Roboto despite appearing technical). Displays as an inline-flex row with {spacing.sm} (8px) gaps between children.

{component.card-surface} — Generic white card component for future content. Background {colors.surface-card} (#ffffff), text {colors.on-surface} (#224f7c), {typography.body-md}. Rounded {rounded.xl} (16px), padded {spacing.xl} (24px). Would carry {extensions.shadows.md} on elevated contexts.

{component.status-indicator} — Small pill/tag for status labeling (not visible but inferred from betting-system patterns). Background {colors.surface} (#e9eef2), text {colors.muted} (#5a8ab7) at {typography.caption} (13px/400). Fully rounded {rounded.pill} (9999px), padded "4px 12px". Used for "Live", "Upcoming", "Restricted" labels.

Icon Badges

{component.icon-badge-location} — The location-pin badge floating near the globe. White {colors.surface-card} background, coral {colors.accent-coral} (#ff6b6b) icon center. Square-ish with {rounded.lg} (12px), fixed size 56px×56px. Icon renders at 24–28px centered. Likely includes a subtle {extensions.shadows.sm} lift effect and possibly the {colors.accent-coral-soft} glow behind it.

{component.icon-badge-lock} — The padlock badge (smaller than location). Same construction: white bg, coral icon, {rounded.lg} (12px), but size 48px×48px. Positioned closer to the globe surface to show depth layering (partially "behind" the globe's perceived curvature).

{component.icon-badge-map} — The map/folded-paper badge. Identical to location badge in size (56px) and treatment. Positioned lower-right in the illustration composition, balancing the location badge's upper-right position.

All three icon badges share a coherent micro-pattern: white rounded square, centered coral icon, consistent shadow/glow treatment, and sizes drawn from the 48px/56px scale. This repetition makes them read as a "set" belonging to the restriction/gating concept.

Text Elements

{component.hero-headline} — The "Access denied!" H1. Transparent background, text {colors.heading-dark} (#224f7c) at {typography.display-lg} (40px/700). No rounding (text-only). Bottom padding {spacing.base} (16px) separates it from body text. Line height 1.175 keeps the multi-word headline compact.

{component.hero-body-text} — The explanatory paragraph starting "Make sure that your country...". Transparent background, text {colors.ink} (#276aa5) at {typography.body-md} (16px/400). Max width constrained (likely 480–520px) for readability. Bottom padding {spacing.xl} (24px) before the country code badge. Line height 1.25 (20px for 16px font) provides comfortable reading.

{component.locked-ring-text} — The repeated "LOCKED" and "NO ACCESS" labels orbiting the globe. Transparent background, text {colors.muted-soft} (#8faecf) at {typography.caption} (13px/400). No rounding. Rendered at reduced opacity (~50-60%) and tracked along a circular path (likely SVG <textPath> or CSS offset-path). Uppercase, widely spaced.

Navigation & Chrome

{component.top-nav} — The header navigation bar. Background {colors.canvas} (#d4dee8), text {colors.primary} (#276aa5) at {typography.body-sm} (14px/400). Fixed height 64px. On this error page, it contains only the logo; in production, it would host language selector, login/register buttons, and possibly a search icon. Border-bottom may use {colors.hairline} for subtle separation from content.

{component.footer-band} — Page footer (implied, not fully visible). Background {colors.canvas} (#d4dee8), text {colors.muted} (#5a8ab7) at {typography.caption} (13px/400). Padding {spacing.xl} (24px) vertical. Would contain legal links, license numbers, and responsible-gambling disclaimers typical of betting sites.

Inputs & Forms

{component.text-input} — Standard text input field. Background {colors.surface-card} (#ffffff), text {colors.ink} (#276aa5) at {typography.body-md} (16px/400). Rounded {rounded.DEFAULT} (8px), padded "10px 14px" internally, fixed height 44px. Border likely 1px {colors.border-soft} becoming {colors.border-strong} on focus.

{component.text-input-focus} — Focused state of text input. Background remains white, border thickens or changes to {colors.primary} (#276aa5) or {colors.border-strong} (#a0bdd8). May acquire a subtle {extensions.shadows.glow} (blue tint) ring. Focus-visible outline should follow platform conventions (typically 2px offset in {colors.primary}).

Do's and Don'ts

Do

• Do use {colors.primary} (#276aa5) for all body text and links—it's the universal ink color, not just a "brand accent."
• Do reserve {colors.heading-dark} (#224f7c) exclusively for H1/H2 headings at weight 700; never apply it to body copy or buttons.
• Do apply {rounded.lg} (12px) or {rounded.xl} (16px) to any element containing illustration or photography to harmonize with {component.illustration-panel}.
• Do maintain the 8px base spacing rhythm—all internal padding and gaps should be multiples of {spacing.sm} (8px).
• Do use {colors.surface} (#e9eef2) for secondary button backgrounds (like {component.contact-phone-button}) rather than white or transparent.
• Do keep the canvas at {colors.canvas} (#d4dee8) for all technical/error pages; reserve white ({colors.surface-card}) only for floating cards and badges.
• Do render icon badges (location, lock, map) with {colors.accent-coral} (#ff6b6b) centers on white {colors.surface-card} backgrounds—this color combination is semantically "restricted/blocked."
• Do stack multiple contact/action buttons vertically with {spacing.base} (16px) gaps when they form a logical group.
• Do limit line length for body text to ~520px (as seen in {component.hero-body-text}) to maintain the editorial, scannable feel.
• Do use {typography.display-lg} (40px/700) or larger for any "denied/error/warning" headline—it commands appropriate gravity.
• Do include the country/region code badge pattern ({component.country-code-badge}) when displaying geo-restriction information—it's a recognizable system pattern.

Don't

• Don't introduce warm grays or beige surfaces—the entire palette is cool blue-gray; warmth exists only in {colors.accent-coral}.
• Don't use font weights below 400 for UI text—there's no Light (300) in the active hierarchy; 400 is the floor.
• Don't apply sharp corners (0px radius) to any visible container; the minimum is {rounded.sm} (4px), standard is {rounded.DEFAULT} (8px).
• Don't substitute {colors.link-active} (#224f7c) for {colors.primary} (#276aa5) in static text—they're distinct hierarchy levels.
• Don't place text directly on {colors.canvas} (#d4dee8) below 16px size—the contrast ratio requires {typography.body-md} or larger for readability.
• Don't add gradient overlays to the hero section—the background is a flat {colors.canvas} color block; all depth lives in the illustration panel.
• Don't expand the radius vocabulary beyond the defined 8 tokens—especially avoid 2px, 6px, or 20px values that aren't in the {rounded} scale.
• Don't use {colors.error} (#c13515) for the "denied" message—the system expresses restriction through blue tones and coral icon accents, not red alerts.
• Don't implement hover states without referencing {component.button-primary-active} and {component.button-secondary-active} patterns—active states darken, they don't lighten or change hue.
• Don't allow the illustration panel to collapse below 400px width on mobile—it should scale proportionally or reflow below the text column, not disappear.

Motion & Animation

Transition Tokens

Based on the extracted CSS showing transition: "all" and the keyframe inventory, here are the deduced transition patterns:

/* Core transition */
--transition-base: all 200ms ease-out;

/* Color transitions (background, text, border) */
--transition-color: background-color 200ms ease-out, 
                    color 200ms ease-out, 
                    border-color 200ms ease-out;

/* Transform transitions (scale, translate for icon badges) */
--transition-transform: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);

/* Opacity transitions (fade-in for badges, overlay) */
--transition-opacity: opacity 200ms ease-out;

/* Shadow transitions (elevation changes) */
--transition-shadow: box-shadow 250ms ease-out;

The system uses 200ms as the standard duration with ease-out easing—snappy but not jarring. Transform animations (floating badges, globe rotation) get slightly more time (250ms) and a cubic-bezier curve for natural deceleration.

Keyframe Animations

The extracted CSS reveals an extensive keyframe inventory, indicating this is a motion-rich page despite its simple appearance:

• mf-loading-rotate-* — Spinner rotation for loading states (full 360° continuous).
• swal2-toast-show / swal2-toast-hide — SweetAlert2 toast notification enter/exit (slide + fade).
• swal2-show / swal2-hide — Modal dialog appear/disappear (scale + fade).
• arcs-* / dots-* / letters-* — Decorative loading animation variants (probably preloader sequences).
• preloader-bar-* / preloader-bar-2-* — Progress bar fill animations for page load.
• bounse-* (sic) — Bounce/elastic animation, likely for icon badge entrance or error feedback.
• spin-wheel-* — Rotation animation, probably driving the "LOCKED" ring orbit around the globe or a loading wheel.
• swal2-animate-success-line-tip / swal2-animate-success-line-long — Success checkmark drawing animation (SVG stroke-dasharray).

Interaction Patterns

• Floating badge entrance: The three icon badges (location, lock, map) likely animate in with a combined scale (0 → 1) + translateY (-20px → 0) + opacity (0 → 1) using bounse-* or custom keyframes, staggered by 100-150ms each.
• Globe rotation: The 3D globe probably has a subtle continuous Y-axis rotation (via spin-wheel-* or CSS animation: spin 20s linear infinite) to feel "alive" without being distracting.
• LOCKED ring orbit: The "LOCKED" text circles the globe on an elliptical path using offset-path or SVG <animateMotion>, completing one revolution every 15-20 seconds.
• Button press feedback: Contact buttons and any primary CTAs scale down to 0.97 on :active with {extensions.motion.duration} timing.
• Focus ring expansion: Inputs and buttons grow a {colors.primary} or {colors.border-strong} outline from 0 to 2px over 200ms on :focus-visible.
• Toast notifications: Error/success messages slide in from top-right using SweetAlert2's toast system (swal2-toast-show), auto-dismiss after 3-5 seconds.
• Preloader sequence: On initial page load, a branded preloader (bar or spinner) plays using preloader-bar-* and mf-loading-rotate-* until the React/Vue app hydrates.

If implementing motion from scratch without the existing JS framework: aim for 200-250ms durations, ease-out curves, and prioritize entrance animations (elements fading/sliding in on mount) over continuous motion. The brand voice is "technical but polished"—motion should feel precise, not playful.

Imagery Style

• Primary technique: 3D rendered illustration (the globe, icon badges, and orbital ring are clearly CGI/assets, not photography or flat vector).
• Subject matter: Global/geographic imagery (Earth globe with visible continents), security iconography (padlocks), location markers (map pins), mapping symbols (folded maps).
• Color treatment: The globe uses realistic blues and whites for oceans/continents, while UI elements (badges, ring text) adhere strictly to the design system palette ({colors.accent-coral} for icons, {colors.muted-soft} for ring text).
• Lighting: Soft studio lighting with a primary light source upper-left, creating gentle shadows on the globe's lower-right quadrant. Badges appear to emit subtle local light (glow effects).
• Style alignment: The 3D illustration is "friendly technical"—not photorealistic (continents are simplified), not cartoonish (proper shading and proportions). It occupies a middle ground similar to corporate tech illustrations (Stripe, Linear, Vercel aesthetic).
• Role: Imagery dominates the right half of the viewport—it's not a small accent; it's a co-equal partner to the text content, communicating the "global restriction" concept viscerally.
• Background integration: The illustration sits on a {colors.surface-soft} (#f0f4f7) panel that is only slightly lighter than the {colors.canvas} page background, creating subtle separation without harsh contrast.
• Icon style within imagery: The location pin, lock, and map icons inside the badges appear to be filled (solid) rather than outlined, using {colors.accent-coral} uniformly. They're likely custom 3D assets or high-quality 2D icons with bevel effects.
• No photography present: This page contains zero photographic elements. Any user avatars, event thumbnails, or promotional imagery on the broader site would need separate style guidelines.
• Atmospheric effects: A radial gradient glow behind the globe (inferred) adds depth—this is the only "painterly" element in an otherwise flat UI.

Icon System

• Library: Custom SVG / 3D assets. The extracted CSS shows no icon library class names (no lucide, heroicon, material, or fa- prefixes). The font-face list includes only Roboto variants and Righteous—no icon fonts like Font Awesome or Material Icons.
• Specific icons observed:
  • Location/map pin (coral, inside square badge)
  • Padlock/lock (coral, smaller badge)
  • Folded map (coral, badge)
  • Globe/Earth (3D, central illustration)
  • Flag/Globe indicator (small, next to "US" in country code badge—appears to be an emoji or tiny SVG)
• Treatment:
  • UI icons (inside badges): Filled style, {colors.accent-coral} (#ff6b6b), sized 24-28px within 48-56px containers.
  • Illustration icons (globe, orbital elements): 3D rendered, part of the illustration asset, not individual SVGs.
  • The flag in {component.country-code-badge} appears to be a Unicode emoji (🌐) or inline SVG, ~16-18px, rendered in full color (not monochrome).
• Size system: Icon containers cluster at 48px (lock) and 56px (location, map)—suggesting a 2-step icon scale for different visual weights. The icons themselves are ~45-50% of container size.
• Alignment: Icons are center-aligned both horizontally and vertically within their badge containers using flexbox (display: flex; align-items: center; justify-content: center).
• Stroke vs fill: All visible icons use fill (solid) rendering. No stroke-width or stroke-color properties detected. If adding new icons to this system, match the filled, slightly rounded, "soft geometric" style of the existing set.
• Recommendation for expansion: For any new UI icons needed (search, menu, close, arrow), source from Lucide or Heroicons and apply currentColor with {colors.ink} or {colors.primary}, setting stroke-width="1.5" or stroke-width="2". Convert to fill where possible to match the badge icon style.

Recommended Frontend Stack

- Framework:      Next.js (React) or Nuxt.js (Vue) — the extracted HTML shows Vue-specific
                  class patterns (default-layout-container, vue-notification-group) suggesting
                  a Vue 2/3 codebase, likely Nuxt for SSR.
- Styling:        CSS Modules or scoped CSS (no Tailwind utilities detected in class names;
                  framework is marked as non-Tailwind). Possibly uses BEM-like naming.
- Fonts:          Self-hosted WOFF2 variable fonts (Roboto Variable + Righteous) served from
                  /genfiles/cms/1/desktop/fonts/. No external CDN dependency for fonts.
- Animation:      Vanilla CSS keyframes (extensive keyframe library extracted) + likely
                  GreenSock (GSAP) or Framer Motion for complex 3D badge positioning.
                  SweetAlert2 confirmed for toast/modal animations.
- Icons:          Custom SVG assets + inline emojis for flags. No icon library detected.
- Component lib:  Custom component system (Vue Single File Components based on class patterns).
                  Possible use of a UI library like Vuetify or PrimeVue under the hood.
- Build tool:     Webpack or Vite (modern Vue ecosystem).

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single column; illustration moves below text; contact buttons full-width; globe scales to ~300px width. | | Tablet | 640px – 1024px | Two-column maintained but compressed; hero-gap reduces to 40-60px; illustration width ~450px. | | Desktop | 1024px – 1440px | Full layout as shown: 110px gap, 757px illustration, ~580px text column. | | Wide | > 1440px | Content max-width caps at ~1400px centered; illustration doesn't exceed 800px; extra horizontal padding. |

Touch Targets

• {component.contact-phone-button}: Estimated 320px × 52px (full-width in mobile column, 20px vertical padding + 16px text + 16px padding). Exceeds WCAG AAA 44×44 minimum comfortably.
• {component.contact-email-button}: Identical dimensions to phone button. Exceeds minimum.
• {component.country-code-badge}: Approximately 280px × 36px (content-driven width, 8px + 16px + 8px vertical). Height is marginal—consider increasing vertical padding to 12px on mobile for 44px total.
• {component.icon-badge-location}: 56px × 56px. Exceeds minimum significantly—easy tap target.
• {component.icon-badge-lock}: 48px × 48px. Exceeds minimum.
• {component.icon-badge-map}: 56px × 56px. Exceeds minimum.
• Hypothetical {component.button-primary}: 140px × 42px (10px + 14px text + 10px padding + 2px border ≈ 42px). Slightly under 44px—recommend increasing padding to 12px vertical for mobile.

Collapsing Strategy

• Navigation: The {component.top-nav} (64px tall) remains fixed-height on mobile but collapses the hypothetical center menu into a hamburger icon (three horizontal lines) positioned right-of-logo. Utilities (login, language) move into a dropdown or slide-out drawer.
• Hero columns: The asymmetric two-column layout stacks vertically on mobile: text column (headline, body, country code, contacts) occupies the full width top-to-bottom, then the illustration panel renders below at reduced width (centered, ~90% viewport width, max 400px). The 110px {spacing.hero-gap} becomes 24-32px vertical margin between text and illustration.
• Contact button stack: Remains vertical (same as desktop) but buttons become full-width with {spacing.sm} (8px) gap instead of 16px to conserve vertical space.
• Illustration behavior: The globe 3D asset scales down proportionally (width: 100% of container, max 400px). Floating badges (location, lock, map) reposition via percentage-based top/left values or a media-query-adjusted grid. The "LOCKED" ring may simplify to a static arc or slow its rotation to reduce processing overhead on mobile GPUs.
• Typography scaling: {typography.display-lg} (40px) may reduce to 32px on mobile ({typography.title-sm} size) to prevent the headline from occupying 3-4 screen heights. {typography.body-md} (16px) stays constant or drops to 16px (already minimum comfortable size).
• Sticky elements: No sticky sidebars or rails exist on this page to collapse. If added (e.g., a "quick contact" rail on desktop), it would become a fixed bottom-bar on mobile containing the phone/email actions.

Image Behavior

• Globe illustration: Uses width: 100%; height: auto; object-fit: contain; within its {component.illustration-panel} container. On mobile, the panel constrains to max-width: 400px; margin: 0 auto; keeping the illustration centered and appropriately sized.
• Icon badges: These are likely inline SVGs or positioned <div> elements (not <img> tags) given their interactive nature. They scale via transform: scale() or percentage sizing. On mobile, consider reducing badge size from 56px→44px and 48px→40px to prevent overcrowding the smaller globe representation.
• Future photography: Any added hero images or team photos should use object-fit: cover; with aspect-ratio: 16/10; or aspect-ratio: 4/3; and receive {rounded.xl} (16px) border-radius. On mobile, aspect-ratio can shift to 3/2 or 1/1 for portrait-friendly cropping.

Iteration Guide

1. Set up the project using Nuxt 3 (Vue) or Next.js (React) based on the Vue-class patterns detected. Configure the build tool to serve self-hosted fonts from /genfiles/cms/1/desktop/fonts/ matching the @font-face declarations—prioritize the Roboto variable font (woff2-variations) for best performance.

2. Define CSS custom properties for every token in the YAML frontmatter. Start with colors (--color-primary: #276aa5, etc.), then typography (--font-body: 'Roboto', sans-serif; --text-display-lg: 700 40px/1.175 'Roboto', sans-serif), spacing (--space-sm: 8px), and rounded (--radius-default: 8px). Never hardcode a hex or pixel value that has a corresponding token.

3. Build the layout shell first: <header> with {component.top-nav} (64px tall, {colors.canvas} bg), <main> with {component.hero-band} (40px vertical padding), and a two-column CSS Grid or Flexbox layout with 110px gap at desktop, collapsing to column direction at < 1024px.

4. Implement components in this order: (a) Typography—headline and body text with correct token references; (b) Country code badge (complex inline-flex with flag, label, hash); (c) Contact buttons (stacked, full-rounded, surface bg); (d) Illustration panel (surface-soft bg, xl radius, 32px inner padding); (e) Icon badges (positioned absolute or grid, coral centers); (f) Navigation chrome (logo, menu toggle).

5. Add state variants for every interactive component following the frontmatter's separate-entry convention: {component.button-primary-active}, {component.text-input-focus}, etc. Implement :hover as a midpoint between default and active (e.g., button background shifts to a color between {colors.primary} and {colors.primary-dark}). Add :disabled states with opacity: 0.5 and pointer-events: none.

6. Integrate motion using the keyframe names found in the extracted CSS (spin-wheel-* for globe rotation, bounse-* for badge entrance, swal2-toast-show for notifications). Set up a prefers-reduced-motion media query that disables all animation and sets transition-duration: 0ms for accessibility.

7. Run the linter (npx @google/design.md lint DESIGN.md) after adding any new tokens or components. Watch for broken-ref warnings (token paths that don't resolve), contrast-ratio warnings (especially {colors.muted-soft} on {colors.canvas}), and orphaned-tokens (defined but never referenced in components or prose).

8. Test responsive breakpoints at 375px (mobile), 768px (tablet), 1280px (desktop), and 1920px (wide). Verify the illustration reflows below text on mobile, contact buttons remain tappable (≥44px height), and the headline doesn't exceed 2-3 lines on narrow viewports.

9. Match the illustration by either (a) embedding the provided 3D globe asset as an <img> or <picture> with WebP/AVIF sources, or (b) recreating it with Three.js/Spline if interactivity is required. Ensure icon badges overlay the globe using absolute positioning within the {component.globe-container} coordinate system.

10. Font setup for development: If you cannot access the self-hosted WOFF2 files from /genfiles/cms/1/desktop/fonts/, substitute with Google Fonts:

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    

    Define CSS variables: --font-family-base: 'Roboto', sans-serif;. For the Righteous face (unused here but loaded), add family=Righteous to the URL. For Roboto Condensed, no direct Google Fonts equivalent exists—use standard Roboto with font-stretch: condensed (limited support) or accept standard Roboto as fallback.

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudoclasses are undocumented. Implementation should interpolate between Default and Active state values (e.g., button background shifts 30-50% toward the active color).
• Loading skeletons/pending states: While spinner keyframes exist (mf-loading-rotate-*, preloader-bar-*), the specific skeleton screen designs for content areas (text shimmer lines, card placeholders) were not extractable from this single page.
• Form validation states beyond focus: Error ({colors.error}), warning ({colors.warning}), and success ({colors.success}) states for inputs are defined as tokens but have no component entries demonstrating their visual application (red border? Icon? Helper text?).
• Authenticated/user-facing flows: This is an unauthenticated error page. Dashboard surfaces, betting slips, account settings, deposit workflows, and live-match interfaces are entirely unknown and may introduce new sub-palette dialects (green for "won," red for "lost," gold for "live").
• Dark mode: The system is explicitly light-mode (extensions.mode: "light"). No dark-surface tokens (surface-dark, on-dark) have been validated against actual dark-mode screenshots. The canvas color (#d4dee8) is too light to invert naively—a proper dark theme would require dedicated token values.
• Sub-brand palettes: Betting sites often segment by product (Sportsbook vs. Casino vs. Live Games) with distinct accent colors (green for sports, gold for casino). Only the "access denied" page was analyzed—product-specific theming is unknown.
• Pixel-exact values for decorative elements: The globe's radial glow gradient stops, the "LOCKED" ring's exact opacity percentage, and the icon badge shadow blur radii are inferred from visual inspection, not extracted from computed CSS (they may be inline styles, SVG attributes, or JavaScript-applied).
• Misleading CSS variables: The default-layout-container and default__modals class prefixes suggest a legacy naming convention ("default") that may not reflect the current component architecture. The vue-notification-group class confirms Vue Notify library integration, but its toast styling may override design-system tokens.
• Accessibility contrast ratios: {colors.muted-soft} (#8faecf) on {colors.canvas} (#d4dee8) has a contrast ratio of approximately 1.6:1—well below WCAG AA's 4.5:1 requirement for normal text. This is acceptable only for the "LOCKED" decorative ring text (large text, low importance), but should not be reused for readable content.
• Internationalization (i18n) layout impacts: The current English text is relatively short. Translations to German, Finnish, or Turkish (common markets for 1xBet) may run 30-50% longer, potentially breaking the single-column text layout or causing the headline to wrap to 3+ lines. No max-length constraints or text-overflow strategies were detectable.