Axolot Games Design System

Overview

Axolot Games presents a brutalist, high-contrast digital identity built for a Stockholm-based game development studio. The visual language is deliberately austere: a near-black canvas ({colors.surface-soft}) swallows the viewport while pure red ({colors.brand-red}) erupts at strategic voltage points—the axolotl mascot mark, active navigation states, and page-transition curtains. White ink ({colors.ink}) carries all readable content in crisp PP Neue Montreal, while a monospaced companion face (PP Neue Montreal Mono) handles labeling, indices, and navigational microcopy with mechanical precision.

Brand voltage lives almost exclusively in the red spectrum. The logo mark is rendered in {colors.brand-red}, navigation links shift to red on interaction, and full-screen transition overlays bathe the viewport in red during route changes. This creates a cinematic quality where red functions as both brand signature and temporal marker—something is happening when red fills the screen. The primary interactive surface, by contrast, is stark white ({colors.primary}), creating maximum legibility against the dark field.

The single typography move that defines this system is the dual-family constraint: PP Neue Montreal (a geometric neo-grotesque) handles all human-facing prose at weights never exceeding 400, while its monospaced sibling enforces a technical, index-like voice for metadata, counters, and navigation. There are no bold weights in this system—emphasis comes from scale differential (28px titles vs 12px labels) and color inversion, never from weight.

Shape language is aggressively angular. Buttons carry {rounded.DEFAULT} (0px radius)—they are rectangles, period. The only rounded element in the entire system is the platform badge ({platform-badge}) which uses {rounded.pill} (9999px) to create capsule-shaped tags for Xbox/PS5 indicators. Game card thumbnails use a subtle {rounded.md} (21px) on their bottom corners only, softening just enough to distinguish imagery from the UI chrome around it.

Sub-systems identified: the game portfolio grid (card-based, index-numbered, thumbnail-led), the marquee ticker (monospaced horizontal scroll of studio descriptors), and the cinematic transition system (red diagonal wipes between routes). Each sub-system maintains the core brutalist vocabulary while introducing its own spatial logic.

Key Characteristics:

• Pitch-black canvas ({colors.surface-soft}) with zero gradient or texture—pure flat darkness
• Pure red brand voltage ({colors.brand-red}) reserved for mascot, transitions, and active states
• White primary actions ({button-primary}) with black text—maximum contrast CTAs
• Dual-typeface system: geometric sans for prose ({typography.body-md}), mono for data ({typography.display-lg})
• Zero border-radius on all buttons and containers except platform pills ({component.platform-badge})
• Monospaced navigation links ({typography.nav-link}) at 12px with wide letter-spacing (0.288px)
• Cinematic page transitions using red overlay with diagonal wipe animation
• Grid-based game portfolio with large index numbers ({component.game-card-index}) in mono
• Muted gray ({colors.muted}) for secondary text—never mid-tone, always clearly subordinate

Colors

Brand & Accent

• Primary ({colors.primary} — #ffffff): White. Used for primary button backgrounds, logo wordmark, and the dominant ink color on dark surfaces.
• On Primary ({colors.on-primary} — #000000): Black. Text color on white primary surfaces—buttons, filled containers.
• Brand Red ({colors.brand-red} — #ff0000): Pure red. The axolotl mascot mark, active navigation states, page-transition overlay curtain, and semantic error/accent color.
• Brand Red Dark ({colors.brand-red-dark} — #cc0000): Darker red. Pressed/active state for red-tinted interactions.

Surface

• Canvas ({colors.canvas} — #ff0000): Red. The root background in the pre-assigned schema; in practice, most surfaces default to black with red used for transitional/overlay moments.
• Surface Soft ({colors.surface-soft} — #000000): Pure black. The dominant page background, card surfaces, nav bar ground, cookie bar, footer.
• Surface Strong ({colors.surface-strong} — #161614): Near-black with warm undertone. Thumbnail image placeholders, deeply recessed areas.
• Surface Elevated ({colors.surface-elevated} — #1a1a18): Slightly lighter black. Hover states for dark buttons, raised panels.

Text / Ink

• Ink ({colors.ink} — #ffffff): White. Primary text color for headings, body copy, navigation, and all foreground elements on dark backgrounds.
• Body ({colors.body} — #ff0000): Red. Used selectively for body-level emphasis where red text signals importance or brand presence.
• Muted ({colors.muted} — #8f8f8f): Medium gray. Secondary text—developer attribution, descriptions, footer copy, placeholder content.
• Muted Dim ({colors.muted-dim} — #5a5a5a): Dark gray. Tertiary/de-emphasized text, disabled states, very distant information.
• On Dark ({colors.on-dark} — #ffffff): White. Alias for ink on dark surfaces—maintained for semantic clarity.
• On Surface ({colors.on-surface} — #ffffff): White. Text on any non-canvas surface.

Hairlines & Borders

• Hairline ({colors.hairline} — #333330): Subtle dark gray. Grid divider lines between portfolio columns, faint separators.
• Hairline Strong ({colors.hairline-strong} — #4a4a48): Medium gray. More visible borders, input focus rings, active dividers.
• Border White ({colors.border-white} — #ffffff): White borders. Outlined button variants, decorative white rules.

Semantic

• Link ({colors.link} — #ffffff): White. Default link color, same as ink—links don't call out visually until interacted with.
• Link Active ({colors.link-active} — #ff0000): Red. Active/hover state for links and navigation items—red signals interaction.
• Error ({colors.error} — #ff0000): Red. Aligned with brand red—error messages, validation states.
• Success ({colors.success} — #00ff00): Pure green. Success states (inferred from game-industry convention—not directly observed).

Typography

Font Family

The Axolot Games system runs on two faces from the PP Neue Montreal family, both self-hosted via WOFF/WOFF2 with font-display: swap. PP Neue Montreal Regular (declared as "Regular" in the font-family stack) is the workhorse—a clean geometric neo-grotesque with neutral proportions that carries all body copy, headings, and UI text at a single weight of 400. Its fallback stack is "Arial, Helvetica, sans-serif", ensuring system fonts step in gracefully if the custom face fails to load.

PP Neue Montreal Mono Regular (declared as "Mono") provides the technical counterpoint. This monospaced variant shares the same letterform geometry as its proportional sibling but locks every character to an equal advance width, creating the rhythm of code or terminal output. It handles all navigational links, game card index numbers, marquee ticker text, and metadata labels. The fallback is simply "monospace".

There are no bold, italic, or alternative weights in this system. The entire typographic hierarchy is constructed from weight-400 alone, using size differential (28px → 16px → 12px), color contrast (white → gray → red), and the proportional/monospaced binary to establish order.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.title-lg} | 28px | 400 | 0.9 (25.2px) | 0 | Game card titles ("RAFT"), largest display text | | {typography.title-md} | 24px | 400 | 1.3 (31.2px) | 0 | Section headings, sub-hero titles | | {typography.body-md} | 16px | 400 | 1.5 (normal) | 0 | Body copy, descriptions, button labels | | {typography.body-sm} | 14px | 400 | 1.4 | 0 | Developer attributions, fine print | | {typography.display-xl} | 13px | 400 | 1.3 | 0.288px | Large mono labels, game card indices | | {typography.display-lg} | 12px | 400 | 1.3 | 0.288px | Navigation links, marquee text, micro-labels | | {typography.mono-label} | 13px | 400 | 1.3 | 0.2px | Platform badges, metadata tags | | {typography.button} | 16px | 400 | 1.25 | 0 | All button text | | {typography.nav-link} | 12px | 400 | 1.3 | 0.288px | Top navigation items |

Principles

This system trusts size and color to carry hierarchy, explicitly rejecting weight variation. A 28px white title in {typography.title-lg} commands attention not through boldness but through sheer scale against the black void. Below it, 16px body text in {colors.muted} recedes naturally—no bold/regular contrast needed. When emphasis is required within a text block, the system deploys {colors.brand-red} as an inline highlight (observed in the "GAMES" navigation item and certain headline fragments), turning color into the weight substitute.

The monospaced face operates as a visual metadata layer. When you see {typography.display-lg} at 12px with 0.288px letter-spacing, you're reading structural information—navigation, indexing, categorization—not narrative content. This creates a dual-tone reading experience: the proportional face tells stories (game descriptions, developer names) while the mono face organizes them (card number "01", platform tag "XBOX", nav item "COMPANY").

Letter-spacing is used sparingly but decisively. Only the monospaced roles carry explicit positive tracking (0.2–0.288px), which compensates for the narrow default spacing of monospace glyphs at small sizes and gives the technical text room to breathe. Proportional text uses normal (0) letter-spacing throughout.

Uppercase is the default case for all monospaced text (navigation, labels, indices) and for the main site wordmark "AXOLOT". Body copy and descriptions use sentence case. There is no observed use of italic or small-caps styling anywhere in the system.

Note on Font Substitutes

PP Neue Montreal is a commercial typeface from Pangram Pangram. For open-source implementation, Inter (Google Fonts, variable font available) serves as the closest substitute for the proportional face—it shares the same geometric skeleton, neutral personality, and excellent screen rendering. For the monospaced role, JetBrains Mono or IBM Plex Mono (both on Google Fonts) provide the closest match in terms of letterform geometry and technical character.

Define these CSS variables for substitution:

--font-sans: 'Inter', 'PP Neue Montreal', Arial, Helvetica, sans-serif;
--font-mono: 'JetBrains Mono', 'PP Neue Montreal Mono', monospace;

Layout

Spacing System

• Base unit: 1px (the {spacing.xxs} token). The system works in sub-pixel-precise increments rather than an 8px grid, reflecting the pixel-art-influenced precision of game-industry design.
• Tokens: {spacing.xxs} (1px — hairline thicknesses), {spacing.xs} (2px — tight internal gaps), {spacing.sm} (4px — icon padding, micro-spaces), {spacing.md} (5px — button internal padding), {spacing.base} (6px — compact gaps), {spacing.lg} (7px — standard gaps), {spacing.xl} (8px — comfortable gaps), {spacing.section-md} (15px — most common component padding), {spacing.section-lg} (20px — generous component padding), {spacing.section-xl} (25px — section spacing), {spacing.section} (28px — major section breaks), {spacing.hero-top} (140px — hero top offset pushing content below nav).
• Section padding (vertical): {spacing.section-md} (15px) for card internals, {spacing.hero-top} (140px) for the main content area's top offset.
• Card internal padding: {component.game-card-title} uses {spacing.section-md} {spacing.section-md} {spacing.sm} (15px horizontal, 15px top, 4px bottom). Description text below adds {spacing.section-md} bottom padding. Developer line adds {spacing.lg} (7px) additional bottom space.
• Gutters: The main container sits at 1440px width with {spacing.section-md} (15px) horizontal padding on the nav. Grid columns appear to use ~2–4px gutters (between {spacing.xs} and {spacing.sm}).

Grid & Container

• Max content width: 1440px (hard-coded on main and nav elements).
• Density choice: Marketplace/portfolio density. The game grid packs multiple columns (appears to be 5–6 columns based on the screenshot) with minimal gutter space, prioritizing showcase quantity over editorial breathing room.
• Desktop grid behavior: The portfolio section uses a multi-column masonry-like or uniform grid where each cell contains a game card. Columns are separated by 1px vertical lines ({component.grid-line-vertical}). Cards span full column width. Index numbers (01, 02, 03) sit at the bottom right of each card area, outside the card proper.
• Hero column splits: The visible hero shows a left-heavy layout: game title ("RAFT") and description occupy roughly 40% width on the left, while the remaining 60% holds the game thumbnail and index numbering. The grid lines extend behind all content, creating a graph-paper effect.

Whitespace Philosophy

This system practices controlled compression. Whitespace exists but is measured and purposeful—never airy or luxurious. The 140px hero-top offset creates a dramatic initial void, but once inside the content zone, padding tightens to 15–28px ranges. The black canvas absorbs excess space visually, making tighter spacing feel intentional rather than cramped. It's the whitespace logic of a technical dashboard or a game UI, not a lifestyle magazine.

Header Architecture

[LOGO_MARK(red)] [AXOLOT(wordmark, white, 28px)]  GAME DEVELOPER & PUBLISHER  GAMES(active,red)  COMPANY  CAREERS  [X][YT][IG][DISCORD]
← 1440px max-width, 80px height, transparent bg, 15px horizontal padding →

The nav uses flush-left logo placement (red axolotl icon + white "Axolot" wordmark in {typography.title-lg}), center-weighted primary navigation in {typography.nav-link} (mono, 12px, uppercase, 0.288px tracking), and flush-right social icons in {component.social-icon} (24px, white, circular outlines). The "GAMES" item renders in {colors.brand-red} indicating current section. External links show a small arrow icon.

Hero Section

┌─────────────────────────────────────────────────────────┐
│  (140px top offset - pushes below sticky nav area)       │
│                                                         │
│  RAFT                          │   ┌──────────────────┐ │
│  Raft throws you and your...   │   │                  │ │
│  Developer: Redbeet Interactive│   │  GAME THUMBNAIL   │ │
│                                │   │  (rounded 21px)   │ │
│  ┌────────────┐ ┌────────────┐ │   │                  │ │
│  │STEAM PAGE  │ │GAME SITE   │ │   │                  │ │
│  └────────────┘ └────────────┘ │   ├──────────────────┤ │
│                                │   │  [XBOX] [PS5]  01 │ │
└─────────────────────────────────────────────────────────┘
   ← Card zone (40%) →           ← Thumbnail + meta (60%) →

The hero card shows: title in {typography.title-md} (24px, white), description in {typography.body-md} (16px, {colors.muted}), developer credit in {typography.body-sm} (14px, {colors.muted}), thumbnail image with {rounded.md} (21px) on visible corners, two CTA buttons ({component.button-primary} white filled + {component.button-secondary} transparent with white text), platform badges in {component.platform-badge} (pill shape, mono 13px, white text with circular icon), and a large index number "01" in {typography.display-xl} (13px mono, white) positioned at the bottom right of the column.

Portfolio Grid Section

┌──────┬──────┬──────┬──────┬──────┬──────┐
│      │      │      │      │      │      │
│ RAFT │ ...  │ ...  │ ...  │ RAFT │SCRAP │ ???
│ desc │      │      │      │      │MECH  │
│      │      │      │      │      │      │
│ [img]│      │      │      │      │      │
│ [btn]│      │      │      │      │      │
│   01 │  02  │  03  │ ...  │ ...  │ ...  │
└──────┴──────┴──────┴──────┴──────┴──────┘
  col1   col2   col3   col4   col5   col6
  (1px vertical dividers between all columns)

The grid extends horizontally with 1px {colors.hairline} vertical rules between each column. Each column contains a complete game card stack. Index numbers (01, 02, 03...) anchor the bottom of each column in oversized mono type, acting as wayfinding coordinates.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, no border, {colors.surface-soft} background | Base canvas, nav bar, footer, card surfaces | | 1 — Hairline | 1px {colors.hairline} border or rule | Grid column dividers, subtle separators | | 2 — Border | 1px {colors.hairline-strong} border | Button outlines (secondary variant), focus rings | | 3 — Overlay | Solid {colors.brand-red} or {colors.surface-soft} at 100% opacity | Page transition covers, modal backsplash, cookie bar | | 4 — Cinematic | Animated diagonal wipe with red fill | Route transition animation (keyframe-driven) |

This is a flat-first, color-block depth system. Shadows are entirely absent from the extracted CSS—no box-shadow appears on any element. Elevation is communicated through three mechanisms: (1) color value layering (black → near-black → dark gray for recessed areas), (2) hairline grid lines creating a z-axis illusion through intersection, and (3) solid-color overlay planes for transitions and modals. The red page-transition cover is the deepest element in the system—it literally paints over everything else during route changes, making it the ultimate elevation level.

The philosophy is brutalist literalism: things are either on the surface or they're covering it. There are no soft drop shadows suggesting float, no inner shadows suggesting depression. A button is either the same color as its surroundings (secondary/ghost) or a solid contrasting block (primary/dark). This aligns with the game-industry UI tradition where clarity beats skeuomorphism.

Decorative Depth

The grid line system functions as decorative depth. Vertical 1px lines in {colors.hairline} run the full height of the portfolio section, creating a blueprint/graph-paper effect behind the game cards. These lines don't enclose anything—they're atmospheric, suggesting technical precision and structural thinking. They're the closest thing to ornamentation in an otherwise ruthlessly functional surface.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.DEFAULT} | 0px | All buttons, nav, cards, containers, inputs—default sharp corner | | {rounded.sm} | 4px | Minimal rounding (reserved for future micro-elements) | | {rounded.md} | 21px | Game card thumbnail corners, image containers | | {rounded.lg} | 21px | Same as md—unified image rounding value | | {rounded.pill} | 9999px | Platform badges (Xbox, PS5 capsules), tag elements |

The shape vocabulary is intentionally impoverished. Sharp corners are the default and the norm—this is a rectangular world. The sole exception to sharpness is the 21px radius applied to image/thumbnail containers, which softens photographic content just enough to distinguish it from the hard-edged UI chrome surrounding it. Platform badges go fully pill-shaped (infinite radius) to read as tags rather than buttons, creating a subtle morphological distinction.

No element in the observed design uses {rounded.sm} (4px)—it exists in the token set for completeness and potential future micro-component needs (tooltips, tiny avatars).

Photography Geometry

Game thumbnails and key art render in landscape aspect ratio (approximately 16:9 or 3:2 based on the RAFT thumbnail proportions). Images receive {rounded.md} (21px) border-radius, applied consistently to visible corners. Thumbnails fill their container width completely—no padding between image edge and card edge on the sides. Images sit on {colors.surface-strong} (#161614) background, which shows through if the image has transparency or fails to load.

No avatar shapes, circle crops, or portrait orientations were observed in the screenshot. All imagery is rectangular game promotional art.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The primary call-to-action button. Fills with {colors.primary} (white) background, carries {colors.on-primary} (black) text in {typography.button} (16px, weight 400). Sharp corners ({rounded.DEFAULT}). Internal padding is a compact 5px 8px 4px—slightly more top than bottom to optically center the cap-height of the text. Observed on "Steam page" link in the game card. Has an active variant {component.button-primary-active} which inverts to black background with white text.

{component.button-primary-active} — Pressed/active state for the primary button. Background shifts to {colors.on-primary} (black), text becomes {colors.primary} (white). Maintains identical padding and radius. Implement on :active pseudo-class.

{component.button-secondary} — Ghost/outline-adjacent button style. Transparent background with {colors.ink} (white) text in {typography.button}. Same dimensions and padding as primary (5px 8px 4px). Observed on "Game site" link sitting beside the primary button. Active variant {component.button-secondary-active} shifts text color to {colors.brand-red} (red), signaling interaction without a background fill.

{component.button-secondary-active} — Active state for ghost buttons. Text color transitions to {colors.brand-red}. No background appears—maintains the ghost aesthetic even on press.

{component.button-dark} — Dark-filled button variant. Uses {colors.surface-soft} (black) background with {colors.ink} (white) text. Wider horizontal padding (5px 28px) makes it suitable for standalone CTAs rather than inline pairs. Observed on the cookie bar "Accept" button. Active state {component.button-dark-active} lifts the background slightly to {colors.surface-elevated}.

{component.button-dark-active} — Pressed state for dark buttons. Background lightens minimally to {colors.surface-elevated} (#1a1a18), providing tactile feedback without breaking the dark-surface contract.

{component.cookie-accept-button} — Specialized instance of {component.button-dark} used in the cookie consent bar. Identical styling to button-dark but semantically isolated for the cookie context.

Cards & Containers

{component.game-card} — The fundamental content unit of the portfolio. Black ({colors.surface-soft}) background filling its grid column completely. Contains a vertical stack: title zone, description zone, thumbnail, action bar, index number. No internal border, no shadow—relies on grid lines for lateral separation. Text defaults to {colors.ink} (white) in {typography.body-md}.

{component.game-card-title} — Title zone within a game card. Renders the game name ("RAFT", "SCRAP MECHANIC") in {typography.title-md} (24px, white, weight 400). Padding: 15px 15px 4px—generous horizontal, tight bottom to keep title close to description.

{component.game-card-description} — Descriptive paragraph below the title. Shows the marketing copy ("Raft throws you and your friends...") in {typography.body-md} (16px) colored {colors.muted} (gray). Padding: 0 15px 15px—flush left/right with title, 15px bottom creating breath before the thumbnail.

{component.game-card-developer} — Developer attribution line. "Developer: Redbeet Interactive" in {typography.body-sm} (14px, {colors.muted}). Minimal padding below ({spacing.lg} / 7px) before the thumbnail begins.

{component.game-card-thumbnail} — Image container holding the game's key art or screenshot. Background is {colors.surface-strong} (#161614)—slightly warmer/near-black—to differentiate from the card's pure-black surround. Rounded corners {rounded.md} (21px) on visible edges. No padding—image bleeds to container edges horizontally.

{component.game-card-index} — Large column index number ("01", "02", "03") positioned at the bottom of each grid column, outside/below the card proper. Rendered in {typography.display-xl} (13px, mono, white, 0.288px tracking). Functions as wayfinding coordinate within the grid system. Padding: {spacing.section-md} (15px) on all sides.

Navigation

{component.top-nav} — The global navigation bar spanning 1440px width at 80px height. Transparent background letting the page content (or red transition cover) show through. Contains {component.logo-mark}, {component.logo-wordmark}, nav link group, and social icons. Text color {colors.ink} (white).

{component.nav-link} — Individual navigation item. Text in {typography.nav-link} (12px, mono, uppercase, 0.288px tracking, white). Transparent background, no border. Padding {spacing.sm} {spacing.md} (4px 5px). Observed items: "GAME DEVELOPER & PUBLISHER", "GAMES", "COMPANY", "CAREERS".

{component.nav-link-active} — Current-section navigation item. Identical to {component.nav-link} but text color shifts to {colors.brand-red} (red). The "GAMES" item in the screenshot demonstrates this state.

{component.nav-link-hover} — Hovered navigation item. Text becomes {colors.brand-red} (red), matching the active state visually. Implement on :hover.

{component.logo-mark} — The red axolotl mascot icon at the far left of the nav. Size approximately 48×48px. Color {colors.brand-red} (pure red). Custom SVG graphic.

{component.logo-wordmark} — "Axolot" text next to the logo mark. Rendered in {typography.title-lg} (28px, white, weight 400, uppercase). Uses the proportional "Regular" face despite its display size.

{component.menu-opener} — Mobile/off-canvas menu trigger. Text "Menu" in {typography.body-md} (16px, white). Transparent background, zero padding—appears as plain text link. Likely hidden on desktop, visible on mobile.

Labels & Badges

{component.platform-badge} — Capsule-shaped platform indicator showing where a game is available. Examples: "XBOX", "PS5". Background transparent, text {colors.ink} (white) in {typography.mono-label} (13px, mono). Fully rounded {rounded.pill} (9999px) creating the capsule. Padding 4px 10px. Includes a small circular platform icon preceding the text.

{component.label-tag} — Generic metadata tag. Mono text ({typography.display-lg}, 12px) in {colors.muted} (gray). Tight padding {spacing.xs} {spacing.sm} (2px 4px). Used for categorical labels.

{component.marquee-text} — Text within the horizontal scrolling ticker at the top of the content area (below nav). Renders studio descriptors ("SURVIVAL SANDBOX GAMES. WE THRIVE ON CREATIVITY...") in {typography.display-lg} (12px, mono, uppercase, white). Padding {spacing.sm} 0 (4px vertical). Animates horizontally via CSS marquee keyframe.

Social & Iconography

{component.social-icon} — Social media link icon (X/Twitter, YouTube, Instagram, Discord). 24×24px size, {colors.ink} (white) stroke/fill. Circular outline container. Positioned in the nav's rightmost group.

{component.social-icon-hover} — Hovered social icon. Color shifts to {colors.brand-red} (red), matching the nav link interaction pattern.

Overlay & Transition Components

{component.page-transition-cover} — Full-viewport overlay that animates during route changes. Solid {colors.brand-red} (red) background covering everything. Implements a diagonal wipe animation via PageTransitionCover_diagonal__k_sNI keyframe. Duration approximately 0.6s with cubic-bezier easing and 0.3s delay. This is the most theatrical component in the system.

{component.site-loader} — Initial page loading screen. Black ({colors.surface-soft}) background, contains loading indicator. Uses SiteLoader_diagonal__legRz (diagonal wipe reveal) and SiteLoaderContent_fadeIn__vzqdA (fade-in) plus SiteLoaderContent_blink__HVhJz (blink/pulse) keyframes. Typography {typography.mono-label} for any loading text.

{component.cookie-bar} — Cookie consent banner fixed at viewport bottom (or inline). Black ({colors.surface-soft}) background, {typography.body-sm} (14px, white) for consent message. Contains {component.cookie-accept-button}. Padding {spacing.lg} {spacing.section-lg} (7px 20px). Rounded corners {rounded.DEFAULT} (sharp).

{component.footer} — Page footer section. Black ({colors.surface-soft}) background, text in {typography.body-sm} (14px, {colors.muted} gray). Padding {spacing.xl} {spacing.section-md} (20px 15px). Contains legal links, copyright, and potentially secondary navigation.

Structural / Layout Components

{component.grid-line-vertical} — 1px-wide vertical divisor running the full height of the portfolio grid section. Color {colors.hairline} (#333330). Creates the columnar graph-paper effect. Width 1px, height auto/full.

{component.grid-line-horizontal} — 1px-tall horizontal rule. Color {colors.hairline}. Height 1px, width auto. Used for subtle horizontal separators where needed.

{component.hero-band} — The full-width container wrapping the first visible game card (the "hero" card that gets full treatment). Black ({colors.surface-soft}) background. Padding {spacing.hero-top} {spacing.section-md} {spacing.xl} (140px top to clear nav, 15px horizontal, 8px bottom). Establishes the content zone's vertical rhythm.

Do's and Don'ts

Do

• Do reserve {colors.brand-red} exclusively for the mascot mark, active/hovered navigation items, page-transition overlays, and error states—never use red for body text or passive elements.
• Do maintain {typography.nav-link} (12px mono, 0.288px tracking, uppercase) for all top-level navigation items—this is the system's signature micro-typographic voice.
• Do apply {rounded.DEFAULT} (0px) to all buttons, cards, and containers unless the element is a platform badge ({rounded.pill}) or image thumbnail ({rounded.md})—sharp corners are the default identity.
• Do use {typography.display-lg} or {typography.display-xl} (mono faces) for index numbers, platform tags, and metadata labels—proportional text should never appear in those contexts.
• Do pair {component.button-primary} (white fill, black text) and {component.button-secondary} (transparent, white text) as adjacent CTA pairs—they're designed to sit side-by-side with visual parity in size and padding.
• Do implement the red diagonal-wipe page transition ({component.page-transition-cover}) using the cubic-bezier(0.19, 1, 0.22, 1) easing with 0.6s transform duration and 0.3s delay—this timing is central to the cinematic feel.
• Do position game card index numbers ({component.game-card-index}) at the bottom-right of each grid column, outside the card's content padding zone—they function as column coordinates, not card children.
• Do keep the 1px {colors.hairline} vertical grid lines running continuously through the portfolio section—interrupting them breaks the blueprint aesthetic.
• Do use {colors.muted} (#8f8f8f) for all secondary text (descriptions, developer names, footer copy)—never drop below this brightness for readable content.
• Do set the main content container to exactly 1440px max-width with {spacing.hero-top} (140px) top padding to push the first card below the nav zone.

Don't

• Don't introduce bold font weights (500, 600, 700+) anywhere in the system—entire hierarchy operates at weight 400; use size and color for emphasis instead.
• Don't add box-shadow to any component—the design explicitly rejects shadow-based depth; use solid color overlaps or hairline borders instead.
• Don't round button corners—even 2–4px radius breaks the brutalist rectangle language; only {rounded.pill} (for badges) and {rounded.md} (for images) deviate from sharp.
• Don't use {colors.brand-red} as a background for large content areas—red is reserved for the transition cover and small accents; large red fields don't exist in this palette.
• Don't mix the "Regular" (proportional) and "Mono" (monospaced) typefaces within the same text element—each has a distinct semantic role (narrative vs. structural).
• Don't expand spacing beyond the defined token set (max {spacing.hero-top} at 140px); the system's tension comes from controlled compression, not generous whitespace.
• Don't implement dropdown menus with soft shadows or rounded panels—use the existing flat black surface ({colors.surface-soft}) with sharp corners and 1px {colors.hairline-strong} borders.
• Don't substitute {colors.link-active} (red) for {colors.brand-red} in non-link contexts—the link-active token is specifically for interactive text states.
• Don't remove or simplify the page-transition animation on the assumption that it's "decorative"—the red wipe is a core brand moment that anchors the user's mental model of the site as a cinematic experience.
• Don't use gradients, blur effects, or backdrop-filter anywhere in the implementation—every surface is a solid hex color with optional 1px border.

Motion & Animation

Transition Tokens

/* Color transitions — used on links, buttons, text highlights */
--transition-color: color 0.2s ease;
--transition-color-bg: color 0.2s ease, background-color 0.4s ease;
--transition-border: border-color 0.2s ease;
--transition-fill: fill 0.2s ease;

/* Transform transitions — used on reveals, slides, scales */
--transform-base: transform 0.5s ease;
--transform-expressive: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);

/* Complex composite transitions — used on overlays, modals, loaders */
--transition-overlay: visibility 1s ease, transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;

/* Catch-all (avoid in production — too broad) */
--transition-all: all ease;

Keyframe Animations

• PageTransitionCover_diagonal — Full-viewport red diagonal wipe that covers/uncovers the page during route changes. The signature cinematic moment of the site.
• Menu_rotate — Rotation animation for the hamburger menu icon (likely 90° or 180° transform to become close icon).
• Marquee_marquee — Continuous horizontal scroll for the studio descriptor ticker text ("SURVIVAL SANDBOX GAMES..."). Infinite loop, constant velocity.
• Footer_wipe — Reveal animation for the footer section, likely a directional wipe or fade-up on scroll-into-view.
• Wipe_wipe — Generic directional wipe utility reused across multiple components (footer, loader, overlays).
• GridBack_prev / GridBack_next — Grid-background parallax or slide animation triggered by portfolio navigation (previous/next game).
• SiteLoader_diagonal — Diagonal reveal for the initial loading screen—matches the page transition aesthetic.
• SiteLoaderContent_fadeIn — Opacity fade-in for loader text/content after the diagonal wipe completes.
• SiteLoaderContent_blink — Subtle opacity pulse/blink on the loading indicator (suggesting activity).

Interaction Patterns

• Page route transitions: Full-viewport red cover animates diagonally (bottom-left to top-right or vice versa) using cubic-bezier(0.19, 1, 0.22, 1) easing over 0.6s with 0.3s delay. Old content wipes out under red, new content wipes in as red retreats.
• Navigation hover: Text color transitions from {colors.ink} (white) to {colors.brand-red} (red) over 0.2s. No underline, no background change—pure color shift.
• Button hover/active: Primary buttons invert colors (white→black background). Secondary buttons shift text to red. Transitions use 0.2s for color, 0.4s for background-color.
• Marquee ticker: Studio descriptor text scrolls horizontally at constant speed, infinite loop. Uses Marquee_marquee keyframe with transform: translateX().
• Social icons: On hover, icon stroke/fill transitions from white to red over 0.2s (--transition-fill or --transition-color).
• Grid navigation: Moving between games (prev/next) triggers GridBack animations—likely a parallax shift or crossfade of the grid background layer.
• Loader sequence: On initial page load, diagonal wipe reveals the black loader surface (0.6s), then content fades in (0.2s+), then a subtle blink/pulse indicates ongoing loading state.
• Cookie bar appearance: Likely uses Footer_wipe or similar reveal—wipes up from bottom or fades in when the user hasn't accepted cookies.

Imagery Style

• Dominant imagery type: 3D game screenshots and promotional key art (rendered CGI, not photography). The RAFT thumbnail shows colorful 3D characters on a raft with ocean/shark environment—vibrant, game-engine-rendered imagery.
• Subject matter: In-game action scenes, characters, environments from the studio's game portfolio. Highly polished, marketing-grade game art.
• Color treatment: Game imagery retains its native saturated colors—no grayscale, duotone, or tint overlays. The vivid game art contrasts dramatically with the black UI surround, making thumbnails pop visually.
• Role in layout: Imagery is supportive-dominant—the thumbnail occupies roughly 50-60% of the hero card's visual weight, drawing the eye before the text content. In the grid, thumbnails serve as visual anchors for each column.
• Aspect ratio: Landscape orientation, approximately 16:9 or 3:2. Thumbnails fill their container width completely with no margins.
• Corner treatment: {rounded.md} (21px) radius on visible bottom corners (or all corners depending on card construction). Softens the photographic rectangle just enough to distinguish from UI chrome.
• No observed treatments: No grayscale filters, no blur backgrounds, no parallax on images themselves (parallax is on grid structure), no lazy-loading placeholders visible in static extraction.
• Thumbnail background: Falls back to {colors.surface-strong} (#161614)—a near-black with subtle warmth—if image is absent or transparent.
• Image-to-text ratio: In the hero card, image area is roughly 1.5× the text area (by height). Text sits above image in the stacking order.

Icon System

• Library: Custom SVG icons. No detected third-party library (no Lucide, Heroicons, Material, or Bootstrap icon class patterns in the CSS). All icons appear to be hand-crafted SVGs specific to the Axolot brand.
• Specific icons observed:
  • Axolotl mascot — The red smiling axolotl head with gills, used as the logo mark. Custom illustrated character, not a stock icon.
  • X/Twitter (X) — Circular-outline "X" glyph in the social icon group.
  • YouTube (YT) — Circle with play triangle or "YT" letters.
  • Instagram (IG) — Camera/outlined square rounded icon.
  • Discord — Game-controller or chat-bubble shaped icon (partially visible).
  • External link arrow — Small arrow icon appearing next to "COMPANY" and "CAREERS" nav items, also on "STEAM PAGE" and "GAME SITE" buttons.
  • Platform icons — Xbox (circle with X) and PlayStation (circle with PS/Polygon shape) inside {component.platform-badge} pills.
  • Hamburger/menu — Three horizontal lines or similar glyph for {component.menu-opener} (inferred from naming).
• Treatment: Icons use currentColor for stroke/fill, inheriting the parent's text color (white by default, red on hover). Stroke-based construction for outline icons (social, platform badges), fill-based for the mascot mark.
• Size: Social icons measure 24×24px ({component.social-icon} size). Platform badge icons are smaller (~14–16px) to fit inside the pill alongside 13px text. Logo mark is approximately 48×48px.
• Alignment: Social icons align vertically with nav link text (centered to the 80px nav height). Platform badge icons center vertically with the 13px mono text. All icons sit on the same baseline/grid as their accompanying text.

Recommended Frontend Stack

- Framework:      Next.js (App Router) — detected from __next/static asset paths, 
                  page structure, and font-loading strategy
- Styling:        CSS Modules (detected from BEM-like class names: 
                  Button_button__5Fngg, Content_link__oRxhb, etc.)
- Fonts:          Self-hosted PP Neue Montreal + PP Neue Montreal Mono 
                  (WOFF2/WOFF with font-display: swap). Fallback: Inter + JetBrains Mono 
                  from Google Fonts for open-source implementation
- Animation:      CSS Keyframes + CSS Transitions (extracted 9 keyframes, 
                  8 transition patterns). GSAP/Framer Motion optional for 
                  complex scroll-triggered sequences
- Icons:          Custom SVG sprites (inline SVGs per component, 
                  currentColor-based)
- Component lib:  None (custom component architecture with CSS Modules)
- Build tool:     Next.js内置 (webpack/turbopack under the hood)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column grid, hamburger menu replaces horizontal nav, hero stacks vertically (text above full-width thumbnail), marquee may pause or reduce speed | | Tablet | 768px – 1024px | 2–3 column grid, condensed nav (items may wrap or truncate), hero maintains side-by-side but with narrower columns | | Desktop | 1025px – 1440px | Full 5–6 column grid, complete horizontal nav, hero at designed 40/60 split, all animations active | | Wide | > 1440px | Content centers at 1440px max-width with auto margins, grid lines extend to viewport edges or stop at container |

Touch Targets

• {component.button-primary}: Effective touch area approximately 90×28px (padding 5px 8px 4px plus 16px text height). Exceeds WCAG AAA 44×44px minimum when accounting for text metrics, but borderline—consider increasing padding to 8px 16px on mobile.
• {component.button-secondary}: Same dimensions as primary (90×28px). Same touch-target consideration.
• **{component.nav-link}}: Approximately 60–100px wide (varies by text length) × ~24px tall (12px font + 4px padding × 2). May fall short of 44px height minimum—increase vertical padding to 12px on touch devices.
• **{component.platform-badge}}: Capsule shape approximately 70–28px (varies by text). Height ~24px. Consider increasing to minimum 44px height on mobile by adding vertical padding.
• **{component.social-icon}}: 24×24px circular hit area. Fails WCAG AAA (needs 44×44px minimum). Wrap in a 44×44px transparent touch expansion area on mobile.

Collapsing Strategy

• Navigation: Horizontal nav links collapse into an off-canvas menu triggered by {component.menu-opener} ("Menu" text). The menu panel likely slides in from right or drops down with {component.Menu_rotate} animation on the hamburger icon. Marquee ticker may hide on mobile to save vertical space.
• Grid layout: Multi-column portfolio grid collapses to single-column stack on mobile. Each game card takes full viewport width. Index numbers (01, 02, 03) may reposition to above the card or become inline with the title. Vertical grid lines disappear (only one column = no dividers needed).
• Hero section: Side-by-side layout (text left, thumbnail right) stacks vertically on mobile. Title and description appear first (full width), then thumbnail (full width), then CTA buttons (stacked or side-by-side if space permits), then platform badges.
• Page transitions: Diagonal wipe animation plays on all viewports (it's viewport-full anyway). Timing may shorten on mobile (0.4s vs 0.6s) for snappier perceived performance.
• Cookie bar: Stays fixed at bottom on all viewpoints. Button may stretch to full width on mobile for easier tapping.
• Footer: Multi-column footer layout (if present) stacks to single column. Social icons may center-align instead of right-align.

Image Behavior

• Hero thumbnail: On mobile, expands to full container width (100% of the single column). Maintains {rounded.md} (21px) corners. Aspect ratio preserved (height adjusts to width).
• Grid thumbnails: In single-column mobile view, each card's thumbnail becomes a full-width banner within that card. No horizontal constraints beyond the card padding.
• Logo mark: Scales down slightly on mobile (perhaps 36–40px vs 48px desktop) to accommodate narrower nav. Wordmark "Axolot" may reduce from 28px to 22–24px.
• Lazy loading: Not explicitly detected but strongly recommended for grid thumbnails—implement loading="lazy" or Intersection Observer for below-fold images.

Iteration Guide

1. Initialize the project using Next.js with App Router and CSS Modules (matching the detected stack). Set up the _app.js or root layout to inject the CSS custom properties (transition tokens, spacing scale) as variables on :root.

2. Declare font faces for PP Neue Montreal and PP Neue Montreal Mono using the @font-face declarations found in the extracted CSS. Host the WOFF2 files at /_next/static/media/ matching the original paths, or substitute Inter + JetBrains Mono from Google Fonts with the CSS variable mapping provided in the Typography section.

3. Build the color and token foundation by copying every value from the YAML frontmatter into your design tokens file (CSS variables, JS config, or Tailwind extend—your choice). Ensure {colors.canvas}, {colors.surface-soft}, {colors.ink}, {colors.brand-red}, and {colors.primary} are implemented first as they form the base layer all other tokens reference.

4. Implement the layout shell starting with the 1440px max-width container, 80px nav height, and 140px hero-top offset. Build the HTML structure for {component.top-nav} with logo mark, wordmark, nav links (using {typography.nav-link}), and social icons. Add the 1px vertical grid line system as pseudo-elements or absolute-positioned divs.

5. Construct the hero band ({component.hero-band}) with the game card structure: title zone ({component.game-card-title}), description ({component.game-card-description}), developer line ({component.game-card-developer}), thumbnail container ({component.game-card-thumbnail}), CTA button pair ({component.button-primary} + {component.button-secondary}), platform badges ({component.platform-badge}), and index number ({component.game-card-index}). Match the 40/60 text-to-image column split.

6. Implement the animation system by coding the 9 extracted keyframes (prioritize PageTransitionCover_diagonal, Marquee_marquee, and SiteLoader_diagonal as they define the brand's kinetic identity). Apply --transition-color (0.2s) to all links and buttons. Test the red diagonal wipe between two dummy routes to verify the cinematic effect.

7. Build out component variants for every state documented in the frontmatter: {component.button-primary-active}, {component.button-secondary-active}, {component.nav-link-active}, {component.nav-link-hover}, {component.social-icon-hover}, {component.button-dark-active}. Implement these as :active and :hover pseudo-classes using the color values specified.

8. Extend to the portfolio grid by duplicating the hero card structure across 5–6 columns with 1px {colors.hairline} vertical dividers between them. Assign incrementing index numbers (01, 02, 03...) to each column's {component.game-card-index}. Ensure grid lines run the full section height.

9. Add the overlay components: {component.cookie-bar} (fixed bottom, black surface, dark accept button), {component.site-loader} (full-viewport black with diagonal wipe reveal), and {component.page-transition-cover} (full-viewport red with diagonal animation). Wire the page transition to Next.js route changes using usePathname() or similar.

10. Run accessibility and validation checks: Verify all touch targets meet 44×44px minimum (expand social icons and nav links on mobile). Confirm color contrast ratios: white on black (~21:1, passes AAA), black on white (~21:1, passes AAA), gray (#8f8f8f) on black (~4.5:1, passes AA for large text). Test the site in "reduced motion" preference mode—disable or simplify the diagonal wipe and marquee for users who prefer less motion.

Font Setup for Implementation:

If you cannot license PP Neue Montreal, substitute with:

• Proportional face: Inter (variable font, weights 400 only). Google Fonts URL: https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap
• Monospaced face: JetBrains Mono (weight 400). Google Fonts URL: https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap

CSS variable definitions:

:root {
  --font-sans: 'Inter', 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'PP Neue Montreal Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

Apply font-family: var(--font-sans) to body and font-family: var(--font-mono) to .mono, nav a, .index-number, .platform-badge, .label-tag, and .marquee-text.

Known Gaps

• Hover state specifics: While active states are documented, the exact hover styling (background color changes, scale transforms, border appearances) for cards, grid cells, and thumbnail containers could not be extracted from a static screenshot. The {component.*-hover} entries represent inferred behaviors based on the nav-link pattern.
• Loading/skeleton states: No loading skeletons, shimmer placeholders, or pending-state designs were visible. The site loader ({component.site-loader}) covers initial page load, but in-content lazy-loading states (e.g., while fetching game details via API) are undocumented.
• Form validation states: No text inputs, search bars, or forms appeared in the screenshot. Error, success, warning, and focus ring styles for form fields are inferred from the color palette but unverified.
• Authenticated/user flows: The screenshot shows only the public marketing/homepage. Dashboard surfaces, user profile pages, account settings, or admin interfaces (if they exist) follow unknown design patterns.
• Mobile navigation detail: The off-canvas menu structure, animation direction (slide from right? dropdown?), and item arrangement are assumed based on the {component.menu-opener} presence and {component.Menu_rotate} keyframe name.
• Dark/light mode toggle: The site appears to be dark-mode-only (canvas is black, ink is white). No light mode variant, theme switcher, or prefers-color-scheme adaptation was detected. The extensions.mode: "dark" reflects the observed state.
• Pixel-exact grid measurements: Column widths, gutter sizes, and the exact pixel count of grid columns are estimated from the screenshot's visible 6-column layout (with partial 7th column showing "???"). The grid may be fluid or use CSS Grid with repeat(auto-fit, minmax(...)).
• Marquee content and speed: The exact text content, scroll velocity (pixels per second), and pause-on-hover behavior of the {component.marquee-text} ticker are partially visible but the full string and timing values are approximate.
• Accessibility focus indicators: Focus rings for keyboard navigation (outline styles on :focus-visible) were not observable in the static screenshot. Recommend implementing a 2px solid {colors.border-white} or {colors.primary} outline with 2px offset.
• Print stylesheet: No print-specific styles were extractable. The brutalist black-on-black design would require significant adaptation for print (invert to white paper, remove grid lines, flatten transitions).