Nexusmods Design System Deep Dive

1. Brand Overview

Nexusmods is the beating heart of the PC gaming modding scene. You don’t have to sell the idea to modders—they already live here. The design reflects this audience: technically literate users, more interested in clarity and performance than in fluffy visuals. But Nexusmods also has the challenge of serving a huge, diverse set of games, mod authors, and casual downloaders. It needs to be recognisably “Nexus” while housing Skyrim, Fallout, Witcher, Baldur’s Gate, and nearly anything moddable.

The vibe is functional, dark, and slightly industrial. We’re in dark mode territory almost everywhere, but it’s not a hacky dark mode—they’ve thought about surfaces, text colours, hover states. Their primary accent—#fb923c (orange 500)—screams “click me” against the muted slate backdrop. Combine that with flat, no-shadow buttons, and you have a UI that reads “utility” more than “luxury.”

The philosophy here seems to be: keep the chrome out of the way, let the content (mods, screenshots, stats) do the heavy lifting. Almost every interaction uses understated motion—hover grows 7% but otherwise keeps flat layers. Buttons are more about colour change and scale than fancy depth. Borders are subtle, often invisible until you engage an element.

Who’s this for? Heavy readers of tables, chunked lists, mod pages, and comments sections. People who want to find “that one mod” fast. The design isn’t trying to seduce novice users with splashy gradients—this is a workbench, not a showroom.

2. Color System

2.1 Primary Colours

Primary: #fb923c — The “Orange 500” token. Every primary CTA uses this. It’s warm, high contrast against the near-black #0f0f10 background. Orange communicates energy and action without the aggression of red. Compared to Steam’s blues or Epic’s whites, Nexusmods goes warmer—feels human, community-oriented.

They avoid pairing this orange with saturated reds or yellows in primary actions—keeps it clean, avoids the “arcade” palette clash.

Secondary: Transparent (rgba(0,0,0,0)), effectively letting the surface colour come through. Secondary actions rely on text and border colour (#d4d4d8 and related zinc neutrals) instead of a contrasting fill.

2.2 Complete Palette

Here’s the extracted set from the site:

2.3 Color Relationships

Mostly monochromatic surfaces (dark greys) with high-saturation accents. The primary orange passes WCAG AAA against the main background (#0f0f10). Text colours (#d4d4d8 zinc neutrals) give enough contrast without feeling harsh.

Dark mode is clearly the default—light backgrounds exist for mod images but UI chrome stays dark.

2.4 Usage Guide

Works:

• #fb923c with #0f0f10 for CTAs.
• #d4d4d8 zinc text on mid-dark surfaces (#1d1d21, #29292e).
• Blues (#3b82f6) for focus outlines—clear against dark background.

Avoid:

• Pairing orange (#fb923c) with yellow in adjacent elements—that’s too close in luminance, gets muddy.
• Using saturated reds adjacent to orange CTAs—shouts too much and confuses states.

3. Typography

3.1 Font Families

Everything is Inter. Fallbacks: Inter Fallback, ui-sans-serif, system-ui. Inter is a very "developer community" choice—neutral, readable at small sizes, lots of weights.

No Google Fonts load—they’ve likely self-hosted. No variable font usage—just specific weights.

3.2 Type Scale

3.3 Hierarchy

Biggest heading: 60px, then drops sharply to 36px. There's no H2-H6 distinction by naming—they reuse "heading-1" context but change size. 18px and 16px are used for both headings and buttons—ensures UI chrome matches text weight/scale.

Captions at 12px with generous letter spacing (up to 1.2px for uppercase labels). This feels purposeful—labels in UI get airy spacing for scanning.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px, but they also use 4px increments.

Most dense layouts rely on 8px steps; larger gaps (32px up) are rare—probably in hero sections.

4.2 Layout

Breakpoints at: 768px, 992px, 1024px, 1200px, 1281px, 1461px. Tailwind CSS is in use—responsive modifiers, arbitrary values. Feels like a fluid grid with fixed max container widths per breakpoint.

5. Visual Elements

Border Radius:

• 4px — everywhere: buttons, links, inputs. Default UI radius.
• 8px — occasional: cards, sections.
• 8px 8px 0px 0px — top corners only.
• 33554400px — pill/full circle (avatars, icon buttons). That weird large numeric is just “full” in Tailwind’s compiled CSS.

Shadows: None. Flat design—the occasional card lift is via border, not shadow.

Borders:
Widths all 1px: subtle outlines, often oklab mixed transparent colours. Also some coloured borders for states (#fb923c, #7c3aed, #0d9488) but rare. Borders are more about subtle separation than emphasis.

6. Components

6.1 Buttons

Variant: Translucent Icon Button

• Default: oklab(0 0 0 / 0.4) bg, #f4f4f5 text, 4px radius, 1px solid oklab / 0.3 border.
• Hover: scale(1.07).

Variant: Secondary Outline

• Default: transparent bg, #d4d4d8 text, 4px radius, 1px solid oklab / 0.3 border.
• Hover: scale(1.07).

Variant: Primary Fill

• Default: #fb923c bg, #0f0f10 text, 4px radius, no border.
• Hover: scale(1.07).

Variant: Secondary Filled Strong

• Default: #f4f4f5 bg, #0f0f10 text, 4px radius, 1px solid oklab / 0.3.

Variant: Circle Icon

• Default: oklab(0 0 0 / 0.5) bg, #d4d4d8 text, full radius, no border.
• Hover: scale(1.07).

Variant: Light Transparent

• Default: oklab / 0.1 bg, #d4d4d8 text, 4px radius.

No active/focus except hover scale; outlines are system defaults.

6.2 Links

Examples:

• Dark text (#0f0f10) or light text (#f4f4f5, #d4d4d8) depending on surface.
• Hover always switches colour to var(--color-orange-500) (#f97316).
• No underline default—underline is actually transparent “none.”

6.3 Forms

No detailed input styles extracted—likely similar 4px radius, subtle oklab borders. No strong glow on focus—critical for this audience.

6.4 Cards

No shadows—radius sometimes 8px. Borders 1px neutral. Padding ~16px or 24px depending on content. Hover: maybe slight border colour shift.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #fb923c;
  --color-secondary-transparent: rgba(0,0,0,0);
  --color-zinc-300: #d4d4d8;
  --color-black-1: #0f0f10;
  --color-surface-low: #1d1d21;
  --color-blue-500: #3b82f6;
  --color-white-ish: #f1f1f3;
  --color-premium-moderate: #7c3aed;
  --color-orange-200: #fed7aa;
  /* ... all other CSS vars from data ... */

  /* Typography */
  --font-family-primary: "Inter", "Inter Fallback", ui-sans-serif, system-ui;
  --heading1-size-lg: 3.75rem;
  --heading1-weight-lg: 600;
  --heading1-lineheight-lg: 1.2;
  --heading1-spacing-lg: -1.5px;
  /* ...more type tokens... */

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-top-md: 8px 8px 0 0;
  --radius-full: 33554400px;

  /* Borders */
  --border-thin: 1px solid;
  --border-color-neutral-30: oklab(0.999994 0.0000455678 0.0000200868 / 0.3);

}

8. AI Coding Assistant Prompt

# Nexusmods Design System Specification

System Prompt:
You are a Nexusmods design expert. Build UIs matching their visual language exactly.

Brand Context:
Nexusmods targets technically savvy gamers. The design reflects a functional, utility-first dark mode with warm orange CTAs, flat components, and subtle motion. Surfaces are clean, with muted neutrals and clear colour-coded states.

Color Palette:
- Primary Orange-500: #fb923c — Primary buttons, CTAs
- Secondary Transparent: rgba(0,0,0,0) — Secondary button backgrounds
- Zinc-300: #d4d4d8 — Neutral text, subtle borders
- Black-1: #0f0f10 — Main background
- Surface Low: #1d1d21 — Panels
- Blue-500: #3b82f6 — Focus outlines
- White-ish: #f1f1f3 — Light backgrounds
- Premium Moderate: #7c3aed — Premium feature accents
- Orange-200: #fed7aa — Hover backgrounds
- ... (include ALL colours from palette above with usage)

Typography:
Font family: "Inter", "Inter Fallback", ui-sans-serif, system-ui

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1-lg | 60px | 600 | 1.2 | Page titles |
| H1-md | 36px | 600 | 1.2 | Section titles |
| H1-sm | 30px | 600 | 1.25 | Smaller headings |
| H1-xs | 24px | 600 | 1.25 | Subheadings |
| Body-lg | 18px | 400 | 1.5 | Lead text |
| Body-md-bold | 18px | 600 | 1.5 | Emphasis |
| Body | 16px | 400/600 | 1.5 | UI text, buttons |
| Caption | 12px | 400/600 | 1.38 | Labels, metadata |

Spacing & Grid:
Base: 8px. Scale: 4px, 6px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px
Use multiples for all margins/paddings.

Border Radius:
- sm: 4px — buttons, inputs
- md: 8px — cards
- full: 33554400px — circles, pills
- top-md: 8px 8px 0 0 — top-rounded panels

Shadows & Depth:
Flat design—use borders not shadows.

Component Specifications:

Primary Button:
Default: background #fb923c, text #0f0f10, padding 0 12px, radius 4px, no border, font-weight 400, font-size 16px.
Hover: transform scale(1.07).
Focus: outline #3b82f6 none 0px.

Secondary Button:
Default: transparent bg, text #d4d4d8, padding 0 12px, radius 4px, 1px solid oklab(.../0.3).
Hover: scale(1.07).

Navigation Links:
Default: colour #f4f4f5 or #0f0f10 depending surface, no underline.
Hover: colour #f97316.

Input Fields:
Border: 1px solid oklab(.../0.3), radius 4px, background #f4f4f5 or dark surface. Focus: outline #3b82f6.

Cards:
Padding: 16px or 24px, bg #1d1d21 or #29292e, radius 8px.

Layout & Responsive Rules:
Max content width changes per breakpoint: 768, 992, 1024, 1200, 1281, 1461px.

Interaction Rules:
- Hover scale: 1.07
- Transition: 150ms ease
- Focus outlines in blue (#3b82f6)

DO List:
- Use exact palette colours
- Keep spacing multiples of 8px (or scale values 4px,6px,...)
- Match Inter typography sizes exactly
- Use 4px radius on most UI
- Use orange only for CTAs

DON'T List:
- Add shadows
- Mix corner styles arbitrarily
- Invent colours outside palette
- Overuse orange for non-interactive elements
- Skip hover scale on interactive items

Code Examples:

Primary Button (Tailwind):
```html
<button class="bg-[#fb923c] text-[#0f0f10] px-3 py-0 rounded-[4px] text-base font-normal transform hover:scale-[1.07]">Download</button>
```

Secondary Button:
```html
<button class="border border-[oklab(0.999994_0.0000455678_0.0000200868_/0.3)] text-[#d4d4d8] px-3 py-0 rounded-[4px] hover:scale-[1.07]">Cancel</button>
```

Card:
```html
<div class="bg-[#1d1d21] p-4 rounded-[8px] border border-[#3e3e47]">...</div>
```

9. Summary

TL;DR – Nexusmods is a dark-mode-first, utility-driven design system with a hot orange primary, zinc neutrals, and flat, border-defined components. It’s built for clarity and speed over aesthetic flourishes.

Brand Keywords – gamer-utility, warm-CTA, flat-industrial, dark-mode-first