# Onsip Design System

> High-contrast utility meets corporate blue, anchored by bold Montserrat headlines and generous white-space pacing.

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

## TL;DR
Onsip utilizes a high-contrast monochrome foundation of pure white (#ffffff) and black (#000000), punctuated by a single vibrant primary blue (#3366ff). The typographic system is a dual-font strategy: Montserrat (700 weight) provides a geometric, authoritative voice for display and headings, while Roboto (300-500 weights) handles technical body copy and UI labels. Geometry is characterized by extreme pill-shaped radii (40px+) for primary actions and soft-cornered cards (15px), creating a friendly but professional SaaS aesthetic. Layouts rely on large vertical gaps (up to 120px) and a structured grid for feature comparisons.

## Signature DNA
1. **The Montserrat Display Header** (Bold Montserrat at 64px or 48px, specifically used for high-impact value propositions on the homepage and pricing pages).
2. **The Blue Pill CTA** (A #3366ff background with white text and a 40px radius, serving as the primary conversion driver across all analyzed views).
3. **High-Contrast Data Grids** (Alternating white and soft-gray surfaces used for complex feature lists, maintaining legibility in technical VOIP specifications).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and surface | 143 | 0.8 | computed_style |
| `{color.ink}` | `#000000` | Primary text and heavy borders | 697 | 0.8 | computed_style |
| `{color.ink.soft}` | `#2b2d35` | Secondary body text | 30 | 0.8 | computed_style |
| `{color.border}` | `#a4a5a7` | Form borders and subtle dividers | 12 | 0.8 | computed_style |
| `{color.surface.muted}` | `#edf3f8` | Secondary section backgrounds | 4 | 0.6 | computed_style |
| `{color.surface.neutral}` | `#f7f7f7` | Alternating row backgrounds | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#3366ff` | Primary buttons, links, and brand signals | 75 | 1.0 | brand_page |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Montserrat | 400, 700 | Display and Headings | Montserrat (Google) | SIL Open Font |
| Roboto | 300, 400, 500, 600, 700 | Body, UI, and Sub-headings | Roboto (Google) | Apache 2.0 |
| Arial | 400 | Fallback body | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display.xl}` | 64px | 76.8px | normal | 700 | Hero H1 | `h1.hero-banner__title` |
| `{text.display.lg}` | 48px | 72px | normal | 700 | Section H2 | `h2.h2.features__title` |
| `{text.display.md}` | 40px | 54px | normal | 600 | Feature heads | `div#hs_cos_wrapper_module` |
| `{text.heading.lg}` | 36px | 50.4px | normal | 700 | Logo grid titles | `h2.partner-logos__title` |
| `{text.heading.sm}` | 24px | 33.6px | normal | 700 | Article titles | `h3.articles-list__item_title` |
| `{text.body.lg}` | 18px | 26px | normal | 400 | Intro paragraphs | `p` |
| `{text.body.md}` | 16px | 26px | normal | 400 | Standard body | `div.header-container-wrapper` |
| `{text.body.sm}` | 14px | 24px | normal | 300 | Footer/Captions | `div.footer-container-wrapper` |

### Principles
1. **Montserrat is for Impact.** Use Montserrat only for display sizes (24px+) to signal brand authority.
2. **Roboto for Utility.** Use Roboto for all interactive elements, forms, and long-form prose.
3. **Weight Contrast.** Pair 300 weight Roboto sub-heads with 700 weight Montserrat headers to create visual hierarchy.

## Spacing
**Base unit:** 4px (approximated from common 8, 12, 16, 20 values)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 43 |
| `{space.sm}` | 12px | 33 |
| `{space.md}` | 16px | 56 |
| `{space.lg}` | 20px | 67 |
| `{space.xl}` | 40px | 27 |
| `{space.section}` | 120px | 2 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Default surfaces | Surface component |
| `{radius.sm}` | 8px | Form inputs | Text Input component |
| `{radius.md}` | 15px | Pricing cards | Card component |
| `{radius.pill}` | 40px | Primary buttons | Rounded Button component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.nav}` | `rgba(0, 0, 0, 0.5) 0px 2px 10px 0px` | Sticky navigation | Navigation component |
| `{shadow.inset}` | `rgb(233, 233, 233) 0px -1px 0px 0px inset` | Section dividers | Surface component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#3366ff` / Text: `#ffffff` / Radius: `40px` / Padding: `19px` / Typography: `Roboto 500 (18px)`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Text Input
**Role:** Lead generation and contact forms
**Pages observed:** Homepage, Pricing
**Spec:** Background: `transparent` / Text: `#2b2d35` / Border: `1px solid #a4a5a7` / Radius: `8px` / Padding: `15px`
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Navigation
**Role:** Global site header
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#ffffff` / Text: `#000000` / Shadow: `rgba(0, 0, 0, 0.5) 0px 2px 10px 0px` / Padding: `25px`
**States observed:** Default

#### Card
**Role:** Pricing tiers and feature highlights
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` / Radius: `15px` / Padding: `20px` / Typography: `Roboto 400 (18px)`
**States observed:** Default

### Tier 3: Surface-specific

#### Footer
**Role:** Global site footer
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#ffffff` / Text: `#000000` / Border-top: `1px solid #000000` / Typography: `Roboto 400 (14px)`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Section Padding | 120px (Top) |
| Content Max-Width | ~1200px |
| Grid Gap | 20px - 35px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation converts to hamburger menu; Hero H1 scales down; Card grids stack vertically. |

## Do's
- Use `#3366ff` for all primary action buttons.
- Apply `Montserrat` at `700` weight for any text over 24px.
- Use `15px` border-radius for content containers (cards).
- Maintain `120px` top padding for major page sections.
- Use `#f7f7f7` for alternating background stripes in data tables.

## Don'ts
- Do not use Montserrat for body copy or form labels.
- Do not use `#3366ff` for secondary or tertiary actions; use outlines or text links.
- Do not apply shadows to cards; keep them flat with `#ffffff` backgrounds.
- Do not use sharp corners (0px) for buttons; always use `{radius.pill}`.

## Similar brands
- RingCentral
- Dialpad
- Zoom
- 8x8

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #3366ff;
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --radius-pill: 40px;
  --radius-card: 15px;
}
```

## Agent prompt examples
- "Create a primary button using #3366ff background, white Roboto 500 text, and a 40px border radius."
- "Design a feature section header using Montserrat Bold at 48px with #000000 color."
- "Build a pricing card with a #ffffff background, 15px border radius, and 20px internal padding."

## Known gaps
- Hover and Active states for buttons were not captured in the static analysis.
- Semantic colors for Success/Error messages were not present on the analyzed marketing pages.
- Specific mobile breakpoint values (e.g., 768px) were not explicitly declared in tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://onsip.com | 1440px | 2026-06-06 |
| Pricing | https://onsip.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://onsip.com | 390px | 2026-06-06 |