sota.io

Brand Assets

Official logos, colors, and guidelines for using the sota.io brand. Please follow these guidelines when referencing sota.io in your projects, articles, or integrations.

Logo

The sota.io logo is a wordmark with a gradient from emerald to cyan. The icon mark is an orbit ring with an accent dot, representing "State of the Art". Use the appropriate variant depending on the background.

Live component preview

sota.io logo - Gradient (Dark Background)
Gradient (Dark Background)SVG
sota.io logo - Gradient (Light Background)
Gradient (Light Background)SVG
sota.io logo - White (Dark Background)
White (Dark Background)SVG

Icon Mark

The orbit icon is used as favicon, app icon, and for compact contexts where the full wordmark doesn't fit.

sota.io icon - Icon — Dark
Icon — DarkSVG
sota.io icon - Icon — Light
Icon — LightSVG
sota.io icon - Icon — White
Icon — WhiteSVG

Colors

Our color palette is built around emerald and cyan tones on a dark zinc foundation.

Brand Gradientfrom-emerald-400 to-cyan-400

Emerald

#10b981

Primary brand color

Emerald 400

#34d399

Gradient start

Cyan 400

#22d3ee

Gradient end, accent

Zinc 950

#09090b

Primary background

Zinc 900

#18181b

Card background

Zinc 800

#27272a

Borders

Zinc 400

#a1a1aa

Secondary text

White

#ffffff

Primary text

Typography

We use the Geist font family by Vercel for both sans-serif and monospace text.

Sans-serif

Geist Sans

Used for headings, body text, and UI elements.

Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)

Monospace

Geist Mono

Used for code blocks, terminal output, and technical content.

Weights: 400 (Regular), 700 (Bold)

Usage Guidelines

Please follow these guidelines when using the sota.io brand in your projects.

Do

  • Use the official logo files provided above
  • Maintain the gradient when possible
  • Use on dark backgrounds for best contrast
  • Keep clear space around the logo (minimum 1x logo height)
  • Write "sota.io" in lowercase when used inline in text

Don't

  • Alter the logo colors or gradient direction
  • Stretch, distort, or rotate the logo
  • Place the logo on busy or low-contrast backgrounds
  • Add effects like shadows, outlines, or bevels
  • Use the logo as part of your own product name