Brand & style guide

A two-tier system

SaaStock uses two type systems. Tier 1 — Brand is the everyday system for emails, decks, badges, social, product UI, and any page that gets templated. Tier 2 — Editorial is reserved for a small number of high-impact pages where emotional response matters more than systematic consistency. A page is either fully Tier 1 or fully Tier 2 — never both.

Tier 1 — Typefaces

Two families. Rubik for impact, Space Grotesk for everything else. The contrast between them does the heavy lifting of hierarchy.

Tier 1 — Type scale

Nine levels cover every surface. Each level locks in font, weight, size, line height, and tracking — pick the level, not the values.

Tier 1 — Usage by context

How the scale shows up on the surfaces that matter — stage, web, signage, and event swag.

Tier 1 — Pairing rules

Hierarchy comes from contrast between the two families, not from cranking weights.

Tier 2 — Where to use it

The editorial system is opt-in, never the default. Use it for pages whose purpose is emotional impact over templated consistency.

Tier 2 — Typefaces

Three families. Archivo Black for authority, Geist Mono for precision, Instrument Serif Italic for editorial warmth. Each font occupies a register the others can’t.

Tier 2 — Type scale

Each role is assigned to a specific font — Archivo Black for display, Geist Mono for data, Instrument Serif Italic for accents, Archivo for body.

Tier 2 — Usage by context

How the editorial system shows up on a flagship event page. Authority on top, precision in the data, italic serif for accent.

Tier 2 — Pairing rules

The three-font system works because each font stays in its register. Cross the lines and the page reads as inconsistent, not editorial.

Why three fonts instead of two

The editorial system gives the page three distinct registers. Two sans-serif fonts cannot create this tonal shift.

Which tier? Decision tree

When starting a new page, work down this list and stop at the first match.

Cross-tier rules

The two systems do not blend. These are the hard lines.

Implementation

Drop these snippets into any SaaStock surface. CSS variables keep both tiers consistent across products.

:root {
  /* Tier 1 — Brand */
  --font-display: 'Rubik', sans-serif;
  --font-system: 'Space Grotesk', sans-serif;

  /* Tier 2 — Editorial */
  --font-editorial-display: 'Archivo Black', sans-serif;
  --font-editorial-body: 'Archivo', sans-serif;
  --font-editorial-mono: 'Geist Mono', monospace;
  --font-editorial-accent: 'Instrument Serif', serif;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Tier 1 — Brand -->
<link
  href="https://fonts.googleapis.com/css2?family=Rubik:wght@500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
  rel="stylesheet">

<!-- Tier 2 — Editorial -->
<link
  href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=Geist+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&display=swap"
  rel="stylesheet">

Primary brand colors

Three colors derived from the SaaStock logo ring gradient. These are the only brand colors. Always used as accents, never as large fills.

Neutral palette

Backgrounds and structural color. Pull every surface fill from this set.

Tint & shade ramps

Use these for backgrounds, hover states, and text-on-color. Never invent off-ramp values.

Contrast ratios

Tested pairings. Do not use unlisted combinations without verifying contrast.

Tiered color system

Three attendee tiers, three palettes. Subtractive logic: the higher the tier, the darker and quieter the palette. Fewer colors signals more status.

Color rules

The brand reads as brand because of restraint. These are the hard lines.

Print & projector guidance

Color behaves differently across substrates and screens. These rules keep the brand consistent off-pixel.

Implementation

Drop these CSS variables into any SaaStock surface. One source of truth for every brand color.

:root {
  /* Brand colors */
  --color-cyan: #00C8C8;
  --color-magenta: #E91E8C;
  --color-purple: #7B2FF7;

  /* Neutrals */
  --color-night: #0D1117;
  --color-deep-navy: #161B2E;
  --color-white: #FFFFFF;
  --color-warm-white: #F4F1EC;
  --color-slate: #6B7280;
  --color-ice: #A5F3FC;
}

Download the logo

Two lockups, two formats each. Use SVG by default — it scales cleanly from favicon to billboard. Use JPG only when SVG is not supported (some email clients, legacy decks).

Light background

Dark background

Primary lockup

Mark + SAASTOCK wordmark. Use as the default brand signature on web, decks, sponsor materials, and any surface with horizontal space.

SVG · light bg4.8 MBJPG · light bg513 KBJPG · dark bg510 KB

Light background

Dark background

Icon mark

The standalone ring mark. Use for avatars, favicons, social profile pictures, app icons, and tight spaces where the wordmark would shrink below 80px wide. Use the gradient version on light backgrounds and the all-white version on dark backgrounds.

PNG · gradient1.2 MBPNG · white190 KBSVG4.8 MBJPG · light bg383 KB

Usage rules

The mark is the most identifiable element of the brand — protect it. These rules keep the logo recognizable everywhere it appears.

Speaker badge generator

Type a speaker name and title — get a brand-correct PNG badge on demand. Uses Rubik for the name (per the type spec) and Space Grotesk Medium in magenta for the title. Exports at 1200×1800 (print-ready at 4×6 inches @ 300 DPI).

Global rules

Brand-wide rules that apply to every page, every asset, every tier. These sit above the typography and color systems — when in conflict with a tier-specific recommendation, the global rule wins.

Iconography & emoji

SaaStock is a brand that should feel like an institution. Emojis render inconsistently across Apple, Google, Windows, and Twitter, break our typographic hierarchy, and read as informal. We do not use them — anywhere.

Numbers next to labels

When a number sits inline next to its label — country counts, bar values, seniority tallies, “Plus N more” footers — the number must use the same font family AND the same weight as the label. Contrast comes from size or color, never from a weight gap.

Why:Space Grotesk Light 300 is reserved for oversized stat numbers (36px+). At 13–22px it loses contrast against Medium labels and the eye reads it as a font mismatch, even though it’s the same family. Same rule applies to Archivo weights in Tier 2.

Summary footers

When a card ends with a quiet summary line — “Plus 22+ more countries represented”, “Plus 806 more SaaS companies in the room” — that line must anchor to the bottom of the card. When cards sit in a row at different content heights, the summary lines need to align across the row.

Lists of names

Sponsor lists, notable-company lists, attendee call-outs — anywhere we surface a roster of names. Past ~5 items, vertical stacking in a 3-column grid scans faster than a horizontal comma-separated run.

Side event descriptions

On every event page, the Side Events & Experiences grid sits 3-up. Description copy inside each card is capped at four lines — once one card spills past four lines, the row goes uneven and the section loses its rhythm. This is a global rule across every past and upcoming event page, Europe and USA alike.