---
name: growthxbrand
description: GrowthX brand reference — logo, color palette, typography, and usage guidelines. Use when creating assets, reviewing brand consistency, or building new pages/components.
user-invocable: true
---

# GrowthX Brand Guidelines

Complete reference for the GrowthX visual identity. Use this when creating pages, components, marketing assets, or reviewing brand consistency.

All values below are the source of truth declared in `app/application.css`. When in doubt, the CSS file wins.

## Logo

### Files

| Variant                     | Format | Path                             |
| --------------------------- | ------ | -------------------------------- |
| Dark (on light backgrounds) | SVG    | `/images/growthx-logo-dark.svg`  |
| Dark (on light backgrounds) | PNG    | `/images/growthx-logo-dark.png`  |
| Light (on dark backgrounds) | SVG    | `/images/growthx-logo-light.svg` |
| Light (on dark backgrounds) | PNG    | `/images/growthx-logo-light.png` |

### Usage Rules

**Do:**

- Place on paper (`bg-paper`) or dark (`bg-foreground`) backgrounds
- Maintain clear space equal to logo height on all sides
- Use SVG for all digital applications
- Minimum rendered height: 14px

**Don't:**

- Stretch, rotate, or apply effects
- Place on busy or low-contrast backgrounds
- Alter proportions or spacing

## Color Palette

All colors are declared in OKLCH in `app/application.css` and exposed as Tailwind utilities. Hex values below are the sRGB render target; OKLCH is the authoring format.

### Brand Palette (core)

The five swatches showcased on `/brand`. Use these names in design conversations; use the utility class in code.

| Swatch name  | Hex       | Utility           | CSS var                | Usage                            |
| ------------ | --------- | ----------------- | ---------------------- | -------------------------------- |
| Paper        | `#FFFFFF` | `bg-paper`        | `--color-paper`        | Page background                  |
| Metal Black  | `#080A0D` | `bg-foreground`   | `--color-foreground`   | Ink, text default, dark surfaces |
| Idea Spark   | `#F4B8FF` | `bg-pink`         | `--color-pink`         | Secondary accent                 |
| Link Blue    | `#4769DB` | `bg-blue`         | `--color-blue`         | Primary accent                   |
| Signal Green | `#47D89E` | `bg-signal-green` | `--color-signal-green` | Positive / growth                |

### Additional Brand Tokens

| Class            | CSS var               | Notes                        |
| ---------------- | --------------------- | ---------------------------- |
| `bg-card`        | `--card`              | Pure white surface for cards |
| `bg-surface-nav` | `--color-surface-nav` | Nav bar backdrop             |

### Text Colors

Body text inherits `text-foreground` (Metal Black, `#080A0D`). Use opacity modifiers for hierarchy — do not introduce new grey tokens.

| Class                   | Effective render               | Usage                                       |
| ----------------------- | ------------------------------ | ------------------------------------------- |
| `text-foreground`       | 100% ink                       | Headlines, stat values                      |
| `text-foreground/85`    | 85% ink                        | Stat numbers in slide preview               |
| `text-foreground/80`    | 80% ink                        | Body emphasis, rule titles                  |
| `text-foreground/70`    | 70% ink                        | Table headers, download button default      |
| `text-foreground/65`    | 65% ink                        | Eyebrows, feature labels, body copy         |
| `text-foreground/60`    | 60% ink                        | Sub-section h3 headings, secondary metadata |
| `text-muted-foreground` | `oklch(0.45 0 0)` — fixed grey | Column headers, utility muted labels        |
| `text-foreground/40`    | 40% ink                        | Labels, captions, type-scale notes          |
| `text-foreground/35`    | 35% ink                        | Monospace weight labels                     |
| `text-foreground/30`    | 30% ink                        | Context labels on slides                    |

### Borders & Dividers

Use `border-foreground/X` with opacity modifiers — no separate border tokens beyond shadcn defaults.

| Class                  | Usage                                             |
| ---------------------- | ------------------------------------------------- |
| `border-foreground/10` | Section dividers, slide grid lines, frame borders |
| `border-foreground/8`  | Card outlines (AI-skill card, brand asset cards)  |
| `border-foreground/6`  | Internal dividers in tables                       |
| `border-foreground/12` | Download button resting border                    |
| `border-foreground/20` | Outline button resting border                     |

### Shadows (from `--shadow-*` tokens)

| Class             | Usage                                                     |
| ----------------- | --------------------------------------------------------- |
| `shadow-xs`       | Micro-elevation hints                                     |
| `shadow-sm`       | Cards at rest                                             |
| `shadow-md`       | Emphasized cards                                          |
| `shadow-lg`       | Floating panels                                           |
| `shadow-xl`       | Modal-like elevation                                      |
| `shadow-card`     | 2-layer soft card shadow (AI-skill card, site-frame card) |
| `shadow-elevated` | 3-layer deep float (not currently in use)                 |

## Typography

### Font Family

- **Messina Sans** — variable font (woff2), weight range 400–999. Default via `--font-messina-sans`.
- **Messina Sans Mono** — variable TTF. Default via `--font-messina-sans-mono` (and the `font-mono` alias).

Body defaults: `font-weight: 450`, `line-height: 1.5`, `letter-spacing: -0.02em`, `font-feature-settings: "calt","case","tnum"`.

### Weight Scale

| CSS Weight | Tailwind class  | Token                    | Usage                                                |
| ---------- | --------------- | ------------------------ | ---------------------------------------------------- |
| 400        | —               | —                        | Rarely used directly                                 |
| 450        | `font-normal`   | `--font-weight-normal`   | Body text default                                    |
| 500        | `font-medium`   | `--font-weight-medium`   | Body paragraphs, descriptions, labels                |
| 600        | `font-semibold` | `--font-weight-semibold` | Emphasized body, nav links, stat labels, rule titles |
| 700        | `font-bold`     | `--font-weight-bold`     | Headlines, section titles, stat values               |

Variable-font fine control is available via `wght-*` utilities (e.g. `wght-580`).

### Letter-Spacing

| Class              | Value     | Token                | Usage                                |
| ------------------ | --------- | -------------------- | ------------------------------------ |
| `tracking-label`   | `-0.01em` | `--tracking-label`   | Captions, small labels, 11–13px text |
| `tracking-tight`   | `-0.02em` | `--tracking-tight`   | Body copy, most UI                   |
| `tracking-snug`    | `-0.03em` | `--tracking-snug`    | Section h2 headings                  |
| `tracking-display` | `-0.04em` | `--tracking-display` | Large display headings, stat numbers |
| `tracking-hero`    | `-0.07em` | `--tracking-hero`    | Hero-size text only                  |

### Line-Height

| Class                                | Value   | Token                    |
| ------------------------------------ | ------- | ------------------------ |
| `leading-hero`                       | `0.99`  | `--leading-hero`         |
| `leading-heading`                    | `1.15`  | `--leading-heading`      |
| `leading-body`                       | `1.4`   | `--leading-body`         |
| `leading-relaxed` (Tailwind default) | `1.625` | —                        |
| Arbitrary `leading-[1.6]`            | `1.6`   | — (document-style pages) |

### Type Scale

| Role       | Tailwind class  | Token value                                   | Usage                                |
| ---------- | --------------- | --------------------------------------------- | ------------------------------------ |
| Hero       | `text-hero`     | `clamp(2.25rem, 4vw + 0.75rem, 4rem)`         | Home-page hero title                 |
| Display    | `text-display`  | `clamp(1.5rem, 2vw + 0.5rem, 2.5rem)`         | CTA headings, large section titles   |
| Section H1 | `text-h1`       | `clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem)`     | In-section page headings             |
| Doc H1     | `text-doc-h1`   | `clamp(1.75rem, 3vw + 0.5rem, 3rem)`          | /brand, /legal/\*, /blog/[slug] hero |
| Doc H2     | `text-doc-h2`   | `1.125rem` (18px)                             | Doc-page section h2                  |
| Doc Body   | `text-doc-body` | `0.9375rem` (15px)                            | Doc-page body copy                   |
| Stat       | `text-stat`     | `clamp(2.5rem, 4vw, 4rem)`                    | Large impact numbers                 |
| Quote      | `text-quote`    | `clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem)`     | Blockquote, testimonial              |
| Body       | `text-body`     | `clamp(1rem, 0.5vw + 0.875rem, 1.125rem)`     | Standard body paragraphs             |
| Body large | `text-body-lg`  | `clamp(1.125rem, 0.75vw + 0.875rem, 1.25rem)` | Lead paragraphs                      |
| Eyebrow    | `text-eyebrow`  | `0.9375rem`                                   | Eyebrow labels above headings        |
| Caption    | `text-caption`  | `0.75rem`                                     | Fine print, footer meta              |

Use arbitrary `text-[Npx]` for UI-chrome sizes without a token (11px, 12px, 13px, 14px).

### Common Typography Recipes

Recipes used across `/brand`. Match these exactly when porting the same visual register elsewhere.

```tsx
/* Doc page hero h1 */
text-doc-h1 leading-[1.05] font-bold tracking-display

/* Doc page section h2 */
text-doc-h2 font-bold tracking-snug

/* Doc page sub-section h3 */
text-doc-body font-semibold tracking-tight text-foreground/60

/* Doc page body paragraph */
text-doc-body leading-[1.6] font-medium tracking-tight text-foreground/60

/* Doc page small-label list (do/don't, slide-grid descriptions) */
text-sm leading-[1.6] font-medium tracking-label text-foreground/60

/* Caption / metadata label (11–12px) */
text-[11px] font-medium tracking-label text-foreground/40

/* UI card title (14px semibold) */
text-sm/normal font-semibold tracking-tight

/* Primary CTA button */
<Button tone="cta">Book a Demo</Button>

/* Secondary CTA button */
<Button tone="cta-outline">Learn more</Button>
```

## Layout

### Page Frame (`BorderedFrame`)

- Max width: `max-w-wide` = `1400px`
- Side margins: `25px` on `sm+`, auto-centered on `xl+`
- Side borders: `border-x border-border-light` (≈ `border-foreground/10`)
- Page background: `bg-background` (= `bg-paper`)
- Overflow: `overflow-x-clip` (NOT `overflow-x-hidden`, which breaks sticky descendants)

### Doc Shell (`DocPageShell`)

Two variants — pick based on page content:

| Variant            | Article max-width | Right padding | Used on                                                |
| ------------------ | ----------------- | ------------- | ------------------------------------------------------ |
| `narrow` (default) | `780px`           | `90px` lg     | `/legal/*` — long-form prose where line-length matters |
| `wide`             | none              | `0`           | `/brand` — grids, slide previews, full-width tables    |

Sidebar is 220px, sticky at `top: 114px`, with a 40px gap before the article. A 1px vertical rule at `left: calc(50px + 220px + 40px)` separates the two.

### Section Pattern

```html
<section>
  <div class="px-6 py-8 md:p-cell">
    <p class="text-eyebrow tracking-snug text-muted-foreground">Label</p>
    <h2 class="mt-2 text-h1 leading-heading font-bold tracking-display">
      Section title.
    </h2>
  </div>
</section>
```

### Cards (e.g. AI-skill card, site-frame preview)

- Corner radius: `rounded-xl` (12px)
- Border: `border border-foreground/8`
- Shadow: `shadow-card`
- Background: `bg-card` (pure white)
- Padding: `px-6 py-5` default; `p-cell` (50px) for full-bleed feature cards

## Spacing

| Class                            | Value  | Token                    | Usage                              |
| -------------------------------- | ------ | ------------------------ | ---------------------------------- |
| `p-cell` / `gap-cell` / `m-cell` | `50px` | `--spacing-cell`         | Section padding on desktop         |
| `p-frame-margin`                 | `25px` | `--spacing-frame-margin` | Side margins on the bordered frame |

Mobile padding is usually `px-6 py-8`; desktop steps up to `p-cell`.

## Slide Design

When generating presentation slides, follow the GrowthX bordered grid system exactly.

### Slide Structure

Every slide has:

1. **Top bar** — GrowthX logo (left) + context label (right), separated by `border-b border-foreground/10`
2. **Content area** — divided into sections using 1px borders at `border-foreground/10`
3. **Background** — `bg-background` (= Paper)
4. **No rounded corners** on the slide itself

### Slide Layouts

**Title slide:**

- Top bar with logo + label
- Center-aligned: small label (`text-[11px] text-foreground/40`), large heading (24px bold, `tracking-display`)

**Stats slide (3-column):**

- Top bar
- Label + heading row (`border-b` below)
- 3-column stats: stat value (`text-[28px] font-bold tracking-display`) + caption (`text-[11px] text-foreground/40`). Columns divided by `border-r border-foreground/10`
- Bottom row: 2-column split (chart + feature), divided by `border-r border-foreground/10`

**Two-column slide:**

- Top bar
- Left column: label + heading + body text. Right column: illustration/image placeholder
- Columns divided by `border-r border-foreground/10`

### Chart Colors (for bar charts in the growth story)

Use these in order to communicate progression from baseline → peak → current.

| Phase        | Tailwind class     | Effective color              |
| ------------ | ------------------ | ---------------------------- |
| Baseline     | `bg-foreground/80` | 80% Metal Black (dark)       |
| Early growth | `bg-foreground/15` | 15% Metal Black (muted grey) |
| Acceleration | `bg-pink`          | `#F4B8FF` (Idea Spark)       |
| Momentum     | `bg-blue`          | `#4769DB` (Link Blue)        |
| Current      | `bg-signal-green`  | `#47D89E` (Signal Green)     |

### Slide Typography

| Element       | Class                                                 | Color                |
| ------------- | ----------------------------------------------------- | -------------------- |
| Logo          | `h-[11px]`                                            | —                    |
| Context label | `text-[11px] font-medium tracking-label`              | `text-foreground/30` |
| Section label | `text-[11px] font-medium tracking-label`              | `text-foreground/40` |
| Heading       | `text-2xl font-bold leading-heading tracking-display` | default              |
| Stat value    | `text-[28px] font-bold leading-none tracking-display` | `text-foreground/85` |
| Stat caption  | `text-[11px] font-medium`                             | `text-foreground/40` |
| Body text     | `text-sm font-medium leading-[1.6] tracking-label`    | `text-foreground/60` |

### Example: Stats slide structure (TSX)

```tsx
<div className="flex aspect-video flex-col border border-foreground/10 bg-background">
  {/* Top bar */}
  <div className="flex items-center justify-between border-b border-foreground/10 px-10 py-4">
    <Image
      src="/images/growthx-logo-dark.svg"
      alt=""
      width={90}
      height={15}
      className="h-[11px] w-auto"
    />
    <span className="text-[11px] font-medium tracking-label text-foreground/30">
      Q2 2026 Results
    </span>
  </div>
  {/* Label + heading */}
  <div className="border-b border-foreground/10 px-10 py-6">
    <p className="text-[11px] font-medium tracking-label text-foreground/40">
      Impact
    </p>
    <p className="mt-1 text-2xl font-bold leading-heading tracking-display">
      Organic growth at a glance.
    </p>
  </div>
  {/* 3-col stats */}
  <div className="grid grid-cols-3 border-b border-foreground/10">
    <div className="border-r border-foreground/10 px-10 py-5">
      <p className="text-[28px] font-bold leading-none tracking-display text-foreground/85">
        200x
      </p>
      <p className="mt-1.5 text-[11px] font-medium text-foreground/40">
        Increase in organic traffic
      </p>
    </div>
    {/* ...more stat columns */}
  </div>
  {/* Bottom: chart + feature */}
  <div className="grid flex-1 grid-cols-[2fr_1fr]">
    <div className="flex flex-col border-r border-foreground/10 px-10 py-5">
      {/* Bar chart */}
    </div>
    <div className="flex flex-col justify-center px-8 py-5">
      {/* Featuring */}
    </div>
  </div>
</div>
```

## Buttons

All interactive CTAs use `<Button tone="...">` from `components/ui/Button.tsx`. Never recreate button styles from scratch.

### Standard (on light surfaces)

| Tone          | Usage                                            |
| ------------- | ------------------------------------------------ |
| `cta`         | Primary action — hero, header, key CTAs (h-11)   |
| `cta-sm`      | Compact CTA — inline CTAs, smaller layouts (h-9) |
| `cta-outline` | Secondary action — paired with a primary CTA     |

### Inverse (on `bg-foreground` surfaces)

Used on Metal Black surfaces (cookie banner, notification bars). The semantic `--background` token provides contrast — no CSS variable overrides needed.

| Tone                  | Usage                      |
| --------------------- | -------------------------- |
| `cta-inverse`         | Confirm / primary action   |
| `cta-inverse-outline` | Dismiss / secondary action |

### Dark card pattern (waitlist form, featured pricing)

Dark cards use `bg-foreground` as background class. For the card's child components to resolve tokens correctly, set these inline overrides on the card wrapper:

```tsx
style={{
  backgroundColor: "var(--color-metal-black)",
  "--foreground": "var(--color-paper-light-fixed)",
  "--background": "var(--color-metal-black)",
} as CSSProperties}
```

Inside this card, `tone="cta"` renders as a light pill (`bg-foreground` = paper-light = white), and form inputs use `data-force-light` to stay light-colored.

## Interaction States

- **Links:** transition color from muted to darker on hover (e.g. `text-foreground/60 hover:text-foreground/70`)
- **Primary buttons:** `transition-colors hover:bg-foreground/90`
- **Outline buttons:** `hover:border-foreground hover:bg-foreground hover:text-background`
- **Cards / list rows:** `hover:bg-foreground/[0.02]` for subtle emphasis
- **Logo grid cells:** brand accent fill on hover with inverted logo (`hover:bg-pink`, `hover:bg-blue`, `hover:bg-signal-green`, etc.)