Branding & style

Everything here lives in Blast Studio → Style.

The idea behind the design

Blast is built on one rule: charcoal is the material, blue is the light. Surfaces are deep neutral charcoal, and your brand colour is used for buttons, active states, links, focus rings and the soft ambient glows behind sections.

That is why the theme looks deliberate in dark mode and still feels like a design in light mode, rather than one being the inverse of the other.

Brand colours

Setting	Used for
Primary	Buttons, active navigation, focus rings, key highlights
Primary hover	Button hover states — usually a touch brighter
Secondary accent	Links, subtle emphasis, gradient accents
Success / Warning / Danger / Info	Status colours: badges, alerts, progress, icons

How light mode stays readable: in dark mode your exact colours are used. In light mode Blast limits the lightness of each colour just enough to keep text and icons readable on white surfaces. You choose one set of colours and both modes look right.

Choose colours that work in both modes

Mid-to-deep brand colours work best — the default blue is a good reference. Very light pastels look fine in dark mode but get darkened in light mode; very dark colours work in light mode but can feel heavy on charcoal. Preview both modes with the toolbar switcher before publishing.

Dark mode surfaces

The charcoal family. Adjust these to make dark mode warmer, colder, lighter or deeper — every dark surface in the theme follows them.

Setting	What it is
Dark background	The page canvas — a deep charcoal by default
Dark background secondary	Alternate banding behind sections
Dark surface	Cards, panels and dropdowns
Dark surface elevated	Modals, popovers and nested panels
Dark base / muted / inverted	Text, secondary text and inverted text
Dark neutral	Hairlines and borders

Light mode surfaces

The same set for light mode: background, surface, elevated surface, text, muted text, inverted text and borders. The defaults are a cool-white canvas with white cards and slate hairlines, tuned so light mode feels like a deliberate design rather than a washed-out inversion.

Typography

Setting	Options
Body font	Plus Jakarta Sans (default), Inter, Manrope, DM Sans, Outfit, IBM Plex Sans, Space Grotesk, System
Heading font	Sora (default), any body font, or same as body

Both fonts are loaded from Google Fonts on demand, so visitors only download the pair you choose.

Stores that must avoid external requests

Choose System for both fonts. The theme then uses the visitor's own operating-system fonts and makes no request to Google.

Shape and width

Setting	Options
Corner radius	Square, Small, Medium, Large (balanced), Extra large (soft)
Container width	Narrow 1180px, Default 1320px, Wide 1440px, Full width

Corner radius cascades through the whole theme — buttons, cards, inputs, modals, dropdowns and image frames all scale together, so one setting keeps everything consistent.

Logo and favicon

Found in Blast Studio → Header & menu → Logo & favicon.

Setting	Used for
Logo (light backgrounds)	Shown on light surfaces
Logo (dark backgrounds)	Shown on the charcoal header and footer
Favicon	The browser tab icon

A horizontal logo with a transparent background works best. If a field is left empty, the bundled Blast wordmark is used as a placeholder, so the site never looks broken while you get set up.

With an icon-only logo, set Header & menu → Logo & favicon → Logo display to Logo and Name to show your store name beside it in the header.

Upload it once

The header, footer, sign-in pages, client-area sidebar and error and maintenance pages all pick the logo up automatically.

Icons

Settings live in Blast Studio → Style → Icons.

Set	Description
Lucide (default)	A clean line-icon set, used across modern interfaces
Remix	The icon set Paymenter uses natively — pick this for maximum consistency with plugin screens

Nothing breaks either way. Anything without a match — brand logos, payment icons, icons a plugin supplies, solid status glyphs — always renders with its own original icon.

Hover motion

Icons can animate subtly when you hover the link, button or card containing them.

Motion	What happens
Playful (default)	Per-icon motion: arrows nudge, gears spin, bells ring, plus signs turn
Draw	Every icon redraws its outline on hover — a more uniform, technical feel
Off	No animation at all

Motion only plays on hover or keyboard focus, and visitors who prefer reduced motion get a fully static experience automatically.

Stroke weight

Option	Character
Light	Thinner, more elegant lines
Regular (default)	Balanced
Bold	Heavier and higher contrast — useful on very bright screens

Large display icons on the homepage are drawn slightly thinner automatically, so they stay optically balanced at big sizes.