# RallyUp Design System

> High-contrast navy foundations punctuated by a vibrant, multi-chromatic palette of soft-rounded surfaces and geometric clarity.

**Source:** https://RallyUp.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
RallyUp utilizes a deep Navy (`#272756`) as its primary anchor for text, borders, and high-impact surfaces, creating a professional and trustworthy foundation. This stability is offset by a playful, diverse accent palette including Purple (`#625ee9`), Lime (`#cdf378`), and Coral (`#f7646c`), often used as background washes for content blocks. Typography is exclusively **Banana Grotesk**, a modern sans-serif that maintains a clean, approachable feel across a wide scale from 14px body to 72px display. UI components favor a "pill" or high-radius aesthetic, with buttons and panels utilizing 20px to 50px corner radii to soften the high-contrast layout.

## Signature DNA
1. **The Navy Anchor** (The color `#272756` acts as the system's "ink," used for nearly all primary text, button outlines, and heavy section backgrounds to maintain brand authority across varied accent colors.)
2. **Soft Geometric Surfaces** (Large content blocks use a 20px radius, while primary CTAs use a 50px pill shape, creating a friendly, accessible interface for nonprofit users.)
3. **Multi-Chromatic Sectioning** (Distinct page sections are defined by full-width background washes in varying pastels like Thistle `#ecebff` and Pearl `#f5f7f9`, preventing visual fatigue in long-scroll layouts.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--wp--preset--color--navy` | `#272756` | Primary text, borders, high-impact surfaces | 401 | 1 | Computed Style |
| `--wp--preset--color--white` | `#ffffff` | Page background, button text, card surfaces | 35 | 1 | Computed Style |
| `--wp--preset--color--pearl` | `#f5f7f9` | Secondary surfaces, subtle section backgrounds | 22 | 1 | Computed Style |
| `--hkb-category-desc-color` | `#000000` | Absolute black for specific help-center text | 36 | 1 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--wp--preset--color--purple` | `#625ee9` | Primary brand accent, links, active states | 83 | 1 | Computed Style |
| `--wp--preset--color--lime` | `#cdf378` | High-visibility section backgrounds | 6 | 1 | Computed Style |
| `--wp--preset--color--thistle` | `#ecebff` | Soft background wash for feature blocks | 5 | 1 | Computed Style |
| `--wp--preset--color--lavender` | `#bfbdff` | Decorative surfaces and card backgrounds | 5 | 1 | Computed Style |
| `--wp--preset--color--green` | `#4aa900` | Success indicators and secondary accents | 4 | 1 | Computed Style |
| `--wp--preset--color--coral` | `#f7646c` | Attention-grabbing accents and borders | 4 | 1 | Computed Style |
| `--wp--preset--color--powder` | `#fff1e5` | Warm decorative background (decorative_only) | 3 | 1 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Banana Grotesk | 300, 400, 500, 600, 700, 900 | All-purpose: Display, Heading, Body | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 72px | 79.2px | normal | 400 | Hero headlines | `h1.gb-text-350ed974` |
| `{type.display.lg}` | 56px | 61.6px | -1px | 400 | Section headers | `h1.gb-text-4d3714a6` |
| `{type.display.md}` | 46px | 50.6px | normal | 400 | Sub-section headers | `h3.gb-headline` |
| `{type.heading.md}` | 28px | 30.8px | normal | 400 | Feature titles | `h5.gb-text` |
| `{type.heading.sm}` | 24px | 31.2px | normal | 500 | Card titles | `p.gb-text-bd314244` |
| `{type.body.lg}` | 20px | 26px | normal | 500 | Lead paragraph | `p` |
| `{type.body.md}` | 18px | 23.4px | normal | 400 | Default reading text | `article#post-11155` |
| `{type.body.sm}` | 14px | 18.2px | normal | 600 | Button labels, links | `a.btn-arrow` |

### Principles
1. **Banana Grotesk for everything.** No secondary font families are used; hierarchy is strictly weight and size-driven.
2. **Tight Display Tracking.** Large headlines (56px+) utilize negative letter-spacing (-1px) to maintain visual tension.
3. **Generous Body Leading.** Standard body text (18px) uses a 1.3x line-height ratio (23.4px) for optimal legibility.

## Spacing
**Base unit:** Custom
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 66 |
| `{space.sm}` | 20px | 19 |
| `{space.md}` | 25px | 16 |
| `{space.lg}` | 60px | 19 |
| `{space.xl}` | 120px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Sharp section dividers | 444 occurrences |
| `{radius.card}` | 20px | Feature cards and pricing tiers | 21 occurrences |
| `{radius.pill}` | 50px | Primary and secondary buttons | 12 occurrences |
| `{radius.sm}` | 12px | Tooltips and small badges | 13 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | none | Standard cards and sections | All primary pages |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and secondary call-to-action.
**Pages observed:** https://RallyUp.com, https://rallyup.com/pricing
**Spec:** Background `#ffffff` / Text `#272756` / Border `#272756` (2px) / Radius 50px / Padding 13px 25px / Typography 14px (600).
**States observed:** Default | Hover: captured (background shifts to `#f5f7f9`).

#### Navy Surface
**Role:** High-contrast footer or hero section.
**Pages observed:** https://RallyUp.com, https://rallyup.com/pricing
**Spec:** Background `#272756` / Text `#ffffff` / Border none / Radius 0px / Padding 120px 60px.
**States observed:** Default only.

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific platform capabilities.
**Pages observed:** https://RallyUp.com
**Spec:** Background `#f5f7f9` / Text `#272756` / Border `#272756` (2px) / Radius 20px / Padding 40px.
**States observed:** Default only.

#### Pricing Tier Card
**Role:** Defining service levels.
**Pages observed:** https://rallyup.com/pricing
**Spec:** Background `#bfbdff` / Text `#272756` / Border `#272756` (2px) / Radius 20px / Padding 40px.
**States observed:** Default only.

### Tier 3: Surface-specific

#### Accent Content Block
**Role:** Decorative informational sections.
**Pages observed:** https://RallyUp.com
**Spec:** Background `#fff1e5` / Text `#272756` / Border none / Radius 20px / Padding 30px 80px.
**States observed:** Default only.

#### Tooltip / Badge
**Role:** Small UI annotations.
**Pages observed:** https://RallyUp.com
**Spec:** Background `rgba(39, 39, 86, 0.04)` / Text `#272756` / Border none / Radius 12px / Padding 10px.
**States observed:** Default only.

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px |
| Section Vertical Padding | 120px |
| Grid Gutter | 25px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Section padding reduces to 60px; font sizes scale down (Display 72px -> 48px). |
| Desktop | 1440px | Standard multi-column grid (up to 4 columns for feature grids). |

## Imagery & decoration
RallyUp uses a mix of high-quality lifestyle photography (nonprofit organizers and donors) and clean, flat-style UI illustrations. Decorative elements include "sticky note" style cards with slight rotations and vibrant background washes. Avoids heavy shadows or skeuomorphic gradients.

## Do's
1. Use Navy `#272756` for all primary body text to ensure WCAG AA compliance (13.9:1 contrast).
2. Apply a 50px radius to all primary action buttons to maintain the "pill" brand signature.
3. Utilize Banana Grotesk weight 400 for large headlines to maintain an airy, modern feel.
4. Separate major page sections with alternating background tokens like `#f5f7f9` and `#ffffff`.
5. Use the 20px radius token for all container cards.

## Don'ts
1. **Wrong:** Using Purple `#625ee9` as the primary body text color. **Right:** Use Navy `#272756`. **Reason:** Purple is an accent for links and highlights, not long-form reading.
2. **Wrong:** Applying sharp 0px corners to buttons. **Right:** Use 50px pill radius. **Reason:** Sharp corners conflict with the brand's friendly, soft-geometric DNA.
3. **Wrong:** Using a sub-brand accent (like Lime `#cdf378`) as the global header background. **Right:** Keep headers clean white or Navy.
4. Do not use drop shadows on cards; RallyUp relies on 2px Navy borders for definition.
5. Do not mix font families; Banana Grotesk is the sole typeface.

## Similar brands
- Zendesk (clean typography, soft radii)
- Mailchimp (vibrant accent backgrounds, friendly sans-serif)
- Gusto (approachable UI, clear sectioning)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-navy: #272756;
  --color-purple: #625ee9;
  --color-lime: #cdf378;
  --color-pearl: #f5f7f9;
  --color-white: #ffffff;
  --radius-pill: 50px;
  --radius-card: 20px;
  --font-main: 'Banana Grotesk', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-navy: #272756;
  --color-purple: #625ee9;
  --color-lime: #cdf378;
  --radius-pill: 50px;
  --radius-card: 20px;
  --font-banana: 'Banana Grotesk';
}
```

## Agent prompt examples
- "Create a feature card using a `#f5f7f9` background, a 2px `#272756` border, and 20px corner radius. Use Banana Grotesk for the 24px title."
- "Generate a primary pill button with a `#ffffff` background, `#272756` text and border, and 50px radius."
- "Design a section header using Banana Grotesk at 56px with -1px letter spacing in Navy `#272756`."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the computed style logs.
- Mobile-specific menu transition animations were not documented.
- Error state colors (Semantic Red) were observed in tokens but not captured in active UI components.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|------|------|------|
| Homepage | https://RallyUp.com | 1440px | 2026-06-06T04:58 |
| Pricing | https://rallyup.com/pricing | 1440px | 2026-06-06T04:59 |
| Homepage Mobile | https://RallyUp.com | 390px | 2026-06-06T05:01 |