<!--
ROLE: You are a senior product designer + frontend engineer pair.
TASK: Treat the DESIGN.md below as the SINGLE SOURCE OF TRUTH for visual style.
Every component you produce in this codebase must:
  • Reuse the color tokens declared in YAML frontmatter (no ad-hoc hex values)
  • Use the typography scale (display / h1 / h2 / body / label / mono) verbatim
  • Match the radius scale (button / card / pill) to the named tier
  • Honor the elevation table for shadows
  • Respect the motion section (durations, easings, reduced-motion)
  • Pass the contrast pairs in the accessibility section
INPUT: Project files at ${CWD}.
OUTPUT: Code, not paragraphs. Quote the relevant section number when you cite a token (e.g. "per §3 Typography Rules").
PRINCIPLE: A token used once is a one-off; a token used three times is a system. Prefer system fidelity over local cleverness.
-->

---
name: Devolver Digital
tagline: "Indie game publishing with a dark, irreverent editorial voice."
updated_at: 2026-08-05T01:54:31.177Z
published_at: 2026-08-05T01:54:31.177Z
author: webdesignhot
source_url: https://www.devolverdigital.com/
spec: webdesignhot/0.2
profile: catalog
quality: curated
featured: false
categories: [gaming, media]
tags: [gaming, indie, publisher, editorial, irreverent]
preview_swatch: ["#080808", "#f04a3a", "#ffffff"]
related: [gog, itch-io, bandai-namco]
description: "Devolver Digital treats a game publisher site like a sharp editorial channel: near-black space, monospaced support text, bold game art, and deliberately eccentric copy. The system should preserve that attitude while keeping game titles, release information, platforms, and buying paths usable."

aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-soft
  border: border

colors:
  bg: "#080808"
  surface: "#151515"
  text: "#ffffff"
  brand: "#f04a3a"
  on-brand: "#ffffff"
  border: "#343434"
  text-soft: "#b7b7b7"
  border-soft: "#242424"
  accent-yellow: "#f2d13d"

typography:
  display:
    family: "Rubik, system-ui, -apple-system, sans-serif"
    weights: [500, 600, 700]
  body:
    family: "Roboto Mono, ui-monospace, SFMono-Regular, monospace"
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 80, weight: 700, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-lg:      { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h1:              { size: 40, weight: 700, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h2:              { size: 32, weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h3:              { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h4:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

components:
  button-primary: { bg: brand, text: on-brand, padding: '10px 16px', radius: 8 }
  button-ghost:   { bg: transparent, text: text, border: border, padding: '10px 16px', radius: 8 }
  card:           { bg: surface, border: border, radius: 12, padding: 24 }
  input:          { bg: bg, border: border, text: text, radius: 8, padding: '8px 12px' }

lineage:
  summary: "Recorded from the current Devolver Digital public site during the 2026-08-05 catalog audit."
  influences:
    - name: "Devolver Digital public site"
      role: "Source for dark editorial canvas, game publisher framing, Rubik/Roboto Mono pairing, and deliberately irreverent content rhythm."
      url: https://www.devolverdigital.com/
---

## 1. Visual Theme & Atmosphere

Devolver Digital treats a game publisher site like a sharp editorial channel: near-black space, monospaced support text, bold game art, and deliberately eccentric copy. The system should preserve that attitude while keeping game titles, release information, platforms, and buying paths usable. The public composition should be recognizable in a first viewport, then become predictable when a user starts a task. Keep the primary product, service, project, or artifact visible instead of replacing evidence with abstract decoration.

**Key Characteristics**
- A clear primary action
- A stable content hierarchy
- Readable metadata
- Intentional surface contrast
- Responsive media treatment
- Text equivalents for visual state

## 2. Color Palette & Roles

Use near-black `#080808` for the publishing canvas and white for primary copy. Normalize the sampled gray CTA to a vivid `#f04a3a` editorial action so release and game discovery do not disappear into monochrome. Yellow may annotate events or absurdist editorial moments, but it must remain labeled. Keep surfaces only slightly lighter than the page so the art and copy do the expressive work.

Use color roles consistently: background for the page ground, surface for grouped content, text for reading, brand for the primary action, border for structure, and semantic colors for states with text labels. Preview swatches show the canvas, brand action, and primary reading color.

## 3. Typography Rules

Rubik is the sampled display family and Roboto Mono is the sampled body family. The contrast is part of the voice: game titles and editorial statements can be heavy and compact, while release dates, platform labels, and technical metadata feel like a terminal note. Avoid using the mono face for long marketing paragraphs at small sizes.

Suggested hierarchy: display-hero for the first promise, display-lg for a major section, h1 for the page task, h2 for grouped content, h3 for cards, body-lg for introductions, body for explanations, body-sm for metadata, label for controls, and caption for timestamps. Keep tracking at zero unless the source evidence requires otherwise.

## 4. Component Stylings

Use red filled actions for game or store destinations, white outline actions for trailers and details, and mono text links for editorial navigation. Game cards need image, title, release/platform data, and a direct action. News cards can use a date, label, and headline with irreverent copy, but must not hide the destination. Video uses a static poster and explicit controls.

Treat controls as a system: every filled action needs hover, pressed, disabled, and focus states; every card needs a stable content order; every input needs a label and error state. Use familiar icons inside tool buttons and give unfamiliar icons a tooltip.

## 5. Layout Principles

Use a dark 1280px canvas with editorial bands that can break the strict grid when the game artwork deserves space. A 12-column release grid supports two or three games at desktop, while mobile becomes a single chronological stream. Keep 16/24px internal gaps and 64/96px bands. Use readable text blocks over the dark surface instead of placing body copy over noisy art.

Prefer full-width bands with constrained inner content over decorative nested cards. Stable aspect ratios, explicit grid tracks, and fixed control dimensions keep media and labels from shifting as content loads.

## 6. Shapes & Radius Scale

Use 0/2px for mono labels, 8px for actions and fields, 12px for game cards, and 16px for featured release panels. Pills are rare and reserved for platform/status. Slightly square geometry supports the poster and zine-like publishing voice.

Keep the radius scale intentional: micro controls, standard controls, comfortable cards, relaxed feature panels, and pills only for true categorical selectors. A rounded rectangle should communicate an action or grouped item, not decorate every section.

## 7. Depth & Elevation

Near-black bands and art crops establish depth. Selected cards use a red outline; media overlays use a black scrim and a medium shadow. Keep the layout flat enough that the editorial joke or game image remains the focal point. Do not use glass effects.

Elevation should explain interaction or layering. If contrast, spacing, and a border are sufficient, do not add a shadow. Every overlay needs a scrim, a clear title, an escape path, and focus restoration.

## 8. Interaction & Motion

Use 150ms for controls, 240ms for menu and card feedback, and 320ms for intentional editorial reveals. Avoid automatic ticker motion and never force a trailer to play. Reduced motion leaves the poster, headline, and final selection visible without transitions.

Use motion to confirm an action, expose a relationship, or orient the user. Do not use looping motion to manufacture attention. Make the final state available without animation and honor reduced-motion preferences.

## 9. Accessibility & A11y

Use white text on near-black and verify the normalized red action with white labels. Mono text needs sufficient size and line height. Game art, trailers, and absurdist editorial images require meaningful alternatives. Use visible focus outlines that do not rely on red alone; all release and platform state must be written.

Use semantic landmarks, one logical heading order, keyboard-operable controls, and text alternatives for status. Test focus against every surface, including imagery, selected states, dialogs, and disabled-looking controls. Do not use color as the only error, progress, rating, or selection signal.

## 10. Responsive Behavior

At 640px, stack release stories and keep the game title above its artwork action. At 1024px, reduce secondary editorial modules before shrinking body text. At 1280px, allow the larger asymmetric game art bands. Keep 44px controls and stable poster ratios.

Responsive changes should reflow tasks rather than merely scale the desktop composition. Preserve the first useful action, the content subject, and the state explanation at every breakpoint. If a row cannot fit, group it under a labeled disclosure instead of clipping text.

## 11. Content & Voice

Use dry, irreverent copy where it helps the brand, but keep factual game information literal. “Play the game”, “Watch trailer”, and “Read the announcement” should remain unmistakable. Empty states can be playful in tone but must still offer a genre, game, or release path.

Microcopy should state the object, action, and consequence. Keep empty states useful, error messages recoverable, and confirmations specific. Avoid claims that cannot be understood or verified from the surrounding interface.

## 12. Dark Mode & Theming

This is a dark-first system. Define light surfaces separately if needed; do not invert the red, images, or mono metadata automatically. Focus, warning, and release states must remain distinguishable from the red editorial action.

Theme tokens must cover background, surface, text, muted text, border, primary action, primary foreground, focus ring, and semantic states. A theme toggle should preserve position and announce the current mode; never invert imagery or evidence blindly.

## 13. Lineage & Influences

Devolver borrows from independent magazine design, poster culture, and irreverent game publishing. The near-black ground makes the game art and headline feel like a printed spread, while mono metadata adds a production-room edge. It rejects generic publisher polish but retains a disciplined release catalog underneath.

The lineage is a design rationale, not a claim that the source site uses every implementation token in this file. The sampled source URL and recorded production observations remain the authority for brand-specific decisions.

## 14. Do's and Don'ts

**Do**
- Let editorial tone support discovery.
- Keep release facts literal.
- Use red for actions.
- Show platforms beside titles.
- Use posters before video.
- Keep mono metadata readable.
- Make jokes secondary to tasks.
- Preserve a flat art-led composition.

**Don't**
- Do not hide the game title in a joke.
- Do not use red for every alert.
- Do not autoplay trailers.
- Do not use tiny mono copy.
- Do not put body text over noisy art.
- Do not make cards look like generic SaaS.
- Do not rely on tone for status.
- Do not remove keyboard controls.

## 15. Agent Prompt Guide

### Quick Color Reference

- Background: use the sampled canvas token.
- Foreground: use the sampled reading token.
- Primary: use the brand action token.
- Surface: use the grouped-content token.
- Border: use the quiet structural divider.
- Focus: use a high-contrast visible ring.

### Example Component Prompts

- Create a Devolver-like dark release page with mono metadata, a sharp game headline, poster art, and a red action.
- Design an indie game card with title, platform, release state, trailer poster, and direct play/store action.
- Build a dark editorial announcement with date, label, headline, and a readable factual summary.
- Create a release filter using square controls and visible platform labels.

### Iteration Guide

1. Check mono text size on mobile.
2. Ensure jokes never replace task labels.
3. Test red action contrast.
4. Freeze motion under reduced motion.
5. Keep poster art recognizable.
6. Remove decorative glass or excess elevation.