CSS variables
You can style external components using the CSS variables available on the root.
RequestResponse
: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
}