RAWG

Overview

RAWG is a developer-centric video game database and API platform serving studios, publishers, and gaming enthusiasts with 500,000+ games across 50 platforms. The design system embodies 'Data-Driven Minimalism'—a philosophy that prioritizes information density and precision over decorative flourish. The aesthetic is deliberately austere: deep charcoal surfaces (#151515), high-contrast white text (#ffffff), and strategic accent greens (#3f873f, #2cb351) that signal actionable CTAs and data highlights. The UI evokes the clarity of a command-line interface married to modern web polish, creating an environment where complex gaming metadata feels navigable and trustworthy.

The brand voice is authoritative yet approachable: technical without being gatekeeping, confident without arrogance. Vocabulary leans toward precision ('database', 'API key', 'machine learning recommendations') paired with conversational warmth ('Learn what the RAWG games database API can do and build something cool with it'). The tone avoids hype; instead, it demonstrates capability through concrete numbers (500,000+ games, 50 platforms) and clear value propositions. Example sentence in brand voice: 'There are two types of companies: hoarders and givers. RAWG is the largest video game database and game discovery service. And we are gladly sharing our 500,000+ games, search, and machine learning recommendations with the world.'

Colors

The color system operates on a 'high-contrast, accent-driven' model designed for rapid information scanning and clear call-to-action hierarchy. Surface colors form a deep, near-black stack: surface (#151515) as the primary canvas, surface-dim (#0e0e0e) for recessed areas, and surface-container variants (#161616 to #2a2a2a) creating subtle depth without sacrificing legibility. All text defaults to on-surface (#ffffff) for maximum contrast (WCAG AAA compliant at 21:1 ratio). Primary accent green (#3f873f) is reserved exclusively for interactive elements—buttons, links, and focus states—ensuring users instantly recognize clickable regions. The secondary accent blue (#005ff9) provides a supporting highlight for secondary actions and data visualization. Tertiary green (#529f44, #6abf4b, #7dd235

Typography

The type system pairs Inter (geometric, modern, highly legible at small sizes) for UI labels, headlines, and data-dense contexts with system fonts (-apple-system, Segoe UI, Roboto) for body copy, ensuring optimal rendering across platforms. Display (60px, 800 weight, -0.04em tracking) anchors hero sections with maximum visual impact; headline-lg (40px, 700 weight) breaks major sections; body-lg (18px, 400 weight, 28px line-height) carries narrative copy with generous leading for readability over dark backgrounds. Label-md (14px, 500 weight) is applied to buttons and form labels with 0.01em tracking for precision. A critical treatment: apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) to any small label (label-sm, 12px) overlaid on busy game imagery or gradient backgrounds to ensure legibility

Layout

The layout operates on a 12-column grid with a max-width of 1280px, using fluid margins at smaller breakpoints (gutter: 24px on desktop, 16px on tablet, 12px on mobile). The spacing scale is semantic: lg (40px) separates major sections (hero from feature blocks), md (24px) divides card content and form groups, sm (12px) creates breathing room within components. Container max-widths range from 960px to 1040px depending on content type, ensuring text never exceeds 75 characters per line for optimal reading. White-space is used aggressively—the hero section pairs a 60px headline with 28px body copy and 40px section separation, creating visual rest between information-dense blocks. The layout rhythm reflects the brand's data-first philosophy: generous margins around text, tight padding within

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts rather than dramatic layering. Level 1 (Base): surface (#151515) with no shadow, establishing the primary canvas. Level 2 (Standard Card/Hover): surface-container (#181818) with box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), used for cards, dropdowns, and interactive elements. Level 3 (Elevated/Modal): surface-container-high (#1f1f1f) with box-shadow 0 8px 24px rgba(0, 0, 0, 0.25), reserved for modals, overlays, and primary CTAs. Buttons receive a subtle glow effect (box-shadow: 0 0 20px 0 hsla(0, 0%, 100%, 0.2)

Shapes

The shape philosophy is 'Precision-Driven Pragmatism'—rounded corners are used sparingly and purposefully, never decoratively. Buttons and primary CTAs use lg (1rem / 16px) border-radius, creating a modern, approachable feel while maintaining clarity. Cards and containers use md (0.75rem / 12px) for subtle softness without sacrificing data-dense layouts. Input fields and small UI elements use DEFAULT (0.5rem / 8px) for minimal visual weight. Badges and pills use full (9999px) for maximum roundness, signaling non-interactive status indicators. The rationale: larger radius values (lg, xl) are re

Components

Action Elements Buttons are the primary interaction mechanism and receive the most visual emphasis. button-primary uses primary green (#3f873f) with 48px height, 24px horizontal padding, and lg border-radius (16px). The glow effect (box-shadow: 0 0 20px 0 hsla(0, 0%, 100%, 0.2)) creates a subtle halo that reduces on hover to 0.1 opacity, signaling state change within 200ms. button-secondary uses a 2px white border on transparent background, maintaining equal visual weight for secondary actions. Both buttons use Inter label-md (14px, 500 weight) for consistency. Transition timing is 300ms for background-color and 200ms for box-shadow, creating responsive but not jarring feedback.

Containers & Surfaces Cards (card component) use surface-container (#181818) with md border-radius (12p

Do's and Don'ts

**Do**

• Do use primary green (#3f873f) exclusively for CTAs, focus states, and interactive affordances—never for decorative elements or backgrounds.
• Do maintain at least 21:1 contrast ratio (WCAG AAA) between text and background; test all color combinations on #151515 and #ffffff.
• Do apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) to small labels overlaid on game imagery or gradients to ensure legibility.
• Do use Inter for all UI labels, buttons, and headlines; reserve system fonts for body copy to optimize rendering across platforms.
• Do limit transitions to 200–300ms for button states and 300ms for card hover effects; avoid animations longer than 500ms unless explicitly interactive.
• Do use the full spacing scale (xs, sm, md, lg, xl) consistently; never invent arbitrary spacing values outside the defined tokens.

**Don't**

• Don't use primary green (#3f873f) for body text, backgrounds, or decorative elements—reserve it exclusively for interactive affordances.
• Don't apply rounded corners larger than lg (16px) to data containers or cards; keep them visually efficient with md (12px) or DEFAULT (8px).
• Don't use shadows darker than rgba(0, 0, 0, 0.25) or lighter than rgba(0, 0, 0, 0.06); the system uses only three defined elevation levels.
• Don't introduce new accent colors outside the defined palette (primary green, secondary blue, tertiary green); the system is intentionally limited to maintain clarity.
• Don't apply text-shadow to body copy or large headlines; reserve it only for small labels over complex backgrounds.
• Don't use font weights outside the defined set (400, 500, 600, 700, 800); hierarchy is conveyed through size and spacing, not weight proliferation.