№ remix-run

Remix Run

Electric deep space—angular sans-serif pulses against a stark, dark void.

Specimenminimalism dark mode futurist brutalism developer toolsdark

The design prioritizes a bold typographic display, utilizing a stark color palette and a dark background to create a sense of technical sophistication. The layout is clean and functional, emphasizing the product name and value proposition. · javascript framework, web development, remix run, full stack, modern web, developer tools, ai framework, technical design, dark theme, futuristic ui

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: neon · muted · high-contrast · cool

SwatchHexOKLCHSuggested roleCopy

Hex#2cabfa
OKLCHoklch(71.1% 0.156 242)
RoleDominant
find sites →
Hex#1c608a
OKLCHoklch(46.8% 0.095 241)
RoleSurface
find sites →
Hex#71ccfa
OKLCHoklch(80.6% 0.109 232)
RoleInk
find sites →
Hex#527f9d
OKLCHoklch(57.6% 0.068 239)
RoleAccent
find sites →
Hex#91acbe
OKLCHoklch(73.0% 0.040 237)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Inter Variable	84px	700	1	-2.52px	Aa Bb Cc
h2	Inter Variable	56px	700	1	-1.12px	Aa Bb Cc
body	JetBrains Mono	16px	400	1.5	0	Aa Bb Cc
button	JetBrains Mono	12px	400	1.4	0	Aa Bb Cc

Spacing scale

4px

8px

24px

40px

120px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #2cabfa;
  --color-surface: #1c608a;
  --color-ink: #71ccfa;
  --color-accent: #527f9d;
  --color-detail: #91acbe;
}

/* CSS variables exposed by source */
:root {
  --brand-cycle: rgb(45, 172, 249);
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Remix Run.
Reference design system (extracted from the live site):
- Palette: #2cabfa, #1c608a, #71ccfa, #527f9d, #91acbe
- Typefaces: Inter Variable, JetBrains Mono
- Macrostructure: Specimen
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/remix-run

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter Variable

84px

700

-2.52px

Aa Bb Cc

Inter Variable

56px

700

-1.12px

Aa Bb Cc

body

JetBrains Mono

16px

400

1.5

Aa Bb Cc

button

JetBrains Mono

12px

400

1.4

Aa Bb Cc

:root { --color-dominant: #2cabfa; --color-surface: #1c608a; --color-ink: #71ccfa; --color-accent: #527f9d; --color-detail: #91acbe; } /* CSS variables exposed by source */ :root { --brand-cycle: rgb(45, 172, 249); }

Build a landing page in the visual style of Remix Run. Reference design system (extracted from the live site): - Palette: #2cabfa, #1c608a, #71ccfa, #527f9d, #91acbe - Typefaces: Inter Variable, JetBrains Mono - Macrostructure: Specimen Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/remix-run