Color system

VARAHI uses a Material-style token architecture: a small set of semantic tokens that every section consumes, layered over a fixed surface ramp. You do not pick a colour for a button — you pick a role, and the theme decides where it goes.

Theme settings colors — Theme settings → Colors

Rebrand in three settings

Everything in the theme derives from three merchant-facing colours.

Setting	Default	Role
Primary Color	`#eafcff`	Primary text on accent surfaces, large emphasis
Primary Container	`#00f0ff`	Buttons, links, focus rings, active states, the signature cyan
Secondary Container	`#9b5de5`	The violet counterpoint — accents, highlights, secondary emphasis
Background Color	`#05080d`	The page canvas every section sits on

Set Primary Container and Secondary Container first. Those two carry essentially all the visual identity. The rest of the ramp re-derives automatically and stays legible.

The full token list

Primary — your signature colour

Token	Default	Used for
`color_primary`	`#eafcff`	Primary text on coloured surfaces
`color_on_primary`	`#002022`	Text on a primary fill
`color_primary_container`	`#00f0ff`	Buttons, links, focus rings, icons, glows
`color_on_primary_container`	`#002022`	Text on a primary container
`color_primary_fixed`	`#38fdf8`	Fixed primary across themes
`color_primary_fixed_dim`	`#00c3d9`	Dimmed fixed primary
`color_on_primary_fixed`	`#002022`	Text on fixed primary
`color_on_primary_fixed_variant`	`#004f54`	Muted text on fixed primary

Secondary — the counterpoint

Token	Default	Used for
`color_secondary`	`#b87df8`	Secondary emphasis text
`color_on_secondary`	`#24063a`	Text on secondary
`color_secondary_container`	`#9b5de5`	Accent fills, the violet glow
`color_on_secondary_container`	`#f8d8ff`	Text on secondary container
`color_secondary_fixed`	`#b87df8`	Fixed secondary
`color_secondary_fixed_dim`	`#9b5de5`	Dimmed fixed secondary
`color_on_secondary_fixed`	`#24063a`	Text on fixed secondary
`color_on_secondary_fixed_variant`	`#4a1d75`	Muted text on fixed secondary

Surfaces — the depth ramp

VARAHI is a dark-first theme. The surface ramp is fixed and gives the theme its depth: panels read as elevated because they sit on a lighter step of the ramp, not because they have a heavy shadow.

Token	Value	Used for
`color_surface`	`#05080d`	Page background
`color_surface_dim`	`#04070a`	Recessed areas
`color_surface_container_low`	`#070b10`	Low-elevation panels
`color_surface_container`	`#0b1119`	Standard cards
`color_surface_container_high`	`#101824`	Raised panels, nav bar
`color_surface_container_highest`	`#192436`	Highest elevation, dropdowns
`color_surface_variant`	`#23324a`	Outlines, dividers
`color_on_surface`	`#e2e8f0`	Primary body text
`color_on_surface_variant`	`#94a3b8`	Secondary text, captions

Status colours

Token	Value	Used for
`color_success`	`#34d399`	In-stock, order confirmed
`color_warning`	`#fbbf24`	Low stock, expiring
`color_error`	`#ff6b6b`	Sold out, form errors
`color_tertiary_container`	`#fed639`	Bulk-pack savings chip

Glass and glow

The theme’s signature “Obsidian Signal” look comes from four composite tokens you can reuse in custom CSS.

--glass-panel-bg: rgba(13, 20, 31, .72);
--glass-card-bg: rgba(16, 26, 42, .6);
--glass-border: rgba(0, 240, 255, .12);
--glass-glow: 0 0 25px rgba(0, 240, 255, .35);

Glass panels use backdrop-filter. On very low-end Android devices the blur can be expensive. If you see scroll jank, raise the panel opacity or remove the blur — the panel still reads correctly without it.

Contrast is enforced

VARAHI’s palette is checked against WCAG AA for body text. When you change your brand colours, verify the two pairs that matter most:

Pair	Minimum
Text on your primary container	4.5:1
Body text on your background	4.5:1

The theme already ships a passing contrast audit — changing colours is the one action that can break it.

Keep the background dark. The glass surfaces, the glows and the grid overlays are all tuned for a dark canvas. A light background will work, but you will need to override several surface tokens to keep the elevation readable.

Typography

Fonts, the type scale, and how VARAHI loads them.

Branding

Logo, favicon, social share image.

Getting Started

Theme Configuration

Sections & Blocks

Features

Going Further

Resources

Color system

Color system

Rebrand in three settings

The full token list

Primary — your signature colour

Secondary — the counterpoint

Surfaces — the depth ramp

Status colours

Glass and glow

Contrast is enforced

Typography

Branding

​Color system

​Rebrand in three settings

​The full token list

​Primary — your signature colour

​Secondary — the counterpoint

​Surfaces — the depth ramp

​Status colours

​Glass and glow

​Contrast is enforced

Typography

Branding

Color system

Rebrand in three settings

The full token list

Primary — your signature colour

Secondary — the counterpoint

Surfaces — the depth ramp

Status colours

Glass and glow

Contrast is enforced