AnkerGames

Overview

AnkerGames is a cinematic game distribution platform that transforms the friction of PC game acquisition into a spectacle-driven experience. The brand serves hardcore gamers and casual players alike, delivering pre-installed, Steam-verified games with a single click. The aesthetic is **Dark Cinematic Maximalism**—a visual language that borrows from AAA game trailers, movie posters, and premium streaming platforms. Every interaction is designed to evoke the thrill of discovering a blockbuster title: dramatic hero imagery, bold accent colors cutting through deep blacks, and smooth transitions that feel like a film edit rather than a UI interaction. The emotional response is one of anticipation and confidence—users feel they're accessing something premium and exclusive.

The brand voice is direct, energetic, and gamer-native. Vocabulary leans into gaming culture ("Own CSF," "Latest Steam build," "Direct download") without being condescending. Tone is confident but never arrogant; the copy celebrates the games, not the platform. Example sentence in brand voice: "Clive Barker's Hellraiser: Revival—first-person horror survival, ready to play after extracting."

Colors

The color system is built on a deep, near-black canvas (#0b1220) that serves as the ultimate neutral backdrop, allowing accent colors to dominate the visual hierarchy. **Primary (#2aa9e0)** is the brand's signature cyan-blue accent—used on all CTAs ("Download Now," "Sign up"), interactive elements, and focus states. It appears frequently but never dominates; instead, it punctuates the interface like a spotlight on a dark stage. **Secondary (#f96854)** is a warm coral-orange reserved for high-energy moments: community badges (Discord, Reddit), alerts, and secondary CTAs. **Tertiary (#10b981)** is a vibrant emerald green used for success states, version badges, and donation/support callouts. The surface stack progresses from #020510 (surface-container-lowest, for deeply recessed elements) th

Typography

The type system uses Inter exclusively, a geometric sans-serif that balances precision with warmth—ideal for both technical game metadata and emotional marketing copy. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section breaks, commanding attention without screaming. Headline-lg (40px, 700 weight) anchors game titles and key messaging; headline-md (28px, 700 weight) structures subsections like "Trending Games." Body-lg (18px, 400 weight) carries descriptive game narratives and long-form copy, while body-md (16px, 400 weight) is the workhorse for UI labels and secondary content. Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.05em tracking) handle metadata, badges, and compact UI. All headlines use -0.01em to -0.04em n

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 hero section spans full-width with a 24px gutter on desktop, collapsing to 16px on tablet and 12px on mobile. Section rhythm is driven by the spacing scale: lg (40px) separates major sections (hero, trending, collections), md (24px) separates card groups and subsections, and sm (12px) separates individual list items. The container max-width of 1280px ensures readability on ultra-wide displays without excessive line lengths. Cards use aspect-ratio: 16/9 on desktop, 2/1 on tablet, and 21/9 on mobile to maintain cinematic proportions while adapting to viewport height. Padding inside cards is consistently 15px 16px 14px (bottom-heavy to anchor text). White-space is generous bu

Elevation & Depth

Depth is conveyed through a layered shadow and border system that mimics cinematic lighting. **Level 1 (Base)**: Surface elements sit on the dark background with no shadow, defined only by a 1px border at rgba(255, 255, 255, 0.07). **Level 2 (Standard Card)**: Cards receive box-shadow: 0 15px 50px -15px rgba(0, 0, 0, 0.7), creating a soft, directional shadow that suggests light from above-left. **Level 3 (Elevated/Hover)**: On hover, shadows deepen to 0 20px 60px -15px rgba(0, 0, 0, 0.8) and borders brighten to rgba(255, 255, 255, 0.16), signaling interactivity without moving the element. **Le

Shapes

The shape philosophy is **Architectural Precision with Cinematic Softness**—sharp enough to feel modern and technical, rounded enough to feel premium and approachable. Buttons use rounded: lg (1rem / 16px) for a balanced, clickable appearance that's neither pill-shaped nor sharp. Cards use rounded: xl (1.5rem / 24rem) to soften their edges and suggest depth, while poster images inside cards use rounded: lg (1rem) to create visual hierarchy. Input fields use rounded: DEFAULT (0.5rem / 8px) for a compact, utilitarian feel that contrasts with the softer cards. Badges and pills use rounded: full (

Components

Action Elements **Button Primary** uses {colors.primary} (#2aa9e0) as background with {colors.on-primary} (white) text, rounded: lg, padding: 12px 24px, height: 48px. On hover, background shifts to #1f8fb8 with box-shadow: 0 8px 24px rgba(42, 169, 224, 0.3) applied over 0.3s cubic-bezier(0.4, 0, 0.2, 1). The arrow icon inside animates with transform: translateX(3px) on hover. **Button Secondary** uses transparent background with {colors.primary} text and a 1px border at rgba(42, 169, 224, 0.5), padding: 8px 16px, height: 40px. On hover, background becomes rgba(42, 169, 224, 0.1) and border brightens to solid {colors.primary}. **Button Accent** (for secondary CTAs like "Join Discord") uses {colors.secondary} (#f96854) with white text, same sizing as primary, and shifts to #e85a45 on hov

Do's and Don'ts

**Do**

• Do use {colors.primary} (#2aa9e0) exclusively for interactive CTAs and focus states—it's the brand's signature accent and should never be diluted or overused on passive elements.
• Do apply text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75) to all headlines overlaid on photographic backgrounds to maintain legibility without reducing image contrast.
• Do use cubic-bezier(0.4, 0, 0.2, 1) easing for all transitions (0.3s–0.4s) to match the cinematic, responsive feel of the platform.
• Do maintain the 1px border at rgba(255, 255, 255, 0.07) on all cards and containers—it defines edges without harsh contrast and reinforces the premium aesthetic.
• Do scale poster images to 1.09 on card hover (desktop only) and deepen shadows; never lift the card vertically, as this breaks the hover state when the cursor moves off the edge.

**Don't**

• Don't use {colors.primary} for backgrounds or large surface areas—it's an accent color meant to punctuate, not dominate. Reserve it for buttons, links, and focus states only.
• Don't apply rounded: full to buttons or cards—use rounded: lg for buttons and rounded: xl for cards to maintain the architectural precision of the system.
• Don't animate blur() or filter properties on hover; rasterize quality drops and poster thumbnails soften. Animate only transform and opacity.
• Don't use box-shadow: 0 0 0 0 on any element—always include a spread radius (e.g., 0 8px 24px) to create directional, cinematic depth.
• Don't override the Inter typeface with system fonts or fallbacks—Inter is the brand's typographic identity and must be loaded via @font-face or Google Fonts link.