Brand Guidelines

Everything you need to represent Spoki consistently.

Color palette

Our palette is built around the Spoki green and a clean set of supporting hues. Click any swatch to copy its hex code — the same source of truth used across the product.

Click a swatch to copy its hex code

Primary colors

These are the main neutral, brand and semantic colors that make up the majority of the colors used in the design system and components.

Spoki Green

Black text on Green

White

Black text on White

Black

White text on Black

Off-white

Black text on Off-white

Light Green

Black text on Light Green

Tones

The full tonal scales for the brand green and the neutral gray, from the deepest shade to the lightest tint. Click any swatch to copy its hex code.

Gray neutral

Can be swapped with the default neutral color.

Brand

Primary Color Palette

Gradients

Three approved gradients for backgrounds, illustrations and AI-themed surfaces. Click a swatch to copy its CSS.

Secondary colors

A secondary color palette enhances the primary colors in a design system, adding variety and depth. These colors serve as accents, backgrounds, or highlights, maintaining a cohesive design while encouraging creative expression.