{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Runway",
  "meta": {
    "name": "Runway",
    "description": "Runway's interface is a cinematic reel brought to life as a website — a dark, editorial, film-production-grade design where full-bleed photography and video ARE the primary UI elements. This is not a typical tech product page; it's a visual manifesto for AI-powered creativity. Every section feels like a frame from a film: dramatic lighting, sweeping landscapes, and intimate human moments captured in high-quality imagery that dominates the viewport.",
    "theme": "light"
  },
  "color": {
    "cinematic-full-bleed-photography-and-video-as-primary-ui-elements-single-typeface-system-abcnormal-for-everything-from-display-to-micro-labels-dark-dominant-palette-with-cool-toned-neutrals-767d88-7d848e-zero-shadows-minimal-borders-the-interface-is-intentionally-invisible-tight-display-typography-line-height-1-0-with-negative-tracking-0-9px-to-1-2px-uppercase-labels-with-positive-letter-spacing-for-navigational-structure-weight-450-unusual-intermediate-for-small-uppercase-text-precision-craft-editorial-magazine-layout-with-mixed-size-image-grids-2-color-palette-roles-primary": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the cinematic full bleed photography and video as primary ui elements single typeface system abcnormal for everything from display to micro labels dark dominant palette with cool toned neutrals 767d88 7d848e zero shadows minimal borders the interface is intentionally invisible tight display typography line height 1 0 with negative tracking 0 9px to 1 2px uppercase labels with positive letter spacing for navigational structure weight 450 unusual intermediate for small uppercase text precision craft editorial magazine layout with mixed size image grids 2 color palette roles primary role."
    },
    "deep-black": {
      "$value": "#030303",
      "$type": "color",
      "$description": "Use for the deep black role."
    },
    "dark-surface": {
      "$value": "#1a1a1a",
      "$type": "color",
      "$description": "Use for the dark surface role."
    },
    "pure-white": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the pure white role."
    },
    "near-white": {
      "$value": "#fefefe",
      "$type": "color",
      "$description": "Use for the near white role."
    },
    "cool-cloud": {
      "$value": "#e9ecf2",
      "$type": "color",
      "$description": "Use for the cool cloud role."
    },
    "border-dark": {
      "$value": "#27272a",
      "$type": "color",
      "$description": "Use for the border dark role."
    },
    "charcoal": {
      "$value": "#404040",
      "$type": "color",
      "$description": "Use for the charcoal role."
    },
    "near-charcoal": {
      "$value": "#3f3f3f",
      "$type": "color",
      "$description": "Use for the near charcoal role."
    },
    "cool-slate": {
      "$value": "#767d88",
      "$type": "color",
      "$description": "Use for the cool slate role."
    },
    "mid-slate": {
      "$value": "#7d848e",
      "$type": "color",
      "$description": "Use for the mid slate role."
    },
    "muted-gray": {
      "$value": "#a7a7a7",
      "$type": "color",
      "$description": "Use for the muted gray role."
    },
    "cool-silver": {
      "$value": "#c9ccd1",
      "$type": "color",
      "$description": "Use for the cool silver role."
    },
    "light-silver": {
      "$value": "#d0d4d4",
      "$type": "color",
      "$description": "Use for the light silver role."
    },
    "tailwind-gray": {
      "$value": "#6b7280",
      "$type": "color",
      "$description": "Use for the tailwind gray role."
    },
    "dark-link": {
      "$value": "#0c0c0c",
      "$type": "color",
      "$description": "Use for the dark link role."
    },
    "footer-gray": {
      "$value": "#999999",
      "$type": "color",
      "$description": "Use for the footer gray role."
    }
  },
  "typography": {
    "body": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body."
    }
  },
  "spacing": {
    "4": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step 4."
    },
    "8": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step 8."
    },
    "12": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step 12."
    },
    "16": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step 16."
    },
    "20": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Spacing step 20."
    },
    "24": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step 24."
    },
    "32": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step 32."
    },
    "40": {
      "$value": "40px",
      "$type": "dimension",
      "$description": "Spacing step 40."
    },
    "48": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step 48."
    },
    "64": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Spacing step 64."
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius lg."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://runwayml.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}