CURATED · OPEN · FREE

Remix

A modern, high-performance web framework for developers.

devtoolsframework

↓ Download design system (85 MB)Open in OpenDesign

Visit: https://remix.run

📦 Browse pack contents →

Identity DNA

developerframeworkperformancemodern

A high-speed race track for web development

Color

#3facf9Accent

#ffffffInk

#dee2e6Ink soft

#000000BG

#1e2226BG soft

rgba(255, 255, 255, 0.12)Line

High-contrast dark mode with vibrant, energetic accents.

Typography

geometric-sans · humanist-sans · monospace

display84px · 700
heading56px · 700
body16px · 400
caption13px · 400

Use uppercase and monospaced font for navigation and UI labels. · Use bold, tightly tracked geometric sans for display headlines. · Body text uses a clean humanist sans-serif.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

120px

Generous vertical padding (120px) separates major content sections.

Surfaces

sm · 4px

md · 8px

lg · 24px

pill · 999px

1px solid rgba(255, 255, 255, 0.12)

rgb(253, 189, 134) 0px 0px 2px 0px · rgb(253, 189, 134) 0px 0px 8px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width dark hero with a centered content block, transitioning into a two-column layout for features.

Motion & Interaction

150msmicro

300mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle background particle animations and glowing light trails. · Smooth opacity transitions for UI elements.

Color transitions on interactive elements. · Pointer cursor on buttons and links.

Components

button Minimal text buttons, often uppercase monospaced labels.
card Code blocks with dark backgrounds and syntax highlighting, or glassmorphic panels with subtle borders.
chip Uppercase monospaced tags for navigation (e.g., [G] GITHUB).
input Command line style with monospaced font (e.g., npx remix@next new).
hero Oversized, tightly tracked display typography over an animated, dark particle field background.

Voice & Don'ts

Tone Confident, technical, and empowering.
Headlines Bold, direct statements emphasizing power and versatility.
CTAs Direct instructions, often involving command-line snippets.

Don't use light mode or pastel backgrounds — screenshot shows a dark, high-contrast environment.
Don't use serif or script fonts for headlines — screenshot shows bold, tightly tracked geometric sans-serif.
Don't use large, heavy borders on components — screenshot shows subtle, thin, low-opacity borders.
Don't use standard sentence case for navigation — screenshot shows uppercase monospaced labels.
Don't use static, flat backgrounds — screenshot shows dynamic, animated particle fields and glowing light trails.
Don't use small, cramped spacing — screenshot shows generous vertical padding between sections.
Avoid: Overly complex technical jargon without clear benefits.
Avoid: Passive or hesitant language.
Avoid: Bright or pastel color palettes.

Inside the pack — real screenshots

Remix — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Remix is a high-performance web framework website with a dark, developer-focused aesthetic. The design uses a primary palette of pure black (#000000) and off-white (#ffffff, #dee2e6), with a vibrant blue accent (#3facf9) and energetic light trails. Typography combines bold, geometric sans-serif for large display headlines with a humanist sans-serif for body text and a monospaced font for code and UI labels. Key features include tightly tracked headlines, generous vertical spacing (120px), and subtle, glowing interactive elements. Critical don'ts: avoid light themes, avoid serif fonts for headlines, and avoid heavy borders. The site is designed to feel fast, modern, and technical.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko