# Thehotelsnetwork Design System

> High-contrast hospitality tech anchored by deep teal foundations, vibrant coral actions, and a refined serif display hierarchy.

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

## TL;DR
Thehotelsnetwork utilizes a sophisticated "monochrome-plus" palette where a deep teal base (#043f48) provides a professional foundation for hospitality data. Brand energy is injected via a dual-accent system: a bright cyan (#00cccc) for technical highlights and a high-visibility coral (#f85f73) reserved for primary conversions and product-specific branding. Typography is a deliberate pairing of the classical Marselis Serif for authoritative headlines and Avenir LT for functional UI and body text. The system relies on generous vertical spacing (up to 80px) and a mix of sharp and pill-shaped geometry to distinguish between content containers and interactive elements.

## Signature DNA
1. **The Coral Conversion** (#f85f73 is used exclusively for high-intent primary actions like "Request a demo" and "BenchDirect™" branding, creating a singular path for the user's eye across all pages.)
2. **Serif Authority** (Marselis Serif is used for all major display headings, often at large scales like 76px or 48px, grounding the brand in a more established, editorial feel than typical SaaS.)
3. **Deep Teal Grounding** (The use of #043f48 for footers and major section backgrounds creates a "dark mode" anchor that contrasts against the primary white canvas.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background, card surfaces | 348 | 1 | Computed Style |
| `{color.ink}` | `#303030` | Primary body text | 198 | 0.8 | Computed Style |
| `{color.border}` | `#e4e4e4` | Default hairline dividers and card outlines | 18 | 0.8 | Computed Style |
| `{color.ink-deep}` | `#000000` | High-contrast emphasis text | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#f85f73` | Primary CTA background, BenchDirect™ brand color | 27 | 1 | Brand Page |
| `{color.secondary}` | `#00cccc` | Technical highlights, secondary card borders, icons | 87 | 1 | Brand Page |
| `{color.surface-dark}` | `#043f48` | Footer background, dark section surfaces | 54 | 0.8 | Computed Style |
| `{color.teal-muted}` | `#0ca3af` | Secondary text on light backgrounds | 45 | 0.8 | Computed Style |
| `{color.teal-strong}` | `#01747e` | Form labels, active text links | 21 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| Marselis Serif | 400, 700 | Display, Headings | PT Serif | Proprietary |
| Avenir LT | 400, 500 | Body, UI, Navigation | Montserrat | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-hero}` | 76px | 80px | -0.95px | 700 | Main Hero H1 | `h1.mb-4.heading1` |
| `{type.display-lg}` | 60px | 90px | normal | 700 | Large feature stats | `span.font-bold.font-display` |
| `{type.display-md}` | 48px | 56px | -0.6px | 700 | Section headers | `h2.mb-6.text-center` |
| `{type.heading-md}` | 28px | 42px | normal | 400 | Sub-section titles | `h3.flex-1.px-6` |
| `{type.heading-sm}` | 24px | 32px | normal | 400 | Feature labels | `a.flex.items-center` |
| `{type.body-lg}` | 20px | 32px | normal | 400 | Lead paragraphs | `div.mb-8.body-base` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default body text | `header.fixed.top-0` |
| `{type.body-sm}` | 14px | 21px | normal | 400 | Footer links, small text | `div.flex.justify-center` |

### Principles
1. **Serif for Impact**: Marselis Serif is strictly for headings and data visualization numbers; never used for long-form body text.
2. **Tight Display Tracking**: Large display sizes (48px+) utilize negative letter-spacing (-0.6px to -0.95px) to maintain visual tension.
3. **Functional Sans**: Avenir LT handles all interactive states, navigation, and form inputs for maximum legibility.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xxs}` | 4px | 45 |
| `{space.xs}` | 8px | 132 |
| `{space.sm}` | 12px | 48 |
| `{space.md}` | 16px | 63 |
| `{space.lg}` | 24px | 84 |
| `{space.xl}` | 48px | 9 |
| `{space.section}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, footers | 546 occurrences |
| `{radius.sm}` | 2px | Content cards | Card component |
| `{radius.md}` | 6px | Primary buttons, feature cards | Rounded Button component |
| `{radius.lg}` | 8px | Form inputs | Text Input component |
| `{radius.pill}` | 9999px | Badges, secondary buttons | Card (pill) component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.5) 0px 2px 8px 0px` | Floating content cards | Observed on 15 elements |
| `{shadow.nav}` | `rgb(128, 128, 128) 0px 0px 5px 0px` | Sticky navigation bar | Observed on 3 elements |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global site header
**Pages observed:** All
**Spec:** Background `#ffffff` / Text `#303030` / Radius `0px` / Typography `16px Avenir LT`
**States observed:** Default | Active: captured

#### Text Input
**Role:** Lead capture and search
**Pages observed:** All
**Spec:** Background `#ffffff` / Text `#01747e` / Border `1px #e4e4e4` / Radius `8px` / Padding `8px`
**States observed:** Default: captured | Focus: not captured

### Tier 2: Patterns

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** All
**Spec:** Background `#f85f73` / Text `#ffffff` / Radius `6px` / Padding `12px 24px` / Typography `16px Avenir LT`
**States observed:** Default | Active: captured

#### Card (Pill)
**Role:** Feature badges and secondary links
**Pages observed:** All
**Spec:** Background `transparent` / Text `#00cccc` / Border `1px #00cccc` / Radius `9999px` / Padding `8px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Dark Surface Section
**Role:** Footer and high-impact content bands
**Pages observed:** All
**Spec:** Background `#043f48` / Text `#ffffff` / Radius `0px` / Padding `80px 0px`
**States observed:** Default: captured

#### Feature Card (Cyan)
**Role:** Product highlight cards
**Pages observed:** All
**Spec:** Background `#00cccc` / Text `#ffffff` / Radius `6px` / Padding `12px 24px`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding | 80px (vertical) |
| Grid Gutter | 24px |

## Do's
- Use `#f85f73` exclusively for the primary "Request a demo" conversion path.
- Apply `Marselis Serif` at weight 700 for any heading above 32px.
- Use `{radius.pill}` for secondary badges to distinguish them from primary `{radius.md}` buttons.
- Anchor pages with a `#043f48` footer to provide visual weight.
- Maintain `80px` vertical spacing between major content sections.

## Don'ts
- **Wrong:** Using `#00cccc` for primary conversion buttons. **Right:** Use `#f85f73`. **Reason:** Coral is the designated high-intent action color.
- **Wrong:** Setting long-form body text in `Marselis Serif`. **Right:** Use `Avenir LT`. **Reason:** Sans-serif is the standard for legibility in this system.
- **Wrong:** Applying shadows to every card. **Right:** Only use `{shadow.card}` for floating content cards on white backgrounds.
- Do not use `#f85f73` for text links; keep links in `{color.teal-strong}` (#01747e).

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #f85f73;
  --color-secondary: #00cccc;
  --color-surface-dark: #043f48;
  --color-ink: #303030;
  --font-display: 'Marselis Serif', serif;
  --font-body: 'Avenir LT', sans-serif;
  --radius-button: 6px;
  --shadow-card: 0px 2px 8px 0px rgba(0, 0, 0, 0.5);
}
```

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://thehotelsnetwork.com | Desktop 1440 | 2026-06-06 |
| Pricing | https://thehotelsnetwork.com/pricing | Desktop 1440 | 2026-06-06 |
| About | https://thehotelsnetwork.com/about | Mobile 390 | 2026-06-06 |