Skip to content
superside.com logo

A Giant Leap Forward: Superside’s New Brand Has Landed

superside.com

“A Giant Leap Forward: Superside’s New Brand Has Landed presents a professional web presence.”

professional

Color Palette

Colors

#0a211f

primary

#f7f9f2

background

#0a211f

text

#0a211f

link

#d8ff85

accent


Typography

Fonts

Inter Tight

body
400
600
google-fonts

Inter Tight, Inter, Arial, sans-serif

Inter Tight

heading
400
600
700
google-fonts

Inter Tight, Inter, Arial, sans-serif

Inter

body
600
google-fonts

Inter, Arial, sans-serif

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

h5

The quick brown fox

h6

The quick brown fox


Components

Design System

Book a demoBook a demo
secondary
999px
#0a211f#f7f9f2
Sign inGo to appSign inGo to app
outline
999px
#0a211f
Book a callBook a call
primary
999px
#d8ff85#0a211f
element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(10, 33, 31, 0.18) 0px 12px 40px 0px

gradient

linear-gradient(in oklab, rgb(10, 33, 31) 0%, rgb(10, 33, 31) 100%)...

gradient

linear-gradient(in oklab, rgb(247, 249, 242) 0%, rgb(247, 249, 242) 100%)...


Voice & Tone

Personality

Visual Energy

5/10

Design Era

contemporary

Emotional Tone

professional

Target Audience

general audience


Design Assets

Visual Elements

Design asset
png792×350
Design asset
png56×56
Design asset
png392×221
Design asset
png392×221
Design asset
png392×221
Design asset
png4181×2185
Design asset
webp984×558
See Our Rebrand In Action
webp792×290

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md

Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/superside.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.