{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$description": "Supliful brandkit — Button & Card component specs resolved from the dashboard Chakra theme. Regenerate with: node scripts/export-brandkit.mjs",
  "$generatedAt": "2026-08-25T09:24:31.290Z",
  "button": {
    "$description": "Pill-shaped button (border-radius: 9999px). Medium font weight, 0.2s all transition, emerald focus ring (2px, 2px offset). Disabled: 50% opacity, no pointer events. Default variant: primary; default size: md.",
    "base": {
      "display": "inline-flex",
      "alignItems": "center",
      "justifyContent": "center",
      "fontWeight": 500,
      "borderRadius": "9999px",
      "transition": "all 0.2s",
      "cursor": "pointer",
      "userSelect": "none",
      "outline": "none",
      "_focusVisible": {
        "ring": "2px",
        "ringColor": "#2aae73",
        "ringOffset": "2px"
      },
      "_disabled": {
        "opacity": 0.5,
        "cursor": "not-allowed",
        "pointerEvents": "none"
      }
    },
    "variants": {
      "primary": {
        "$description": "Main call-to-action. Brand emerald (dark shade #218968), white text. Use once per view for the dominant action (\"Order products\", \"Publish\").",
        "bg": "#218968",
        "color": "#FFFFFF",
        "shadow": "0 2px 8px rgba(0, 0, 0, 0.04)",
        "_hover": {
          "bg": "#2AAE73",
          "shadow": "0 4px 16px rgba(0, 0, 0, 0.08)"
        },
        "_active": {
          "bg": "#218968"
        },
        "_dark": {
          "bg": "#2AAE73",
          "_hover": {
            "bg": "#6BC78A"
          },
          "_active": {
            "bg": "#218968"
          }
        }
      },
      "secondary": {
        "$description": "High-emphasis alternative to primary. Near-black background, white text. Use for strong actions that are not the brand CTA.",
        "bg": "#18181b",
        "color": "#FFFFFF",
        "shadow": "0 2px 8px rgba(0, 0, 0, 0.04)",
        "_hover": {
          "bg": "#27272a",
          "shadow": "0 4px 16px rgba(0, 0, 0, 0.08)"
        },
        "_active": {
          "bg": "#3f3f46"
        },
        "_dark": {
          "bg": "#f4f4f5",
          "color": "#18181b",
          "_hover": {
            "bg": "#e4e4e7"
          },
          "_active": {
            "bg": "#d4d4d8"
          }
        }
      },
      "outline": {
        "$description": "Medium emphasis. Transparent with 2px gray border. Use for secondary actions alongside a primary button.",
        "bg": "transparent",
        "color": "#3f3f46",
        "borderWidth": "2px",
        "borderColor": "#e4e4e7",
        "_hover": {
          "bg": "#fafafa",
          "borderColor": "#d4d4d8"
        },
        "_active": {
          "bg": "#f4f4f5"
        },
        "_dark": {
          "color": "#d4d4d8",
          "borderColor": "#2a2a2a",
          "_hover": {
            "bg": "#262626",
            "borderColor": "#404040"
          },
          "_active": {
            "bg": "#333333"
          }
        }
      },
      "ghost": {
        "$description": "Low emphasis. Transparent, no border; gray text with subtle hover fill. Use for tertiary/inline actions and icon buttons.",
        "bg": "transparent",
        "color": "#3f3f46",
        "_hover": {
          "bg": "#f4f4f5"
        },
        "_active": {
          "bg": "#e4e4e7"
        },
        "_dark": {
          "color": "#d4d4d8",
          "_hover": {
            "bg": "#262626"
          },
          "_active": {
            "bg": "#333333"
          }
        }
      },
      "danger": {
        "$description": "Destructive actions (delete, remove, disconnect). Red background, white text. Pair with a confirmation step.",
        "bg": "#dc2626",
        "color": "#FFFFFF",
        "shadow": "0 2px 8px rgba(0, 0, 0, 0.04)",
        "_hover": {
          "bg": "#b91c1c",
          "shadow": "0 4px 16px rgba(0, 0, 0, 0.08)"
        },
        "_active": {
          "bg": "#991b1b"
        },
        "_dark": {
          "bg": "#dc2626",
          "_hover": {
            "bg": "#ef4444"
          },
          "_active": {
            "bg": "#b91c1c"
          }
        }
      }
    },
    "sizes": {
      "sm": {
        "$description": "Compact contexts: table rows, cards, toolbars.",
        "height": "2rem",
        "px": "0.75rem",
        "fontSize": "0.875rem",
        "gap": "0.5rem"
      },
      "md": {
        "$description": "Default. Page-level actions and forms.",
        "height": "3rem",
        "px": "1.5rem",
        "fontSize": "1rem",
        "gap": "0.5rem"
      },
      "lg": {
        "$description": "Hero/marketing moments and large empty states.",
        "height": "3.5rem",
        "px": "2rem",
        "fontSize": "1.125rem",
        "gap": "0.75rem"
      }
    }
  },
  "card": {
    "$description": "Content container. White surface, 1px gray border, 16px radius, small resting shadow that lifts on hover (0.2s). Dark mode: #1a1a1a surface, #2a2a2a border, no shadow — hover brightens the border instead. Cards in the dashboard are typically borderless white on the gray page background; this recipe is the bordered variant for standalone use.",
    "base": {
      "bg": "#FFFFFF",
      "border": "1px solid",
      "borderColor": "#e4e4e7",
      "borderRadius": "1rem",
      "boxShadow": "0 1px 2px rgba(0, 0, 0, 0.05)",
      "_hover": {
        "boxShadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
      },
      "transition": "box-shadow 0.2s, border-color 0.2s",
      "_dark": {
        "bg": "#1a1a1a",
        "borderColor": "#2a2a2a",
        "boxShadow": "none",
        "_hover": {
          "borderColor": "#404040"
        }
      }
    }
  }
}