# Guidepoint Design System

> High-contrast monochrome precision anchored by a singular high-voltage yellow accent and geometric Poppins typography.

**Source:** [https://guidepoint.com](https://guidepoint.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Guidepoint utilizes a stark, professional monochrome foundation of pure black (#000000) and white (#ffffff) to establish institutional authority. The system’s primary visual energy is derived from a specific high-saturation yellow (#ffcd00), used exclusively for primary CTAs, links, and terminal punctuation in headlines. Typography is strictly Poppins, ranging from heavy 600-weight display headers to light 300-weight body copy. Layouts are defined by sharp 0px borders and generous 40px internal padding, creating a modular, grid-heavy aesthetic that feels like a modern financial terminal.

## Signature DNA
1. **The Yellow Period** (Headlines frequently end with a yellow (#ffcd00) period, a signature brand mark observed on the homepage hero and section headers.)
2. **Achromatic Rigor** (The interface is strictly #000000 and #ffffff; saturated color is forbidden for UI elements except for the primary action yellow.)
3. **Geometric Modularity** (Content is housed in sharp-edged containers with 0px radii, often separated by 1px or 2px solid black borders.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.black}` | `#000000` | Primary text, button text, dark section backgrounds | 59 | 1 | `--wpex-black` |
| `{colors.charcoal}` | `#212322` | Default body text, footer backgrounds | 36 | 1 | `--wpex-body-color` |
| `{colors.white}` | `#ffffff` | Page canvas, input backgrounds, inverted text | 11 | 1 | `--wpex-white` |
| `{colors.gray-light}` | `#ebebeb` | Borders, table dividers, subtle surfaces | 5 | 1 | `--wpex-border-main` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.accent}` | `#ffcd00` | Primary CTA background, link color, brand punctuation | 18 | 1 | `--wpex-accent` |
| `{colors.accent-soft}` | `#ffeeaa` | Hover states for buttons and links (decorative_only) | 1 | 1 | `--wpex-accent-alt` |

### Semantic
| Token | Hex | Role | Source |
|-------|-----|------|--------|
| `{colors.success}` | `#46b450` | Success indicators | `--wpex-green-success` |
| `{colors.error}` | `#c62828` | Error states | `--wpex-red-error` |
| `{colors.warning}` | `#ffb900` | Warning alerts | `--wpex-yellow-warning` |
| `{colors.info}` | `#00a0d2` | Informational UI | `--wpex-blue-info` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Poppins | 300, 400, 500, 600, 700 | All headlines, body, and UI | Poppins (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 72px | 86.4px | normal | 600 | Homepage hero | `h1.vcex-heading` |
| `{type.display-lg}` | 48px | 66px | normal | 600 | Section headers | `span.vcex-heading` |
| `{type.display-md}` | 44px | 50.6px | normal | 600 | Secondary headers | `h2` |
| `{type.title-md}` | 22px | 30.25px | normal | 500 | Card headings | `h3.vcex-icon-box-heading` |
| `{type.body-lg}` | 18px | 25.2px | normal | 300 | Intro paragraphs | `p` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Standard body | `article#single-blocks` |
| `{type.button}` | 16px | 26.4px | normal | 500 | CTA labels | `.theme-button` |
| `{type.label-caps}` | 14px | 18.5px | 1.35px | 600 | Eyebrow labels | `span.vcex-heading-plain` |

### Principles
1. **Headlines are Semi-Bold.** Display sizes (44px+) consistently use weight 600.
2. **Body copy is Light.** Long-form reading text uses weight 300 or 400 to maintain a modern, airy feel.
3. **Uppercase for Eyebrows.** Section labels use 14px 600-weight uppercase with 1.35px tracking.

## Spacing
**Base unit:** 5px (derived)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 7 |
| `{space.sm}` | 10px | 6 |
| `{space.md}` | 20px | 15 |
| `{space.lg}` | 30px | 6 |
| `{space.xl}` | 40px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Default for cards, sections, and inputs | 98 occurrences |
| `{radius.pill}` | 35px | Primary buttons | Rounded Button component |
| `{radius.full}` | 50% | Icon containers | Surface component (circular) |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All cards and sections | `shadow: none` in evidence |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site actions (Request a Trial)
**Pages observed:** [https://guidepoint.com](https://guidepoint.com)
**Spec:** Background: `#ffcd00` | Text: `#000000` | Radius: `35px` | Padding: `9px 20px` | Font: `16px/500`
**States observed:** Default | Hover: `#ffeeaa` background | Focus: not captured

#### Sharp Surface
**Role:** Content grouping and section containers
**Pages observed:** [https://guidepoint.com](https://guidepoint.com)
**Spec:** Background: `#ffffff` | Border: `2px solid #000000` | Radius: `0px` | Padding: `40px`
**States observed:** Default

### Tier 2: Patterns
#### Icon Box
**Role:** Feature highlights (Transcript Library, Expert Network)
**Pages observed:** [https://guidepoint.com](https://guidepoint.com)
**Spec:** Typography: `22px/500` Header | `16px/400` Body | Padding: `15px 20px`
**States observed:** Default

#### Footer Navigation
**Role:** Global site map
**Pages observed:** [https://guidepoint.com](https://guidepoint.com)
**Spec:** Background: `#212322` | Text: `#ffffff` | Font: `Poppins`
**States observed:** Default

### Tier 3: Surface-specific
#### Circular Icon Plate
**Role:** Decorative icon backing
**Pages observed:** [https://guidepoint.com](https://guidepoint.com)
**Spec:** Background: `transparent` | Border: `3px solid #ebebeb` | Radius: `50%`
**States observed:** Default

#### Dark Hero Band
**Role:** High-impact product announcements
**Pages observed:** [https://guidepoint.com](https://guidepoint.com)
**Spec:** Background: `#000000` | Text: `#ffffff` | Padding: `80px 0` (estimated)
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px (approx) |
| Grid | 3-column feature grids |
| Section Gap | 40px - 80px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 3-column grids stack to 1-column |

## Imagery & decoration
- **Geometric Accents:** Large yellow (#ffcd00) circles used as background elements behind hero text.
- **Monochrome Photography:** Images (when used) are often desaturated or high-contrast to match the UI.
- **Avoidance:** No drop shadows, no gradients, and no soft-colored UI backgrounds.

## Do's
- Use `#ffcd00` for the final period in a major headline.
- Keep all card and container corners at `0px`.
- Use Poppins 600 for all display text.
- Maintain a minimum of `40px` padding in major content blocks.
- Use `#000000` for primary text on white backgrounds.

## Don'ts
- **Wrong:** Using a blue or green button for a primary action. **Right:** Use `#ffcd00`. **Reason:** Brand identity is strictly monochrome + yellow.
- **Wrong:** Applying a border-radius to a content card. **Right:** Use `0px`. **Reason:** The brand relies on sharp, modular geometry.
- **Wrong:** Using a drop shadow to create depth. **Right:** Use 1px or 2px solid borders. **Reason:** The system is intentionally flat and institutional.
- Do not use Poppins Bold (700) for body text; stick to 300 or 400.
- Do not mix the yellow accent with other saturated colors in the same UI component.

## Similar brands
- Goldman Sachs (Institutional monochrome)
- McKinsey & Company (High-contrast professional)
- Reuters (Data-heavy, grid-based)

## Quick start

```css
/* CSS Variables */
:root {
  --guidepoint-yellow: #ffcd00;
  --guidepoint-black: #000000;
  --guidepoint-charcoal: #212322;
  --guidepoint-white: #ffffff;
  --guidepoint-gray: #ebebeb;
  --font-main: 'Poppins', sans-serif;
}
```

```json
/* Style Dictionary */
{
  "color": {
    "brand": { "primary": { "value": "#ffcd00" } },
    "neutral": {
      "black": { "value": "#000000" },
      "white": { "value": "#ffffff" }
    }
  }
}
```

## Agent prompt examples
- "Generate a hero section with a 72px Poppins 600 headline in black, ending with a #ffcd00 period, on a white background."
- "Create a 3-column grid of cards with 0px border radius, 2px black borders, and 40px internal padding."
- "Design a primary CTA button using a 35px border radius, #ffcd00 background, and 16px Poppins 500 black text."

## Known gaps
- Hover states for secondary navigation items were not fully captured in the automated trace.
- Form validation states (error/success) are defined in tokens but were not observed in the provided page screenshots.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | [https://guidepoint.com](https://guidepoint.com) | Desktop 1440px | 2026-06-06 |
| Homepage Mobile | [https://guidepoint.com](https://guidepoint.com) | Mobile 390px | 2026-06-06 |