White Theme

Token values as CSS custom properties.

{
  "colorScheme": "light",
  "background": {
    "background": "white (#ffffff)",
    "backgroundInverse": "gray-80 (#393939)",
    "backgroundBrand": "blue-60 (#0f62fe)",
    "backgroundActive": "gray-50 @ 50% opacity",
    "backgroundHover": "gray-50 @ 12% opacity",
    "backgroundInverseHover": "gray-80-hover (#474747)",
    "backgroundSelected": "gray-50 @ 20% opacity",
    "backgroundSelectedHover": "gray-50 @ 32% opacity"
  },
  "layer": {
    "layer01": "gray-10 (#f4f4f4)",
    "layerActive01": "gray-30 (#c6c6c6)",
    "layerBackground01": "white (#ffffff)",
    "layerHover01": "gray-10-hover (#e8e8e8)",
    "layerSelected01": "gray-20 (#e0e0e0)",
    "layerSelectedHover01": "gray-20-hover (#d1d1d1)",
    "layer02": "white (#ffffff)",
    "layerActive02": "gray-30 (#c6c6c6)",
    "layerBackground02": "gray-10 (#f4f4f4)",
    "layerHover02": "white-hover (#e8e8e8)",
    "layerSelected02": "gray-20 (#e0e0e0)",
    "layerSelectedHover02": "gray-20-hover (#d1d1d1)",
    "layer03": "gray-10 (#f4f4f4)",
    "layerActive03": "gray-30 (#c6c6c6)",
    "layerBackground03": "white (#ffffff)",
    "layerHover03": "gray-10-hover (#e8e8e8)",
    "layerSelected03": "gray-20 (#e0e0e0)",
    "layerSelectedHover03": "gray-20-hover (#d1d1d1)",
    "layerSelectedInverse": "gray-100 (#161616)",
    "layerSelectedDisabled": "gray-50 (#8d8d8d)"
  },
  "layerAccent": {
    "layerAccent01": "gray-20 (#e0e0e0)",
    "layerAccentActive01": "gray-40 (#a8a8a8)",
    "layerAccentHover01": "gray-20-hover (#d1d1d1)"
  },
  "field": {
    "field01": "gray-10 (#f4f4f4)",
    "fieldHover01": "gray-10-hover (#e8e8e8)",
    "field02": "white (#ffffff)",
    "fieldHover02": "white-hover (#e8e8e8)"
  },
  "border": {
    "borderSubtle00": "gray-20 (#e0e0e0)",
    "borderSubtle01": "gray-30 (#c6c6c6)",
    "borderSubtleSelected01": "gray-30 (#c6c6c6)",
    "borderSubtle02": "gray-20 (#e0e0e0)",
    "borderSubtle03": "gray-30 (#c6c6c6)",
    "borderStrong01": "gray-50 (#8d8d8d)",
    "borderStrong02": "gray-50 (#8d8d8d)",
    "borderStrong03": "gray-50 (#8d8d8d)",
    "borderTile01": "gray-30 (#c6c6c6)",
    "borderTile02": "gray-40 (#a8a8a8)",
    "borderInverse": "gray-100 (#161616)",
    "borderInteractive": "blue-60 (#0f62fe)",
    "borderDisabled": "gray-30 (#c6c6c6)"
  },
  "text": {
    "textPrimary": "gray-100 (#161616)",
    "textSecondary": "gray-70 (#525252)",
    "textPlaceholder": "gray-100 @ 40% opacity",
    "textHelper": "gray-60 (#6f6f6f)",
    "textError": "red-60 (#da1e28)",
    "textInverse": "white (#ffffff)",
    "textOnColor": "white (#ffffff)",
    "textOnColorDisabled": "gray-50 (#8d8d8d)",
    "textDisabled": "gray-100 @ 25% opacity"
  },
  "link": {
    "linkPrimary": "blue-60 (#0f62fe)",
    "linkPrimaryHover": "blue-70 (#0043ce)",
    "linkSecondary": "blue-70 (#0043ce)",
    "linkInverse": "blue-40 (#78a9ff)",
    "linkVisited": "purple-60 (#8a3ffc)",
    "linkInverseVisited": "purple-40 (#be95ff)"
  },
  "icon": {
    "iconPrimary": "gray-100 (#161616)",
    "iconSecondary": "gray-70 (#525252)",
    "iconInverse": "white (#ffffff)",
    "iconOnColor": "white (#ffffff)",
    "iconOnColorDisabled": "gray-50 (#8d8d8d)",
    "iconDisabled": "gray-100 @ 25% opacity",
    "iconInteractive": "blue-60 (#0f62fe)"
  },
  "support": {
    "supportError": "red-60 (#da1e28)",
    "supportSuccess": "green-50 (#24a148)",
    "supportWarning": "yellow-30 (#f1c21b)",
    "supportInfo": "blue-70 (#0043ce)",
    "supportErrorInverse": "red-50 (#fa4d56)",
    "supportSuccessInverse": "green-40 (#42be65)",
    "supportWarningInverse": "yellow-30 (#f1c21b)",
    "supportInfoInverse": "blue-50 (#4589ff)",
    "supportCautionMinor": "yellow-30 (#f1c21b)",
    "supportCautionMajor": "orange-40 (#ff832b)",
    "supportCautionUndefined": "purple-60 (#8a3ffc)"
  },
  "focus": {
    "focus": "blue-60 (#0f62fe)",
    "focusInset": "white (#ffffff)",
    "focusInverse": "white (#ffffff)"
  },
  "misc": {
    "interactive": "blue-60 (#0f62fe)",
    "highlight": "blue-20 (#d0e2ff)",
    "overlay": "black @ 60% opacity",
    "toggleOff": "gray-50 (#8d8d8d)",
    "shadow": "rgba(0, 0, 0, 0.3)"
  },
  "skeleton": {
    "skeletonBackground": "white-hover (#e8e8e8)",
    "skeletonElement": "gray-30 (#c6c6c6)"
  }
}