SAASTOCK BRAND & STYLE GUIDE ============================ Use this brief when generating any SaaStock-branded asset (speaker badges, video graphics, slides, social cards, signage, etc.). BRAND IN ONE LINE ----------------- SaaStock is the global community where B2B SaaS founders and operators come together to connect, scale, and transform their businesses. Tone: confident, modern, founder-to-founder. Visual feel: bold geometry, generous whitespace, high typographic contrast. ========================================== PART 1 — TYPOGRAPHY ========================================== A TWO-TIER SYSTEM ----------------- SaaStock uses two type systems. Pick one per page — never mix. - Tier 1 — Brand (Rubik + Space Grotesk): the default. Use everywhere unless the page qualifies for Tier 2. Emails, decks, badges, social, product UI, blog, Local event pages, anything templated. - Tier 2 — Editorial (Archivo Black + Geist Mono + Instrument Serif): reserved for high-impact pages where emotional response matters more than templated consistency. Flagship event pages, the /about/our-story timeline, annual hero landing pages. DECISION TREE ------------- 1. Will multiple people edit this page without design review? → Tier 1 2. Is this an email, deck, badge, blog post, or Local event page? → Tier 1 3. Is this a flagship event page, Our Story timeline, or annual hero? → Tier 2 4. Not sure? → Tier 1 (editorial is opt-in, never default) CROSS-TIER RULES (HARD LINES) ----------------------------- - Never use Rubik and Archivo Black on the same page. - Never use Space Grotesk and Geist Mono on the same page. - A page is either fully Tier 1 or fully Tier 2 — no mixing. - The footer on Tier 2 pages uses the editorial system, not Tier 1 fonts. - Navigation on Tier 2 pages uses Geist Mono, not Space Grotesk. ------------------------------------------ TIER 1 — BRAND SYSTEM ------------------------------------------ Two families ------------ 1) Rubik — Display & Headlines - Role: hero text, headlines, stage screens, speaker names, large-format signage - Never use for body copy or UI - Weights in use: 500 Medium — H3, card titles 600 SemiBold — H2, section headings 700 Bold — H1, page headlines 800 ExtraBold — Display, hero, stage screens - Google Fonts: Rubik:wght@500;600;700;800 2) Space Grotesk — System & Body - Role: body copy, navigation, buttons, captions, labels, metadata, overlines, stats, dates - Tabular figures — preferred for all numbers - Weights in use: 300 Light — Large stat numbers (36px+) 400 Regular — Body copy, nav links, descriptions 500 Medium — Active nav, overline labels, captions 600 SemiBold — Buttons, CTAs 700 Bold — Emphasis within body (use sparingly) - Google Fonts: Space+Grotesk:wght@300;400;500;600;700 Tier 1 — Type scale ------------------- Level Font Weight Size Line-height Tracking Usage Display Rubik 800 52px 1.02 -0.03em Hero, stage title cards H1 Rubik 700 40px 1.10 -0.02em Page headlines H2 Rubik 600 28px 1.20 -0.01em Section headings H3 Rubik 500 22px 1.25 0 Card titles, speaker names Body Space Grotesk 400 16px 1.60 0 Descriptions, bios, paragraphs Body small Space Grotesk 400 14px 1.50 0 Secondary text, captions, metadata Overline Space Grotesk 500 12px 1.40 0.08em Labels, tags, nav (UPPERCASE) Button Space Grotesk 600 15px 1.00 0.06em CTA buttons (UPPERCASE) Stat number Space Grotesk 300 36px 1.10 -0.02em Large numerical callouts Tier 1 — Usage by context ------------------------- Hero / stage screens Headline: Rubik ExtraBold 800, 52px Subheadline: Space Grotesk Regular 400, 18px CTA button: Space Grotesk SemiBold 600, 15px, UPPERCASE, 0.06em tracking Speaker cards Name: Rubik SemiBold 600, 17px Title & company: Space Grotesk Regular 400, 13px Navigation Default link: Space Grotesk Regular 400, 14px Active link: Space Grotesk Medium 500, 14px Badges & signage Attendee name: Rubik Bold 700, 20px Company & role: Space Grotesk Medium 500, 11px, UPPERCASE, 0.06em tracking Stats & metrics Number: Space Grotesk Light 300, 36px Label: Space Grotesk Medium 500, 11px, UPPERCASE, 0.06em tracking Metadata pills Text: Space Grotesk Medium 500, 12px, UPPERCASE, 0.06em tracking Tier 1 — Pairing rules — DO --------------------------- - Use Rubik for headlines and Space Grotesk for everything else. - Use Space Grotesk for all dates, numbers, and stats (tabular figures). - Use UPPERCASE + letter spacing for overlines, labels, and buttons in Space Grotesk. - Use Space Grotesk Light 300 for oversized stat numbers to keep them elegant. - Maintain hierarchy through font-family contrast, not just weight. Tier 1 — Pairing rules — DO NOT ------------------------------- - Do not use Rubik for body copy, descriptions, or long-form text. - Do not use Space Grotesk Bold 700 for headlines (overlap with Rubik loses hierarchy). - Do not mix both fonts at the same size and weight in the same block. - Do not use Rubik below 18px (it loses character at small sizes). - Do not use more than two weights of Rubik on a single page. ------------------------------------------ TIER 2 — EDITORIAL SYSTEM ------------------------------------------ Where to use Tier 2 ------------------- - Historical event pages (/usa/2023, /usa/2024, /usa/2025, /usa/2026, /europe/2016 through /europe/2025) - The /about/our-story narrative timeline - Annual hero landing pages for the next flagship event (e.g., /usa/2027) - Any standalone page designed to make someone say "I need to be part of this" Where NOT to use Tier 2 ----------------------- - Email templates, newsletters, drip sequences - Sponsor decks, partnership proposals - Badge and signage printing - SaaStock Local event pages (use Tier 1) - Blog posts, help docs, support pages - Any page multiple people will update without design review Three families -------------- 1) Archivo Black — Editorial display - Role: hero headlines, page titles, section headings, large-format event branding - Single weight (400 Black only) — hierarchy comes from size, not weight - Use at 36px+ for maximum impact; reads as "conference you fly to" - Google Fonts: Archivo+Black 2) Geist Mono — Editorial data & metadata - Role: stats, labels, overlines, metadata, breadcrumbs, badges, sponsor names, dates, nav utility - True monospace (Vercel) — credibility through typography - Weights in use: 400 Regular — Metadata, breadcrumbs, sponsor names, code snippets 500 Medium — Overlines, stat labels, nav, badges (uppercase) - Google Fonts: Geist+Mono:wght@300;400;500 3) Instrument Serif — Editorial accent - Role: subheadlines, speaker talk titles, pull quotes, editorial callouts - Used in italic to create tonal contrast against the sans-serifs - Cap at 2–3 uses per page; never as body, button, label, or nav - Google Fonts: Instrument+Serif:ital@0;1 Tier 2 — Type scale ------------------- Level Font Weight/Style Size LH Tracking Usage Display Archivo Black 400 clamp(48–72px) 1.02 -0.03em Hero headlines (UPPERCASE) H1 Archivo Black 400 40px 1.10 -0.02em Page headlines H2 Archivo Black 400 28–36px 1.10 -0.01em Section headings H3 Archivo Black 400 22px 1.20 0 Card titles, edition links Subheadline Instrument Serif Italic 18–22px (clamp) 1.40 0 Hero subheadline, accents Speaker talk Instrument Serif Italic 14px 1.40 0 Talk titles on speaker cards Body Archivo 400 16px 1.60 0 Descriptions, paragraphs Body small Archivo 400 14px 1.50 0 Speaker titles, captions Overline Geist Mono 500 11–12px 1.40 0.08em Section labels, badges, breadcrumbs (UPPER) Stat number Archivo Black 400 36px 1.10 -0.02em Attendee count, sponsor count Stat label Geist Mono 500 11px 1.40 0.06em Labels beneath stat numbers (UPPER) Button Archivo 600–700 14–15px 1.00 0.06em CTA buttons (UPPER) Sponsor name Geist Mono 400 12px — 0 Sponsor logos as text placeholders Nav logo Archivo Black 400 18–20px — 0.02em Site wordmark (UPPER) Footer head Archivo Black 400 13px — 0.01em Footer column titles (UPPER) Metadata Geist Mono 400 11–12px — 0.06em Dates, codes, technical details Tier 2 — Usage by context ------------------------- Hero Headline: Archivo Black 400, clamp(48–72px), UPPERCASE Subheadline: Instrument Serif Italic, 18–22px Badge/overline: Geist Mono 500, 12px, UPPERCASE, 0.08em CTA button: Archivo 600, 15px, UPPERCASE, 0.06em Speaker cards Name: Archivo 700, 16–17px Title/company: Archivo 400, 13px Talk title: Instrument Serif Italic, 14px (cyan/accent color) Stat bars Number: Archivo Black 400, 36px Label: Geist Mono 500, 11px, UPPERCASE, 0.06em Section headings Label/overline: Geist Mono 500, 11–12px, UPPERCASE, 0.08em, accent color Title: Archivo Black 400, 28–36px Description: Archivo 400, 16px Navigation Logo: Archivo Black 400, 18–20px, UPPERCASE Links: Geist Mono 400–500, 12px, UPPERCASE Breadcrumb: Geist Mono 500, 12px, 0.08em Sponsors Tier label: Geist Mono 500, 11–12px, UPPERCASE, 0.08em Sponsor name tiles: Geist Mono 400, 12px (replace with logo images when available) Platinum tier: Geist Mono 500, 14px Edition navigation (prev/next) Direction label: Geist Mono 500, 12px, UPPERCASE, 0.08em Event name: Archivo Black 400, 20–22px Footer (Tier 2) Brand wordmark: Archivo Black 400, 18–20px, UPPERCASE, accent color Column heads: Archivo Black 400, 13px, UPPERCASE Links: Archivo 400, 13px Bottom line: Geist Mono 500, 11px Tier 2 — Pairing rules — DO --------------------------- - Use Archivo Black exclusively for display and headlines — hierarchy comes from size, not weight. - Use Geist Mono for anything that communicates data, system status, or metadata. - Use Instrument Serif Italic sparingly as an accent — one or two uses per page (subheadline + talk titles) is ideal. - Keep Instrument Serif in italic — the roman weight overlaps too much with Archivo in tone. - Use Archivo (regular weight) for body copy — it pairs naturally with Archivo Black. Tier 2 — Pairing rules — DO NOT ------------------------------- - Do not use Instrument Serif for body, buttons, labels, or navigation — it is an accent, not a workhorse. - Do not use Geist Mono for headlines or body paragraphs — it is for metadata and data. - Do not use more than three instances of Instrument Serif on a single page. - Do not mix Tier 1 and Tier 2 fonts on the same page — pick one system per page. - Do not use Archivo Black at small sizes (12–14px) for dense UI — it overwhelms in long runs. Why three fonts (Tier 2) ------------------------ 1) Authority (Archivo Black) — industrial weight communicates institutional scale. "SAASTOCK USA 2026" at 72px reads as a conference you fly to. 2) Precision (Geist Mono) — true monospace for stats and metadata. Reads like a dashboard, not marketing. 3) Editorial warmth (Instrument Serif Italic) — accent that makes the page feel curated, like a magazine feature. Two-font Tier 1 = headline + everything else (95% of pages). Tier 2 exists for the 5% where emotional range matters more than consistency. ========================================== PART 2 — COLOR ========================================== PRIMARY BRAND COLORS -------------------- Derived from the SaaStock logo ring gradient. These three are the only brand colors. Cyan #00C8C8 RGB 0,200,200 CMYK 80/0/25/0 Logo left arc, links, accents, data highlights Magenta #E91E8C RGB 233,30,140 CMYK 5/90/10/0 Logo bottom arc, highlights, CTAs on dark Purple #7B2FF7 RGB 123,47,247 CMYK 65/75/0/0 Logo right arc, featured elements, accent fills NEUTRAL PALETTE --------------- Night #0D1117 RGB 13,17,23 CMYK 75/65/50/80 Primary dark bg, Founder tier Deep navy #161B2E RGB 22,27,46 CMYK 80/70/40/60 Premium dark bg, Executive tier White #FFFFFF RGB 255,255,255 CMYK 0/0/0/0 Light bg, text on dark Warm white #F4F1EC RGB 244,241,236 CMYK 3/3/6/0 Off-white bg, General tier, print Slate #6B7280 RGB 107,114,128 CMYK 45/35/30/10 Secondary text, borders, captions Ice #A5F3FC RGB 165,243,252 CMYK 30/0/2/0 High-contrast accent on dark, Executive accent CORE RULE --------- Brand colors (cyan, magenta, purple) are always accents — logo elements, text highlights, small UI details. They are never used as large background fills. Backgrounds come from the neutral set (Night, Deep navy, Warm white, White). TINT & SHADE RAMPS ------------------ Use these for backgrounds, hover states, and text-on-color. Never invent off-ramp values. Cyan ramp 10% #E0F7F7 Light bg, projector slide fills 40% #80E4E4 Hover states, secondary accents 100% #00C8C8 Primary cyan 75% #009696 Text on cyan 10% backgrounds 50% #006464 Dark text on cyan fills 25% #003232 Darkest cyan, small text on light fills Magenta ramp 10% #FDE8F3 Light bg, highlight fills 40% #F48FC6 Hover states, secondary accents 100% #E91E8C Primary magenta 75% #B01669 Text on magenta 10% backgrounds 50% #750F46 Dark text on magenta fills 25% #3B0723 Darkest magenta Purple ramp 10% #F0E8FE Light bg, featured section fills 40% #BD97FB Hover states, secondary accents 100% #7B2FF7 Primary purple 75% #5C23B9 Text on purple 10% backgrounds 50% #3E187C Dark text on purple fills 25% #1F0C3E Darkest purple CONTRAST RATIOS --------------- Tested pairings. Do not use unlisted combinations without verifying contrast. White on Night #0D1117 18.1:1 Pass (all sizes) White on Deep navy #161B2E 16.4:1 Pass (all sizes) Ice on Night #0D1117 13.2:1 Pass (all sizes) Ice on Deep navy #161B2E 11.9:1 Pass (all sizes) Cyan on Night #0D1117 10.3:1 Pass (all sizes) Magenta on Night #0D1117 4.6:1 Fail — too hard to read (do not use as text) Purple on Night #0D1117 3.5:1 Fail — too hard to read (do not use as text) Night on White 18.1:1 Pass (all sizes) Night on Warm white 16.8:1 Pass (all sizes) Night on Cyan 10% #E0F7F7 16.8:1 Pass (all sizes) Slate on White 4.6:1 Large text and captions only Slate on Warm white 4.2:1 Large text only Cyan on White 1.8:1 Fail — never use Magenta on White 3.5:1 Fail for body text — display only TIERED COLOR SYSTEM ------------------- SaaStock has three attendee tiers, each with a distinct palette. Subtractive logic: the higher the tier, the darker and quieter the palette. Fewer colors signals more status. Tier 1 — Executive Emotion: Private, quiet, exclusive. The black card. Badge bg (top): Deep navy #161B2E Badge bg (bottom): Night #0D1117 Primary text: White #FFFFFF Accent text: Ice #A5F3FC Secondary accent: Purple #7B2FF7 Tier tag bg: Ice at 12% opacity — rgba(165,243,252,0.12) Tier tag text: Ice #A5F3FC Lanyard: Deep navy #161B2E Allowed colors: Deep navy, Night, Ice, Purple, White. No cyan. No magenta. The absence of core brand colors separates this tier from Founder. Banner & signage: Deep navy bg, white headline, Ice accent for subheadlines and metadata. Slide decks: Deep navy bg. White headlines. Ice for accent text, data callouts, chart highlights. Purple sparingly for featured data points. Tier 2 — Founder Emotion: Bold, confident, energetic. The main event. Badge bg (top): Night #0D1117 Badge bg (bottom): White #FFFFFF Primary text (dark): White #FFFFFF Primary text (light): Night #0D1117 Accent text: Cyan #00C8C8 Secondary accents: Magenta #E91E8C, Purple #7B2FF7 Tier tag bg: Cyan at 10% opacity — rgba(0,200,200,0.1) Tier tag text: Cyan 75% #009696 Lanyard: Night (black) #0D1117 Allowed colors: Night, White, Cyan, Magenta, Purple, Slate. Full SaaStock brand expression. All three logo colors are in play. Banner & signage: Night bg, white headline, cyan for subheadlines. Magenta and purple as supporting accents. Slide decks: Night bg. White headlines. Cyan for accent text and primary data. Use Ice for body text at distance (projector-safe alternative to cyan). Magenta and purple are for fills, chart colors, and graphic accents only — never as text on Night or Deep navy. Tier 3 — General Emotion: Simple, functional, accessible. The entry point. Badge bg (top): Warm white #F4F1EC Badge bg (bottom): White #FFFFFF Primary text: Night #0D1117 Accent text: Slate #6B7280 Secondary text: Light slate #9CA3AF Tier tag bg: Warm white #F4F1EC Tier tag text: Slate #6B7280 Lanyard: White #FFFFFF Allowed colors: Warm white, White, Night, Slate, Light slate (#9CA3AF). No brand colors. No cyan, magenta, or purple. The absence of color is the visual signal. Banner & signage: Warm white or white bg, Night text. No accent colors. Clean and minimal. Slide decks: White bg. Night headlines. Slate body text. No brand color accents. TIER DIFFERENTIATION AT A GLANCE -------------------------------- Attribute Executive Founder General Background darkness Darkest (Deep navy) Dark (Night) Light (Warm white) Brand colors used 2 (Ice, Purple) 3 (Cyan/Mag/Purple) 0 Number of accent colors 2 3 0 Lanyard color Deep navy Black White Badge split Navy / Night Night / White Warm white / White Emotional register Restrained luxury Full brand energy Clean utility RULES FOR TIER INTEGRITY ------------------------ - Never mix tier palettes on a single asset. An Executive badge never uses cyan. A General badge never uses purple. - The tier tag on every badge must use the tier-specific background and text color from the tables above. - At events, tier differentiation must be visible from 20+ feet: lanyard color is the primary distance signal (navy vs black vs white). - Digital assets (emails, web pages) directed at a specific tier should use that tier's palette for headers and hero sections. Shared marketing materials always use the Founder tier palette. - When in doubt, use the Founder tier. It is the default SaaStock brand expression. PRINT & PROJECTOR GUIDANCE -------------------------- Large format banners (40ft+) - Supply CMYK from this guide, not hex conversions. Press-proof on actual substrate before approving a full run. - Cyan (#00C8C8) shifts warm on uncoated stock. If proofs look green-yellow, increase cyan channel 5–10%. - Magenta reproduces faithfully across most substrates. Purple can shift blue on some stocks — add 5% magenta to the CMYK mix if proofs skew cool. - Use Night or Deep navy backgrounds for max contrast at distance. White on Night is readable from 100+ feet. Avoid white backgrounds on outdoor banners — they show dirt and look washed out in direct sunlight. - Minimum text size for readability at 50+ feet: 6 inches tall for body, 12+ inches for headlines. Projector slides - Projectors wash out 20–40% of color saturation. Dark backgrounds (Night, Deep navy) perform significantly better on stage. - Use Ice (#A5F3FC) as primary accent text on dark backgrounds — holds 13.2:1 contrast on Night even after washout. Cyan (#00C8C8) also performs well at 10.3:1. - Never use magenta or purple as text on Night or Deep navy at any size — they fail readability (4.6:1 and 3.5:1). Use only as fills, chart colors, and graphic accents. - For light slide backgrounds (breakout rooms, smaller screens), use Night text on white or Warm white. Avoid brand colors as text on light backgrounds — cyan on white is only 1.8:1 contrast. Badge cards - Print at 300 DPI minimum. Logo ring at badge scale (~20mm) requires the full three-color version, not a single-color lockup. - Night/Deep navy bg badges read better in dim conference lighting than white badges. Executive and Founder tiers use dark badge tops for this reason. - General tier badges use light backgrounds — an intentional downgrade in low-light readability that reinforces tier hierarchy in ambient conference conditions. ========================================== PART 3 — IMPLEMENTATION ========================================== CSS VARIABLES ------------- :root { /* Tier 1 — Brand typography */ --font-display: 'Rubik', sans-serif; --font-system: 'Space Grotesk', sans-serif; /* Tier 2 — Editorial typography */ --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; /* 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; } FALLBACK STACKS --------------- --font-display: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-system: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-editorial-display: 'Archivo Black', 'Impact', 'Arial Black', sans-serif; --font-editorial-body: 'Archivo', 'Arial', sans-serif; --font-editorial-mono: 'Geist Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; --font-editorial-accent: 'Instrument Serif', 'Georgia', 'Times New Roman', serif; GOOGLE FONTS EMBED ------------------ ========================================== PART 4 — GLOBAL UI RULES ========================================== These rules apply across both type tiers, every page, every asset. ICONOGRAPHY & EMOJI ------------------- - Never use emojis in any SaaStock-branded surface — web pages, emails, decks, badges, signage, social cards, ad creative, push copy, product UI. Reason: emojis render inconsistently across platforms (Apple vs Google vs Windows vs Twitter), break our typographic hierarchy, and read as informal in a brand that should feel like an institution. - Country indicators: use the country name only. Do not use flag emojis. - Status indicators (success, warning, error): use an icon from the SaaStock icon set (lucide-react), not a checkmark or warning emoji. - Tone accents (sparkles, fire, rockets, etc.): never. If a surface needs visual punctuation, use a brand-color dot, an underline, or whitespace. NUMBERS NEXT TO LABELS ---------------------- When a number sits inline next to its label (country counts, bar values, seniority tallies, "Plus N more"), 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. - Correct: label Space Grotesk 500, 15px, navy — number Space Grotesk 500, 15px, navy. They read as a single typographic unit. - Incorrect: label Space Grotesk 500 — number Space Grotesk 300. A Light 300 number next to a Medium 500 label reads as a different font. Why: Space Grotesk Light 300 is reserved for OVERSIZED stat numbers (36px+, hero statistics, big callouts). At 13–22px it loses contrast against Medium labels and looks like a font mismatch. SUMMARY FOOTERS --------------- Quiet trailing lines like "Plus 22+ more countries represented" or "Plus 806 more SaaS companies in the room" must anchor to the bottom of their card. When cards sit in a row at variable content heights, the summary lines need to align across the row. - Implementation: make the card a flex column (display: flex; flex-direction: column) and apply margin-top: auto to the summary footer. - Type: Space Grotesk Regular 12px (Tier 1) or Geist Mono Regular 12px (Tier 2), in --muted. - Do not use absolute positioning — it breaks when content reflows on narrow viewports. LISTS OF NAMES (companies, sponsors, attendees) ----------------------------------------------- - Lay out as a 3-column grid, left-aligned within each column, items stacked vertically. Avoid horizontal comma- or dot-separated runs once a list passes ~5 items — they become hard to scan. - Use Rubik 500 at 18px (Tier 1) or Archivo 500 at 18px (Tier 2). - One name per row. No separators between items in the grid layout. - Do not center-align — the ragged left edge from centering breaks scannability when the eye is comparing names across rows. SIDE EVENT DESCRIPTIONS ----------------------- On every event page, description copy inside Side Events & Experiences cards is truncated to a maximum of four lines. The cards sit in a 3-up grid; once one description spills past four lines, the row goes uneven and the section loses its visual rhythm. - Implementation: -webkit-line-clamp: 4 on .ep-related-desc (with the -webkit-box display + vertical box-orient + overflow:hidden it requires). - Write descriptions short enough to read fully at the four-line cap — do not rely on the clamp to hide a fifth or sixth line. Treat the clamp as a safety net, not a content strategy. - Longer prose (recap-style summaries, narrative context) belongs in the editorial recap section, not in a side-event card. - This rule is global. It applies to every event page across both Europe and USA series, past and upcoming editions. END OF GUIDE