greyhaven-design-system/tokens/color.json

{
  "color": {
    "$description": "Greyhaven Design System — Color Tokens",
    "primitive": {
      "$description": "Raw color values — reference only, use semantic tokens in components",
      "off-white": {
        "$type": "color",
        "$value": "#F9F9F7",
        "$description": "Primary light surface — cards, elevated areas"
      },
      "off-black": {
        "$type": "color",
        "$value": "#161614",
        "$description": "Primary dark — foreground text, dark mode background"
      },
      "orange": {
        "$type": "color",
        "$value": "#D95E2A",
        "$description": "Only accent color — used sparingly for primary actions and emphasis"
      },
      "destructive-red": {
        "$type": "color",
        "$value": "#B43232",
        "$description": "Error/danger states"
      },
      "grey": {
        "1": {
          "$type": "color",
          "$value": "#F0F0EC",
          "$description": "5% — Subtle backgrounds, secondary, muted"
        },
        "2": {
          "$type": "color",
          "$value": "#DDDDD7",
          "$description": "10% — Accent hover, light borders"
        },
        "3": {
          "$type": "color",
          "$value": "#C4C4BD",
          "$description": "20% — Border, input"
        },
        "4": {
          "$type": "color",
          "$value": "#A6A69F",
          "$description": "50% — Mid-tone"
        },
        "5": {
          "$type": "color",
          "$value": "#7F7F79",
          "$description": "60% — Mid-dark"
        },
        "7": {
          "$type": "color",
          "$value": "#575753",
          "$description": "70% — Secondary foreground, muted foreground"
        },
        "8": {
          "$type": "color",
          "$value": "#2F2F2C",
          "$description": "80% — Dark mode card, dark surfaces"
        }
      }
    },
    "semantic": {
      "$description": "Semantic color assignments for light theme",
      "background": {
        "$type": "color",
        "$value": "{color.primitive.grey.1}",
        "$description": "Page background"
      },
      "foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-black}",
        "$description": "Primary text"
      },
      "card": {
        "$type": "color",
        "$value": "{color.primitive.off-white}",
        "$description": "Card/elevated surface background"
      },
      "card-foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-black}",
        "$description": "Card text"
      },
      "popover": {
        "$type": "color",
        "$value": "{color.primitive.off-white}",
        "$description": "Popover background"
      },
      "popover-foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-black}",
        "$description": "Popover text"
      },
      "primary": {
        "$type": "color",
        "$value": "{color.primitive.orange}",
        "$description": "Primary accent — buttons, links, focus rings"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-white}",
        "$description": "Text on primary accent"
      },
      "secondary": {
        "$type": "color",
        "$value": "{color.primitive.grey.1}",
        "$description": "Secondary button/surface"
      },
      "secondary-foreground": {
        "$type": "color",
        "$value": "{color.primitive.grey.8}",
        "$description": "Text on secondary surface"
      },
      "muted": {
        "$type": "color",
        "$value": "{color.primitive.grey.1}",
        "$description": "Muted/subdued background"
      },
      "muted-foreground": {
        "$type": "color",
        "$value": "{color.primitive.grey.7}",
        "$description": "Muted/subdued text"
      },
      "accent": {
        "$type": "color",
        "$value": "{color.primitive.grey.2}",
        "$description": "Subtle hover state"
      },
      "accent-foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-black}",
        "$description": "Text on accent hover"
      },
      "destructive": {
        "$type": "color",
        "$value": "{color.primitive.destructive-red}",
        "$description": "Destructive/error actions"
      },
      "destructive-foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-white}",
        "$description": "Text on destructive"
      },
      "border": {
        "$type": "color",
        "$value": "{color.primitive.grey.3}",
        "$description": "Default border"
      },
      "input": {
        "$type": "color",
        "$value": "{color.primitive.grey.3}",
        "$description": "Input border"
      },
      "ring": {
        "$type": "color",
        "$value": "{color.primitive.orange}",
        "$description": "Focus ring"
      },
      "chart": {
        "1": {
          "$type": "color",
          "$value": "{color.primitive.orange}",
          "$description": "Chart accent"
        },
        "2": {
          "$type": "color",
          "$value": "{color.primitive.grey.7}",
          "$description": "Chart secondary"
        },
        "3": {
          "$type": "color",
          "$value": "{color.primitive.grey.5}",
          "$description": "Chart tertiary"
        },
        "4": {
          "$type": "color",
          "$value": "{color.primitive.grey.4}",
          "$description": "Chart quaternary"
        },
        "5": {
          "$type": "color",
          "$value": "{color.primitive.grey.8}",
          "$description": "Chart quinary"
        }
      },
      "sidebar": {
        "background": {
          "$type": "color",
          "$value": "{color.primitive.grey.1}",
          "$description": "Sidebar background"
        },
        "foreground": {
          "$type": "color",
          "$value": "{color.primitive.off-black}",
          "$description": "Sidebar text"
        },
        "primary": {
          "$type": "color",
          "$value": "{color.primitive.orange}",
          "$description": "Sidebar primary accent"
        },
        "primary-foreground": {
          "$type": "color",
          "$value": "{color.primitive.off-white}",
          "$description": "Sidebar primary text"
        },
        "accent": {
          "$type": "color",
          "$value": "{color.primitive.grey.3}",
          "$description": "Sidebar accent/hover"
        },
        "accent-foreground": {
          "$type": "color",
          "$value": "{color.primitive.off-black}",
          "$description": "Sidebar accent text"
        },
        "border": {
          "$type": "color",
          "$value": "{color.primitive.grey.3}",
          "$description": "Sidebar border"
        },
        "ring": {
          "$type": "color",
          "$value": "{color.primitive.orange}",
          "$description": "Sidebar focus ring"
        }
      }
    },
    "dark": {
      "$description": "Dark theme overrides — inverted warm greys, same orange accent",
      "background": {
        "$type": "color",
        "$value": "{color.primitive.off-black}",
        "$description": "Dark page background"
      },
      "foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-white}",
        "$description": "Dark primary text"
      },
      "card": {
        "$type": "color",
        "$value": "{color.primitive.grey.8}",
        "$description": "Dark card surface"
      },
      "card-foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-white}",
        "$description": "Dark card text"
      },
      "popover": {
        "$type": "color",
        "$value": "{color.primitive.grey.8}",
        "$description": "Dark popover"
      },
      "popover-foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-white}",
        "$description": "Dark popover text"
      },
      "primary": {
        "$type": "color",
        "$value": "{color.primitive.orange}",
        "$description": "Same orange in dark mode"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-white}",
        "$description": "Dark primary foreground"
      },
      "secondary": {
        "$type": "color",
        "$value": "{color.primitive.grey.7}",
        "$description": "Dark secondary"
      },
      "secondary-foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-white}",
        "$description": "Dark secondary text"
      },
      "muted": {
        "$type": "color",
        "$value": "{color.primitive.grey.7}",
        "$description": "Dark muted"
      },
      "muted-foreground": {
        "$type": "color",
        "$value": "{color.primitive.grey.3}",
        "$description": "Dark muted text"
      },
      "accent": {
        "$type": "color",
        "$value": "{color.primitive.grey.7}",
        "$description": "Dark accent/hover"
      },
      "accent-foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-white}",
        "$description": "Dark accent text"
      },
      "destructive": {
        "$type": "color",
        "$value": "{color.primitive.destructive-red}",
        "$description": "Same destructive in dark mode"
      },
      "destructive-foreground": {
        "$type": "color",
        "$value": "{color.primitive.off-white}",
        "$description": "Dark destructive text"
      },
      "border": {
        "$type": "color",
        "$value": "{color.primitive.grey.7}",
        "$description": "Dark border"
      },
      "input": {
        "$type": "color",
        "$value": "{color.primitive.grey.7}",
        "$description": "Dark input border"
      },
      "ring": {
        "$type": "color",
        "$value": "{color.primitive.orange}",
        "$description": "Dark focus ring"
      },
      "chart": {
        "1": {
          "$type": "color",
          "$value": "{color.primitive.orange}",
          "$description": "Dark chart accent"
        },
        "2": {
          "$type": "color",
          "$value": "{color.primitive.grey.3}",
          "$description": "Dark chart secondary"
        },
        "3": {
          "$type": "color",
          "$value": "{color.primitive.grey.4}",
          "$description": "Dark chart tertiary"
        },
        "4": {
          "$type": "color",
          "$value": "{color.primitive.grey.5}",
          "$description": "Dark chart quaternary"
        },
        "5": {
          "$type": "color",
          "$value": "{color.primitive.grey.1}",
          "$description": "Dark chart quinary"
        }
      },
      "sidebar": {
        "background": {
          "$type": "color",
          "$value": "{color.primitive.grey.8}",
          "$description": "Dark sidebar background"
        },
        "foreground": {
          "$type": "color",
          "$value": "{color.primitive.off-white}",
          "$description": "Dark sidebar text"
        },
        "primary": {
          "$type": "color",
          "$value": "{color.primitive.orange}",
          "$description": "Dark sidebar primary"
        },
        "primary-foreground": {
          "$type": "color",
          "$value": "{color.primitive.off-white}",
          "$description": "Dark sidebar primary text"
        },
        "accent": {
          "$type": "color",
          "$value": "{color.primitive.grey.7}",
          "$description": "Dark sidebar accent"
        },
        "accent-foreground": {
          "$type": "color",
          "$value": "{color.primitive.off-white}",
          "$description": "Dark sidebar accent text"
        },
        "border": {
          "$type": "color",
          "$value": "{color.primitive.grey.7}",
          "$description": "Dark sidebar border"
        },
        "ring": {
          "$type": "color",
          "$value": "{color.primitive.orange}",
          "$description": "Dark sidebar ring"
        }
      }
    }
  }
}