# Karexpert Design System

> A clinical sky-blue grid anchored by high-contrast black functional elements and light-weight Helvetica display type.

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

## TL;DR
Karexpert utilizes a high-contrast "monochrome plus one" system where a vibrant sky-blue (`#00aaff`) serves as the primary brand signal against a sterile white (`#ffffff`) canvas. The system relies heavily on **HelveticaNeue Light** across a wide scale, using weight 300 for expansive display headers and weight 500-600 for functional UI. Interactive elements are strictly defined: primary actions use absolute black (`#000000`) pill or rounded-rect containers with white text, while secondary accents and status indicators utilize the blue spectrum. Layouts are structured around a 10px base unit with significant vertical breathing room (up to 100px between sections).

## Signature DNA
1. **The Sky-Blue Signal** (The use of `#00aaff` and its variants like `#51bff0` for iconography, text highlights, and secondary buttons to signal healthcare technology innovation across all pages.)
2. **Light-Weight Display** (HelveticaNeue Light at weight 300 for large section headers (44px+), creating a technical but accessible clinical feel.)
3. **High-Contrast Utility** (Absolute black `#000000` reserved for primary "Read More" and "Schedule a Demo" CTAs to ensure maximum visibility against the blue/white brand palette.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and card surfaces | 624 | 1.0 | Computed Style |
| `{color.ink.primary}` | `#000000` | Primary text, CTA backgrounds, and borders | 2046 | 1.0 | Computed Style |
| `{color.ink.secondary}` | `#333333` | Secondary body text and descriptive labels | 45 | 0.8 | Computed Style |
| `{color.ink.muted}` | `#666666` | De-emphasized text and footer content | 6 | 0.6 | Computed Style |
| `{color.surface.dark}` | `#0e0e0e` | Dark section backgrounds (e.g., Hospital stats) | 18 | 1.0 | Brand Page |
| `{color.border.light}` | `#cccccc` | Default component and section dividers | 96 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.accent.primary}` | `#00aaff` | Brand signal, icons, and text highlights | 27 | 1.0 | Brand Page |
| `{color.accent.soft}` | `#51bff0` | Primary button backgrounds and hover states | 3 | 0.6 | Computed Style |
| `{color.accent.link}` | `#4aa6de` | Inline links and interactive text | 45 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| HelveticaNeue Light | 300, 400, 500, 600, 700 | Primary Brand & UI | Inter | Proprietary |
| Font Awesome 5 Free | 900 | UI Icons | N/A | CC BY 4.0 |
| Arial | 500 | System Fallback | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 72px | 72px | normal | 500 | Stats/Hero numbers | `p.stats-count` |
| `{type.display.xl}` | 46px | 46px | normal | 600 | Page H1 | `h1` |
| `{type.display.lg}` | 44px | 45px | normal | 500 | Section Headers | `h2.kx-h2-section` |
| `{type.heading.md}` | 38px | 40px | normal | 300 | Sub-section headers | `h2.kx-h2-section-subh` |
| `{type.heading.sm}` | 22px | 25px | normal | 500 | Card Titles | `h3.kx-h3` |
| `{type.body.lg}` | 16px | 20px | normal | 500 | Standard Paragraphs | `p.p-tag` |
| `{type.body.md}` | 15px | 23.8px | normal | 500 | Navigation menu | `div.kx-menu-right` |
| `{type.body.sm}` | 14px | 23.8px | normal | 500 | Default UI / Content | `div#page-container` |
| `{type.caption}` | 12px | 12px | normal | 500 | Carousel indicators | `div.owl-dots` |

### Principles
1. **Display weight is inversely proportional to size.** Larger headers (38px-44px) frequently use weight 300, while functional body text (14px-16px) stays at 500-600 for legibility.
2. **Strict Helvetica usage.** All brand-facing copy must use HelveticaNeue Light; Arial is reserved strictly for technical fallbacks or translation switchers.
3. **No tracking on display.** Unlike editorial systems, display type maintains "normal" letter spacing to preserve a clean, clinical appearance.

## Spacing
**Base unit:** 10px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xxs}` | 5px | 207 |
| `{space.xs}` | 10px | 543 |
| `{space.sm}` | 20px | 87 |
| `{space.md}` | 30px | 54 |
| `{space.lg}` | 50px | 9 |
| `{space.xl}` | 86px | 42 |
| `{space.section}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, main layout | 2418 occurrences |
| `{radius.sm}` | 5px | Content cards, primary buttons | `Card`, `Rounded Button` |
| `{radius.lg}` | 25px | Pill buttons (Secondary) | `Rounded Button` (15 occurrences) |
| `{radius.full}` | 50px | Circular iconography / Avatars | 63 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgb(199, 199, 199) 0px 0px 7px 0px` | Feature cards on white canvas | 45 occurrences |

## Components

### Tier 1: Foundational

#### Primary Action Button
**Role:** Main conversion point (e.g., "Read More", "Schedule Demo")
**Pages observed:** 3
**Spec:** Background: `#000000` / Text: `#ffffff` / Border: `1px solid #000000` / Radius: `5px` / Padding: `5px 7px` / Typography: `14px weight 500`
**States observed:** Default: Captured | Hover: Not captured

#### Brand Icon Plate
**Role:** Representing platform features or hospital stats
**Pages observed:** 3
**Spec:** Background: `#00aaff` / Text: `#ffffff` / Radius: `50px` (Circle) / Shadow: None
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** News items and service descriptions
**Pages observed:** 3
**Spec:** Background: `#ffffff` / Text: `#000000` / Radius: `5px` / Shadow: `0px 0px 7px #c7c7c7` / Padding: `0px` (Internal spacing handled by children)
**States observed:** Default: Captured

#### Section Header Group
**Role:** Introducing new content blocks
**Pages observed:** 3
**Spec:** Typography: `44px weight 500` (Title) over `38px weight 300` (Subtitle) / Padding-bottom: `30px`
**States observed:** N/A

### Tier 3: Surface-specific

#### Stats Bar
**Role:** High-level impact metrics (Hospitals, Patients)
**Pages observed:** 2
**Spec:** Background: `#0e0e0e` / Text: `#ffffff` / Height: `Variable` / Typography: `72px weight 500`
**States observed:** N/A

#### Navigation Bar
**Role:** Global site header
**Pages observed:** 3
**Spec:** Background: `#ffffff` / Text: `#000000` / Border-bottom: `1px solid #cccccc` / Height: `~80px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Gutter | 100px |
| Card Grid | 3-up (Desktop) / 1-up (Mobile) |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | 3-column feature grids, horizontal top nav |
| Mobile | 390px | Stacked cards, hamburger menu, font-size reduction for H1 (46px -> 32px) |

## Imagery & decoration
- **Iconography:** Uses circular blue plates (`#00aaff`) with white glyphs.
- **Photography:** High-key, professional healthcare environments (clinics, labs).
- **Avoids:** Heavy drop shadows, gradients on surfaces, and serif typefaces.

## Do's
- Use HelveticaNeue Light weight 300 for any header exceeding 36px.
- Apply `#00aaff` for all non-text decorative elements (icons, accents).
- Ensure primary CTAs are absolute black `#000000` for 21:1 contrast.
- Maintain at least 80px of vertical padding between major sections.
- Use the `{shadow.card}` sparingly, only on white-on-white card layouts.

## Don'ts
- **Wrong:** Using `#00aaff` for primary body text. **Right:** Use `#333333`. **Reason:** Accessibility and readability.
- **Wrong:** Using bold weights (700+) for display headers. **Right:** Use weight 500 or 300. **Reason:** Preserves the "Healthcare Symphony" brand aesthetic.
- **Wrong:** Applying a border to feature cards that already have a shadow. **Right:** Use shadow only. **Reason:** Prevents visual clutter.
- Do not use secondary sub-brand colors as the primary background for buttons.
- Do not mix Arial and Helvetica in the same component.

## Similar brands
- Philips Healthcare
- GE HealthCare
- Siemens Healthineers
- Zocdoc

## Quick start

### CSS Custom Properties
```css
:root {
  --kx-color-primary: #00aaff;
  --kx-color-cta: #000000;
  --kx-color-canvas: #ffffff;
  --kx-color-ink: #333333;
  --kx-font-main: "HelveticaNeue Light", Helvetica, Arial, sans-serif;
  --kx-radius-card: 5px;
  --kx-shadow-subtle: 0px 0px 7px 0px rgba(199, 199, 199, 1);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #00aaff;
  --color-cta: #000000;
  --font-sans: "HelveticaNeue Light", "Helvetica", "Arial";
  --shadow-card: 0 0 7px 0 rgba(199, 199, 199, 1);
  --radius-sm: 5px;
}
```

## Agent prompt examples
- "Create a feature card using Helvetica weight 500 for the title, a 5px border radius, and the standard #c7c7c7 subtle shadow."
- "Generate a section header with a 44px title in weight 500 and a 38px subtitle in weight 300, both using HelveticaNeue Light."
- "Design a primary button with a black background, white 14px text, and 5px of padding."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Specific mobile breakpoint transitions for the "Stats Bar" were not fully detailed in source.

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