# RevPartners — Brand Design Guide (for AI agents)

Drop this file into any app repo. It is **self-contained**: everything an agent needs to
re-skin an interface to match the RevPartners brand is below — no other files required.
When you (the agent) are asked to redesign an app "to match RevPartners", follow this
document as the source of truth. Copy the CSS block verbatim into the project and use the
tokens; do not invent new colors, fonts, or component recipes.

RevPartners is a **Go-to-Market (GTM) engineering consultancy** delivering **Revenue
Operations through HubSpot**. The brand reads **bold, technical, and confident** — clean,
lots of white space, one accent color at a time, never busy.

---

## 1. First principles (read before touching anything)

1. **Neutral-dominant.** 80–90% neutral (off-white bg, dark text), 10–20% accent. Color is a
   scalpel, not a paint roller.
2. **One accent hue per element.** Never mix accents inside a single card/button/block (no
   blue border with green icons). When a group needs variety, give each *item* one hue and
   cycle across items: **green → blue → orange → red → purple**, repeat.
3. **No dark cards.** Dark (Ebony Clay) is for full-width bands/heroes only. Individual cards
   stay light.
4. **Weight, not color, creates hierarchy.** Headings are dark, never green. Emphasize by
   mixing Montserrat Bold + Regular. A single accent *word* inside a dark heading is fine.
5. **"Bold" body = Inter SemiBold (600), never 700.**
6. **No serif, no monospace, no emoji** (emoji only in rare conversational micro-copy, never
   in UI chrome). No gradients, no noise/texture, no drop-shadow-heavy cards, no
   colored-left-border-only cards, no chips behind icons.

---

## 2. Drop-in CSS (tokens)

Paste into a global stylesheet. All values are canonical.

```css
:root {
  /* ---- Neutrals (light → dark) ---- */
  --clr-off-white: #FDFDFD;  --clr-platinum: #F7F7FD;  --clr-mercury: #F3F3F4;
  --clr-iron: #DDDEE2;       --clr-steel: #A1A2A7;     --clr-carbon: #555970;
  --clr-river-bed: #434761;  --clr-ebony-clay: #24273A;

  /* ---- Accents (functional) ---- */
  --clr-green:  #17B452;  /* Rally Green — PRIMARY / RevOps */
  --clr-blue:   #329DFF;  /* Fast Blue — Growth */
  --clr-orange: #F7761E;  /* Tango — HubSpot */
  --clr-red:    #FB3131;  /* Racecar Red — Sales */
  --clr-purple: #8C32FF;  /* Ultra Purple — Tech */
  --clr-yellow: #FBAA31;  /* Lightning — used in the slide footer line */

  /* ---- Accent backgrounds, method 1: 20% opacity (composites over anything) ---- */
  --clr-green-bg:  rgba(23,180,82,0.20);   --clr-blue-bg:   rgba(50,157,255,0.20);
  --clr-orange-bg: rgba(247,118,30,0.20);  --clr-red-bg:    rgba(251,49,49,0.20);
  --clr-purple-bg: rgba(140,50,255,0.20);

  /* ---- Accent backgrounds, method 2: opaque flatten (20% baked over off-white) ---- */
  --clr-green-light:  #D1F0DC;  /* Mint */    --clr-blue-light:  #CCE7FF;  /* Sky */
  --clr-orange-light: #FEE4D5;  /* Peach */   --clr-red-light:   #FFD9D7;  /* Coral */
  --clr-purple-light: #E9D6FF;  /* Lavender */

  /* ---- Accent darks (deep fills / emphasis) ---- */
  --clr-green-dark:  #22433E;  --clr-blue-dark:  #0F2F4D;  --clr-orange-dark: #7B3200;
  --clr-red-dark:    #8C0000;  --clr-purple-dark: #35007A;

  /* ---- Semantic ---- */
  --color-bg: var(--clr-off-white);     --color-bg-alt: var(--clr-mercury);
  --color-bg-dark: var(--clr-ebony-clay);
  --color-fg: var(--clr-ebony-clay);    --color-fg-2: var(--clr-river-bed);
  --color-fg-3: var(--clr-steel);       --color-fg-inverted: var(--clr-off-white);
  --color-primary: var(--clr-green);    --color-primary-bg: var(--clr-green-bg);
  --color-border: rgba(36,39,58,0.10);  --clr-stroke: rgba(36,39,58,0.20);
  --clr-bg-2: var(--clr-mercury);
  --color-link: var(--clr-green);       --color-link-hover: var(--clr-green-dark);

  /* ---- Type ---- */
  --font-display: 'Montserrat', sans-serif;  /* headings — Bold 700 */
  --font-body: 'Inter', sans-serif;          /* body/UI — 400/500, "bold" = 600 */

  /* ---- Spacing (1rem = 16px) ---- */
  --gap-xs: .5rem; --gap-s: 1rem; --gap: 1.5rem; --gap-m: 3rem; --gap-l: 3.75rem; --gap-xl: 7.5rem;

  /* ---- Radii ---- */
  --radius-sm: 5px;   /* tags */    --radius: 12px;  /* cards */
  --radius-pill: 120px;             --radius-round: 50%;

  /* ---- Shadow (subtle only) ---- */
  --shadow-card: 0 2px 4px rgba(0,0,0,0.10);
}
```

```html
<!-- Fonts: both on Google Fonts, no local files needed -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<!-- Icons: Material Symbols Rounded, weight 400 -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
```

---

## 3. Typography

| Role | Font | Weight | Size (web) |
|---|---|---|---|
| Hero XL | Montserrat | 700 | 72–120px |
| H1 | Montserrat | 700 | 48px |
| H2 | Montserrat | 700 | 32px |
| H3 | Montserrat | 700 | 28px |
| Eyebrow / category | Montserrat | 700 | 15px · UPPERCASE · letter-spacing .3em · often green |
| Body | Inter | 400 | 16–18px · line-height ~1.6 |
| Body bold | Inter | **600** | — |
| Caption | Inter | 400/500 | 12–14px |

- Headings dark (`--color-fg`), never green.
- Mix Bold + Regular within one title for emphasis — the bold can fall on *either* part; weight the words that matter (`<span>What are</span> <b>Lifecycle Stages?</b>`).
- Body text is River Bed (`--color-fg-2`); muted text is Steel (`--color-fg-3`).

---

## 4. Components

### Buttons
- Shape: full pill (`border-radius: 120px`). Font: Inter **600**.
- **Primary:** green fill `#17B452`, white text, padding `15px 40px`.
- **Outlined:** transparent fill, `2px solid #17B452`, green text.
- **Hover:** accent at 20% opacity as background. **Press:** `transform: scale(0.95)`.

### Fancy links
- Inter **600**, green, trailing arrow `→` that is **also Inter** (not an icon font). Arrow
  nudges right on hover.

### Cards (the signature recipe)
- `border-radius: 12px`, **`2px` border** — accent color OR `--clr-stroke`.
- Background: `--clr-bg-2` (neutral) **or** ~20% of the accent (`--clr-<hue>-bg`) for accent
  cards. **Border and fill share the same hue.**
- **No** shadow by default, **no** colored-left-border-only, **no** chip behind icons.
- Icon sits directly on the surface in the accent color.

### Icons
- **Material Symbols Rounded, weight 400** — matched to the 2px border weight. Never thinner.
- Color maps to service area (green RevOps · blue Growth · orange HubSpot · red Sales ·
  purple Tech). No background chips.

### Step sequences
- Solid **filled circle**, no border, white numeral (Montserrat Bold) inside.
- Circle color cycles green → blue → orange → red → purple.
- Joined by **dashed** connector lines (2px dashed, neutral).

### Borders & lines
- Structural: `1px solid rgba(36,39,58,0.1)`.
- Emphasis divider: `2–3px dashed #17B452` (green), often with a filled circle end cap.

---

## 5. Layout & motion

- Backgrounds: Off-White primary, Mercury for alt sections, Ebony Clay for inverted bands.
  No textures/gradients.
- Generous white space; don't crowd. Flex/grid with `gap` tokens. Let primary content
  breathe — center it in available space rather than packing everything to the edges.
- Corners: tags 5px · cards 12px · buttons pill · avatars round.
- Motion: minimal and purposeful — hover = 20% accent bg, press = 95% scale. No bounce/spring.
- Imagery: technical line/schematic diagrams (1–2px stroke, neutral or single accent) over
  photography. Natural-color photos only for team/testimonial headshots — no filters/grain.
- **Illustrations as background elements:** a library of brand SVGs ships in `Illustrations/`
  (Backgrounds, Cubes, Drawings, Multi-Color, RPM, Website Graphics). Use them **sparingly** —
  at most one per surface, placed in an **empty area** (corner/edge opposite the headline),
  **oversized so they crop and bleed past the frame edges**, kept low-contrast (gray line art
  or a heavily-toned-down accent) so they never compete with copy. Match the accent to the
  surface's service color when one applies. Full-bleed `Backgrounds/` grids are the exception —
  those tile edge-to-edge behind a whole section. Never place an illustration over text or
  controls. Copy only the SVGs a design needs into the project; don't bulk-import the library.

---

## 6. Voice & copy

- Bold, direct, active voice. First-person **we**, second-person **you**.
- Self-aware wit in headlines; technical confidence (bowtie model, pipeline velocity, MQL/SQL).
- Title Case headings; sentence case body; occasional ALL-CAPS labels (wide tracking).
- Em dashes for emphasis; Oxford comma; lowercase URLs (`revpartners.io`). Emoji almost never.

---

## 7. Logo

- Primary: horizontal wordmark. Mark-only for tight spaces/favicon. Green on light, white on
  dark. Inline SVG fill uses `var(--clr-primary)`.
- Keep clear space around it; never recolor to a non-brand hue, stretch, or add effects.
- Ask the repo owner for the SVG files if not already present (`RevPartners-Logo-2024.svg`,
  `RP-Mark-2024.svg`).

---

## 8. Quick checklist before shipping a redesign

- [ ] Background is off-white; page is neutral-dominant, accents sparse.
- [ ] Every element uses a single accent hue (no mixing within one component).
- [ ] Headings are dark Montserrat Bold; no green headings; body is Inter (bold = 600).
- [ ] Buttons are pills; cards are 2px-border + matching tint, no shadow/chip/left-border.
- [ ] Icons are Material Symbols Rounded weight 400, colored by service area.
- [ ] No serif, no monospace, no gradients, no emoji in UI.
- [ ] Logo present, correct color, with clear space.