CSS variables
You can style external components using the CSS variables available on the root.
:root { --body-background-color: #ffffff; --font-family-base: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif; --border-radius-setting: round; --font-weight-normal: 400; --font-weight-bold: 600; --page-title-background-color: #ffffff; --page-title-color: rgba(0, 0, 0, 0.91); --page-title-font: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif; --page-title-font-weight: 600; --page-title-text-transform: none; --page-title-font-style: normal; --page-title-font-size: 1.375rem; --font-family-h1: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif; --font-weight-h1: 600; --font-style-h1: normal; --text-case-h1: none; --font-color-h1: rgba(0, 0, 0, 0.91); --font-size-h1: 2.8rem; --font-family-h2: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif; --font-weight-h2: 600; --font-style-h2: normal; --text-case-h2: none; --font-color-h2: rgba(0, 0, 0, 0.91); --font-size-h2: 2rem; --font-family-h3: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif; --font-weight-h3: 600; --font-style-h3: normal; --text-case-h3: none; --font-color-h3: rgba(0, 0, 0, 0.91); --font-size-h3: 1rem; --font-family-h4: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif; --font-weight-h4: 600; --font-style-h4: normal; --text-case-h4: none; --font-color-h4: rgba(0, 0, 0, 0.91); --font-size-h4: 0.875rem; --font-family-h5: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif; --font-weight-h5: 600; --font-style-h5: normal; --text-case-h5: uppercase; --font-color-h5: rgba(0, 0, 0, 0.55); --font-size-h5: 0.75rem; --btn-font-weight: 600; --btn-font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif; --btn-text-transform: none; --btn-border-radius: 9999px; --btn-primary-bg: #5548d9; --btn-primary-hover-bg: #483db8; --btn-primary-focus-bg: #5548d9; --btn-primary-active-bg: #3c3298; --btn-primary-color: #ffffff; --primary-shade-50: #f1f0fc; --primary-shade-800: #2f2877; --green-shade-50: #f0fff4; --green-shade-800: #22543d; --red-shade-50: #fff5f5; --red-shade-800: #822727; --blue-shade-50: #ebf8ff; --blue-shade-800: #2a4365; --yellow-shade-50: #fffff0; --yellow-shade-800: #744210; --body-bg: #ffffff; --main-color: #5548d9; --main-color-transparent: rgba(85, 72, 217, 0.15); --color-white: #ffffff; --color-black: #000000; --color-red: #e53e3e; --color-green: #38a169; --color-orange: #dd6b20; --color-blue: #3182ce; --color-pink: #d53f8c; --color-purple: #6d64d3; --color-deep-purple: #6d64d3; --color-indigo: #3182ce; --color-light-blue: #3182ce; --color-cyan: #00b5d8; --color-teal: #02999a; --color-light-green: #38a169; --color-lime: #38a169; --color-yellow: #d69e2e; --color-amber: #dd6b20; --color-deep-orange: #dd6b20; --color-brown: #dd6b20; --color-blue-gray: #737373; --color-main-color: #5548d9; --primary-25: #f1f0fc; --primary-50: #f1f0fc; --primary-100: #e6e4f9; --primary-200: #bbb6f0; --primary-300: #9188e6; --primary-400: #776de1; --primary-500: #5548d9; --primary-600: #483db8; --primary-700: #3c3298; --primary-800: #2f2877; --primary-900: #262062; --accent-color-200: #bbb6f0; --border-radius-md: 4px; --border-radius-lg: 6px; --border-radius-sm: 2px; --border-radius-xl: 9999px; --navbar-bg: #ffffff; --navbar-link-color: rgba(0, 0, 0, 0.68); --navbar-link-hover-color: rgba(0, 0, 0, 0.91); --navbar-link-hover-bg: transparent; --navbar-link-active-color: #5548d9; --navbar-link-active-bg: transparent; --navbar-font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif; --navbar-font-weight: 600; --navbar-text-transform: none; --navbar-logo-height: 24px; --navbar-logo-width: 110.5px; --page-header-bg: #ffffff; --page-header-color: rgba(0, 0, 0, 0.91); --page-header-font: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif; --page-header-font-weight: 600; --page-header-text-transform: none; --page-header-dark-mode: false }