{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$metadata": {
    "name": "Relay Design Tokens",
    "version": "3.4",
    "updated": "2026-06-04",
    "note": "Display: Cormorant Garamond italic. Body/UI/Wordmark: Outfit. Codes: JetBrains Mono. Syne superseded. White-first: teal as accent only — not backgrounds."
  },
  "color": {
    "light": {
      "bg": {
        "base": {
          "$value": "#ffffff",
          "$type": "color",
          "$description": "Primary surface — page, cards, all UI. White-first."
        },
        "surface": {
          "$value": "#f7f7f7",
          "$type": "color",
          "$description": "Secondary surface — sidebar, topbar. Neutral, no teal tint."
        },
        "panel": {
          "$value": "#f0f0f0",
          "$type": "color",
          "$description": "Tertiary — inputs, nested panels, hover backgrounds."
        },
        "deep": {
          "$value": "#e8e8e8",
          "$type": "color",
          "$description": "Pressed / deep inset states."
        }
      },
      "border": {
        "default": {
          "$value": "#e4e4e4",
          "$type": "color"
        },
        "strong": {
          "$value": "#cccccc",
          "$type": "color"
        }
      },
      "text": {
        "primary": {
          "$value": "#111111",
          "$type": "color"
        },
        "secondary": {
          "$value": "#555555",
          "$type": "color"
        },
        "muted": {
          "$value": "#999999",
          "$type": "color"
        },
        "bright": {
          "$value": "#000000",
          "$type": "color"
        }
      },
      "accent": {
        "teal": {
          "$value": "#0d9488",
          "$type": "color",
          "$description": "Primary \u2014 CTAs, Relay Codes, active states"
        },
        "teal-dim": {
          "$value": "rgba(13,148,136,0.12)",
          "$type": "color",
          "$description": "Teal tint background"
        },
        "indigo": {
          "$value": "#6366f1",
          "$type": "color",
          "$description": "Secondary \u2014 org/team/pro tier only"
        },
        "indigo-dim": {
          "$value": "rgba(99,102,241,0.12)",
          "$type": "color",
          "$description": "Indigo tint background"
        }
      },
      "semantic": {
        "success": {
          "$value": "#16a34a",
          "$type": "color"
        },
        "warning": {
          "$value": "#d97706",
          "$type": "color"
        },
        "error": {
          "$value": "#dc2626",
          "$type": "color"
        },
        "info": {
          "$value": "#6366f1",
          "$type": "color"
        }
      }
    },
    "dark": {
      "bg": {
        "base": {
          "$value": "#0d0d0d",
          "$type": "color",
          "$description": "Terminal black \u2014 no warm undertone"
        },
        "surface": {
          "$value": "#181818",
          "$type": "color",
          "$description": "Cards, sidebars"
        },
        "panel": {
          "$value": "#222222",
          "$type": "color",
          "$description": "Nested panels"
        },
        "deep": {
          "$value": "#080808",
          "$type": "color",
          "$description": "Sidebar bg"
        }
      },
      "border": {
        "default": {
          "$value": "#2a2a2a",
          "$type": "color"
        },
        "strong": {
          "$value": "#383838",
          "$type": "color"
        }
      },
      "text": {
        "primary": {
          "$value": "#f0f0f0",
          "$type": "color"
        },
        "secondary": {
          "$value": "#999999",
          "$type": "color",
          "$description": "5.9:1 on surface \u2014 AA compliant"
        },
        "muted": {
          "$value": "#606060",
          "$type": "color",
          "$description": "Decorative / large text only"
        },
        "bright": {
          "$value": "#ffffff",
          "$type": "color"
        }
      },
      "accent": {
        "teal": {
          "$value": "#2dd4bf",
          "$type": "color",
          "$description": "Primary \u2014 brighter on dark bg"
        },
        "teal-dim": {
          "$value": "#042f2e",
          "$type": "color",
          "$description": "Teal bg tint on dark"
        },
        "indigo": {
          "$value": "#818cf8",
          "$type": "color",
          "$description": "Secondary \u2014 lighter on dark bg"
        },
        "indigo-dim": {
          "$value": "#1e1b4b",
          "$type": "color",
          "$description": "Indigo bg tint on dark"
        }
      },
      "semantic": {
        "success": {
          "$value": "#22c55e",
          "$type": "color"
        },
        "warning": {
          "$value": "#f59e0b",
          "$type": "color"
        },
        "error": {
          "$value": "#ef4444",
          "$type": "color"
        },
        "info": {
          "$value": "#818cf8",
          "$type": "color"
        }
      }
    },
    "relay-code": {
      "light": {
        "$value": "#0d9488",
        "$type": "color"
      },
      "dark": {
        "$value": "#2dd4bf",
        "$type": "color"
      }
    },
    "status-dot": {
      "claimed": {
        "$value": "#16a34a",
        "$type": "color"
      },
      "pending": {
        "$value": "#d97706",
        "$type": "color"
      },
      "expired": {
        "$value": "#dc2626",
        "$type": "color"
      },
      "draft": {
        "$value": "#999999",
        "$type": "color"
      }
    }
  },
  "typography": {
    "family": {
      "default": {
        "$value": "'Outfit', system-ui, sans-serif",
        "$type": "fontFamily",
        "$description": "Body / UI / Wordmark \u2014 all text except display and codes"
      },
      "mono": {
        "$value": "'JetBrains Mono', monospace",
        "$type": "fontFamily",
        "$description": "Relay Codes, IDs, code blocks, timestamps"
      }
    },
    "size": {
      "xs": {
        "$value": "11px",
        "$type": "fontSize"
      },
      "sm": {
        "$value": "12px",
        "$type": "fontSize"
      },
      "base": {
        "$value": "14px",
        "$type": "fontSize"
      },
      "md": {
        "$value": "15px",
        "$type": "fontSize"
      },
      "lg": {
        "$value": "18px",
        "$type": "fontSize"
      },
      "xl": {
        "$value": "22px",
        "$type": "fontSize"
      }
    },
    "weight": {
      "regular": {
        "$value": 400,
        "$type": "fontWeight"
      },
      "medium": {
        "$value": 500,
        "$type": "fontWeight"
      },
      "semibold": {
        "$value": 600,
        "$type": "fontWeight"
      },
      "bold": {
        "$value": 700,
        "$type": "fontWeight"
      }
    },
    "relay-code": {
      "font-family": {
        "$value": "{typography.family.mono}",
        "$type": "fontFamily"
      },
      "letter-spacing": {
        "$value": "0.15em",
        "$type": "letterSpacing"
      },
      "text-transform": {
        "$value": "uppercase",
        "$type": "textCase"
      },
      "size": {
        "$value": "13px",
        "$type": "fontSize"
      },
      "weight": {
        "$value": 600,
        "$type": "fontWeight"
      }
    }
  },
  "spacing": {
    "1": {
      "$value": "4px",
      "$type": "spacing"
    },
    "2": {
      "$value": "8px",
      "$type": "spacing"
    },
    "3": {
      "$value": "12px",
      "$type": "spacing"
    },
    "4": {
      "$value": "16px",
      "$type": "spacing"
    },
    "5": {
      "$value": "20px",
      "$type": "spacing"
    },
    "6": {
      "$value": "24px",
      "$type": "spacing"
    },
    "8": {
      "$value": "32px",
      "$type": "spacing"
    }
  },
  "border-radius": {
    "sm": {
      "$value": "4px",
      "$type": "borderRadius"
    },
    "md": {
      "$value": "6px",
      "$type": "borderRadius"
    },
    "card": {
      "$value": "8px",
      "$type": "borderRadius"
    },
    "lg": {
      "$value": "12px",
      "$type": "borderRadius"
    },
    "full": {
      "$value": "9999px",
      "$type": "borderRadius"
    }
  },
  "component": {
    "card": {
      "padding": {
        "$value": "16px",
        "$type": "spacing"
      },
      "border-radius": {
        "$value": "{border-radius.card}",
        "$type": "borderRadius"
      }
    },
    "button-primary": {
      "bg": {
        "$value": "{color.light.accent.teal}",
        "$type": "color"
      },
      "text": {
        "$value": "#ffffff",
        "$type": "color"
      },
      "border-radius": {
        "$value": "{border-radius.md}",
        "$type": "borderRadius"
      },
      "font-family": {
        "$value": "{typography.family.default}",
        "$type": "fontFamily"
      },
      "font-weight": {
        "$value": 600,
        "$type": "fontWeight"
      },
      "padding": {
        "$value": "8px 16px",
        "$type": "spacing"
      }
    }
  }
}