import BrandDev from 'brand.dev';

const client = new BrandDev({
  apiKey: process.env['BRAND_DEV_API_KEY'], // This is the default and can be omitted
});

const response = await client.brand.styleguide();

console.log(response.styleguide);

{
  "status": "<string>",
  "domain": "<string>",
  "styleguide": {
    "mode": "light",
    "colors": {
      "accent": "<string>",
      "background": "<string>",
      "text": "<string>"
    },
    "typography": {
      "headings": {
        "h1": {
          "fontFamily": "<string>",
          "fontSize": "<string>",
          "fontWeight": 123,
          "lineHeight": "<string>",
          "letterSpacing": "<string>"
        },
        "h2": {
          "fontFamily": "<string>",
          "fontSize": "<string>",
          "fontWeight": 123,
          "lineHeight": "<string>",
          "letterSpacing": "<string>"
        },
        "h3": {
          "fontFamily": "<string>",
          "fontSize": "<string>",
          "fontWeight": 123,
          "lineHeight": "<string>",
          "letterSpacing": "<string>"
        },
        "h4": {
          "fontFamily": "<string>",
          "fontSize": "<string>",
          "fontWeight": 123,
          "lineHeight": "<string>",
          "letterSpacing": "<string>"
        }
      },
      "p": {
        "fontFamily": "<string>",
        "fontSize": "<string>",
        "fontWeight": 123,
        "lineHeight": "<string>",
        "letterSpacing": "<string>"
      }
    },
    "elementSpacing": {
      "xs": "<string>",
      "sm": "<string>",
      "md": "<string>",
      "lg": "<string>",
      "xl": "<string>"
    },
    "shadows": {
      "sm": "<string>",
      "md": "<string>",
      "lg": "<string>",
      "xl": "<string>",
      "inner": "<string>"
    },
    "components": {
      "button": {
        "primary": {
          "backgroundColor": "<string>",
          "color": "<string>",
          "borderColor": "<string>",
          "borderRadius": "<string>",
          "borderWidth": "<string>",
          "borderStyle": "<string>",
          "padding": "<string>",
          "fontSize": "<string>",
          "fontWeight": 123,
          "textDecoration": "<string>",
          "boxShadow": "<string>"
        },
        "secondary": {
          "backgroundColor": "<string>",
          "color": "<string>",
          "borderColor": "<string>",
          "borderRadius": "<string>",
          "borderWidth": "<string>",
          "borderStyle": "<string>",
          "padding": "<string>",
          "fontSize": "<string>",
          "fontWeight": 123,
          "textDecoration": "<string>",
          "boxShadow": "<string>"
        },
        "link": {
          "backgroundColor": "<string>",
          "color": "<string>",
          "borderColor": "<string>",
          "borderRadius": "<string>",
          "borderWidth": "<string>",
          "borderStyle": "<string>",
          "padding": "<string>",
          "fontSize": "<string>",
          "fontWeight": 123,
          "textDecoration": "<string>",
          "boxShadow": "<string>"
        }
      },
      "card": {
        "backgroundColor": "<string>",
        "borderColor": "<string>",
        "borderRadius": "<string>",
        "borderWidth": "<string>",
        "borderStyle": "<string>",
        "padding": "<string>",
        "boxShadow": "<string>",
        "textColor": "<string>"
      }
    }
  },
  "code": 123
}