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.
Purple
Secondary Color Palette
Mint Green
Secondary Color Palette
Yellow
Secondary Color Palette
Blue
Secondary Color Palette
Turquoise
Secondary Color Palette
Red
Secondary Color Palette
Channels Color Palette
Each Spoki channel has its own signature color. Use them as accents for channel badges, tags and icons — never as primary surfaces.
Channels
Channel usage
Black icon on Green
Black icon on White