{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Supabaze-Inspired",
  "meta": {
    "name": "Supabaze-Inspired",
    "description": "An inspired interpretation of Supabaze's design language — an open-source database platform built on a clean white-and-near-black system with a single signature emerald-green CTA, a custom humanist sans display tier, and dense product UI mockups composited above the hero. The brand reads as quietly technical: minimal chrome, a near-monochrome palette, and the green primary acting as the only chromatic event on the page.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#3ecf8e",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "primary-deep": {
      "$value": "#24b47e",
      "$type": "color",
      "$description": "Use for the primary deep role."
    },
    "primary-soft": {
      "$value": "#4ade80",
      "$type": "color",
      "$description": "Use for the primary soft role."
    },
    "ink": {
      "$value": "#171717",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "ink-secondary": {
      "$value": "#212121",
      "$type": "color",
      "$description": "Use for the ink secondary role."
    },
    "ink-mute": {
      "$value": "#707070",
      "$type": "color",
      "$description": "Use for the ink mute role."
    },
    "ink-mute-2": {
      "$value": "#9a9a9a",
      "$type": "color",
      "$description": "Use for the ink mute 2 role."
    },
    "ink-faint": {
      "$value": "#b2b2b2",
      "$type": "color",
      "$description": "Use for the ink faint role."
    },
    "on-primary": {
      "$value": "#171717",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "on-dark": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on dark role."
    },
    "canvas": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "canvas-soft": {
      "$value": "#fafafa",
      "$type": "color",
      "$description": "Use for the canvas soft role."
    },
    "canvas-night": {
      "$value": "#1c1c1c",
      "$type": "color",
      "$description": "Use for the canvas night role."
    },
    "canvas-night-soft": {
      "$value": "#202020",
      "$type": "color",
      "$description": "Use for the canvas night soft role."
    },
    "hairline": {
      "$value": "#dfdfdf",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-strong": {
      "$value": "#c7c7c7",
      "$type": "color",
      "$description": "Use for the hairline strong role."
    },
    "hairline-cool": {
      "$value": "#ededed",
      "$type": "color",
      "$description": "Use for the hairline cool role."
    },
    "hairline-cool-2": {
      "$value": "#efefef",
      "$type": "color",
      "$description": "Use for the hairline cool 2 role."
    },
    "hairline-cool-3": {
      "$value": "#d4d4d4",
      "$type": "color",
      "$description": "Use for the hairline cool 3 role."
    },
    "accent-purple": {
      "$value": "#6b01c2",
      "$type": "color",
      "$description": "Use for the accent purple role."
    },
    "accent-violet": {
      "$value": "#644fc1",
      "$type": "color",
      "$description": "Use for the accent violet role."
    },
    "accent-purple-soft": {
      "$value": "#eddbf9",
      "$type": "color",
      "$description": "Use for the accent purple soft role."
    },
    "accent-yellow": {
      "$value": "#ffdb13",
      "$type": "color",
      "$description": "Use for the accent yellow role."
    },
    "accent-tomato": {
      "$value": "#ff2201",
      "$type": "color",
      "$description": "Use for the accent tomato role."
    },
    "accent-pink": {
      "$value": "#c7007e",
      "$type": "color",
      "$description": "Use for the accent pink role."
    },
    "accent-indigo": {
      "$value": "#054cff",
      "$type": "color",
      "$description": "Use for the accent indigo role."
    },
    "accent-crimson": {
      "$value": "#e2005a",
      "$type": "color",
      "$description": "Use for the accent crimson role."
    }
  },
  "typography": {
    "display-xxl": {
      "$value": {
        "fontFamily": "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif",
        "fontSize": "64px",
        "fontWeight": 500,
        "lineHeight": 1.1,
        "letterSpacing": "-1.92px"
      },
      "$type": "typography",
      "$description": "Typography style for display xxl."
    },
    "display-xl": {
      "$value": {
        "fontFamily": "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif",
        "fontSize": "48px",
        "fontWeight": 500,
        "lineHeight": 1.1,
        "letterSpacing": "-1.44px"
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif",
        "fontSize": "36px",
        "fontWeight": 500,
        "lineHeight": 1.15,
        "letterSpacing": "-0.72px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif",
        "fontSize": "28px",
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": "-0.42px"
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "heading-lg": {
      "$value": {
        "fontFamily": "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif",
        "fontSize": "22px",
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading lg."
    },
    "heading-md": {
      "$value": {
        "fontFamily": "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif",
        "fontSize": "18px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading md."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif",
        "fontSize": "18px",
        "fontWeight": 400,
        "lineHeight": 1.55,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body-md": {
      "$value": {
        "fontFamily": "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "button-md": {
      "$value": {
        "fontFamily": "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    },
    "caption": {
      "$value": {
        "fontFamily": "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif",
        "fontSize": "13px",
        "fontWeight": 400,
        "lineHeight": 1.45,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "micro": {
      "$value": {
        "fontFamily": "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.45,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for micro."
    },
    "code": {
      "$value": {
        "fontFamily": "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', monospace",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for code."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "huge": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Spacing step huge."
    }
  },
  "radius": {
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://supabase.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}