{
  "id": "remix",
  "title": "Remix",
  "url": "https://remix.run",
  "tags": [
    "devtools",
    "framework"
  ],
  "colors": {
    "principle": "High-contrast dark mode with vibrant, energetic accents.",
    "bg": "#000000",
    "bgSoft": "#1e2226",
    "bgQuiet": null,
    "ink": "#ffffff",
    "inkSoft": "#dee2e6",
    "muted": "#dee2e6",
    "mutedSoft": null,
    "accent": "#3facf9",
    "line": "rgba(255, 255, 255, 0.12)"
  },
  "typography": {
    "rules": [
      "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."
    ],
    "scaleUses": [
      "Hero headline",
      "Section headline",
      "Body text",
      "Navigation and labels"
    ],
    "display": "geometric-sans",
    "body": "humanist-sans",
    "mono": "monospace",
    "scale": [
      {
        "token": "display",
        "size": 84,
        "lh": 1.0,
        "weight": 700,
        "ls": "-2.52px"
      },
      {
        "token": "heading",
        "size": 56,
        "lh": 1.0,
        "weight": 700,
        "ls": "-1.12px"
      },
      {
        "token": "body",
        "size": 16,
        "lh": 1.5,
        "weight": 400,
        "ls": "0"
      },
      {
        "token": "caption",
        "size": 13,
        "lh": 1.6,
        "weight": 400,
        "ls": "0.5px"
      }
    ]
  },
  "spacing": {
    "rhythm": "Generous vertical padding (120px) separates major content sections.",
    "base": 4,
    "scale": [
      4,
      8,
      16,
      24,
      32,
      48,
      64,
      96,
      120
    ]
  },
  "surfaces": {
    "shadows": [
      "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)",
    "radius": {
      "sm": 4,
      "md": 8,
      "lg": 24,
      "pill": 999
    }
  },
  "layout": {
    "skeleton": "Full-width dark hero with a centered content block, transitioning into a two-column layout for features.",
    "container": 1280,
    "paragraph": 680,
    "columns": 12,
    "gutter": 24,
    "breakpoints": [
      768,
      1024
    ]
  },
  "motion": {
    "patterns": [
      "Subtle background particle animations and glowing light trails.",
      "Smooth opacity transitions for UI elements."
    ],
    "durations": {
      "micro": 150,
      "small": 300,
      "medium": 400
    },
    "easing": "cubic-bezier(0.4, 0, 0.2, 1)"
  },
  "identity": {
    "keywords": [
      "developer",
      "framework",
      "performance",
      "modern"
    ],
    "analogy": "A high-speed race track for web development",
    "oneLiner": "A modern, high-performance web framework for developers."
  },
  "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."
  },
  "interaction": {
    "hover": "Color transitions on interactive elements.",
    "click": "Pointer cursor on buttons and links.",
    "transition": "Fast 150ms transitions for color, background, and border-color.",
    "keyboard": "Standard focus states implied by standard HTML elements."
  },
  "voice": {
    "tone": "Confident, technical, and empowering.",
    "headlineStyle": "Bold, direct statements emphasizing power and versatility.",
    "ctaStyle": "Direct instructions, often involving command-line snippets.",
    "avoid": [
      "Overly complex technical jargon without clear benefits.",
      "Passive or hesitant language.",
      "Bright or pastel color palettes."
    ]
  },
  "donts": [
    "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."
  ],
  "systemPrompt": "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."
}