# Hopin Design System

> High-contrast corporate utility meets soft geometric warmth, anchored by RingCentral Blue and rounded rectangular containers.

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

## TL;DR
The Hopin design system (now transitioning to RingCentral Events) is a high-clarity, monochrome-leaning system that uses **RingCentral Blue** (#007db8) as its primary functional anchor. The interface is characterized by a clean white canvas (#ffffff) and deep charcoal text (#0e0f12), creating a professional, high-contrast environment. Visual interest is introduced through large-scale geometric "pill" containers with generous 16px to 30px radii and soft peach-to-white gradients in testimonial sections. Typography is exclusively **Matter**, utilizing a semi-bold weight (600) for display headers to maintain a friendly but authoritative corporate presence.

## Signature DNA
1. **The Blue Anchor** (RingCentral Blue #007db8 is used sparingly but decisively for primary CTAs and key surface backgrounds to signal the brand transition.)
2. **Soft-Shell Geometry** (Cards and panels avoid sharp corners, favoring a 16px standard radius for content and up to 50px for interactive elements, creating a "bubbly" corporate aesthetic.)
3. **Matter Display** (The use of Matter at 72px with tight -1.44px letter-spacing creates a dense, modern typographic header style that defines the page hierarchy.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.canvas}` | `#ffffff` | Page background, card surfaces | 62 | 1 | Computed style |
| `{colors.ink}` | `#0e0f12` | Primary body and heading text | 36 | 1 | `--dark` |
| `{colors.ink-pure}` | `#000000` | Borders, secondary button backgrounds | 56 | 0.8 | Computed style |
| `{colors.surface-muted}` | `#f4f3f0` | Secondary button backgrounds, slide controls | 4 | 1 | Brand page |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#007db8` | Primary CTA background, brand surfaces | 4 | 1 | `--rc-blue` |
| `{colors.border-warm}` | `#ead8cf` | Decorative card borders | 8 | 0.6 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Matter | 400, 500, 600, 700 | All headings, body, and UI | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display-hero}` | 72px | 75.6px | -1.44px | 600 | Homepage hero h1 | `h1.hero__title` |
| `{text.display-lg}` | 64px | 82.56px | normal | 500 | Large CTA links | `a#cta-talk-to-sales` |
| `{text.display-md}` | 48px | 54px | normal | 600 | Section titles | `h2.multi-section-title` |
| `{text.heading-sm}` | 26px | 34.65px | normal | 500 | Tab navigation | `a.multi-tabs__item` |
| `{text.body-lg}` | 20px | 34.2px | normal | 500 | Hero subtitles | `p.multi-hero__subtitle` |
| `{text.subheading}` | 18px | 23.94px | normal | 600 | Feature subheads | `h3.potential-subheading` |
| `{text.body}` | 16px | 27.36px | normal | 400 | Default body text | `div.header.w-nav` |
| `{text.button}` | 15px | 15px | normal | 500 | Primary Nav CTA | `a#navRequestDemo` |
| `{text.caption}` | 14px | 23.94px | normal | 400 | Footer links | `a.footer-dark__link` |

### Principles
- **Tight Display Spacing:** Large hero text (72px) uses negative tracking (-1.44px) to increase visual density.
- **Matter-Only System:** No secondary font is used; hierarchy is strictly weight and size-driven.
- **High Contrast Ratios:** All primary text (#0e0f12) on white (#ffffff) maintains maximum legibility.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 8 |
| `{space.sm}` | 12px | 6 |
| `{space.md}` | 16px | 6 |
| `{space.lg}` | 24px | 32 |
| `{space.xl}` | 40px | 8 |
| `{space.section}` | 120px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Footer, main sections | `0px` |
| `{radius.card}` | 16px | Content cards | `16px` |
| `{radius.pill}` | 30px | Primary buttons, feature cards | `30px` |
| `{radius.full}` | 50px | Navigation controls, circular buttons | `50%` |

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

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Talk to Sales)
**Pages observed:** 2
**Spec:** Background `{colors.primary}` (#007db8) / Text `{colors.canvas}` (#ffffff) / Radius 30px / Padding 12px 24px / Typography `{text.button}`
**States observed:** Default | Hover: captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Secondary Button
**Role:** Alternative actions (Visit RingCentral)
**Pages observed:** 2
**Spec:** Background `{colors.canvas}` (#ffffff) / Text `{colors.ink}` (#0e0f12) / Border 1px `{colors.ink-pure}` (#000000) / Radius 30px / Padding 12px 24px
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying platform capabilities
**Pages observed:** 2
**Spec:** Background `{colors.canvas}` (#ffffff) / Text `{colors.ink}` (#0e0f12) / Radius 16px / Padding 24px / Typography `{text.body}`
**States observed:** Default

#### Testimonial Card
**Role:** Customer social proof
**Pages observed:** 2
**Spec:** Background `{colors.canvas}` (#ffffff) / Border 1px `{colors.border-warm}` (#ead8cf) / Radius 16px / Padding 24px / Typography `{text.heading-sm}`
**States observed:** Default

### Tier 3: Surface-specific

#### Top Navigation
**Role:** Global site header
**Pages observed:** 2
**Spec:** Background `{colors.canvas}` (#ffffff) / Text `{colors.ink}` (#0e0f12) / Height 64px (approx) / Typography `{text.body}`
**States observed:** Default

#### Footer
**Role:** Global site footer
**Pages observed:** 2
**Spec:** Background `{colors.canvas}` (#ffffff) / Text `{colors.ink-pure}` (#000000) / Border-top 1px `rgba(234, 234, 234, 0.36)` / Padding 36px 0px 24px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max content width | 1200px |
| Section Padding (Vertical) | 120px |
| Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Hero font size reduces; padding narrows to 16px; buttons stack. |
| Desktop | 1440px | 120px vertical section spacing; multi-column card layouts. |

## Imagery & decoration
Hopin uses high-fidelity product screenshots with 16px rounded corners, often layered or tilted to suggest depth. Testimonial sections utilize soft radial gradients (Peach to White) to break the monochrome grid.

## Do's
- Use **Matter** for all text elements to maintain brand consistency.
- Apply **16px border-radius** to all content-containing cards.
- Use **RingCentral Blue (#007db8)** for the primary action on any given page.
- Maintain **120px vertical spacing** between major content sections.
- Ensure all body text is set to **#0e0f12** for accessibility.

## Don'ts
- **Don't** use sharp corners (0px radius) for interactive or content elements.
- **Don't** use drop shadows; the system relies on borders and background shifts for depth.
- **Don't** use sub-brand colors like Indian Red (#ff4d67) or RC Orange (#ff7a00) for primary global buttons; these are reserved for specific product signals.
- **Don't** use RingCentral Blue for body text; it is a surface and action color only.

## Quick start

### CSS Custom Properties
```css
:root {
  --rc-blue: #007db8;
  --dark: #0e0f12;
  --white: #ffffff;
  --border-warm: #ead8cf;
  --radius-card: 16px;
  --radius-pill: 30px;
  --font-main: 'Matter', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #007db8;
  --color-ink: #0e0f12;
  --font-matter: "Matter";
  --radius-card: 16px;
  --radius-pill: 30px;
  --spacing-section: 120px;
}
```

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the automated crawl.
- Mobile-specific typography scale for mid-range headings (h3-h4) was not explicitly sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://hopin.com | 1440x900 | 2026-06-06 |
| About Page | https://hopin.com/about | 1440x900 | 2026-06-06 |
| Mobile Home | https://hopin.com | 390x844 | 2026-06-06 |