Brand Guideline 2026 v2.0

Bold. Structured.
Unmistakably Hook.

The complete brand system reference — colors, gradients, textures, and typography derived directly from Hook Agency's 2026 Brand Guideline. One source of truth for CrawlSpace, client reports, lead gen tools, and every pixel we ship.

Section01

Overview

How the system is built — and why it holds together across every surface.

The Hook color system creates a bold, modern visual identity that supports clarity, hierarchy, and strong recognition. Color plays a key role in expressing the brand's confidence, structure, and energetic tone. The palette balances high-impact primaries with flexible neutrals for versatile communication across print and digital.

This guide extends the 2026 Brand Guideline into a production-ready token system. Every color, gradient, texture, and typographic rule you see here is either lifted verbatim from the guideline or derived explicitly to support UI semantics (cards, inputs, focus rings, charts). When derived, it's labeled.

Section02

Core Palette

The three primary brand colors. Consistent use builds the strongest recognition.
Shadow
Hex #19191C
RGB 25, 25, 28
CMYK 74, 69, 63, 78
Lime
Hex #D4FD52
RGB 212, 253, 82
CMYK 21, 0, 85, 0
Cobalt
Hex #253FF6
RGB 37, 63, 246
CMYK 84, 73, 0, 0
Semantic Token Mapping Dark
shadcn-compatible · toggle mode in sidebar
Section03

Secondary Palette

Supporting neutrals. Adds versatility and balance without overpowering the core.
Dark Gray
Hex #828282
RGB 130, 130, 130
CMYK 0, 0, 0, 49
UI Gray
Hex #EFEFEF
RGB 239, 239, 239
CMYK 0, 0, 0, 6
Section04

Color Pairings

Approved combinations only. Avoid pairings outside this set.
Approved · Core
Aa
Lime on Shadow
Aa
Shadow on Lime
Aa
White on Shadow
Aa
White on Cobalt
Approved · Secondary
Aa
Dark Gray on UI Gray
Aa
UI Gray on Dark Gray
Aa
Shadow on Dark Gray
Aa
Shadow on UI Gray
Avoid · Low Contrast
Aa
Dark Gray on Shadow
Aa
Dark Gray on Lime
Aa
Lime on UI Gray
Aa
Dark Gray on Cobalt
Section05

Color Ratio

Core colors lead brand presence. Secondary colors add flexibility.

The 80/20 ratio guides how Hook colors should be used holistically across any communication. Core palette dominates. Secondary palette supports.

80%
Primary · Shadow / Lime / Cobalt
20%
Secondary · UI Gray / Dark Gray
Section06

Color Opacity

Create subtle layers and depth within the palette without introducing new colors.

Opacity is used on surfaces, shapes, and backgrounds to create hierarchy — never on type. Text should always be solid brand color against an approved ground.

Shadow
100
80
60
40
20
Lime
100
80
60
40
20
Cobalt
100
80
60
40
20
UI Gray
100
80
60
40
20
Dark Gray
100
80
60
40
20
Section07

Gradients

Depth, movement, and energy. All gradients stay within the approved palette.

Gradients function as flexible visual elements — background accents, section transitions, marketing hero fills. They never carry type and never introduce colors outside the core or secondary palette.

Lime → Dark Lime
#D4FD52 → #9EDC2E
Lime → UI Gray
#D4FD52 → #EFEFEF
Lime → Shadow
#D4FD52 → #19191C
Cobalt → Soft Slate Blue
#253FF6 → #6A7CFF
Cobalt → UI Gray
#253FF6 → #EFEFEF
Shadow → Cobalt Variation
#19191C → #36467E
Section08

Textures

Gradient line shapes and background patterns. Subtle movement without overpowering content.

Gradient line shapes bring editorial rhythm to layouts — used as background accents, dividers, or decorative elements around hero moments. Combined with paper/noise textures and diagonal patterns, they carry Hook's structured-but-expressive feel across every touchpoint.

Gradient Line Shapes
Line-pattern silhouettes · decorative accents
Shape 01
Shape 01
Rhythm · soft motion
Shape 02
Shape 02
Contained · upright
Shape 03
Shape 03
Wide · editorial
Shape 04
Shape 04
Dense · textural
Shape 05
Shape 05
Hero · anchor
Shape 06
Shape 06
Weighted · grounded
Shape 07
Shape 07
Minimal · linear
Background Patterns
Paper · noise · diagonal
Diagonal · Shadow
Paper Noise · UI Gray
Section09

Typography

Champion HTF for impact. Archivo for clarity. Never the reverse.

Hook pairs a licensed display face — Champion HTF — with the open-source Archivo family for UI and body text. The two do very different jobs and shouldn't cross over.

Display · Licensed
Champion HTF
High-impact display face. Page titles, hero sections, brand statements. Never for long-form reading, never under 24px.
Weights Champion-HTF-Featherweight
Champion-HTF-Welterweight (core)
Champion-HTF-Heavyweight
AA
Font Stack · with fallback 'Champion HTF Welterweight', 'Champion Welterweight', Impact, Haettenschweiler, 'Arial Narrow', sans-serif
Usage

Page titles only. Section headers sparingly — and only when they benefit from ceremonial weight.

Minimum Size

24px floor. Champion loses its sharpness and presence below this. If it would be smaller, use Archivo SemiBold instead.

Case

All Caps or Title Case — never sentence case or mixed. Letter-spacing stays tight.

Alignment

Left or centered only. No justified. No decorative effects, gradients in type, or embellishments.

Body · UI · Open Source
Archivo
The main UI typeface. Everything below 24px. Body copy, buttons, inputs, labels, data. Supports Champion — never competes with it.
Weights Archivo-Regular (400)
Archivo-SemiBold (600)
Aa
Font Stack 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Condensed · Dense Data
Archivo Condensed
Space-efficient variant. Data tables, specs, metadata, UI chrome where vertical density matters — SEO reports, dashboards, technical readouts.
Weights Archivo-Condensed-Medium (500)
Aa
Font Stack 'Archivo Narrow', 'Archivo Condensed', 'Archivo', -apple-system, sans-serif
Type Scale
Semantic roles & sizes for CrawlSpace + web
Display
Page Title
Champion · 64–140px
H1
Section Header
Champion · 40–56px
H2
Sub Section
Champion · 24–32px (floor)
H3
Card Heading
Archivo SemiBold · 20px
H4
Component Title
Archivo SemiBold · 16px
Body
Default body copy used for paragraphs and UI text.
Archivo Regular · 15px
Small
Supporting text and secondary labels
Archivo Regular · 13px
Caption
Metadata · tags · timestamps
Archivo Condensed · 11–12px
Data / Mono
24,813 sessions · 18.4% MoM
Archivo Condensed · 13px
Section10

Don'ts

Ways the system breaks. Avoid these to protect clarity and brand consistency.
Aa
Dark color on core color
Aa
Light color on light color
Aa
Dark color on dark color
Aa
Unapproved pairings
Aa
Two colors in a single glyph-set
Aa
Opacity on type
Aa
Gradient inside type
Aa
New gradient colors in backgrounds
Aa
Off-brand color shades
Section11

In Context

Sanity check: how the whole system renders as a live product surface.
Buttons
Inputs & Badges
Active Draft ↑ 12% MoM CWV Fail Indexed 404
CrawlSpace Dashboard

Overview · roofmedic.com

Organic Sessions
24,813
↑ 18.4% MoM
Top-10 Keywords
412
↑ 27 new
CWV Issues
7
↓ LCP regression
Section12

Tokens & Code

Copy-paste ready. Three formats. Use whichever fits the project.
app/globals.css 
@layer base {
  :root {
    /* Surfaces */
    --background: #FAFAFA;
    --foreground: #19191C;        /* Shadow */
    --card: #FFFFFF;
    --card-foreground: #19191C;
    --popover: #FFFFFF;
    --popover-foreground: #19191C;

    /* Brand — Cobalt drives action on light */
    --primary: #253FF6;
    --primary-foreground: #FFFFFF;

    /* Neutrals (official secondary) */
    --secondary: #EFEFEF;          /* UI Gray */
    --secondary-foreground: #19191C;
    --muted: #EFEFEF;
    --muted-foreground: #828282;    /* Dark Gray */
    --accent: #E4E4E4;
    --accent-foreground: #19191C;

    /* Status (derived) */
    --destructive: #E11D48;
    --destructive-foreground: #FFFFFF;
    --success: #10B981;
    --warning: #F59E0B;
    --info: #06B6D4;

    /* Lines */
    --border: #E1E1E1;
    --input: #E1E1E1;
    --ring: #253FF6;

    /* Charts — all within approved palette */
    --chart-1: #253FF6;              /* Cobalt */
    --chart-2: #D4FD52;              /* Lime */
    --chart-3: #6A7CFF;              /* Soft Slate Blue */
    --chart-4: #9EDC2E;              /* Dark Lime */
    --chart-5: #828282;              /* Dark Gray */

    /* Sidebar — UI Gray panel with Shadow text in light */
    --sidebar: #EFEFEF;
    --sidebar-foreground: #19191C;
    --sidebar-primary: #253FF6;
    --sidebar-primary-foreground: #FFFFFF;
    --sidebar-accent: #E4E4E4;
    --sidebar-accent-foreground: #19191C;
    --sidebar-border: #D8D8D5;
    --sidebar-ring: #253FF6;

    --radius: 0.625rem;
  }

  .dark {
    --background: #19191C;          /* Shadow */
    --foreground: #EFEFEF;          /* UI Gray */
    --card: #232327;
    --card-foreground: #EFEFEF;
    --popover: #232327;
    --popover-foreground: #EFEFEF;

    /* Brand — Lime drives action on dark */
    --primary: #D4FD52;
    --primary-foreground: #19191C;

    --secondary: #2A2A2E;
    --secondary-foreground: #EFEFEF;
    --muted: #2A2A2E;
    --muted-foreground: #A1A1A6;   /* derived: Dark Gray on Shadow is AVOID */
    --accent: #36363B;
    --accent-foreground: #EFEFEF;

    --destructive: #F43F5E;
    --destructive-foreground: #FFFFFF;
    --success: #34D399;
    --warning: #FBBF24;
    --info: #22D3EE;

    --border: #2F2F33;
    --input: #2F2F33;
    --ring: #D4FD52;

    --chart-1: #D4FD52;
    --chart-2: #6A7CFF;
    --chart-3: #9EDC2E;
    --chart-4: #A1A1A6;
    --chart-5: #36467E;

    --sidebar: #0F0F11;
    --sidebar-foreground: #EFEFEF;
    --sidebar-primary: #D4FD52;
    --sidebar-primary-foreground: #19191C;
    --sidebar-accent: #19191C;
    --sidebar-accent-foreground: #EFEFEF;
    --sidebar-border: #232327;
    --sidebar-ring: #D4FD52;
  }
}
app/globals.css /* Tailwind v4 @theme */ 
@import "tailwindcss";

@theme inline {
  /* Semantic tokens (mode-aware via CSS vars) */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-destructive: var(--destructive);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-info: var(--info);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-border: var(--sidebar-border);

  /* Raw brand hexes — for marketing, gradients, hero lockups */
  --color-brand-shadow: #19191C;
  --color-brand-lime: #D4FD52;
  --color-brand-cobalt: #253FF6;
  --color-brand-dark-gray: #828282;
  --color-brand-ui-gray: #EFEFEF;
  --color-brand-dark-lime: #9EDC2E;
  --color-brand-soft-slate: #6A7CFF;
  --color-brand-cobalt-variation: #36467E;

  /* Font families */
  --font-champion: "Champion HTF Welterweight", "Champion Welterweight", Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-condensed: "Archivo Narrow", "Archivo Condensed", "Archivo", sans-serif;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}
tokens.json 
{
  "brand": {
    "shadow":    "#19191C",
    "lime":      "#D4FD52",
    "cobalt":    "#253FF6",
    "darkGray":  "#828282",
    "uiGray":    "#EFEFEF",
    "darkLime":  "#9EDC2E",
    "softSlate": "#6A7CFF",
    "cobaltVariation": "#36467E"
  },
  "gradients": [
    { "name": "Lime → Dark Lime",          "stops": ["#D4FD52", "#9EDC2E"] },
    { "name": "Lime → UI Gray",            "stops": ["#D4FD52", "#EFEFEF"] },
    { "name": "Lime → Shadow",             "stops": ["#D4FD52", "#19191C"] },
    { "name": "Cobalt → Soft Slate Blue",  "stops": ["#253FF6", "#6A7CFF"] },
    { "name": "Cobalt → UI Gray",          "stops": ["#253FF6", "#EFEFEF"] },
    { "name": "Shadow → Cobalt Variation", "stops": ["#19191C", "#36467E"] }
  ],
  "typography": {
    "display": {
      "family": "Champion HTF Welterweight",
      "stack":  "'Champion HTF Welterweight', 'Champion Welterweight', Impact, Haettenschweiler, 'Arial Narrow', sans-serif",
      "minSizePx": 24,
      "usage": "Page titles, section headers (sparingly). Never below 24px."
    },
    "body": {
      "family": "Archivo",
      "stack":  "'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
      "weights": [400, 600],
      "usage": "Main UI font. Everything below 24px."
    },
    "condensed": {
      "family": "Archivo Condensed",
      "stack":  "'Archivo Narrow', 'Archivo Condensed', 'Archivo', -apple-system, sans-serif",
      "weights": [500],
      "usage": "Dense data, metadata, specs, UI chrome."
    }
  },
  "light": {
    "background": "#FAFAFA", "foreground": "#19191C",
    "card": "#FFFFFF", "primary": "#253FF6", "primaryForeground": "#FFFFFF",
    "secondary": "#EFEFEF", "muted": "#EFEFEF", "mutedForeground": "#828282",
    "border": "#E1E1E1", "ring": "#253FF6",
    "destructive": "#E11D48", "success": "#10B981", "warning": "#F59E0B", "info": "#06B6D4",
    "charts": ["#253FF6", "#D4FD52", "#6A7CFF", "#9EDC2E", "#828282"],
    "sidebar": {
      "background": "#EFEFEF", "foreground": "#19191C",
      "primary": "#253FF6", "accent": "#E4E4E4", "border": "#D8D8D5"
    }
  },
  "dark": {
    "background": "#19191C", "foreground": "#EFEFEF",
    "card": "#232327", "primary": "#D4FD52", "primaryForeground": "#19191C",
    "secondary": "#2A2A2E", "muted": "#2A2A2E", "mutedForeground": "#A1A1A6",
    "border": "#2F2F33", "ring": "#D4FD52",
    "destructive": "#F43F5E", "success": "#34D399", "warning": "#FBBF24", "info": "#22D3EE",
    "charts": ["#D4FD52", "#6A7CFF", "#9EDC2E", "#A1A1A6", "#36467E"],
    "sidebar": {
      "background": "#0F0F11", "foreground": "#EFEFEF",
      "primary": "#D4FD52", "accent": "#19191C", "border": "#232327"
    }
  }
}
Resources↓

Downloads

Zipped asset packs for the team. Drop into Figma, Keynote, InDesign, or any project.

Pre-built packs containing every asset you'll need. Each bundle is kept in sync with the reference on this page — if something changes here, the zip updates on the next deploy.

Brand Identity
Logos
Hook mark & wordmark in both black and white variants. Clean SVGs that inherit currentColor for any background.
4 SVG · ~6 KB
Download
Design Elements
Textures
All seven gradient-line shapes from the brand system. Editorial textures for layouts, dividers, and decorative accents.
7 SVG · ~228 KB
Download
AaBb
Typography · Licensed
Fonts
Champion HTF (three weights) plus Archivo and Archivo Condensed. WOFF2 + WOFF for every weight. Champion HTF is licensed to Hook Agency only — do not redistribute or deploy to client-owned domains. Archivo and Archivo Condensed are free Google Fonts (SIL Open Font License) and may be used freely.
12 files · ~358 KB
Download
# Hook Agency Brand System
## Core Palette
- Shadow #19191C
- Lime #D4FD52
- Cobalt #253FF6
## Typography
- Champion HTF · 24px floor
- Archivo · UI + body
AI Context · Markdown
Context File
A single markdown file containing every brand rule, color token, type spec, and code export. Paste into Claude Code, Claude Projects, or any AI assistant to brief it on Hook standards in one shot.
1 MD · ~18 KB
Download