Stake Casino

Overview

Stake Casino is a high-velocity online gaming platform engineered for players who demand precision, speed, and visual clarity. The design system embodies 'Dark Precision Minimalism'—a movement that pairs deep, near-black surfaces (rgb(23, 43, 57) / #172b39) with surgical accent colors to create an atmosphere of controlled intensity and trustworthiness. The interface prioritizes information density and rapid decision-making: every pixel serves the player's next action, whether placing a bet or navigating game rules. The emotional response is one of focused confidence—the UI feels professional, never chaotic, even under high-stakes conditions.

Stake's voice is direct, confident, and action-oriented. Sentences are short and imperative: 'Place your bet. Watch the action. Claim your win.' The vocabulary avoids flowery language; instead, it uses gaming vernacular (odds, payout, insurance, split) and financial precision (USD amounts, percentage multipliers). The brand personality is that of a seasoned dealer—calm under pressure, transparent about rules, and always ready for the next hand. Example: 'Blackjack pays 3 to 2. Insurance covers half your bet if the dealer shows an ace.'

Colors

The color system is built on a dark, high-contrast foundation optimized for extended play sessions and rapid visual scanning. Surface (rgb(23, 43, 57) / #172b39) serves as the primary canvas, with a carefully calibrated surface stack that ranges from surface-dim (#0f1f2a, used for recessed backgrounds) to surface-container-highest (#2d4452, used for elevated cards and modals). This 5-level depth hierarchy creates visual separation without relying on shadows alone, allowing players to instantly parse game state and interactive elements.

Primary (#1475e1, rgb(20, 117, 225)) is the brand's signature accent—a vivid, saturated blue used exclusively on Call-To-Action buttons ('สมัครสมาชิก' / Sign Up, 'เดิมพัน' / Place Bet), active states, and focus indicators. Secondary (#ff5500) and Tertiary (

Typography

The type system uses Proxima Nova as the primary typeface—a geometric sans-serif that conveys modernity and precision. Display (56px, 700 weight, -0.03em letter-spacing) is reserved for page titles and hero sections; headline-lg (36px, 700 weight) anchors major sections like 'Blackjack' or 'กติกาของ Stake Blackjack'; headline-md (28px, 600 weight) breaks up content into digestible chunks. Body text (16px, 400 weight, 24px line-height) is set at a generous line-height to maintain readability on mobile and desktop; label-md (14px, 600 weight) is used for button text and form labels, with 0.01em letter-spacing for crisp rendering at small sizes. All headings use a negative letter-spacing (-0.02em to -0.03em) to tighten the letterforms and reinforce the 'precision' aesthetic. On small labels o

Layout

The page uses a fluid, mobile-first grid with a max-width of 1200px and 12-column layout. Horizontal padding is set to 3vw on all screen sizes, ensuring the content breathes on mobile (where 3vw ≈ 12–18px) and scales gracefully on desktop (where 3vw ≈ 30–36px). Section separation uses lg spacing (40px) for major content blocks and md spacing (24px) for subsections, creating a clear visual rhythm that guides the eye downward. The game interface (blackjack table, betting controls, outcome buttons) uses a tighter grid with gap: var(--edge-spacing-md) (24px) to keep related elements cohesive. Container elements use max-width: 1200px with align-self: center to center content and prevent line-length bloat on ultra-wide displays. The layout respects the 'gutter' token (24px) as the baseline unit

Elevation & Depth

Depth is conveyed through a three-level shadow system that mimics the physics of light falling on layered surfaces. Level 1 (Base / Surface): no shadow; the surface is the foundation. Level 2 (Standard Card): box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.19), 0 2px 4px -1px rgba(0, 0, 0, 0.12); used on cards, input fields, and standard containers. Level 3 (Elevated / Modal): box-shadow: 0 -12px 10px -4px rgba(0, 0, 0, 0.06), 0 -20px 25px -8px rgba(0, 0, 0, 0.16), 0 20px 10px -5px rgba(0, 0, 0, 0.08), 0 10px 25px -5px rgba(0, 0, 0, 0.19); used on modals, floating panels, and high-priority overlays

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are used strategically to soften the dark, technical aesthetic without sacrificing clarity. Buttons and primary CTAs use rounded.lg (1rem / 16px) for a modern, approachable feel; input fields and secondary containers use rounded.DEFAULT (0.5rem / 8px) for a more utilitarian appearance; cards and modals use rounded.md (0.75rem / 12px) as a middle ground. Badges and chip elements use rounded.full (9999px) to create a pill-shaped appearance that draws the eye and signals importance. The rationale: larger radii (lg, full) are reserved f

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses backgroundColor: rgb(20, 117, 225) (#1475e1), textColor: rgb(255, 255, 255), padding: 10px 20px, height: 44px, rounded: 1rem, and fontWeight: 600. On hover, the background shifts to #0d5ab8 (a darker blue) with a transition: background-color 0.2s ease. On active/click, the background darkens further to #0a4590 and applies transform: scale(0.98) for tactile feedback. Button-secondary uses a transparent background with a 1px solid border in the primary color and the same text color; on hover, it applies backgroundColor: rgba(20, 117, 225, 0.08) without changing the border. All buttons use the label-md typography (14px, 600 weight) and are vertically centered within their 44px height.

Containers & Surf

Do's and Don'ts

**Do**

• Do use the primary blue (#1475e1) exclusively for CTAs and focus states—it is the brand's signature accent and must remain visually distinct.
• Do maintain the 3vw horizontal padding on all screen sizes to ensure consistent breathing room and prevent content from feeling cramped.
• Do apply the 200ms transition duration (transition: background-color 0.2s ease) to all interactive elements for consistent, predictable feedback.
• Do use the surface-container stack (surface-container-low through surface-container-highest) to create visual hierarchy without relying solely on shadows.
• Do pair Proxima Nova with negative letter-spacing (-0.02em to -0.03em) on headings to reinforce the precision aesthetic and improve scannability.

**Don't**

• Don't use secondary (#ff5500) or tertiary (#f90016) colors on primary CTAs—reserve them for alerts, status indicators, and secondary actions only.
• Don't apply border-radius: 0 to any interactive element; the brand requires at least rounded.DEFAULT (0.5rem) to maintain the modern, approachable tone.
• Don't exceed a 0.3s transition duration on hover/focus states; anything slower feels sluggish and undermines the 'precision' aesthetic.
• Don't use system fonts (system-ui, -apple-system) as a fallback for Proxima Nova; always include the full font stack: proxima-nova, ui-sans-serif, -apple-system, system-ui, sans-serif.
• Don't apply text-shadow or text-stroke to body text; reserve these techniques for small labels (label-sm) over busy backgrounds where legibility is at risk.