# 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. Use color to draw attention to important items such as CTAs. 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. For example if there are 5 cards, each would get its own accent color and supporting variants. The primary brand color is green. 1. The only exception for this is purely visual decorations. Such as the BYR stripe, illustrations, or rainbow-ish graphics. 3. **No dark cards.** Dark (Ebony Clay) is for full-width bands/heroes only. Individual cards stay light. Any dark mode section would have all its elements dark, no intense contrast blocks inside the same layout section/page/slide. 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) great for layering ---- */ --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: 0.25rem; /* tags */ --radius: 0.5rem; /* cards */ --radius-pill: 100rem; --radius-round: 50%; /* ---- Shadow (subtle only) ---- */ --shadow-card: 0 2px 4px rgba(0,0,0,0.10); --shadow-menu: 0px 2px 22px 0px rgba(0, 0, 0, 0.10); --shadow-light: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); --shadow-lighter: 0px 2px 4px 0px rgba(0, 0, 0, 0.16); /* ---- Colored shadows can be used when an element has accent border and accent bg fill, icons in circles for example make them look like they are glowing ---- */ --shadow-green: 0px 3px 6px 0px rgba(23, 180, 82, 0.10), 0px 11px 11px 0px rgba(23, 180, 82, 0.09), 0px 25px 15px 0px rgba(23, 180, 82, 0.05), 0px 44px 18px 0px rgba(23, 180, 82, 0.01), 0px 69px 19px 0px rgba(23, 180, 82, 0.00); --shadow-blue: 0px 69px 19px 0px rgba(50, 157, 255, 0.00), 0px 44px 18px 0px rgba(50, 157, 255, 0.01), 0px 25px 15px 0px rgba(50, 157, 255, 0.05), 0px 11px 11px 0px rgba(50, 157, 255, 0.09), 0px 3px 6px 0px rgba(50, 157, 255, 0.10); --shadow-orange: 0px 69px 19px 0px rgba(239, 129, 27, 0.00), 0px 44px 18px 0px rgba(239, 129, 27, 0.01), 0px 25px 15px 0px rgba(239, 129, 27, 0.05), 0px 11px 11px 0px rgba(239, 129, 27, 0.09), 0px 3px 6px 0px rgba(239, 129, 27, 0.10); --shadow-red: 0px 69px 19px 0px rgba(251, 49, 49, 0.00), 0px 44px 18px 0px rgba(251, 49, 49, 0.01), 0px 25px 15px 0px rgba(251, 49, 49, 0.05), 0px 11px 11px 0px rgba(251, 49, 49, 0.09), 0px 3px 6px 0px rgba(251, 49, 49, 0.10); --shadow-purple: 0px 69px 19px 0px rgba(140, 50, 255, 0.00), 0px 44px 18px 0px rgba(140, 50, 255, 0.01), 0px 25px 15px 0px rgba(140, 50, 255, 0.05), 0px 11px 11px 0px rgba(140, 50, 255, 0.09), 0px 3px 6px 0px rgba(140, 50, 255, 0.10); } ``` ```html ``` --- ## 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 · use an accent color | | 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 (`Revenue Operations`). - 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 - `border-radius: 12px`, `2px` **border** — accent color OR `--clr-stroke`. - Background: `--clr-bg-2` (neutral) **or** ~20% of the accent (`--clr--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: `2px solid rgba(36,39,58,0.1)`. - Emphasis divider: `2px dashed #17B452` (green), often with a filled circle end cap. - Signature stripe: bottom of header, top of footer, or section dividers (pick one) should contain the BYR stripe: - 4px tall, 100% wide - Slices: blue, yellow, red. At 2:3:2 ratio - Strokes in general are standardized to 2px. Try to match everything to look like it has a 2px stroke. This makes it blend well with the typography and chosen icon weights. --- ## 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. - Corners: tags 5px · cards 12px · buttons pill · avatars round. - Motion: minimal and purposeful — hover = 20% accent bg, press = 95% scale. No bounce/spring. Typically fade up/sideways. Some elements have a "radio signal" circular pulse to indicate connectivity. Lines use wipe animations (path reveal). - 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. --- ## 6. Voice & copy - Bold, direct, active voice. First-person **we**, second-person **you**. Optimistic. - Self-aware wit in headlines; technical confidence (bowtie model, pipeline velocity, MQL/SQL). - Sentence case headings; sentence case body; occasional ALL-CAPS labels (wide tracking). - No em dashes for emphasis; yes Oxford comma; lowercase URLs (`revpartners.io`). Periods after headings except h5 labels. 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`). Can be fetched as well: - Standard: [https://revpartners.io/hubfs/RP%20+%20WS%20Logo%20Horizontal%20-%20Green.svg](https://revpartners.io/hubfs/RP%20+%20WS%20Logo%20Horizontal%20-%20Green.svg?noresize) - Logomark only: [https://revpartners.io/hubfs/RP%20Badge%20-%20Green.svg?hsLang=en](https://revpartners.io/hubfs/RP%20Badge%20-%20Green.svg?hsLang=en) --- ## 8. Quick checklist before shipping a redesign - [ ] Background is off-white; page is neutral-dominant, accents sparse. - [ ] Footer or header uses signature blue-yellow-red stripe. - [ ] 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.