# Recipe: button
Build one button component that matches this brand.
Palette: #000000, #ffffff, #0080ff, #2ca8ff, #ec0853
Typography: [object Object], [object Object]
Material: flat
Signals: Use plain Tailwind CSS without a component library. · Radius: 4, 8, 12, 16, 24, 32 · Shadows: rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.08) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px | rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px
## Anatomy (detected)
```json
{
  "kind": "button",
  "structuralHash": "button>svg>div",
  "instanceCount": 3,
  "variants": [
    {
      "css": {
        "background": "oklab(0.656006 0.239783 -0.0238809 / 0.05)",
        "color": "lab(49.5493 79.8381 2.31768)",
        "padding": "24px 24px 24px 24px",
        "borderRadius": "0px",
        "border": "0px 1px 0px 0px solid oklab(0.129999 -0.00404751 -0.027702 / 0.1)",
        "fontSize": "14px",
        "fontWeight": "400"
      },
      "instanceCount": 3
    }
  ]
}
```