---
name: Remix
description: "This site is a prime example of a modern, developer-focused landing page that uses motion and bold typography to convey power and performance."
version: alpha

colors:
  background: "#000000"
  primary: "#ffffff"
  secondary: "#dee2e6"
  tertiary: "#3facf9"
  neutral: "#dee2e6"
  bg-soft: "#1e2226"
  line: "rgba(255, 255, 255, 0.12)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 84px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2.52px"
  heading:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.12px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0.5px"

rounded:
  sm: 4px
  md: 8px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A modern, high-performance web framework for developers.

*A high-speed race track for web development*

## Colors

High-contrast dark mode with vibrant, energetic accents.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#dee2e6`)** — uses `ink-soft` token
- **Accent (`#3facf9`)** — uses `accent` token
- **Muted (`#dee2e6`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.12)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- 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.

## Layout

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

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

## Elevation & Depth

- rgb(253, 189, 134) 0px 0px 2px 0px
- rgb(253, 189, 134) 0px 0px 8px 0px
- Borders: 1px solid rgba(255, 255, 255, 0.12)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 24px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```