# Telesage Design System

> A clinical, high-contrast interface pairing deep navy foundations with a vibrant primary blue to anchor behavioral health diagnostics.

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

## TL;DR
Telesage utilizes a structured, Bootstrap-derived aesthetic that emphasizes legibility and professional trust. The palette is dominated by a deep navy `#161c2d` for text and `#1b2a4e` for dark section backgrounds, contrasted against a clean white `#ffffff` canvas. A bright primary blue `#335eea` serves as the sole interactive driver for CTAs and links. Typography relies exclusively on **HKGroteskPro**, a modern sans-serif that scales from massive 61px display headings to functional 17px body text. Layouts are strictly sectioned with 96px vertical rhythms and 6px border radii on interactive elements.

## Signature DNA
1. **The Navy Anchor** (Deep navy `#1b2a4e` surfaces provide a professional, institutional weight to partner sections and footers, contrasting with the light primary canvas. Observed on Homepage and About pages.)
2. **Primary Blue CTAs** (The use of `#335eea` for all high-intent actions, often paired with a subtle 24px soft shadow `rgba(22, 28, 45, 0.1)`, creates a clear interactive hierarchy. Observed across all analyzed pages.)
3. **HKGrotesk Display** (Massive, tight-tracked display type at 61px with -1.22px letter spacing defines the hero sections, signaling a modern approach to clinical software. Observed on Homepage hero.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--bs-body-bg` | `#ffffff` | Page background, primary surface | 42 | 1 | `css_variable` |
| `--bs-black` | `#161c2d` | Primary text, headings, high-contrast borders | 107 | 1 | `css_variable` |
| `--bs-border-color` | `#f1f4f8` | Subtle section backgrounds, card borders | 12 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--bs-primary` | `#335eea` | Primary CTA background, links, active states | 45 | 1 | `css_variable` |
| `--bs-dark` | `#1b2a4e` | Dark section backgrounds (Partner/Footer bands) | 23 | 1 | `css_variable` |
| `--bs-secondary` | `#506690` | Secondary body text, descriptive labels | 28 | 1 | `computed_style` |
| `--bs-success` | `#42ba96` | Positive indicators, success badges | 20 | 1 | `css_variable` |
| `--bs-primary-desat`| `#6c8aec` | De-emphasized buttons, secondary accents | 9 | 1 | `css_variable` |
| `--bs-gray-400` | `#c6d3e6` | Decorative text (decorative_only) | 2 | 1 | `css_variable` |
| `--bs-info` | `#7c69ef` | Pricing highlights (decorative_only) | 1 | 1 | `css_variable` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--bs-success` | `#42ba96` | Confirmation and positive status |
| `--bs-red` | `#dc3545` | Error states (declared) |
| `--bs-yellow` | `#ffc107` | Warning states (declared) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| HKGroteskPro | 400, 600 | All UI, Headings, Body | HK Grotesk (Hanken Design Co.) | Proprietary |
| Feather | 600 | Iconography | Feather Icons (Open Source) | MIT |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-mega` | 61px | 73.2px | -1.22px | 600 | Hero display | `div.display-2.fw-bold` |
| `display-lg` | 48px | 57.6px | -0.96px | 400 | Page titles | `h1.display-3` |
| `display-md` | 37px | 48.1px | -0.37px | 600 | Section headers | `h1.display-5.fw-bold` |
| `heading-lg` | 31px | 41.85px | -0.31px | 600 | Sub-section titles | `h2.fw-bold` |
| `nav-brand` | 24px | 38.4px | normal | 600 | Logo text | `a.navbar-brand` |
| `heading-sm` | 21px | 29.4px | -0.21px | 400 | Small headers | `h3` |
| `subheading` | 19px | 27.55px | -0.19px | 600 | Feature titles | `h4.fw-bold` |
| `body-lg` | 17px | 27.2px | normal | 400 | Navigation, primary text | `nav.navbar` |
| `body-sm` | 15px | 24px | normal | 400 | Footer, secondary text | `p.mb-3` |
| `badge` | 13px | 12.75px | normal | 600 | UI labels | `div.badge` |

### Principles
1. **Tight Display Tracking:** All headings above 30px use negative letter spacing (approx -2% of font size) to maintain visual density.
2. **Line Height Consistency:** Body text maintains a 1.6x line height (27.2px on 17px base) for clinical legibility.
3. **Weight Pairing:** System uses 600 (Bold) for emphasis and 400 (Regular) for all narrative content; no intermediate weights are utilized.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `space-xs` | 4px | 23 |
| `space-sm` | 8px | 63 |
| `space-md` | 16px | 40 |
| `space-lg` | 24px | 23 |
| `space-xl` | 48px | 14 |
| `space-section`| 96px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Section containers, Navbars | `radius: 0px` |
| `radius-sm` | 6px | Buttons, Inputs, Feature Cards | `radius: 6px` |
| `radius-pill` | 800px | Badges, Secondary buttons | `radius: 800px` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `flat` | none | Default surfaces | `shadow: none` |
| `elevated` | `rgba(22, 28, 45, 0.1) 0px 8px 24px 0px` | Primary buttons, Hovered cards | `shadow: ... 8px 24px` |
| `deep` | `rgba(22, 28, 45, 0.05) 0px 24px 64px 0px` | Floating UI elements | `shadow: ... 24px 64px` |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global site header
**Pages observed:** All
**Spec:** Background `#ffffff` | Text `#161c2d` | Radius `0px` | Padding `20px 0px` | Typography `17px/600`
**States observed:** Default | Hover: captured (link color shifts to `#335eea`)

#### Rounded Button
**Role:** Primary call to action
**Pages observed:** All
**Spec:** Background `#335eea` | Text `#ffffff` | Radius `6px` | Padding `9px 16px` | Shadow `rgba(22, 28, 45, 0.1) 0px 8px 24px 0px`
**States observed:** Default | Active: captured

### Tier 2: Patterns

#### Surface (Dark)
**Role:** High-contrast content section
**Pages observed:** Homepage, About
**Spec:** Background `#1b2a4e` | Text `#ffffff` (on dark) | Radius `0px` | Padding `96px 0px`
**States observed:** Default

#### Surface (Light)
**Role:** Secondary content section
**Pages observed:** Homepage, Pricing
**Spec:** Background `#f1f4f8` | Text `#161c2d` | Radius `0px` | Padding `96px 0px`
**States observed:** Default

### Tier 3: Surface-specific

#### Badge / Small Card
**Role:** Product categorization or status
**Pages observed:** Homepage, Pricing
**Spec:** Background `rgba(66, 186, 150, 0.1)` | Text `#42ba96` | Border `#42ba96` | Radius `800px` | Padding `4px`
**States observed:** Default

#### Text Input
**Role:** Lead generation forms
**Pages observed:** Homepage
**Spec:** Background `#ffffff` | Border `#f1f4f8` (1px) | Radius `6px` | Padding `13px 20px`
**States observed:** Default | Focus: captured

## Layout
| Property | Value |
|---|---|
| Max Width | 1140px (standard container) |
| Section Gap | 96px |
| Column Grid | 12-column Bootstrap |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding-x reduced to 16px; display type scales down. |
| Desktop | 1440px | 96px vertical section padding; multi-column feature grids. |

## Imagery & decoration
Telesage uses atmospheric, soft-focus photography in hero sections (e.g., sunset landscapes) to provide emotional warmth. Product logos (NetDISC, SAGE-SR, NetSCID) introduce the only significant color variety (orange, green, light blue) into the otherwise monochrome navy/blue system.

## Do's
- Use `#335eea` for all primary interactive elements.
- Apply `-1.22px` letter spacing to display headings at 61px.
- Maintain `96px` vertical padding between major content sections.
- Use `6px` border radius for standard UI components like buttons and inputs.
- Set body text to `17px` for optimal readability.

## Don'ts
- **Wrong:** Using `#335eea` for section backgrounds. **Right:** Use `#1b2a4e` or `#f1f4f8`. **Reason:** The primary blue is reserved for interaction, not surface area.
- **Wrong:** Applying shadows to every card. **Right:** Use shadows only for interactive elevation (buttons/hover states).
- **Wrong:** Mixing font families. **Right:** Use HKGroteskPro for all text content.
- Do not use sharp `0px` corners on buttons; always use the `6px` radius.
- Do not use the success green `#42ba96` for primary navigation or CTAs.

## Similar brands
- Zendesk (Garden system)
- Intercom
- Stripe (foundational structure)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #335eea;
  --color-navy: #1b2a4e;
  --color-text: #161c2d;
  --color-bg-soft: #f1f4f8;
  --radius-standard: 6px;
  --shadow-elevated: 0 8px 24px rgba(22, 28, 45, 0.1);
}
```

## Agent prompt examples
- "Generate a hero section with a 61px HKGroteskPro bold heading in #161c2d and a primary button using #335eea with a 6px border radius."
- "Create a pricing card on a #ffffff background with a 1px #f1f4f8 border and a success badge in #42ba96."
- "Build a footer section using a #1b2a4e background and #ffffff text, with 96px top and bottom padding."

## Known gaps
- Hover states for secondary buttons were not explicitly captured in the evidence.
- Error state validation colors (e.g., for form inputs) are declared in tokens but not observed in screenshots.
- Mobile-specific font size transitions for display type were not fully mapped.

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