Superbet Romania

Overview

Superbet Romania is a high-octane sports betting and casino platform designed for players who demand speed, clarity, and immediate action. The brand aesthetic combines **Energetic Minimalism** with **Conversion-Focused Design**—a visual language that prioritizes bold red accents (#e81003) against neutral light backgrounds to create unstoppable visual momentum toward call-to-action buttons. The interface evokes confidence and urgency without aggression: every element serves the player's next decision. The emotional response is one of controlled excitement—the UI feels like a control room where odds, bonuses, and live events are always within reach. Voice: direct, conversational, never patronizing. Vocabulary leans into sports vernacular and player empowerment ("Intră în cont" = "Enter your account", "la bonusul" = "to the bonus"). Example sentence in brand voice: "500 lei bonus la prima depunere—rulaj X1 și ești gata." (500 lei bonus on first deposit—1x rollover and you're done.)

Colors

The color system is built on a **high-contrast, action-driven** philosophy. Primary (#e81003, a vivid red-orange) is the signature accent used exclusively on all primary CTAs, bonus cards, and active states—it commands attention and drives conversion. Secondary (#b3cc2e, a lime-green) provides a supporting accent for secondary actions and highlights, creating visual rhythm without competing for focus. Tertiary (#1f9d9e, a teal) is reserved for status indicators, live-event badges, and tertiary interactions. The surface stack uses a light, neutral palette: surface (#eef1f2) as the default page background, surface-container (#e8ecef) for card backgrounds, and surface-bright (#ffffff) for input fields and elevated surfaces. On-surface text is pure black (#000000) for maximum legibility; on-su

Typography

The type system follows a **clarity-first hierarchy** using Inter exclusively across all scales. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and brand moments; headline-lg (40px, 600 weight) anchors section titles; headline-md (28px, 600 weight) breaks up content zones. Body-lg (18px, 400 weight) is used for descriptive copy and card content; body-md (16px, 400 weight) is the default body text. Label-md (14px, 600 weight, 0.01em tracking) is applied to all button text and form labels; label-sm (12px, 500 weight, 0.02em tracking) is used for badges, helper text, and fine print. All headlines use -0.01em to -0.04em negative letter-spacing to create visual density and urgency. Body text uses 0.01em to 0.02em positive tracking for improved readability on light b

Layout

The layout uses a **12-column fluid grid** with a max-width of 1280px, centered on desktop and edge-to-edge on mobile. The page rhythm is driven by lg spacing (40px) between major sections and md spacing (24px) between cards and content blocks. The hero section uses full-width background imagery with a semi-transparent overlay (rgba(0, 0, 0, 0.2)) to ensure text legibility. Bonus cards are arranged in a 2-column grid on desktop (1 column on mobile) with md spacing (24px) between them. The gutter (24px) is applied consistently to all container edges. White-space is generous but purposeful: sections are separated by lg spacing (40px) to create breathing room, while internal card padding uses md spacing (24px). Container max-width is 1280px; content never exceeds this on desktop. Mobile viewp

Elevation & Depth

Depth is conveyed through **layered shadows and strategic elevation**, not through color darkening. Level 1 (Base): flat surfaces with no shadow (surface, surface-container). Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to card-standard, input-field, and list items. Level 3 (Elevated/Bonus Cards): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) applied to bonus cards and modals. Hover states increase shadow depth: button-primary-hover uses box-shadow: 0 6px 16px rgba(232, 16, 3, 0.25) to signal interactivity. Active/pressed states use inset shadows: inset 0 2px 4px rg

Shapes

The shape philosophy is **Technical Precision with Approachability**—rounded corners are used strategically to soften hard edges without sacrificing clarity. Buttons use full radius (9999px) to create pill-shaped CTAs that feel modern and clickable; this applies to all button variants (primary, secondary, tertiary). Cards use lg radius (1rem / 16px) to create a friendly, contained feel while maintaining visual hierarchy. Input fields use DEFAULT radius (0.5rem / 8px) for a more utilitarian, form-like appearance. Chips and badges use full radius (9999px) to signal they are interactive or dismis

Components

Action Elements All buttons use Inter label-md (14px, 600 weight) with 0.01em tracking. Primary buttons (button-primary) use #e81003 background with white text, full radius, 6px 16px padding, and 40px height. On hover, background shifts to #ba1b1a with box-shadow: 0 6px 16px rgba(232, 16, 3, 0.25); transition duration is 150ms ease-out. On active/pressed, use inset shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) and background #8c0000. Secondary buttons (button-secondary) use #b3cc2e background with #1a2600 text, full radius, 8px 20px padding, and 44px height. Tertiary buttons (button-tertiary) use #1f9d9e background with white text, lg radius (16px), 12px 20px padding, and 48px height. All buttons must have cursor: pointer and user-select: none.

Containers & Surfaces Bonus cards (card

Do's and Don'ts

**Do**

• Do use primary (#e81003) exclusively for all primary CTAs, bonus card backgrounds, and active/focus states—never use secondary or tertiary for conversion-critical elements.
• Do apply full radius (9999px) to all buttons to create unmistakable, clickable pill shapes that stand out from cards and inputs.
• Do use lg spacing (40px) between major sections and md spacing (24px) between cards to create visual breathing room and guide the eye through the page hierarchy.
• Do apply elevation-md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all interactive surfaces (cards, inputs, chips) to signal depth and interactivity.
• Do use Inter label-md (14px, 600 weight, 0.01em tracking) for all button text and form labels to maintain consistency and legibility.
• Do apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on label-sm text over colored backgrounds to ensure sufficient contrast and readability.

**Don't**

• Don't use secondary (#b3cc2e) or tertiary (#1f9d9e) for primary CTAs or bonus card backgrounds—these are supporting accents only and will dilute conversion focus.
• Don't apply rounded corners smaller than DEFAULT (8px) to buttons or cards; this creates a utilitarian, form-like appearance that contradicts the modern, action-oriented brand.
• Don't use box-shadow values larger than elevation-lg (0 8px 24px rgba(0, 0, 0, 0.12)) on standard cards; excessive shadow depth creates visual clutter and reduces focus on content.
• Don't mix typefaces; Inter is the only approved font family across all scales and weights—never substitute with system fonts or other Google Fonts.
• Don't apply negative letter-spacing to body text; use -0.01em to -0.04em only on headlines to create visual density without sacrificing readability.
• Don't use surface-variant (#dfe4e8) or outline colors for primary text; reserve these for secondary text, borders, and disabled states only.