# Hallmarkhcs Design System

> Deep navy and clinical white surfaces anchored by a high-contrast sans-serif and vibrant lime-green functional accents.

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

## TL;DR
Hallmarkhcs utilizes a corporate healthcare aesthetic defined by a dominant primary navy (`#03394c`) and a clean white foundation (`#ffffff`). The system is characterized by its use of **seravek-web** for all typographic hierarchy, ranging from massive 72px display headers to 18px body copy. Functional energy is introduced through a bright lime-green (`#77dc244`) used for primary calls-to-action and iconography, while secondary accents like purple (`#683372`) and light blue (`#daf1f7`) differentiate service pillars. Layouts rely on generous vertical padding (54px) and a mix of sharp edges and soft, large-radius panels (25px-40px).

## Signature DNA
1. **The Navy Anchor** (The color `#03394c` acts as the primary brand weight, appearing in headers, footers, and as a high-contrast background for feature cards across all pages.)
2. **Seravek Display Hierarchy** (The use of **seravek-web** at weight 700 for display and 600 for headings creates a structured, authoritative medical-tech feel, specifically at the 72px and 40px scales.)
3. **High-Radius Panels** (Feature sections and "Result" badges utilize significant border radii of 25px to 40px, softening the otherwise rigid corporate grid.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#03394c` | Primary text, footer background, primary button text | 79 | 0.8 | Computed Style |
| `{color.white}` | `#ffffff` | Page background, card surfaces, button text | 77 | 1.0 | CSS Variable |
| `{color.slate}` | `#556064` | Default body text, secondary descriptions | 135 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | Deep shadows, rare surface backgrounds | 1 | 1.0 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.lime}` | `#77dc244` | Primary CTA background, success borders, icons | 13 | 0.8 | Computed Style |
| `{color.indigo}` | `#314d9f` | Link text, heading accents | 15 | 0.8 | Computed Style |
| `{color.purple}` | `#683372` | Service pillar backgrounds, "Result" badges | 10 | 0.6 | Computed Style |
| `{color.sky}` | `#daf1f7` | Decorative section backgrounds (light) | 5 | 0.6 | Computed Style |
| `{color.lavender}` | `#f7ebff` | Decorative section backgrounds (light) | 3 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| `seravek-web` | 300, 400, 600, 700 | All headings, body, and UI | Open Sans | Adobe Fonts |
| `ETmodules` | 400 | Iconography and UI symbols | Material Icons | Proprietary |
| `Courier New` | 700 | Technical or monospaced body | Courier Prime | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 72px | 98px | normal | 700 | Hero headlines | `p` (hero) |
| `{type.display.lg}` | 40px | 44px | -0.8px | 600 | Section headers | `h2` |
| `{type.heading.md}` | 28px | 28px | -0.28px | 600 | Sub-section titles | `h3` |
| `{type.heading.sm}` | 24px | 25.2px | normal | 700 | Emphasized labels | `strong` |
| `{type.body.lg}` | 20px | 34px | normal | 600 | Button labels | `a.et_pb_button` |
| `{type.body.md}` | 18px | 27px | normal | 400 | Default body copy | `p` |
| `{type.body.sm}` | 16px | 22.68px | normal | 400 | Footer/Secondary | `footer p` |
| `{type.caption}` | 14px | 19.6px | normal | 400 | Legal/Small print | `p` |

### Principles
1. **Tight Display Tracking:** Headlines at 40px use negative letter-spacing (-0.8px) to maintain density.
2. **Authoritative Weights:** Headings never drop below weight 600; body copy is strictly 400.
3. **Navy as Default Text:** Primary headings use `#03394c` rather than black for better brand integration.

## Spacing
**Base unit:** 10px (most frequent)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 49 |
| `{space.sm}` | 18px | 12 |
| `{space.md}` | 20px | 11 |
| `{space.lg}` | 54px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Default sections, inputs | 252 occurrences |
| `{radius.sm}` | 10px | Small buttons, cards | 6 occurrences |
| `{radius.md}` | 25px | Feature panels, "Result" badges | 10 occurrences |
| `{radius.lg}` | 40px | Large CTA buttons | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.soft}` | `rgba(3, 57, 76, 0.12) 0px 2px 18px 0px` | Feature cards on white | Homepage |
| `{shadow.accent}` | `rgba(242, 120, 75, 0.26) 0px 2px 18px 0px` | Highlighted buttons | Homepage |
| `{shadow.deep}` | `rgb(49, 77, 159) 0px 2px 18px 0px` | Navy cards on white | About Page |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (Request a Demo)
**Pages observed:** https://hallmarkhcs.com, https://hallmarkhcs.com/about
**Spec:** Background: `#03394c` / Text: `#ffffff` / Radius: `40px` / Padding: `6px 47px` / Typography: `20px 600`
**States observed:** Default | Hover: Not captured

#### Surface Section
**Role:** Standard content banding
**Pages observed:** https://hallmarkhcs.com, https://hallmarkhcs.com/about
**Spec:** Background: `#ffffff` / Text: `#556064` / Radius: `0px` / Padding: `54px 0px` / Typography: `18px 400`
**States observed:** Default: captured

### Tier 2: Patterns

#### Feature Card (Navy)
**Role:** Highlighting specific platform capabilities
**Pages observed:** https://hallmarkhcs.com, https://hallmarkhcs.com/about
**Spec:** Background: `#03394c` / Text: `#ffffff` / Radius: `25px` / Padding: `12px 23px` / Shadow: `{shadow.deep}`
**States observed:** Default: captured

#### Result Badge
**Role:** Displaying statistical outcomes
**Pages observed:** https://hallmarkhcs.com
**Spec:** Background: `#683372` / Text: `#ffffff` / Radius: `25px` / Padding: `8px 31px` / Typography: `18px 700`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Logo Grid Item
**Role:** Partner and certification display
**Pages observed:** https://hallmarkhcs.com, https://hallmarkhcs.com/about
**Spec:** Background: `#ffffff` / Border: `0px` / Radius: `3px` / Shadow: `none`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Section Padding | 54px (vertical) |
| Card Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked feature cards, reduced display type to ~32px |
| Desktop | 1440px | 3-column feature grids, 72px hero type |

## Imagery & decoration
The brand uses high-quality photography of healthcare professionals in clinical settings, often with a soft-focus background. Decorative elements include thin, multi-colored swooshes in navy, green, and blue that frame content areas.

## Do's
- Use `#03394c` for all primary headings to maintain brand authority.
- Apply `{radius.md}` (25px) to any card containing statistical "Results."
- Ensure primary CTAs use the 40px border radius for a distinct "pill" shape.
- Maintain a 54px vertical rhythm between major content sections.
- Pair **seravek-web** weight 700 with weight 400 for clear information hierarchy.

## Don'ts
- **Wrong:** Using `#77dc244` (Lime) for large text blocks. **Right:** Use for buttons and icons only. **Reason:** Legibility and brand focus.
- **Wrong:** Applying sharp corners to feature cards. **Right:** Use `{radius.md}` (25px). **Reason:** Hallmark's visual identity relies on soft, rounded containers.
- **Wrong:** Mislabeling the purple accent (`#683372`) as the primary brand color. **Right:** Navy (`#03394c`) is the primary.
- Do not use shadows on standard white surfaces unless it is a floating feature card.
- Do not drop heading weights below 600.

## Similar brands
- Optum
- Cerner
- Athenahealth
- Philips Healthcare

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #03394c;
  --color-accent-lime: #77dc244;
  --color-accent-purple: #683372;
  --color-text-main: #556064;
  --font-display: "seravek-web", sans-serif;
  --radius-panel: 25px;
  --radius-button: 40px;
}
```

## Agent prompt examples
- "Generate a feature section with a navy `#03394c` background, white text in Seravek 18px, and a lime-green `#77dc244` pill button with 40px radius."
- "Create a 3-column grid of white cards with a 25px border radius and a subtle navy shadow `rgba(3, 57, 76, 0.12)`."
- "Design a 'Result' badge using a purple `#683372` background and bold white Seravek text at 18px."

## Known gaps
- Hover and active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific navigation menu transitions were not sampled.
- Form input validation states (Error/Success) were not present in the analyzed pages.

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