The embed exposes a number of design tokens which we can customise to suit the branding needs of your application. Under the hood, these are set as CSS variables and piped into Tailwind CSS for use in our components.
To create or edit your theme, please reach out to an Axle representative. For new clients, we’ll action this as part of your onboarding.
Design tokens
All tokens are optional. Unset tokens fall back to our default theme.
Colour tokens
Colours are expressed as CSS colour strings. The codebase prefers OKLCH for perceptual uniformity, but hex and HSL are also supported.
Tokens are organised into base/foreground pairs. The base token (e.g. --primary) controls a surface colour, and its matching -foreground token (e.g. --primary-foreground) controls the text and icon colour that sits on that surface. Set them together so that content remains legible against each surface.
Brand
| CSS variable | Purpose | Default | |
|---|
--primary | Main brand colour — buttons, key links | oklch(0.205 0 0) | |
--primary-foreground | On primary surfaces | oklch(0.985 0 0) | |
--secondary | Secondary brand colour | #2e2f35 | |
--secondary-foreground | On secondary surfaces | #e5e5e7 | |
--accent | Accent colour for emphasis | #2e2f35 | |
Surfaces
| CSS variable | Purpose | Default | |
|---|
--background | Page or view background | oklch(1 0 0) | |
--foreground | Default body text | oklch(0.145 0 0) | |
--card | Card surfaces | oklch(0.99 0 0) | |
--popover | Popover / dropdown background | oklch(1 0 0) | |
--popover-foreground | On popover surfaces | oklch(0.145 0 0) | |
--muted | Subdued backgrounds — inputs, badges | #f3f2f280 | |
--muted-foreground | On muted surfaces | oklch(0.556 0 0) | |
--scrim | Backdrop overlay behind sheets and dialogs | oklch(0.975 0 0) | |
--pill | Pill / chip backgrounds | oklch(1 0 0) | |
--pill-foreground | On pill surfaces | oklch(0.205 0 0) | |
Feedback
| CSS variable | Purpose | Default | |
|---|
--destructive | Error / destructive actions | oklch(0.577 0.245 27.325) | |
--warning | Warning alert background | rgba(254, 250, 231, 1) | |
--warning-foreground | On warning surfaces | rgba(72, 61, 4, 1) | |
--info | Informational alert background | rgba(235, 243, 250, 1) | |
--info-foreground | On info surfaces | rgba(27, 70, 101, 1) | |
Borders & focus
| CSS variable | Purpose | Default | |
|---|
--border | Default borders | oklch(0.922 0 0) | |
--ring | Focus ring | oklch(0.708 0 0) | |
Radius
A single --radius value drives the entire corner-radius scale. The derived values --radius-sm, --radius-md, --radius-lg, --radius-xl, and --radius-2xl are all calculated from --radius, so components scale proportionally — set the base value and everything from inputs to cards to sheets stays in tune.
| CSS variable | Purpose | Default |
|---|
--radius | Base corner radius | 1.2rem |
Typography
| CSS variable | Purpose | Default |
|---|
(inline font-family) | Body text font stack, applied via an inline style | Inter |
--font-heading | Heading font stack, applied to h1–h6 | Inter |
Font customisation
We support three font strategies.
1. External fonts
We support the use of Google Fonts for externally hosted, publicly licensed fonts.
2. Local fonts
We support the use of custom fonts. You can provide us with font files, which we host alongside the embed.
Themes that rely on brand fonts typically use this path, with one or more weights defined and preload enabled for primary weights.
When using custom fonts, please ensure you have the required licenses for use in the app.
3. System fonts
Themes may also choose not to ship any font files, instead using a system font stack.
Copy and content configuration
Various parts of the onboarding flow are configurable per partner requirements. This is handled as part of dedicated engineering effort as we support your integration.
These theming options should cover the majority of needs for the majority of clients. If you have further requirements, please reach out to us via your customer support contact. 
