{
  "$description": "Clay — design tokens from CSS Crème. The six semantic roles are the source; chart, sidebar and shadow groups are derived from them by fixed rules.",
  "$extensions": {
    "com.csscreme": {
      "source": "https://csscreme.com/themes/clay",
      "designMd": "https://csscreme.com/d/clay.md",
      "fingerprint": "fnv1a-668ccf0f",
      "defaultMode": "light",
      "derived": [
        "color.*.chart-*",
        "color.*.sidebar-*",
        "shadow.*"
      ]
    }
  },
  "color": {
    "light": {
      "background": {
        "$type": "color",
        "$value": "#F4F1FB"
      },
      "foreground": {
        "$type": "color",
        "$value": "#2A2440"
      },
      "card": {
        "$type": "color",
        "$value": "#FFFFFF"
      },
      "card-foreground": {
        "$type": "color",
        "$value": "#2A2440"
      },
      "popover": {
        "$type": "color",
        "$value": "#FFFFFF"
      },
      "popover-foreground": {
        "$type": "color",
        "$value": "#2A2440"
      },
      "primary": {
        "$type": "color",
        "$value": "#8B7CF6"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "secondary": {
        "$type": "color",
        "$value": "#fbfafe"
      },
      "secondary-foreground": {
        "$type": "color",
        "$value": "#2A2440"
      },
      "muted": {
        "$type": "color",
        "$value": "#fbfafe"
      },
      "muted-foreground": {
        "$type": "color",
        "$value": "#736C90"
      },
      "accent": {
        "$type": "color",
        "$value": "#F4A9C7"
      },
      "accent-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "destructive": {
        "$type": "color",
        "$value": "#e5484d"
      },
      "destructive-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "border": {
        "$type": "color",
        "$value": "#c7c2d6"
      },
      "input": {
        "$type": "color",
        "$value": "#c7c2d6"
      },
      "ring": {
        "$type": "color",
        "$value": "#8B7CF6"
      },
      "chart-1": {
        "$type": "color",
        "$value": "#8B7CF6"
      },
      "chart-2": {
        "$type": "color",
        "$value": "#F4A9C7"
      },
      "chart-3": {
        "$type": "color",
        "$value": "#dc7cf6"
      },
      "chart-4": {
        "$type": "color",
        "$value": "#7cbef6"
      },
      "chart-5": {
        "$type": "color",
        "$value": "#c093df"
      },
      "sidebar": {
        "$type": "color",
        "$value": "#faf8fd"
      },
      "sidebar-foreground": {
        "$type": "color",
        "$value": "#2A2440"
      },
      "sidebar-primary": {
        "$type": "color",
        "$value": "#8B7CF6"
      },
      "sidebar-primary-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "sidebar-accent": {
        "$type": "color",
        "$value": "#fbfafe"
      },
      "sidebar-accent-foreground": {
        "$type": "color",
        "$value": "#2A2440"
      },
      "sidebar-border": {
        "$type": "color",
        "$value": "#c7c2d6"
      },
      "sidebar-ring": {
        "$type": "color",
        "$value": "#8B7CF6"
      }
    },
    "dark": {
      "background": {
        "$type": "color",
        "$value": "#120f17"
      },
      "foreground": {
        "$type": "color",
        "$value": "#f3f3f4"
      },
      "card": {
        "$type": "color",
        "$value": "#222222"
      },
      "card-foreground": {
        "$type": "color",
        "$value": "#f3f3f4"
      },
      "popover": {
        "$type": "color",
        "$value": "#222222"
      },
      "popover-foreground": {
        "$type": "color",
        "$value": "#f3f3f4"
      },
      "primary": {
        "$type": "color",
        "$value": "#8B7CF6"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "secondary": {
        "$type": "color",
        "$value": "#1c1b1e"
      },
      "secondary-foreground": {
        "$type": "color",
        "$value": "#f3f3f4"
      },
      "muted": {
        "$type": "color",
        "$value": "#1c1b1e"
      },
      "muted-foreground": {
        "$type": "color",
        "$value": "#9f9da4"
      },
      "accent": {
        "$type": "color",
        "$value": "#F4A9C7"
      },
      "accent-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "destructive": {
        "$type": "color",
        "$value": "#e5484d"
      },
      "destructive-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "border": {
        "$type": "color",
        "$value": "#39373e"
      },
      "input": {
        "$type": "color",
        "$value": "#39373e"
      },
      "ring": {
        "$type": "color",
        "$value": "#8B7CF6"
      },
      "chart-1": {
        "$type": "color",
        "$value": "#8B7CF6"
      },
      "chart-2": {
        "$type": "color",
        "$value": "#F4A9C7"
      },
      "chart-3": {
        "$type": "color",
        "$value": "#dc7cf6"
      },
      "chart-4": {
        "$type": "color",
        "$value": "#7cbef6"
      },
      "chart-5": {
        "$type": "color",
        "$value": "#c093df"
      },
      "sidebar": {
        "$type": "color",
        "$value": "#1a191d"
      },
      "sidebar-foreground": {
        "$type": "color",
        "$value": "#f3f3f4"
      },
      "sidebar-primary": {
        "$type": "color",
        "$value": "#8B7CF6"
      },
      "sidebar-primary-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "sidebar-accent": {
        "$type": "color",
        "$value": "#1c1b1e"
      },
      "sidebar-accent-foreground": {
        "$type": "color",
        "$value": "#f3f3f4"
      },
      "sidebar-border": {
        "$type": "color",
        "$value": "#39373e"
      },
      "sidebar-ring": {
        "$type": "color",
        "$value": "#8B7CF6"
      }
    }
  },
  "shadow": {
    "light": {
      "2xs": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(42 36 64 / 0.05)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "2px",
            "spread": "0px"
          }
        ]
      },
      "xs": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(42 36 64 / 0.06)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "3px",
            "spread": "0px"
          }
        ]
      },
      "sm": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(42 36 64 / 0.08)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "3px",
            "spread": "0px"
          },
          {
            "color": "rgb(42 36 64 / 0.08)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "2px",
            "spread": "-1px"
          }
        ]
      },
      "md": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(42 36 64 / 0.09)",
            "offsetX": "0px",
            "offsetY": "4px",
            "blur": "6px",
            "spread": "-1px"
          },
          {
            "color": "rgb(42 36 64 / 0.09)",
            "offsetX": "0px",
            "offsetY": "2px",
            "blur": "4px",
            "spread": "-2px"
          }
        ]
      },
      "lg": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(42 36 64 / 0.1)",
            "offsetX": "0px",
            "offsetY": "10px",
            "blur": "15px",
            "spread": "-3px"
          },
          {
            "color": "rgb(42 36 64 / 0.1)",
            "offsetX": "0px",
            "offsetY": "4px",
            "blur": "6px",
            "spread": "-4px"
          }
        ]
      },
      "xl": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(42 36 64 / 0.12)",
            "offsetX": "0px",
            "offsetY": "20px",
            "blur": "25px",
            "spread": "-5px"
          },
          {
            "color": "rgb(42 36 64 / 0.12)",
            "offsetX": "0px",
            "offsetY": "8px",
            "blur": "10px",
            "spread": "-6px"
          }
        ]
      },
      "2xl": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(42 36 64 / 0.22)",
            "offsetX": "0px",
            "offsetY": "25px",
            "blur": "50px",
            "spread": "-12px"
          }
        ]
      }
    },
    "dark": {
      "2xs": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(243 243 244 / 0.16)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "2px",
            "spread": "0px"
          }
        ]
      },
      "xs": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(243 243 244 / 0.18)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "3px",
            "spread": "0px"
          }
        ]
      },
      "sm": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(243 243 244 / 0.22)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "3px",
            "spread": "0px"
          },
          {
            "color": "rgb(243 243 244 / 0.22)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "2px",
            "spread": "-1px"
          }
        ]
      },
      "md": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(243 243 244 / 0.26)",
            "offsetX": "0px",
            "offsetY": "4px",
            "blur": "6px",
            "spread": "-1px"
          },
          {
            "color": "rgb(243 243 244 / 0.26)",
            "offsetX": "0px",
            "offsetY": "2px",
            "blur": "4px",
            "spread": "-2px"
          }
        ]
      },
      "lg": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(243 243 244 / 0.3)",
            "offsetX": "0px",
            "offsetY": "10px",
            "blur": "15px",
            "spread": "-3px"
          },
          {
            "color": "rgb(243 243 244 / 0.3)",
            "offsetX": "0px",
            "offsetY": "4px",
            "blur": "6px",
            "spread": "-4px"
          }
        ]
      },
      "xl": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(243 243 244 / 0.34)",
            "offsetX": "0px",
            "offsetY": "20px",
            "blur": "25px",
            "spread": "-5px"
          },
          {
            "color": "rgb(243 243 244 / 0.34)",
            "offsetX": "0px",
            "offsetY": "8px",
            "blur": "10px",
            "spread": "-6px"
          }
        ]
      },
      "2xl": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(243 243 244 / 0.45)",
            "offsetX": "0px",
            "offsetY": "25px",
            "blur": "50px",
            "spread": "-12px"
          }
        ]
      }
    }
  },
  "dimension": {
    "radius": {
      "$type": "dimension",
      "$value": "24px"
    },
    "spacing": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Base step of the spacing scale"
    }
  },
  "fontFamily": {
    "heading": {
      "$type": "fontFamily",
      "$value": "Poppins"
    },
    "body": {
      "$type": "fontFamily",
      "$value": "Nunito Sans"
    }
  }
}