<!-- Generated by ExtractVibe — https://extractvibe.com/brand/superside.com -->
<!-- Extracted: 2026-09-26T00:26:25.802Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "A Giant Leap Forward: Superside’s New Brand Has Landed"
description: "A Giant Leap Forward: Superside’s New Brand Has Landed presents a professional web presence."
colors:
  primary: "#0a211f"
  tertiary: "#d8ff85"
  surface: "#f7f9f2"
  on-surface: "#0a211f"
  link: "#0a211f"
typography:
  display-lg:
    fontFamily: "Inter Tight"
    fontSize: "60px"
    fontWeight: "400"
    lineHeight: "72px"
    letterSpacing: "0.1px"
  headline-lg:
    fontFamily: "Inter Tight"
    fontSize: "32px"
    fontWeight: "700"
    lineHeight: "40px"
    letterSpacing: "0.1px"
  headline-md:
    fontFamily: "Inter Tight"
    fontSize: "28px"
    fontWeight: "600"
    lineHeight: "36px"
    letterSpacing: "0.1px"
  headline-sm:
    fontFamily: "Inter Tight"
    fontSize: "24px"
    fontWeight: "600"
    lineHeight: "28px"
    letterSpacing: "0.1px"
  body-md:
    fontFamily: "Inter Tight"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "4px"
  lg: "999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#0a211f"
    textColor: "#f7f9f2"
    rounded: "999px"
    padding: "16px 24px"
    fontSize: "14px"
    fontWeight: "600"
    borderColor: "#f7f9f2"
  button-outline:
    textColor: "#0a211f"
    rounded: "999px"
    padding: "14px 24px"
    fontSize: "14px"
    fontWeight: "600"
    borderColor: "#0a211f"
    borderWidth: "1px"
  button-primary:
    backgroundColor: "#d8ff85"
    textColor: "#0a211f"
    rounded: "999px"
    padding: "8px 16px"
    fontSize: "14px"
    fontWeight: "600"
    borderColor: "#0a211f"
---

# A Giant Leap Forward: Superside’s New Brand Has Landed — Design System

## Overview

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

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 3 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#0a211f` | Near-Black |
| accent / tertiary | `#d8ff85` | Khaki |
| background | `#f7f9f2` | White Smoke |
| text | `#0a211f` | Near-Black |
| link | `#0a211f` | Near-Black |

## Typography

Type is set in Inter Tight, Inter Tight, Inter, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter Tight | body | google-fonts | 400, 600 |
| Inter Tight | heading | google-fonts | 400, 600, 700 |
| Inter | body | google-fonts | 600 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Inter Tight | 60px | 400 | 72px | 0.1px |
| Heading 2 | Inter Tight | 32px | 700 | 40px | 0.1px |
| Heading 3 | Inter Tight | 28px | 600 | 36px | 0.1px |
| Heading 4 | Inter Tight | 24px | 600 | 28px | 0.1px |
| Body | Inter Tight | 16px | 400 | 24px | — |

### Conventions

- Heading case — title-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `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` |

### Gradients

- `linear-gradient(in oklab, rgb(10, 33, 31) 0%, rgb(10, 33, 31) 100%)`
- `linear-gradient(in oklab, rgb(247, 249, 242) 0%, rgb(247, 249, 242) 100%)`

## Shapes

Border-radius scale:

- `sm` — 4px
- `lg` — 999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#0a211f`
- Text — `#f7f9f2`
- Radius — `999px`
- Padding — `16px 24px`
- Font size — `14px`
- Font weight — `600`
- Border — ` solid #f7f9f2`
- Sample copy — "Book a demoBook a demo"

**Outline**

- Text — `#0a211f`
- Radius — `999px`
- Padding — `14px 24px`
- Font size — `14px`
- Font weight — `600`
- Border — `1px solid #0a211f`
- Sample copy — "Sign inGo to appSign inGo to app"

**Primary**

- Background — `#d8ff85`
- Text — `#0a211f`
- Radius — `999px`
- Padding — `8px 16px`
- Font size — `14px`
- Font weight — `600`
- Border — ` solid #0a211f`
- Sample copy — "Book a callBook a call"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/superside.com) | 100% |
| favicon | — | svg | [link](brands/superside.com/logo-0.svg) | 95% |
| favicon | — | png | [link](brands/superside.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/superside.com/logo-2.png) | 95% |
| favicon | — | png | [link](brands/superside.com/logo-3.png) | 95% |
| favicon | — | png | [link](brands/superside.com/logo-4.png) | 95% |
| favicon | — | png | [link](brands/superside.com/logo-5.png) | 95% |
| logomark | — | svg | [link](brands/superside.com/logo-svg-6.svg) | 90% |

## Sources

- Official brand guidelines — https://www.superside.com/blog/branding-package-guide
- Live brand page — https://extractvibe.com/brand/superside.com
- Raw JSON — https://extractvibe.com/api/brand/superside.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/superside.com/design.md
- Extracted — 2026-09-26T00:26:25.802Z
- Generator — ExtractVibe vv1
- Quality score — 65/100