Switch between the rendered Visual preview and the Raw DESIGN.md.
Astrocade embodies a bold, vibrant gaming aesthetic with a dark, immersive foundation that celebrates playful energy and digital culture. The design balances a deep, mysterious darkness with striking neon accents—hot pinks, electric purples, and warm golds—creating an atmosphere of excitement and discovery. This is a modern gaming platform designed for visual impact, where high contrast ensures readability and accessibility while the vivid accent colors draw attention to interactive elements and highlight featured content. The overall mood is contemporary, energetic, and welcoming to gamers of all levels, with typography and spacing that emphasizes clarity and ease of navigation through expansive game galleries.
Key Characteristics
#090214, #0A0A0A) creating immersive gaming environment#090214): Primary background color for main surfaces, navigation bars, and deep immersive areas. Establishes the dark gaming aesthetic.#0A0A0A): Secondary dark neutral for text, subtle overlays, and contrast layering.#FF499B): Primary vibrant accent for call-to-action highlights, featured game indicators, and interactive emphasis.#8E24FF): Secondary accent for alternative interactive states, hover effects, and visual hierarchy breaks.#593B7E): Tertiary accent for subtle interactive indicators and secondary emphasis states.#9333EA): Quaternary accent for decorative elements and accent variations.#D0B460): Accent for premium or featured content, creating warmth against cool darks.#BC7430): Accent variant for secondary featured content and visual interest.#A0A8B2): Interactive state indicator for hover and focus states, representing interactivity without overwhelming.#FFFFFF): Primary interactive text and light elements for maximum contrast on dark backgrounds.#E5E5E5): Primary neutral for borders, dividers, and subtle UI separators. Most frequently used for subtle structure.#CCCCCC): Secondary neutral for less critical borders and disabled states.#000000): Maximum contrast for critical text and dominant interactive elements.#1A1A1A): Soft dark neutral for subtle backgrounds and tertiary text.#E5E5E5): Border color for cards and containers, creating subtle definition without harsh separation.#090214): Primary surface background establishing the core brand atmosphere.#F59E0B): Warning state indicator for cautionary information and alerts.#FF2424): Primary error state for critical failures and destructive actions.#CC000C): Secondary error state for alternative error presentations.Primary: Google Sans with fallback stack: 'Google Sans', 'Roboto', 'Helvetica Neue', sans-serif
Secondary: Google Sans (consistent throughout system). Fallback: 'Roboto', 'Helvetica Neue', sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | Google Sans | 32px | 900 | 40px | 0px | Large hero headlines and page titles |
| Heading 1 | Google Sans | 28px | 900 | 36px | 0px | Section headings and major titles |
| Heading 2 | Google Sans | 20px | 900 | 20px | 0px | Subsection titles and card headers |
| Heading 3 | Google Sans | 16px | 900 | 24px | 0px | Minor headings and emphasis text |
| Body Large | Google Sans | 16px | 400 | 24px | 0px | Main content text and body copy |
| Body Regular | Google Sans | 12px | 500 | 19.2px | 0px | Default body text, descriptions, captions |
| Button Primary | Google Sans | 20px | 900 | 32px | 0px | Large call-to-action buttons |
| Button Secondary | Google Sans | 12px | 500 | 19.2px | 0px | Standard action buttons and controls |
| Link | Google Sans | 16px | 400 | 24px | 0px | Inline and standalone links |
| Caption | Google Sans | 12px | 400 | 16px | 0px | Metadata, timestamps, and helper text |
| Code | Google Sans | 12px | 500 | 19.2px | 0px | Code blocks and monospace content |
Primary Button (Large, Bold CTA)
rgba(0, 0, 0, 0) (transparent with colored text overlay or gradient)#FFFFFF20px9000px 16px 0px 4px (asymmetric for icon accommodation)56px247px (typical; can be flexible)9999px (fully rounded pill shape)0px none #E5E5E532pxnone0.8, background tint with accent color overlay0.6, slight scale reduction to 0.980.4, cursor not-allowedSecondary Button (Standard Action)
rgba(0, 0, 0, 0) (transparent)#FFFFFF12px50016px 16px 16px 16px56px247px (typical; can be flexible)16px1px solid rgba(0, 0, 0, 0) (no visible border, space reserved)19.2pxnonergba(255, 255, 255, 0.1), text remains #FFFFFFrgba(255, 255, 255, 0.2), slight inset shadow0.5, cursor not-allowedGhost Button (Icon / Minimal)
rgba(255, 255, 255, 0) (fully transparent)#FFFFFF16px4000px 0px 0px 0px (no padding for compact icon buttons)28px28px9999px1px solid rgba(255, 255, 255, 0) (reserved space)24pxnonergba(255, 255, 255, 0.15), slight scale to 1.1rgba(255, 255, 255, 0.25), scale to 0.950.3, cursor not-allowedCard Variant 1 (Featured Game)
rgba(255, 255, 255, 0) (transparent, image-driven)#0A0A0A16px4000px 0px 0px 0px325.203px194px16px1px solid rgba(255, 255, 255, 0) (reserved for interactive state)24pxnone1px solid #FF499B, slight scale 1.02, shadow 0px 4px 16px rgba(255, 73, 155, 0.2)2px solid #FF499B, outline noneCard Variant 2 (Gallery Item)
rgba(0, 0, 0, 0) (transparent with image background)#0A0A0A16px4000px 0px 0px 0px288px192px16px0px solid #E5E5E5 (no visible border)24pxnone1px solid #E5E5E5, shadow 0px 8px 24px rgba(0, 0, 0, 0.4)2px solid #FF499B, outline-offset 2pxText Input / Form Field
#FFFFFF#0A0A0A12px40012px 16px44px8px1px solid #E5E5E519.2pxnone2px solid #8E24FF, background #FFFFFF, box-shadow 0px 0px 0px 3px rgba(142, 36, 255, 0.1)2px solid #FF2424, background #FFFFFF, box-shadow 0px 0px 0px 3px rgba(255, 36, 36, 0.1)#F3F4F6, border 1px solid #CCCCCC, color #A0A8B2, cursor not-allowed#A0A8B2, font-style italicCheckbox / Radio Button
#FFFFFF2px solid #E5E5E54px (checkbox) or 9999px (radio)20px × 20px#8E24FF2px solid #8E24FF#FFFFFF0px 0px 0px 3px rgba(142, 36, 255, 0.2)2px solid #8E24FF, cursor pointerPrimary Navigation Bar
#090214#0A0A0A (overridden by link color)16px4000px 0px 0px 0px (padding applied per menu item)auto (typically 64px-80px)0px0px solid #E5E5E524pxnone#FFFFFF, padding 16px 20px, border-bottom 3px solid transparent#FF499B, border-bottom 3px solid #FF499B#FF499B, border-bottom 3px solid #FF499B, font-weight 600Inline Link (Standard)
rgba(0, 0, 0, 0)#0A0A0A16px4000px 0px 0px 0px20pxauto0px0px solid #E5E5E524pxnoneunderline (1px solid)#8E24FF, text-decoration remains underline#593B7E2px solid #8E24FF, outline-offset 2pxLink Button (CTA-style)
rgba(0, 0, 0, 0)#FFFFFF12px50016px 16px 16px 16px56px247px (typical)16px1px solid rgba(0, 0, 0, 0)19.2pxnonenonergba(255, 255, 255, 0.15), color #FFFFFFrgba(255, 255, 255, 0.25)Base Unit: 4px
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px
Usage Context:
Max Container Width: 1440px (typical for modern gaming platform)
Column Strategy: 12-column grid at desktop, 8-column at tablet, 4-column at mobile
Horizontal Margins: 20px (mobile), 32px (tablet), 40px (desktop)
Gutter Width: 24px between columns
Section Patterns:
100vw) or contained with 40px margins32px - 40px padding24px gutter, 4-5 columns desktop, 2-3 tablet, 1 mobile#090214 background with 40px horizontal paddingAstrocade embraces generous whitespace to create visual breathing room and reduce cognitive load. Content-rich areas (game galleries) use 24px gutters to maintain clarity without harsh separation. Between major sections, 32px - 48px spacing prevents content from feeling cramped. Navigation and hero areas leverage full-width dark backgrounds to create visual anchors, with internal padding (16px - 20px) maintaining comfortable tap targets and text margins. The design avoids visual clustering; each major section stands as a distinct, clearly separated module.
| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow, box-shadow: none | Backgrounds, neutral cards, base surfaces |
| Raised (L1) | box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1) | Standard cards, elevated buttons on hover |
| Lifted (L2) | box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15) | Card hover states, dropdown menus |
| Floating (L3) | box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.2) | Modals, prominent overlays, featured content |
| Prominent (L4) | box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.3) | Full-screen modals, priority dialogs |
| Accent (Colored) | box-shadow: 0px 4px 16px rgba(255, 73, 155, 0.2) (hot pink example) | Accent-colored cards on hover, featured game indicators |
Shadow Philosophy: Astrocade uses shadows sparingly and purposefully. The dark background (#090214) already provides depth, so shadows are reserved for interactive states and elevation changes that signal affordance. Shadows consistently use black with opacity values (rgba(0, 0, 0, ...)) rather than color-specific shadows, maintaining visual consistency. Accent colors may appear in shadows only for specifically emphasized interactive elements (e.g., featured game cards on hover), creating a clear visual distinction between standard and highlighted content. This restrained approach prevents shadow overload while maintaining a modern, clean aesthetic.
#FF499B) and electric purple (#8E24FF) for all interactive highlights — These are your primary attention-getters and signal interactivity clearly16px padding inside buttons and form inputs — Ensures comfortable touch targets and readability#090214, #0A0A0A) as primary surfaces — This is your brand foundation; use it liberally for immersion and contrast16px border-radius to cards and containers — Creates the signature Astrocade rounded aesthetic without extremes#FFFFFF text on all dark backgrounds — Guarantees 10:1+ contrast and readability9999px radius exclusively for pill-shaped buttons and icon buttons — Maintains visual consistency and clear pattern recognition24px - 32px gaps between card galleries — Prevents visual clustering in image-heavy layouts#F59E0B) and errors (#FF2424) consistently — Users recognize these across platforms44px height — Violates touch accessibility guidelines16px except for pill buttons — Maintains visual hierarchy and pattern consistency#000000 (#000000) as a text color on #090214 — Insufficient contrast; use #FFFFFF or #E5E5E5 instead12px font size — Reduces readability and accessibility16px - 20px margin for breathing room#D0B460) or bronze (#BC7430) as primary interactive colors — Reserve these for premium/featured state indicators only| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px - 639px | Single column, 1 card per row, 16px margins, stacked navigation |
| Tablet | 640px - 1023px | 2 columns for cards, 24px margins, condensed navigation |
| Desktop | 1024px - 1440px | 4-5 columns for card galleries, 40px margins, full navigation bar |
| Large Desktop | 1441px+ | Max-width container 1440px centered, 5 columns, full spacing |
44px × 44px (maintains iOS/Android accessibility standards)28px × 28px (current spec at L3)44px height (applies padding or pseudo-element expansion)44px minimum (current spec: 56px)192px × 288px (maintains tappability without expanding too large)8px minimum to prevent accidental adjacent tapsNavigation: At mobile breakpoint (< 640px), switch full horizontal navigation to hamburger menu (☰) in top-left corner. Menu panel slides from left with 80vw width, dark background #090214, full-height overlay. Maintain 16px padding on menu items.
Card Gallery:
24px gutter16px gutter, cards scale to available width100% - 32px width (accounts for 16px margins), 16px gutter belowForms: Stack form fields vertically at all breakpoints. Labels remain above inputs. Multi-column layouts collapse to single column below 768px.
Hero/Banner: Full-width at all breakpoints. Font sizes reduce proportionally:
32px (desktop) → 28px (tablet) → 20px (mobile)28px (desktop) → 24px (tablet) → 18px (mobile)Spacing Reduction:
40px → Tablet 32px → Mobile 16px32px → 24px → 16px24px → 16px → 12px#FF499B)#8E24FF)#090214)#0A0A0A)#FFFFFF)#0A0A0A)#E5E5E5)#CCCCCC)#F59E0B)#FF2424)#D0B460)Always nest component interactivity within dark backgrounds — Default surfaces are #090214 or #0A0A0A. All interactive elements (buttons, links, cards) appear on top with white or hot pink text.
Button styling: Use asymmetric padding for primary large buttons — Primary buttons use padding: 0px 16px 0px 4px with 20px font-weight 900; secondary buttons use symmetric padding: 16px 16px 16px 16px with 12px font-weight 500.
Border radius: 16px for cards, 9999px for pill buttons — No radius between these extremes unless explicitly designing a component variant. Icon buttons are always 9999px.
Card hover: Add subtle shadow and border color on interaction — Apply box-shadow: 0px 4px 16px rgba(255, 73, 155, 0.2) and border 1px solid #FF499B on card hover to signal interactivity without jarring visual changes.
Typography: Google Sans throughout, with weight 900 for all headings — Display through Heading 3 use weight 900. Body, links, buttons, and captions vary (400, 500, 900) but all use Google Sans.
Form inputs: 56px height, 16px padding, light background — All inputs/buttons use height: 56px, with form fields having #FFFFFF background and 1px solid #E5E5E5 border.
Spacing in galleries: Use 24px gutter between cards — Maintain consistent visual rhythm with gap: 24px in card grids. Reduce to 16px on tablet, 12px on mobile.
Navigation bar: Full-width #090214 with white text links — Nav background always #090214. Links are #FFFFFF with border-bottom underline appearing on hover/active. Use 16px font-weight 400.
Contrast everywhere: White text on dark, dark text on light — Never deviate from #FFFFFF on #090214, and #0A0A0A on #FFFFFF. Maintain minimum 4.5:1 ratio for WCAG AA compliance.
Accents break the pattern intentionally — Hot pink and electric purple exist to highlight premium content, interactive states, and primary CTAs. Use sparingly; they should appear on < 20% of UI elements to maintain impact and prevent visual chaos.