Theming

Apply per-partner branding to the smart charging experience using CSS variables.

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.