Brand Kit

Scale.gg Brand System

One master brand. One visual system. A growing product family that always looks like Scale.gg.

01

Master Brand

Scale.gg is the parent brand. Every product inherits the same visual DNA, so the whole family stays recognizable.

Primary Logo

Scale.gg Logo
Primary — Light Backgrounds Download
Scale.gg Logo White
Primary — Dark Backgrounds Download

Icon Symbol

Use the Scale.gg symbol for favicons, app icons, and other compact brand placements.

Scale.gg Icon
Icon Symbol Download
Scale.gg Social Icon
Social Media Icon Download
02

Color System

A controlled palette keeps every app in the same family. The master colors build recognition; one accent gives each app its identity.

Master Palette

Primary — Indigo #6C63FF rgb(108, 99, 255)
Dark — Midnight #0F172A rgb(15, 23, 42)
Light — Snow #F8F9FC rgb(248, 249, 252)
Muted — Slate #64748B rgb(100, 116, 139)

App Accent Palette

Each app gets one accent from this locked palette. Add no new color until the master palette is formally updated.

03

Typography

Every product uses the same type system. Shared typography makes the family feel connected before a reader sees the logo.

Type Scale

Display 800 / -0.03em
Scale Your Business
Heading 1 800 / -0.02em
Section Headline
Heading 2 700 / -0.01em
Subsection Title
Body 400 / 1.6 line-height
The quick brown fox jumps over the lazy dog. Body text is readable, clean, and never smaller than 16px.
Caption 600 / 0.05em tracking
Label or category text

Font Stack

Primary -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif
Monospace 'SF Mono', 'Fira Code', 'Consolas', monospace
04

Icon System

Every app icon uses the same grid, stroke, container, and visual weight. Only the inner symbol and accent change.

Icon Anatomy

Container Rounded square, 14px radius at 48px. Consistent across all icons.
Symbol 2px stroke weight. Centered in container. Never touches edges. Inner symbol is the only variable.
Accent Color One accent per app. Applied to stroke, container tint, and background fill. Never the container border.

Icon Rules

DO
  • Use 2px stroke weight consistently
  • Center symbol within container
  • Use rounded corners (round caps, round joins)
  • Maintain 8px padding from container edge
  • Use accent color only on symbol and tint
DON'T
  • Change stroke weight per app
  • Use filled icons (outline only)
  • Add gradients or shadows to icons
  • Change container shape or radius
  • Use more than one color per icon
05

Logo System

The master brand and every app need the same five logo variants. If a mark fails in monochrome, it is not finished.

Required Variants

1
Primary Horizontal Icon + Text, side by side
2
Stacked Icon above text
3
Icon-Only Symbol mark without text
4
Light Version For dark backgrounds
5
Monochrome All black or all white

Logo Construction

Build every app logo from the same parts: icon container plus app name in the primary font at weight 700. Keep the accent in the icon and, when used, the domain extension.

ClickCampaigns.ai
Icon in accent Name in primary weight Extension in accent
07

Usage Rules

Use these rules to keep every new app recognizable, consistent, and unmistakably part of Scale.gg.

New App Branding Rules

1
Must use master typography

Use the system font stack at the defined weights. Do not introduce a custom font for one app.

2
Must select one accent color from the locked palette

If every accent is assigned, request a formal palette expansion. Never invent a one-off color.

3
Must follow the icon grid

Keep the container, 2px stroke, and padding identical. Change only the inner symbol.

4
Must generate all 5 required logo variants

Deliver primary horizontal, stacked, icon-only, light, and monochrome versions.

5
No gradients unless approved globally

Use flat colors. Add gradients only through a system-wide brand decision.

6
Must pass the monochrome test

If the logo fails in all black or all white, redesign it before release.

Logo Usage

DO
  • Use logos at provided sizes or proportionally scaled
  • Maintain minimum clear space equal to icon height
  • Use approved color variants only
  • Place on solid backgrounds (light or dark)
DON'T
  • Stretch, rotate, or skew any logo
  • Place logos on busy or patterned backgrounds
  • Add drop shadows, outlines, or effects
  • Rearrange logo elements