{
  "$comment": "Generated component snippets. Link the stylesheet first — every snippet's class is defined there; hover styles are already wired (`.bl-{name}:hover`). Do not inline or re-derive the styles.",
  "stylesheet": "https://galton-ai-assets.vercel.app/brand.css",
  "usage": "<link rel=\"stylesheet\" href=\"https://galton-ai-assets.vercel.app/brand.css\">",
  "snippets": [
    {
      "name": "button-yellow",
      "className": "bl-button-yellow",
      "html": "<button class=\"bl-button-yellow\">Label</button>",
      "styles": {
        "backgroundColor": "#FFD700",
        "textColor": "#1A1A1A",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "600",
        "lineHeight": "1",
        "rounded": "100px",
        "padding": "15px 30px",
        "border": "1px solid #1A1A1A"
      }
    },
    {
      "name": "button-primary",
      "className": "bl-button-primary",
      "html": "<button class=\"bl-button-primary\">Label</button>",
      "styles": {
        "backgroundColor": "#FFFFFF",
        "textColor": "#1A1A1A",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "600",
        "lineHeight": "1",
        "rounded": "100px",
        "padding": "15px 30px",
        "border": "1px solid #1A1A1A"
      }
    },
    {
      "name": "button-secondary",
      "className": "bl-button-secondary",
      "html": "<button class=\"bl-button-secondary\">Label</button>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "600",
        "lineHeight": "1",
        "rounded": "100px",
        "padding": "15px 30px",
        "border": "1px solid #FFFFFF"
      }
    },
    {
      "name": "text-input",
      "className": "bl-text-input",
      "html": "<input class=\"bl-text-input\" type=\"text\" placeholder=\"Placeholder\" />",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5",
        "rounded": "0px",
        "padding": "0",
        "height": "53px",
        "border": "0 0 1px 0 solid #FFFFFF"
      }
    },
    {
      "name": "textarea",
      "className": "bl-textarea",
      "html": "<textarea class=\"bl-textarea\" placeholder=\"Placeholder\"></textarea>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5",
        "rounded": "0px",
        "padding": "12px 0",
        "height": "120px",
        "border": "0 0 1px 0 solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "select",
      "className": "bl-select",
      "html": "<select class=\"bl-select\"><option>Option</option></select>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.4",
        "rounded": "0px",
        "padding": "0 30px 0 0",
        "height": "53px",
        "border": "0 0 1px 0 solid #FFFFFF"
      }
    },
    {
      "name": "checkbox",
      "className": "bl-checkbox",
      "html": "<input class=\"bl-checkbox\" type=\"checkbox\" />",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "rounded": "0px",
        "size": "30px",
        "border": "1px solid #FFFFFF"
      }
    },
    {
      "name": "text-link",
      "className": "bl-text-link",
      "html": "<a class=\"bl-text-link\" href=\"#\">Link text</a>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5"
      }
    },
    {
      "name": "eyebrow",
      "className": "bl-eyebrow",
      "html": "<span class=\"bl-eyebrow\">Label</span>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFD700",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "15px",
        "fontWeight": "500",
        "lineHeight": "1.4",
        "letterSpacing": "3.3px"
      }
    },
    {
      "name": "badge",
      "className": "bl-badge",
      "html": "<span class=\"bl-badge\">Label</span>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "15px",
        "fontWeight": "400",
        "lineHeight": "1",
        "letterSpacing": "1.2px",
        "rounded": "100px",
        "padding": "5.6px 13.6px",
        "border": "1px solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "card",
      "className": "bl-card",
      "html": "<div class=\"bl-card\">Content</div>",
      "styles": {
        "backgroundColor": "rgba(255,255,255,0.04)",
        "textColor": "#FFFFFF",
        "rounded": "20px",
        "padding": "28px",
        "border": "1px solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "top-nav",
      "className": "bl-top-nav",
      "html": "<div class=\"bl-top-nav\">Content</div>",
      "styles": {
        "backgroundColor": "#1A1A1A",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5",
        "height": "56px",
        "border": "none"
      }
    },
    {
      "name": "footer",
      "className": "bl-footer",
      "html": "<div class=\"bl-footer\">Content</div>",
      "styles": {
        "backgroundColor": "#1A1A1A",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5",
        "padding": "72px",
        "border": "none"
      }
    },
    {
      "name": "radio",
      "className": "bl-radio",
      "html": "<input class=\"bl-radio\" type=\"radio\" />",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "rounded": "100px",
        "size": "30px",
        "border": "1px solid #FFFFFF"
      }
    },
    {
      "name": "toggle",
      "className": "bl-toggle",
      "html": "<button class=\"bl-toggle\" role=\"switch\" aria-checked=\"false\"></button>",
      "styles": {
        "backgroundColor": "rgba(255,255,255,0.12)",
        "textColor": "#FFFFFF",
        "rounded": "100px",
        "width": "52px",
        "height": "30px",
        "border": "1px solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "slider-track",
      "className": "bl-slider-track",
      "html": "<div class=\"bl-slider-track\">Content</div>",
      "styles": {
        "backgroundColor": "rgba(255,255,255,0.12)",
        "rounded": "100px",
        "height": "4px"
      }
    },
    {
      "name": "slider-fill",
      "className": "bl-slider-fill",
      "html": "<div class=\"bl-slider-fill\">Content</div>",
      "styles": {
        "backgroundColor": "#FFD700",
        "rounded": "100px",
        "height": "4px"
      }
    },
    {
      "name": "slider-thumb",
      "className": "bl-slider-thumb",
      "html": "<div class=\"bl-slider-thumb\">Content</div>",
      "styles": {
        "backgroundColor": "#FFFFFF",
        "rounded": "100px",
        "size": "18px",
        "border": "1px solid #1A1A1A"
      }
    },
    {
      "name": "stepper",
      "className": "bl-stepper",
      "html": "<div class=\"bl-stepper\">Content</div>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5",
        "rounded": "0px",
        "height": "53px",
        "border": "0 0 1px 0 solid #FFFFFF"
      }
    },
    {
      "name": "stepper-button",
      "className": "bl-stepper-button",
      "html": "<button class=\"bl-stepper-button\">Label</button>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "rounded": "10px",
        "size": "30px",
        "border": "1px solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "search",
      "className": "bl-search",
      "html": "<input class=\"bl-search\" type=\"search\" placeholder=\"Search\" />",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5",
        "rounded": "0px",
        "height": "53px",
        "padding": "0 0 0 32px",
        "border": "0 0 1px 0 solid #FFFFFF"
      }
    },
    {
      "name": "tag",
      "className": "bl-tag",
      "html": "<span class=\"bl-tag\">Label</span>",
      "styles": {
        "backgroundColor": "rgba(255,255,255,0.04)",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "15px",
        "fontWeight": "400",
        "lineHeight": "1",
        "letterSpacing": "1.2px",
        "rounded": "100px",
        "padding": "6px 12px",
        "border": "1px solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "tab",
      "className": "bl-tab",
      "html": "<button class=\"bl-tab\" role=\"tab\">Tab</button>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5",
        "rounded": "0px",
        "padding": "0 0 12px",
        "border": "0 0 1px 0 solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "breadcrumb",
      "className": "bl-breadcrumb",
      "html": "<span class=\"bl-breadcrumb\">Label</span>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5"
      }
    },
    {
      "name": "pagination-item",
      "className": "bl-pagination-item",
      "html": "<span class=\"bl-pagination-item\">Label</span>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5",
        "rounded": "100px",
        "size": "44px",
        "border": "1px solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "menu",
      "className": "bl-menu",
      "html": "<div class=\"bl-menu\">Content</div>",
      "styles": {
        "backgroundColor": "rgba(255,255,255,0.04)",
        "textColor": "#FFFFFF",
        "rounded": "10px",
        "padding": "8px",
        "border": "1px solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "menu-item",
      "className": "bl-menu-item",
      "html": "<div class=\"bl-menu-item\">Content</div>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5",
        "rounded": "10px",
        "padding": "10px 14px"
      }
    },
    {
      "name": "modal",
      "className": "bl-modal",
      "html": "<div class=\"bl-modal\" role=\"dialog\" aria-modal=\"true\">Modal content</div>",
      "styles": {
        "backgroundColor": "rgba(255,255,255,0.04)",
        "textColor": "#FFFFFF",
        "rounded": "20px",
        "padding": "32px",
        "border": "1px solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "tooltip",
      "className": "bl-tooltip",
      "html": "<div class=\"bl-tooltip\" role=\"tooltip\">Tooltip text</div>",
      "styles": {
        "backgroundColor": "#FFFFFF",
        "textColor": "#1A1A1A",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "15px",
        "fontWeight": "400",
        "lineHeight": "1",
        "letterSpacing": "1.2px",
        "rounded": "10px",
        "padding": "6px 10px"
      }
    },
    {
      "name": "accordion",
      "className": "bl-accordion",
      "html": "<div class=\"bl-accordion\">Content</div>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "30px",
        "fontWeight": "300",
        "lineHeight": "1.2",
        "rounded": "0px",
        "padding": "24px 0",
        "border": "0 0 1px 0 solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "accordion-content",
      "className": "bl-accordion-content",
      "html": "<div class=\"bl-accordion-content\">Content</div>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5",
        "padding": "0 0 24px"
      }
    },
    {
      "name": "alert",
      "className": "bl-alert",
      "html": "<div class=\"bl-alert\" role=\"alert\">Alert message</div>",
      "styles": {
        "backgroundColor": "rgba(255,255,255,0.04)",
        "textColor": "#FFFFFF",
        "rounded": "20px",
        "padding": "16px 20px",
        "border": "1px solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "alert-success",
      "className": "bl-alert-success",
      "html": "<div class=\"bl-alert-success\">Content</div>",
      "styles": {
        "border": "0 0 0 3px solid #5FB87A"
      }
    },
    {
      "name": "alert-warning",
      "className": "bl-alert-warning",
      "html": "<div class=\"bl-alert-warning\">Content</div>",
      "styles": {
        "border": "0 0 0 3px solid #FFD700"
      }
    },
    {
      "name": "alert-error",
      "className": "bl-alert-error",
      "html": "<div class=\"bl-alert-error\">Content</div>",
      "styles": {
        "border": "0 0 0 3px solid #E0664E"
      }
    },
    {
      "name": "alert-info",
      "className": "bl-alert-info",
      "html": "<div class=\"bl-alert-info\">Content</div>",
      "styles": {
        "border": "0 0 0 3px solid #7FB2D4"
      }
    },
    {
      "name": "progress-track",
      "className": "bl-progress-track",
      "html": "<div class=\"bl-progress-track\">Content</div>",
      "styles": {
        "backgroundColor": "rgba(255,255,255,0.12)",
        "rounded": "100px",
        "height": "6px"
      }
    },
    {
      "name": "progress-fill",
      "className": "bl-progress-fill",
      "html": "<div class=\"bl-progress-fill\">Content</div>",
      "styles": {
        "backgroundColor": "#FFD700",
        "rounded": "100px",
        "height": "6px"
      }
    },
    {
      "name": "table",
      "className": "bl-table",
      "html": "<div class=\"bl-table\">Content</div>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "rounded": "20px",
        "border": "1px solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "table-header",
      "className": "bl-table-header",
      "html": "<div class=\"bl-table-header\">Content</div>",
      "styles": {
        "backgroundColor": "rgba(255,255,255,0.04)",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "15px",
        "fontWeight": "400",
        "lineHeight": "1",
        "letterSpacing": "1.2px",
        "border": "0 0 1px 0 solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "table-cell",
      "className": "bl-table-cell",
      "html": "<div class=\"bl-table-cell\">Content</div>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5",
        "border": "0 0 1px 0 solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "side-nav",
      "className": "bl-side-nav",
      "html": "<div class=\"bl-side-nav\">Content</div>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "rounded": "0px",
        "border": "0 1px 0 0 solid rgba(255,255,255,0.12)"
      }
    },
    {
      "name": "side-nav-item",
      "className": "bl-side-nav-item",
      "html": "<div class=\"bl-side-nav-item\">Content</div>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "18px",
        "fontWeight": "300",
        "lineHeight": "1.5",
        "rounded": "10px",
        "padding": "10px 14px"
      }
    },
    {
      "name": "index-row",
      "className": "bl-index-row",
      "html": "<div class=\"bl-index-row\">Content</div>",
      "styles": {
        "backgroundColor": "transparent",
        "textColor": "#FFFFFF",
        "fontFamily": "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "96px",
        "fontWeight": "300",
        "lineHeight": "1.1",
        "padding": "32px 28px",
        "border": "0 0 1px 0 solid rgba(255,255,255,0.12)"
      }
    }
  ]
}