Scale.gg Brand Kit | Logo, Colors, Type, and Components

01 · Logo

Four tiles and a lowercase wordmark.

The logo is the four-tile mark next to the wordmark "scale.gg". Use the full logo when there is room, and the mark on its own in small or square spaces.

Primary logo

Logo on lightSVG

Logo on inkSVG

The mark

MarkSVG

Mark on soft#F7F7F3

App iconPNG 1024

How the mark is built

ShapeFour equal rounded squares in a two-by-two grid.
TiltThe whole grid is rotated 4 degrees counter-clockwise. Never straighten it.
OrderCoral top left, lilac top right, lime bottom left, navy bottom right.
Wordmark"scale.gg" in Geist at weight 720, always lowercase, tracked tight at -0.05em.
SpacingKeep clear space equal to one tile on every side. The gap between mark and wordmark is a little under half the mark's width.
Smallest size26 pixels tall for the mark, as used in the site header.

The earlier blue logo

The blue "S" logo came before the four-tile mark. Use the files above for anything new.

02 · Color

Ink on paper, with one accent.

Pages are black text on white. Coral is the only accent. The pastel fields give sections and products their own color without adding more accents. Click any swatch to copy its hex value.

Core

Fields

Fields are backgrounds, not text colors. Text on a field is always ink, except on navy, where it is white.

03 · Type

Geist for words. Geist Mono for labels.

Two fonts from one family. Headlines are large, tight, and medium weight instead of heavy. Labels are small monospace capitals.

Geist

Aa Bb Cc 0123

Headlines, body copy, buttons, and the wordmark. A variable font, so any weight from 100 to 900 is available.

Geist Mono

Aa Bb Cc 0123

Kickers, labels, numbers in tables, and code. Set small, in capitals, with wide tracking.

Both fonts are open source under the SIL Open Font License. Read the license

Type scale

Display50–94px · 560 · -0.06em · 0.94: Run it yourself, or hand it to an agent.
Section title36–64px · 620 · -0.035em · 1.02: One membership. Every app.
Lede18–22px · 400 · 1.48 · Muted: A lede sits under a headline and explains it in one or two sentences, in the muted gray.
Body17px · 400 · 1.55 · Ink: Body copy is 17 pixels with generous line height. Keep lines under about 65 characters so they stay easy to read.
KickerGeist Mono · 12px · 560 · 0.15em · Caps: Know your business

04 · Components

The pieces every page is made from.

These are the live components, not pictures of them. If a new page needs something that is not here, build it from these parts first.

Primary Secondary Coral

Buttons

Always a full pill, at least 48 pixels tall, weight 620. Ink is the default. Use coral for the single most important action on a page.

Agent native

02 · Color

Kicker

A small monospace label with a coral dot. It names the section above a headline. One per section.

Lilac

Lime

Cream

Navy

Color blocks

Large rounded panels filled with one field color. They break up a white page and carry a single idea each.

10

18

28

Pill

Corner radius

10 for inputs and small tiles, 18 for cards, 28 for panels and color blocks, and a full pill for buttons and tags.

Focused

Focus ring

A 3 pixel coral outline, offset by 3 pixels, on anything a keyboard can reach.

Fast · 160ms Interface · 220ms Marketing · 560ms cubic-bezier(0.23, 1, 0.32, 1)

Motion

Quick and eased out. Buttons shrink slightly when pressed. Motion switches off for anyone who asks their device to reduce it.

Layout

Page widthContent sits in a 1320 pixel column with 24 pixels of gutter on each side.
Section spacing70 to 124 pixels above and below a section, scaling with the screen.
ShadowOne soft shadow for raised panels: 0 24px 64px at 10% ink. Most surfaces use a hairline border instead.
HeaderWhite, 68 pixels tall, sticky, with the logo on the left.

05 · Products

Every app borrows one field color.

Apps do not get their own logos or accent colors. Each one is its name set in Geist on one of the field colors, so the whole family reads as Scale.gg.

06 · Naming

How to write the names.

The wordmark is lowercase. In a sentence, the name is not.

Write	When	Not
Scale.gg	The overall suite and website brand.	scale.gg, ScaleGG, Scale GG
ScalePay	The digital-product selling platform and affiliate marketplace. Learn more at scalepay.gg.	Scale Pay, Scalepay, Scale.gg Marketplace
scale.gg	Only inside the logo, or when writing the web address.	As the name in running text
Scale Plus	The suite and the member dashboard behind Scale.gg.	Scale+, Scale-Plus, written as one word
Pro and Pro Max	The plan names. Two words, both capitalized.	ProMax, Pro-Max, PRO MAX
ClickCampaigns, MailBaser, PageBuilder.gg	App names keep their own capitals and endings, exactly as shown on each app's page.	Click Campaigns, Mailbaser, Page Builder
Agent native	The way the suite works with AI agents. Hyphenate it before a noun: "an agent-native platform".	AgentNative, agent native platform

07 · Rules

Keep it simple, keep it the same.

Do

Use the logo files from this page, scaled in proportion.
Put the logo on paper, soft, or ink.
Set text in ink on light surfaces and white on navy or ink.
Use coral once per screen, for the action that matters most.
Give each section one field color and one idea.
Use Geist and Geist Mono for everything.

Don't

Straighten, recolor, reorder, or stretch the four tiles.
Place the logo on navy, where the navy tile disappears, or on a photo.
Add shadows, outlines, or gradients to the logo.
Introduce a new accent color or a second typeface.
Use a field color for text.
Set headlines in heavy or all-capital type.

The Scale.gg brand system.