# Botsi Brand System

A complete, text-only specification of the Botsi brand — colors, typography, tone, and layout conventions. Designed to be handed directly to an LLM (or a designer) so they can produce on-brand Botsi work without guessing. No image URLs are included; this file covers the system behind the marks, not the marks themselves.

---

## 1. Brand positioning

- **What Botsi is:** The AI layer for monetization across apps, web funnels, and digital commerce.
- **What Botsi does:** Enables products to operate with many prices at once, matching each user to what they are willing to pay. Autonomous pricing optimization, powered by proprietary data and advanced models.
- **Why it matters:** Delivers up to 75% LTV lift within weeks; top-end customers approach a doubling of monetized revenue inside 30 days. Compliance-first, fairness-by-architecture.
- **HQ:** New York. Works with subscription app publishers and consumer-facing digital businesses worldwide.

---

## 2. Voice & tone

Botsi sounds like a serious technology company with warmth. The brand is warm; the technology is serious. Copy should be:

- **Short, confident, editorial.** One idea per sentence. No hedging.
- **Factual over aspirational.** We say what the system does, not what we hope it feels like.
- **Human, not corporate.** Contractions are welcome. Em-dash flourishes and marketing puffery are not.
- **Technical when it matters.** LTV, conversion, paywall, subscription — these are our words. Don't dumb them down for a general audience; our buyers speak this language.
- **No em dashes in flowing prose.** Em dashes are reserved for label-style captions (e.g., `Black text logo — used on light backgrounds`). In paragraphs, use commas, colons, or sentence breaks.

Headline patterns that work:
- `The [thing] for [outcome].` → "The AI layer for monetization."
- `[Verb] [object].` → "Take what you need."
- `[Question]? [Answer].` → "Why Botsi? Because the right price for every user."

Avoid: "revolutionize," "unlock potential," "empower your team," "next-generation" — standard startup filler.

---

## 3. Color system

All colors are defined as CSS variables in `src/app/globals.css`. Hex values below are canonical — pin to these exact values when producing new work.

### 3.0 The two-zone principle

Every Botsi surface belongs to one of two zones, and the zone determines every other color decision on that surface:

1. **Warm zone (default).** The page background is **Parchment `#F5F0E8`**. The default text on Parchment is **Midnight `#1A1A1A`**. Most marketing content lives here.
2. **Dark zone (gravity moments).** The content block is **Midnight `#1A1A1A`** or **Obsidian `#0F0F0F`**. The default text on those blocks is **off-white** (`#FFFFFF` at 85% opacity for body copy). Use this zone for Press sections, primary CTA buttons, hero dashboard previews, and "final ask" CTAs.

The Signal Gradient is the **primary accent** for both zones; it never acts as a background fill, only as a text clip, border, or glow. **Azure `#3B82F6` is not part of the gradient** — it's the secondary mark color for labels and small UI chrome.

### 3.1 Primary palette (warm canvas + dark content blocks)

| Name | Hex | Role | Where it shows up |
|------|-----|------|-------------------|
| Parchment | `#F5F0E8` | **Default page background.** | Every marketing page's outer background. Tailwind: `bg-botsi-bg`. |
| Surface Warm | `#FAF7F2` | Alternating section background on Parchment. | Lets long pages breathe by tonal shift. Tailwind: `bg-botsi-surface-warm`. |
| Linen | `#EBE5D9` | Darker warm surface. | Sticky sub-navs before they stick, inline callout boxes, warm cards that need mild separation. Tailwind: `bg-botsi-bg-warm`. |
| Surface | `#FFFFFF` | Card background on Parchment. | Feature cards, pronunciation cards, pricing cards. Tailwind: `bg-botsi-surface`. |
| Midnight | `#1A1A1A` | **Primary dark content-block color + primary dark text.** | Hero dashboard previews, Press section background, feature-grid dark panels, and primary CTA button backgrounds. Also the default text color on all warm surfaces. Tailwind: `bg-botsi-dark` / `text-botsi-text`. |
| Obsidian | `#0F0F0F` | Deepest dark, for gravity sections. | Final-CTA sections, Press/Contact sections that want extra weight. Tailwind: `bg-botsi-darker`. Also the hover/active state for primary CTA buttons. |

### 3.2 Text colors

Text color is determined strictly by the zone. Do not mix.

**On Parchment / warm surfaces:**

| Role | Hex | Tailwind | Notes |
|------|-----|----------|-------|
| Headings (h1–h3) | `#1A1A1A` | `text-botsi-text` | Midnight. Never lightened. |
| Body paragraphs | `#6B6560` | `text-botsi-text-secondary` | A warm, muted gray. Readable, never shouts. |
| Labels / metadata / captions | `#9A9490` | `text-botsi-text-tertiary` | Uppercase section labels, form hints, figure captions. |
| Uppercase section label (blue tint) | `#3B82F6` | `text-botsi-blue` | Only when the label is the *first thing a reader sees in a section* (e.g., hero eyebrow "Media Kit", "Trust & Safety in Dynamic Pricing"). Signals "you are entering a new topic". |

**On Midnight / Obsidian / any dark block:**

| Role | Class | Notes |
|------|-------|-------|
| Headings | `text-white` | 100% white for primary headings. |
| Body paragraphs | `text-white/85` | Slightly off-white — easier on the eye than pure white for long copy. |
| Secondary / supporting copy | `text-white/60` or `text-white/70` | Descriptions beneath feature titles, sub-points. |
| Metadata / labels | `text-white/50` | Uppercase section labels, card subtitles. |
| Fine print / footer | `text-white/40` | Copyright lines, small disclosures. |
| Uppercase section label (cyan tint) | `text-botsi-cyan` | The dark-zone equivalent of `text-botsi-blue` — used on Press-style sections to announce a section. |

**Rule of thumb:** never use raw gray hexes. If you need "darker" on dark, step through the white-opacity tier list (85 → 70 → 60 → 50 → 40). If you need a muted color on warm, step through `text` → `text-secondary` → `text-tertiary`.

### 3.3 Accent palette (the three gradient colors + one supporting mark)

The accent system is a chord, not a wash. It signals intelligence at work — glows, headlines, key moments.

| Name | Hex | Role | Where to use |
|------|-----|------|--------------|
| Orchid | `#D946EF` | Gradient start — pink spark. | Only inside the Signal Gradient. Do not use as a flat fill. |
| Violet Pulse | `#7C3AED` | Gradient pivot — deep purple. | Inside the Signal Gradient. Also the top-left radial glow on dark sections. A lighter `#8B5CF6` (`botsi-purple` token) is acceptable for solid UI flourishes like button hover borders. |
| Cyan | `#22D3EE` | Gradient end — light teal; carries the final 40% of the sweep. | Inside the Signal Gradient. Also used as a solo accent on dark sections: uppercase section labels (e.g., Press "07 — Press"), cyan outlined pills, and the bottom-right radial glow. |
| Azure | `#3B82F6` | **Supporting secondary mark.** | Uppercase eyebrow labels on warm surfaces (`text-botsi-blue`), small status dots, icon tints, small decorative accents. **Never** part of the gradient. **Never** a large fill. |

**Primary vs. supporting:** the Signal Gradient is the primary accent. Azure is the secondary mark — used where the gradient would be too loud (a small label, a dot, a nav chip).

### 3.4 The Botsi Signal Gradient

The signature gradient flows **pink → deep violet → light teal**, with cyan dominant on the right side. This is the gradient for hero headlines, featured CTA borders, and the "moment of intelligence" accent.

**Canonical CSS:**

```css
background-image: linear-gradient(
  90deg,
  #D946EF 0%,
  #7C3AED 30%,
  #22D3EE 60%,
  #22D3EE 100%
);
```

**Stop logic:**
- 0%–30%: pink → purple transition.
- 30%–60%: purple → cyan transition.
- 60%–100%: solid cyan (the 40% of the sweep the viewer perceives as "the teal region").

**When to use:**
- Hero headline emphasis — applied to one critical word via `background-clip: text` (see: "brand kit.", "price and paywall"). Never the full headline.
- Animated nav button borders (cycling purple → azure → pink).
- CTA button borders on dark backgrounds where the button itself sits on Obsidian.
- The soft email-capture / featured-input glow.

**When NOT to use:**
- On body copy, navigation links, or small UI chrome.
- As a flat background fill on warm surfaces — it competes with the Parchment/Linen tonal system.
- Flattened to a single color "for brand feel." The gradient IS the accent. Don't pick one color out of it and treat it as a standalone brand color.

### 3.5 Radial glow accents (dark sections)

Dark sections (Midnight/Obsidian) get two opposite-corner radial glows to frame the content without adding noise.

```css
/* Top-left */
background: radial-gradient(circle, #7C3AED 0%, transparent 70%);
/* Bottom-right */
background: radial-gradient(circle, #22D3EE 0%, transparent 70%);
```

Apply with `opacity: 0.3` and a heavy `blur-3xl`. Position as `absolute` children of the section container; parent needs `overflow: hidden`. On long-form dark pages (hero backdrops), drop the opacity further to `0.04–0.06` so they set mood rather than demand attention.

### 3.6 Borders & subtle surfaces

- **Warm border:** `border-botsi-border-light` (`#ECE7DD`) for card outlines on Parchment. A heavier `border-botsi-border` (`#E0D9CE`) is available for form inputs or dividers that need more presence.
- **Dark border:** `border-white/10` for card outlines on Midnight/Obsidian. Step up to `border-white/20` only for hover states.
- **No mid-tone borders.** Borders are either warm (cream-on-cream) or frosted (white-with-opacity). Never use gray hexes.
- **Backdrop blur:** `backdrop-blur-md` + `bg-botsi-bg/80` for sticky navs once they stick to the viewport top. Before sticking, use solid Linen (`#EBE5D9`) so the nav has presence while still in flow.

### 3.7 Cards at a glance

| Context | Background | Border | Headings | Body |
|---------|------------|--------|----------|------|
| Warm card on Parchment | `bg-botsi-surface` (`#FFFFFF`) | `border-botsi-border-light` | `text-botsi-text` | `text-botsi-text-secondary` |
| Inline callout on Parchment | `bg-botsi-bg-warm` (`#EBE5D9`) | `border-botsi-border-light` | `text-botsi-text` | `text-botsi-text-secondary` |
| Dark card on Midnight/Obsidian | `bg-white/5` + `backdrop-blur-sm` | `border-white/10` | `text-white` | `text-white/85` (primary) / `text-white/50` (secondary) |

### 3.8 CTA buttons

- **Primary CTA (warm zone):** `bg-botsi-text` (Midnight) + `text-botsi-bg` (Parchment). Hover: `bg-botsi-darker` (Obsidian). Rounded-full, semibold. This is the "dark pill on cream" button seen across the site.
- **Secondary CTA (warm zone):** transparent with `border border-botsi-border` and `text-botsi-text`. Hover: `bg-botsi-surface`.
- **Primary CTA (dark zone):** either a solid white pill (`bg-white text-botsi-text`) or a gradient-bordered pill using the Signal Gradient as a 1px border wrap. Never a flat Azure fill.
- **Nav CTA:** outline-only pill with an animated gradient border cycling through purple → azure → pink. Reserved for the global nav "Schedule a Demo" button.

---

## 4. Typography

Botsi uses **one typeface, everywhere**: **Satoshi**.

- **Source:** Fontshare. Variable font, weights 300 Light → 900 Black.
- **Why Satoshi:** Geometric, confident, works beautifully from 11px captions to 100px display type.

### 4.1 Type scale

| Role | Size (desktop) | Weight | Tracking | Line height | Notes |
|------|----------------|--------|----------|-------------|-------|
| Display | `text-5xl md:text-7xl` (≈ 48px → 72px) | Bold (700) | `tracking-tight` (-0.02em) | `leading-[1.05]` | Hero headlines. Big, assertive. |
| Section heading (h2) | `text-4xl md:text-5xl` (≈ 36px → 48px) | Bold (700) | `tracking-tight` | Default | Opens every section. |
| Sub-heading (h3) | `text-2xl md:text-3xl` (≈ 24px → 30px) | Semibold (600) | Default | Default | Card titles, feature names. |
| Body | `text-base` (16px) | Regular (400) | Default | `leading-relaxed` (1.625–1.7) | Default paragraph. |
| Body large | `text-lg md:text-xl` (18px → 20px) | Regular (400) | Default | `leading-relaxed` | Sub-hero paragraph, intro copy. |
| Small / caption | `text-sm` (14px) | Regular (400) | Default | Default | Secondary metadata, supporting copy. |
| Label (uppercase) | `text-xs` (12px) | Semibold (600) or Bold (700) | `tracking-[0.2em]` to `tracking-[0.25em]` | Default | Section numbers (`01 — Name`), category labels (`Pronunciation`). Always uppercase. |
| Mono (code / pronunciation) | `text-sm`–`text-base` | Regular | Default | Default | Use `font-mono` for API examples, pronunciations like `/ˈbɒt.si/`, hex values. |

### 4.2 Tracking rules

- **Display and section headings:** `tracking-tight` (-0.02em). Never wider.
- **Uppercase labels:** `tracking-[0.2em]` to `tracking-[0.25em]`. Uppercase without extra tracking looks crowded.
- **Body:** default tracking. Never tighten body copy.

### 4.3 Color application

See §3.2 for the full text-color tier system. The short version:

- **Warm surfaces:** headings `text-botsi-text` (`#1A1A1A`), body `text-botsi-text-secondary` (`#6B6560`), labels/captions `text-botsi-text-tertiary` (`#9A9490`).
- **Dark surfaces:** headings `text-white`, body `text-white/85`, secondary `text-white/60`, metadata `text-white/50`, fine print `text-white/40`.
- **Section eyebrow labels:** `text-botsi-blue` (`#3B82F6`) on warm surfaces, `text-botsi-cyan` (`#22D3EE`) on dark surfaces.

### 4.4 Voice in copy (applied)

- Use **contractions** (we're, it's, don't).
- **Bold** words for emphasis, not whole sentences.
- Keep paragraphs short — 2 to 4 sentences.
- One concrete number per paragraph where possible. Numbers are trust signals.
- Headlines end in a period when they're declarative statements ("Our palette.", "Our type.", "Take what you need."). It mirrors the editorial voice.

---

## 5. Name usage

- **Always:** `Botsi` (capital B, lowercase rest). Company entity: `Botsi Inc.`
- **Never:** `BOTSI`, `botsi`, `Bot.si`, `Bot-si`, `bot.si`.
- **Exception:** The lowercase `botsi` wordmark is reserved for the official logo only. It is set in the wordmark typeface — never retype it in body copy.
- **Pronunciation:** Bot · see `/ˈbɒt.si/` (rhymes with "hotsy").
- **Referring to the product:** "Botsi" (not "the Botsi platform", not "the Botsi service" — just Botsi).

---

## 6. Layout & composition

### 6.1 Container widths

- **Default content container:** `max-w-6xl` (72rem / 1152px).
- **Long-form body paragraphs:** constrain to `max-w-2xl` (42rem) so line length stays readable (~60–75 characters).
- **Hero headlines:** can run wider, up to `max-w-3xl`.

### 6.2 Section rhythm

Every marketing section follows this pattern:

1. **Section label** — uppercase, tracked, with number prefix. Example: `04 — Typography`.
2. **Section heading** — h2, `text-4xl md:text-5xl font-bold tracking-tight`, ending in a period.
3. **Lede paragraph** — `max-w-2xl text-botsi-text-secondary leading-relaxed`.
4. **Content block** — cards, grids, or long-form.

Vertical padding for sections: `py-20 md:py-28`. Horizontal padding: `px-6`.

### 6.3 Background alternation

To create rhythm on long pages, alternate:
- Parchment (`bg-botsi-bg`, default).
- Warm surface (`bg-botsi-surface-warm`, `#FAF7F2`) with top/bottom border in `border-botsi-border-light`.
- Obsidian (`bg-[#0F0F0F]` or similar) for "gravity" sections like Press/CTA — always with the radial glows from §3.4.

### 6.4 Card patterns

- **Warm card:** `bg-botsi-surface` (white) + `rounded-2xl` + `border border-botsi-border-light` + `p-8 md:p-10`.
- **Dark card:** `bg-white/5` + `rounded-2xl` + `border border-white/10` + `backdrop-blur-sm` + `p-6 md:p-8`.
- **Sub-card / inline callout:** `bg-botsi-bg-warm` + `rounded-lg` + `border border-botsi-border-light` + `p-3`.

### 6.5 Sticky section navs

When a page has multiple anchor sections, use a sticky sub-nav:

- `sticky top-20 z-40` (matches the 80px main-nav offset).
- **Before stuck:** `bg-botsi-bg-warm` (solid Linen) — gives the nav presence while it's still in flow.
- **After stuck:** `bg-botsi-bg/80 backdrop-blur-md` — lets underlying content show through.
- Swap is driven by a scroll listener comparing `navRef.current.getBoundingClientRect().top <= 80`.

---

## 7. Do / Don't summary

### Do
- Use Parchment + Midnight as the default canvas.
- Use the Signal Gradient as a text clip on the headline word of a hero.
- Keep long-form body copy to `max-w-2xl`.
- End section headings with a period.
- Treat numbers as trust signals — surface them early.

### Don't
- Don't use em dashes in flowing paragraphs. Label-style captions (`Logo — description`) are fine.
- Don't put the Signal Gradient on warm backgrounds as a block fill.
- Don't re-color the gradient sphere logo.
- Don't capitalize or retype the `botsi` wordmark.
- Don't tighten tracking on body copy.
- Don't introduce a second typeface. It's Satoshi, everywhere.

---

## 8. CSS variable reference (Tailwind + raw)

Project tokens (from `src/app/globals.css`):

```css
/* Backgrounds & surfaces */
--color-botsi-bg: #F5F0E8;            /* Parchment — default page background */
--color-botsi-bg-warm: #EBE5D9;       /* Linen — darker warm surface */
--color-botsi-surface: #FFFFFF;       /* White card on Parchment */
--color-botsi-surface-warm: #FAF7F2;  /* Alternating section on Parchment */
--color-botsi-dark: #1A1A1A;          /* Midnight — primary dark content block */
--color-botsi-darker: #0F0F0F;        /* Obsidian — deepest dark section */

/* Text */
--color-botsi-text: #1A1A1A;          /* Default text on warm surfaces (Midnight) */
--color-botsi-text-secondary: #6B6560;/* Body paragraph on warm */
--color-botsi-text-tertiary: #9A9490; /* Labels, captions, muted */

/* Borders */
--color-botsi-border: #E0D9CE;        /* Heavier warm border (inputs, dividers) */
--color-botsi-border-light: #ECE7DD;  /* Default warm border (cards) */

/* Accents */
--color-botsi-blue: #3B82F6;          /* Azure — supporting secondary mark */
--color-botsi-purple: #8B5CF6;        /* Violet (standard) — solid flourishes */
--color-botsi-pink: #D946EF;          /* Orchid — gradient start */
--color-botsi-cyan: #22D3EE;          /* Cyan — gradient end */
```

**Gradient-only value:** The Signal Gradient uses `#7C3AED` (a deeper violet) as its middle stop, not `#8B5CF6`. This hex is not a token; inline it in the gradient definition. `#8B5CF6` (the `botsi-purple` token) is reserved for solid flourishes like button hover borders and radial glows.

**Off-white on dark is opacity-based, not a hex:** always use `text-white` + `/85`, `/70`, `/60`, `/50`, `/40` rather than defining new gray tokens. This keeps dark-zone text consistent with the rest of the product.

---

## 9. Using this document

This document is canonical. When producing new Botsi marketing pages, product surfaces, or written collateral:

1. Follow §3 (colors) and §4 (typography) verbatim. Don't invent new scales.
2. Follow §6 (layout) for spacing and container patterns. Deviate only with a clear reason.
3. Match §2 (voice) for all copy. Short, confident, factual.
4. If something isn't covered here, match the rhythm of the media kit page (`/media-kit`). That page is the reference implementation of this system.

*Last generated alongside the live media kit. For visual assets and downloadable logo files, see https://botsi.com/media-kit.*