Brand Kit
Colors, logos, and guidelines for PlotSwap.
Logo
Logo Gradient
Brand Colors
Primary Blue
Buttons, links, active states
Primary Hover
Hover states
Primary Light
Highlights, secondary accents
Accent Cyan
Positive actions, glow effects
Accent Light
Bright accents, badges
Indigo
Gradients, secondary buttons
Success
Confirmed states, positive
Warning
Caution, ERC-1404 badges
Danger
Errors, negative changes
Dark Theme Surfaces
Background
var(--ps-bg)
Card
var(--ps-card)
Card Elevated
var(--ps-card-elevated)
Text
var(--ps-text)
Text Muted
var(--ps-text-muted)
Text Subtle
var(--ps-text-subtle)
Light Theme Surfaces
Background
var(--ps-bg)
Card
var(--ps-card)
Card Elevated
var(--ps-card-elevated)
Text
var(--ps-text)
Text Muted
var(--ps-text-muted)
Text Subtle
var(--ps-text-subtle)
Typography
Primary — Euclid Circular B
The quick brown fox jumps over the lazy dog
Monospace — Geist Mono
0x5a9E...5C1d
Gradients
Brand
Button
Text Shimmer
Guidelines
Do: Use the blue/cyan gradient for primary brand elements. Keep the dark navy background for dark mode. Use adequate contrast in both themes.
Don't: Stretch or distort the logo. Use the brand colors on clashing backgrounds. Mix purple tones with the blue palette.
Spacing: Maintain at least 1x logo width as clearance around the logo mark.
Minimum size: Logo should not be smaller than 24px in height.