Theming — SquareKit

Theming at a glance

A theme gives each institution a recognizable identity while SquareKit keeps meaning, accessibility, and component behavior consistent.

Choice	What it changes
Primary	The main Brand color and its matching neutral palette.
Secondary	An optional supporting Brand color.
Light or Dark	The appearance of surfaces, text, borders, and states.

Components stay the same

Components use stable roles from their platform UI Kit. Changing a Brand theme or appearance changes the resolved colors, not the component's structure or behavior.

Brand themes

Choose approved Primary and Secondary colors. Primary also selects the matching brand-neutral palette used for subtle surfaces, borders, and muted content.

Option	Available choices	How it works
Primary	22 approved colors	Sets the main Brand color and matching neutral palette.
Secondary	22 approved colors	Sets an optional supporting Brand color.
Da Vinci	ParentSquare Green + ParentSquare Orange	Required default pairing.
Monet	Monet Green + Monet Cyan	Required approved pairing.
Figma adapter	20 of 22 colors	Omits Evergreen and Sapphire only because Figma variable collections allow 20 modes.

Supporting neutrals follow Primary

Each approved Primary owns one visually tuned, contrast-tested, versioned supporting-neutral profile. Named themes and custom pairings inherit that profile from Primary. Consuming products do not generate it, and Secondary does not select a second neutral profile.

Da Vinci

Required approved pairing

Primary: ParentSquare Green

Secondary: ParentSquare Orange

Brand neutral: ParentSquare Green

Monet

Required approved pairing

Primary: Green

Secondary: Cyan

Brand neutral: Green

ParentSquare Green

ParentSquare Orange

Green

Cyan

Navy

Ocean

Midnight

Harbor

Cardinal

Brick

Cobalt

Crimson

Maroon

Plum

Iris

Violet

Evergreen

Teal

Sapphire

Gold

Kelly

Neutral

Canonical catalog

Primary and Secondary offer the same 22 Brand colors, and every Primary color includes a matching neutral palette. The Figma adapter exposes 20 modes because of Figma's collection limit, so Evergreen and Sapphire are omitted there only. They remain available in tokens and documentation.

Light and Dark appearance

Light and Dark change how approved color roles resolve. They do not change the Brand theme, the meaning of a role, or the structure of a component.

Review supported text, surface, border, focus, and state relationships in both appearances.
Keep success, warning, error, information, and destructive meaning stable across every Brand theme.
Pair important color meaning with text, icons, labels, position, or pattern.
Apply the theme and appearance at a shared product or comparison container, not on individual components.

Use platform roles

Web, iOS, and Material components use the semantic color roles owned by their UI Kit. Components never bind directly to shared Color or Brand values.

Current status

The v2 theme architecture is published in Figma. Production packages and complete component migration are not finished.

Release candidate

This page uses the verified v2 repository data. SQRKT will switch to exact published React and token package versions before production release.