# Henryscheinone Design System

> A high-contrast clinical canvas anchored by a deep corporate blue and geometric sans-serif precision.

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

## TL;DR
Henryscheinone utilizes a monochrome foundation of pure white (#ffffff) and black (#000000) punctuated by a vibrant primary blue (#0071e3). The system is built on the **Red Hat** font family, using the "Text" variant for high-impact headlines and "Display" for functional UI. Layouts are defined by generous vertical breathing room (120px section gaps) and a mix of sharp and soft geometry, where cards use 8px to 12px radii while global containers often remain sharp. The aesthetic is professional and clinical, relying on blue-tinted secondary surfaces (#ecf5ff, #eee9ff) to organize complex data without losing corporate authority.

## Signature DNA
1. **The Primary Blue Anchor** (#0071e3 is the singular high-voltage accent used for CTAs, text links, and primary brand signals against a stark white canvas).
2. **Red Hat Typographic Pairing** (The systematic use of Red Hat Text for display weights and Red Hat Display for interactive labels creates a distinct geometric sans-serif voice).
3. **Clinical Surface Layering** (Use of very light, cool-toned backgrounds like #ecf5ff and #eee9ff to create soft containment for "Let the Numbers Speak" and "What Customers are Saying" sections).

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.black}` | `#000000` | Primary text, borders, button text | 93 | 1 | `--text-color` |
| `{colors.white}` | `#ffffff` | Page background, button backgrounds, text on dark | 22 | 1 | `--color-neutral-white` |
| `{colors.cinder}` | `#181a1d` | Secondary text, dark neutral borders | 20 | 1 | `--amalgam-100` |
| `{colors.silver}` | `#cccccd` | Default 1px dividers and borders | 1 | 1 | `--amalgam-30` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#0071e3` | Primary CTA background, active links | 5 | 1 | `--atomic-primary` |
| `{colors.secondary-soft}` | `#eee9ff` | Secondary section background (Purple tint) | 3 | 1 | `--purple-00` |
| `{colors.primary-soft}` | `#ecf5ff` | Decorative background (Blue tint) | 1 | 1 | `--blue-00` (decorative) |
| `{colors.tertiary-soft}` | `#a3f7fa` | Decorative background (Teal tint) | 1 | 1 | `--teal-20` (decorative) |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{colors.success}` | `#00801c` | Success states |
| `{colors.alert}` | `#e4002b` | Alert/Error states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Red Hat Text | 400, 600 | Display & Headings | Red Hat Text (Google Fonts) | OFL |
| Red Hat Display | 400, 700 | UI Labels & Buttons | Red Hat Display (Google Fonts) | OFL |
| Times New Roman | 400 | Legacy body content | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-hero}` | 72px | 88px | normal | 600 | Homepage Hero | `h3.hero` |
| `{type.display-lg}` | 48px | 600px | normal | 600 | Section Titles | `h2.title.h2` |
| `{type.heading-md}` | 32px | 40px | normal | 600 | Sub-sections | `h3.h3` |
| `{type.heading-sm}` | 24px | 30px | normal | 600 | Card Titles | `h3.h4` |
| `{type.body-lg}` | 20px | 25px | normal | 400 | Subtitles | `p.subtitle-2` |
| `{type.body-md}` | 18px | 28px | normal | 400 | Running Text | `p` |
| `{type.button}` | 16px | 20px | normal | 700 | Primary CTAs | `a.button-primary` |
| `{type.label-sm}` | 14px | 18px | normal | 700 | Small Badges | `span.ui-label-xs-smb` |

### Principles
1. **Geometric Heading Weight:** All major headings use weight 600 (Semi-bold) to maintain a clean, architectural feel.
2. **Functional UI Weight:** Interactive elements (buttons, labels) shift to Red Hat Display at weight 700 for maximum legibility.
3. **Achromatic Hierarchy:** Primary information is strictly black (#000000) or white (#ffffff), reserving color only for navigational intent.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 21 |
| `{space.base}` | 16px | 25 |
| `{space.lg}` | 24px | 27 |
| `{space.section}` | 120px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Main containers, section wrappers | 88 occurrences |
| `{radius.input}` | 4px | Form fields, small buttons | 9 occurrences |
| `{radius.card}` | 8px | Standard content cards | 15 occurrences |
| `{radius.pill}` | 99px | Badges, secondary surfaces | 3 occurrences |

## Elevation
*Not captured in source. The system appears flat, utilizing borders and background color shifts for depth.*

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** 1
**Spec:** Background: #0071e3 | Text: #ffffff | Radius: 4px | Padding: 14px 24px | Font: Red Hat Display 700
**States observed:** Default | Hover: Not captured

#### Ghost Button
**Role:** Secondary action on dark/blue backgrounds
**Pages observed:** 1
**Spec:** Background: transparent | Text: #ffffff | Border: 1px #ffffff | Radius: 4px | Padding: 14px 24px

### Tier 2: Patterns
#### Content Card (Standard)
**Role:** Product and feature highlights
**Pages observed:** 1
**Spec:** Background: #ffffff | Text: #000000 | Radius: 8px | Padding: 24px 20px | Border: 0px

#### Testimonial Card
**Role:** Customer quotes
**Pages observed:** 1
**Spec:** Background: #eee9ff | Text: #000000 | Radius: 12px | Padding: 24px 20px

### Tier 3: Surface-specific
#### Badge / Tag
**Role:** Metadata labeling
**Pages observed:** 1
**Spec:** Background: transparent | Text: #181a1d | Border: 1px #181a1d | Radius: 99px | Padding: 8px 16px

#### Section Wrapper
**Role:** High-level content grouping
**Pages observed:** 1
**Spec:** Background: #ffffff | Padding-top/bottom: 120px | Radius: 0px

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1280px |
| Section Vertical Gap | 120px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Hero text centers, button stacks to full width, section padding reduces. |

## Imagery & decoration
The brand uses high-quality professional photography of dental practitioners and patients. Decorative elements include large, soft-edged organic shapes in primary blue (#0071e3) used as background masks behind product screenshots.

## Do's
- Use **Red Hat Text** weight 600 for all section titles.
- Apply **Primary Blue** (#0071e3) only to the most important action on the screen.
- Maintain **120px vertical spacing** between major content sections.
- Use **8px radius** for standard white cards.
- Ensure all body text is strictly **#000000** on white for maximum contrast.

## Don'ts
- **Don't** use sub-brand colors (like Teal #a3f7fa) for primary buttons; these are for decorative backgrounds only.
- **Don't** use shadows; the system relies on flat color blocks and 1px borders.
- **Don't** round the corners of main section containers; keep them at 0px.
- **Don't** mix Red Hat Text and Red Hat Display within the same text block.
- **Don't** use #0071e3 for large background areas; it is an accent, not a canvas color.

## Similar brands
- IBM (Achromatic foundation + Blue accent)
- Microsoft (Clinical, clean grid)
- UnitedHealth Group (Corporate healthcare aesthetic)

## Quick start
```css
:root {
  --color-primary: #0071e3;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-neutral-dark: #181a1d;
  --color-surface-soft: #ecf5ff;
  
  --font-heading: 'Red Hat Text', sans-serif;
  --font-ui: 'Red Hat Display', sans-serif;
  
  --radius-card: 8px;
  --space-section: 120px;
}
```

## Agent prompt examples
- "Create a feature card using a white background, 8px border radius, and a 24px padding. The title should be Red Hat Text 600 at 24px."
- "Generate a primary CTA button with #0071e3 background, white text in Red Hat Display 700, and 4px corners."
- "Design a testimonial section with a #eee9ff background and 120px vertical padding."

## Known gaps
- Hover and Active states for buttons were not captured in the static analysis.
- Shadow tokens are missing as the site uses a flat design language.
- Mobile navigation menu transitions were not sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://henryscheinone.com | Desktop 1440px | 2026-06-06 05:07 |
| Homepage (Mobile) | https://henryscheinone.com | Mobile 390px | 2026-06-06 05:07 |