BC.GAME

Overview

BC.GAME is a provably fair crypto casino platform that merges high-octane gaming energy with dark-mode minimalism. The aesthetic is 'Neon-Brutalism'—a collision of stark charcoal surfaces (#232626) with electric accent colors (primary green #24ee89, secondary gold #fbd765, tertiary orange #ef9e3f) that command attention on CTAs, wins, and status indicators. The brand serves crypto-native players who demand speed, transparency, and visual clarity in a 24/7 trading-like environment. The UI evokes a sense of controlled chaos: calm, professional typography anchors the interface while vibrant accent colors pulse with urgency and opportunity.

Voice and personality are direct, confident, and slightly irreverent—never patronizing. The copy is terse and action-oriented: 'Sign Up,' 'Live Support,' 'Recent Big Wins.' Vocabulary leans into gaming vernacular ('Crash,' 'Vault,' 'Provably Fair') and crypto terminology without jargon-dumping. Example sentence in brand voice: 'Your 0.5 BTC crash multiplier hit 47.3x—withdraw now or let it ride.'

Colors

The color system is built on a dark-first philosophy with strategic neon accents. **Surface Stack**: The base is #232626 (surface), with a dim variant at #1a1d1d for recessed areas and a bright variant at #323738 for elevated surfaces. Container layers progress from #0f1212 (surface-container-lowest, for deeply nested UI) through #3a4142 (surface-container-highest, for modals and overlays). On-surface text is pure white (#ffffff) for maximum contrast; on-surface-variant is #b3bec1 for secondary text and disabled states.

**Primary (Accent)**: #24ee89 is the signature brand green—used exclusively on primary CTAs ('Sign Up'), active states, success badges, and brand-critical interactions. It commands 100% of user attention and must never be used for passive UI. On-primary is pure black (#000

Typography

The type system uses **avertastd** (a custom geometric sans-serif) as the single typeface family, paired with fallback ui-sans-serif. Weight hierarchy is binary: 400 (regular) for body copy and 800 (ultra-bold) for all headings, labels, and CTAs. This creates visual punch and clarity in a dark environment where weight contrast is more legible than size alone.

**Display** (60px, 800, -0.04em letter-spacing) is reserved for hero headlines like 'JOIN THE UNTAMED.' **Headline-lg** (40px, 800, -0.02em) anchors section titles. **Headline-md** (28px, 800) is used for subsection headers. **Title-lg** (20px, 800) labels card titles and modal headers. **Body-lg** (18px, 400) and **Body-md** (16px, 400) carry descriptive copy and game descriptions. **Label-md** (14px, 800, 0.01em) is the workhorse f

Layout

The layout uses a **12-column fluid grid** with a max-width of 1280px (container-max). On mobile, the grid collapses to 4 columns; tablet uses 8 columns. Gutter spacing is fixed at 24px ({spacing.gutter}) between columns and sections.

**Section rhythm** follows a predictable cadence: hero (full-bleed, no gutter), then lg spacing (40px, {spacing.lg}) between major sections (Recent Big Wins, BC Originals, Slots, Live Casino). Within sections, cards use md spacing (24px, {spacing.md}) for padding and sm spacing (12px, {spacing.sm}) for gaps between items in a grid. The sidebar on desktop uses a fixed 200px width with lg spacing (40px) for menu items.

**White-space philosophy**: Negative space is minimal but intentional. The dark background (#232626) acts as a visual container, so cards and

Elevation & Depth

Depth is achieved through a **three-tier shadow system** combined with surface-container layering. **Level 1 (Base)**: No shadow; surface sits directly on #232626 background. **Level 2 (Standard Cards)**: Apply `box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)` ({elevation.md}) with a 1px solid border at {colors.outline-variant} (#4a5456). This creates subtle separation without visual heaviness. **Level 3 (Modals & Overlays)**: Apply `box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25)` ({elevation.lg}) with a 1px border at {colors.outline} (#7a8588). Modals also use a backdrop-filter blur(4px) on the overl

Shapes

The shape philosophy is **'Geometric Precision'**—sharp, intentional corners that reflect the technical nature of crypto and gaming. Radius hierarchy is strict: **sm (0.25rem / 4px)** for small UI elements like pagination arrows and checkbox indicators. **DEFAULT (0.5rem / 8px)** for subtle rounding on inputs and minor components. **md (0.75rem / 12px)** for list items and secondary buttons. **lg (1rem / 16px)** for primary buttons, cards, and input fields—the most common radius in the system. **xl (1.5rem / 24px)** for modals, dropdowns, and elevated containers. **full (9999px)** for badges,

Components

Action Elements **Button-primary** uses {colors.primary} (#24ee89) background with {colors.on-primary} (black) text, 48px height, 24px horizontal padding, {rounded.lg} (1rem), and {typography.label-md} (14px, 800). On hover, transition to {colors.primary-fixed-dim} (#1a9e5c) with `transition: all 0.2s ease-out`. Never add a shadow; rely on color contrast. Example: 'Sign Up' button in header.

**Button-secondary** uses {colors.surface-container-high} (#323738) background with white text, same dimensions as primary. Hover state transitions to {colors.surface-container-highest} (#3a4142). Used for secondary actions like 'Learn More' or 'View All.'

**Button-ghost** has a transparent background with 1px border at rgba(255, 255, 255, 0.1), {colors.primary} text, and 40px height (shorter tha

Do's and Don'ts

**Do**

• Do use {colors.primary} (#24ee89) exclusively for primary CTAs and success states—never for passive UI or backgrounds.
• Do apply {rounded.lg} (1rem) to all interactive surfaces (buttons, cards, inputs) for visual consistency and improved touch targets.
• Do maintain 1px solid borders on all cards and containers using {colors.outline-variant} (#4a5456) to ensure separation in the dark theme.
• Do use {typography.label-md} (14px, 800) for all button text and {typography.body-md} (16px, 400) for body copy—never mix weights within a single component.
• Do apply `transition: all 0.2s ease-out` to all hover states (buttons, cards, inputs) for smooth, predictable interactions.
• Do use {spacing.md} (24px) as the default padding for cards and {spacing.lg} (40px) for section separation to maintain visual rhythm.

**Don't**

• Don't use {colors.primary} (#24ee89) for anything other than primary actions, success states, and brand-critical UI—overuse dilutes its impact.
• Don't apply shadows to buttons or interactive elements; use color contrast and borders instead to maintain visual clarity.
• Don't mix border-radius values within a single component family (e.g., don't use both md and lg on different button sizes).
• Don't use pure white (#ffffff) for backgrounds; always use {colors.surface} (#232626) or a surface-container variant to maintain the dark theme.
• Don't apply text-shadow to body copy; reserve it only for small labels over busy backgrounds (game cards) where legibility is at risk.
• Don't exceed {spacing.lg} (40px) for section margins or {spacing.md} (24px) for component padding—the layout is intentionally dense.