# Triparound Design System

> Deep navy and vibrant cobalt foundations anchored by high-contrast white surfaces and soft, oversized pill geometry.

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

## TL;DR
Triparound utilizes a professional, travel-tech aesthetic defined by a "monochrome-plus-blue" palette. The system relies on a deep navy `#001849` for text and footer backgrounds, contrasted against a bright primary blue `#004adb` for interactive elements. A secondary accent of coral `#ff7873` is used sparingly for high-visibility badges. Typography is exclusively **Poppins**, leaning on weight 600 for headings and 400 for body. Layouts are characterized by generous internal card padding and large border radii (30px to 50px), creating a soft, approachable container system for complex data.

## Signature DNA
1. **The Deep Footer Anchor** (A massive `#001849` navy block that terminates every page, housing white text and brand marks for a high-contrast finish.)
2. **Soft-Shell Containers** (Cards and inputs use a consistent 30px-35px border radius, often paired with subtle `rgba(0, 0, 0, 0.1)` shadows to lift content off the white canvas.)
3. **The Cobalt Pulse** (Primary actions and links use `#004adb`, providing a high-voltage blue signal that remains legible against white backgrounds.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, card surface, button text | 83 | 1.0 | `--wp--preset--color--white` |
| `{color.navy}` | `#001849` | Primary text, footer background | 73 | 0.8 | Computed Style |
| `{color.ink}` | `#4f4e4e` | Secondary body text, button text | 171 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | Input text, deep shadows | 5 | 1.0 | `--wp--preset--color--black` |
| `{color.smoke}` | `#f3f3f3` | Secondary section backgrounds | 5 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#004adb` | Primary buttons, text links, active states | 23 | 0.8 | Computed Style |
| `{color.coral}` | `#ff7873` | Pricing badges, decorative accents | 22 | 0.8 | Computed Style |
| `{color.border}` | `#c4cdd7` | Input borders, decorative dividers | 6 | 0.6 | Computed Style |
| `{color.mist}` | `#e7e8e8` | Subtle card borders | 3 | 0.6 | Computed Style |

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

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 48px | 52.8px | normal | 600 | Hero counters | `span.counter_value` |
| `{type.h2}` | 36px | 47.9px | normal | 700 | Section headings | `h2` |
| `{type.h3}` | 24px | 28.8px | normal | 600 | Testimonial dates | `div.testimonials_date` |
| `{type.h3-alt}` | 22px | 30.8px | normal | 600 | Info box titles | `h3.infobox_title` |
| `{type.body-lg}` | 18px | 32px | normal | 400 | List items | `li` |
| `{type.body}` | 16px | 30px | normal | 400 | Paragraphs | `p` |
| `{type.button}` | 16px | 32px | 0.16px | 600 | Primary CTA | `a.wgl_button_link` |
| `{type.caption}` | 14px | 24px | normal | 400 | Pricing footers | `div.pricing_footer` |

### Principles
1. **Heading Weight Consistency:** Primary section headers (`h2`) always use weight 700 for maximum authority.
2. **Body Legibility:** Standard paragraph text uses a generous 30px line height (1.875x) to ensure readability in dense feature descriptions.
3. **Button Tracking:** Interactive labels use a slight 0.16px letter spacing to distinguish them from static body text.

## Spacing
**Base unit:** 4px (Inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 7 |
| `{space.sm}` | 16px | 117 |
| `{space.md}` | 20px | 29 |
| `{space.lg}` | 32px | 17 |
| `{space.xl}` | 40px | 4 |
| `{space.xxl}` | 80px | 13 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Layout containers | 234 occurrences |
| `{radius.md}` | 25px | Compact cards | Pricing cards |
| `{radius.lg}` | 30px | Standard cards, surfaces | Testimonial cards |
| `{radius.xl}` | 35px | Large feature cards | About page cards |
| `{radius.pill}` | 65px | Primary buttons | CTA buttons |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.soft}` | `0 15px 25px rgba(0, 0, 0, 0.1)` | Standard feature cards | Homepage cards |
| `{shadow.glow}` | `0 9px 30px rgba(0, 74, 219, 0.4)` | Primary floating buttons | Cobalt action buttons |
| `{shadow.deep}` | `0 15px 38px rgba(0, 0, 0, 0.1)` | Elevated hover states | Homepage feature cards |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (Book a Demo, Get a Quote)
**Pages observed:** https://triparound.com, https://triparound.com/about
**Spec:** Background `#004adb` / Text `#ffffff` / Radius `65px` / Padding `10px 24px` / Typography `{type.button}`
**States observed:** Default | Hover: captured

#### Text Input
**Role:** Lead capture and newsletter forms
**Pages observed:** https://triparound.com/about
**Spec:** Background `transparent` / Border `1px solid #c4cdd7` / Radius `32px` / Padding `10px 20px`
**States observed:** Default | Focus: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or testimonials
**Pages observed:** https://triparound.com
**Spec:** Background `#ffffff` / Text `#4f4e4e` / Radius `30px` / Padding `32px 30px` / Shadow `{shadow.soft}`
**States observed:** Default | Hover: `{shadow.deep}`

#### Pricing Badge
**Role:** Highlighting plan tiers
**Pages observed:** https://triparound.com/pricing
**Spec:** Background `#ff7873` / Text `#ffffff` / Radius `30px` / Padding `5px 15px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Footer Block
**Role:** Global site termination
**Pages observed:** All pages
**Spec:** Background `#001849` / Text `#ffffff` / Radius `0px` / Padding `80px 0px`
**States observed:** Default: captured

#### Testimonial Card
**Role:** Social proof display
**Pages observed:** https://triparound.com
**Spec:** Background `#ffffff` / Radius `30px` / Shadow `{shadow.soft}` / Border `0px`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Gap | 80px |
| Card Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduced to 20px; stacks 3-column grids to 1-column. |

## Imagery & decoration
Triparound uses high-fidelity software screenshots with soft shadows to demonstrate product value. Decorative elements include subtle blue gradients and icon-led infoboxes. The brand avoids harsh lines, preferring rounded corners even for image masks.

## Do's
- Use `#004adb` for all primary user actions.
- Apply a minimum radius of `30px` to all content cards.
- Maintain a line height of at least `1.5` for all body copy.
- Use Poppins weight 700 for section headers to maintain hierarchy.
- Ensure all cards sit on a `#ffffff` background when using `{shadow.soft}`.

## Don'ts
- **Wrong:** Using `#001849` for buttons. **Right:** Use `#004adb`. **Reason:** Navy is reserved for text and structural backgrounds, not interaction.
- **Wrong:** Using sharp corners (0px) for UI components. **Right:** Use `30px` or `65px`. **Reason:** The brand identity is built on soft, rounded geometry.
- **Wrong:** Applying coral `#ff7873` to body text. **Right:** Use it only for badges or small accents.
- **Wrong:** Mixing font families. **Right:** Use Poppins for all roles.

## Similar brands
- Airbnb (Typography and whitespace)
- TravelPerk (Color palette and industry vertical)
- HubSpot (SaaS card patterns)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #004adb;
  --color-navy: #001849;
  --color-coral: #ff7873;
  --color-ink: #4f4e4e;
  --radius-card: 30px;
  --radius-pill: 65px;
  --shadow-soft: 0 15px 25px rgba(0, 0, 0, 0.1);
  --font-main: 'Poppins', sans-serif;
}
```

## Agent prompt examples
- "Generate a feature section with a three-column grid of cards using a 30px border radius, white background, and a soft 10% black shadow. Use Poppins 600 for the titles in #001849."
- "Create a primary CTA button with a 65px border radius, #004adb background, and white Poppins 600 text with 0.16px letter spacing."
- "Design a footer using a #001849 background with white text and 80px top/bottom padding."

## Known gaps
- Hover states for secondary buttons were not explicitly captured in the computed styles.
- The exact transition timing for card hover shadows was not recorded.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://triparound.com | 1440px | 2026-06-06 |
| Pricing | https://triparound.com/pricing | 1440px | 2026-06-06 |
| About | https://triparound.com/about | 1440px | 2026-06-06 |