# Icometrix Design System

> Clinical precision meets fluid intelligence through a palette of sterile whites, deep teals, and atmospheric sky-blue accents.

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

## TL;DR
Icometrix utilizes a "monochrome-plus" system where a high-contrast foundation of pure white (#ffffff) and black (#000000) is softened by a clinical teal primary (#358aa0). The interface relies on generous whitespace and a distinct sky-blue action color (#8fbadc) for interactive elements like primary buttons and hover states. Typography is strictly sans-serif, using a mix of Helvetica Neue and custom webfonts to maintain a professional, medical-grade aesthetic. Visual depth is achieved through large-radius cards (16px to 50px) and subtle background shifts to light gray (#f7f7f7), avoiding heavy shadows in favor of clean hairlines.

## Signature DNA
1. **The Clinical Teal Gradient** (The use of #358aa0 for subtitles and #8fbadc for primary actions creates a "medical tech" spectrum that feels both authoritative and accessible; observed across all pages.)
2. **Softened Geometry** (Despite the clinical nature, the system uses aggressive corner rounding—up to 50px on buttons and panels—to humanize the AI-driven data; evidenced by `radius: 50px` on primary CTAs.)
3. **Achromatic Pacing** (Sections alternate between pure white #ffffff and soft gray #f7f7f7 to create a rhythmic flow without introducing distracting secondary colors.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--wst-color-fill-background-primary` | `#ffffff` | Page floor, primary surface, button text | 118 | 1 | Computed Style |
| `--wst-color-text-primary` | `#000000` | Primary headings, body text, line dividers | 796 | 1 | Computed Style |
| `--wst-color-fill-background-secondary` | `#f7f7f7` | Alternating section backgrounds | 17 | 1 | Computed Style |
| `--wst-color-custom-5` | `#f0f0f0` | Tertiary surface backgrounds | 57 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--wst-color-fill-base-shade-3` | `#358aa0` | Primary brand teal, subtitles, borders | 37 | 1 | `--wst-color-subtitle` |
| `--wst-color-fill-primary` | `#8fbadc` | Primary action color (buttons, hover states) | 14 | 1 | `--wst-color-action` |
| `--wst-color-custom-2` | `#b2cdde` | Muted accent, secondary borders | 10 | 1 | Computed Style |
| `--wst-color-fill-base-shade-2` | `#006f7e` | Deep teal for disabled states/dark accents | 9 | 1 | `--wst-color-disabled` |
| `--wst-color-custom-8` | `#6022a6` | Decorative purple (rare) | 2 | 1 | Decorative Only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| `wfont_57a328_...` | 400, 700 | Primary Display & Headings | Inter | Proprietary |
| `HelveticaNeueW01-45Ligh` | 400 | Primary Body | Inter | Licensed |
| `wfont_2684f6_...` | 400 | Secondary Headings | Roboto | Proprietary |
| `Arial` | 400 | UI Labels, Captions | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 73px | 73.22px | normal | 400 | Hero Display | `p.font_7.wixui-rich-text__text` |
| `{type.display-lg}` | 61px | 73.72px | normal | 400 | Page Titles | `h1.font_0.wixui-rich-text__text` |
| `{type.heading-xl}` | 47px | 61.15px | normal | 400 | Section Heads | `h4.font_4.wixui-rich-text__text` |
| `{type.heading-lg}` | 34px | 43.93px | normal | 400 | Sub-section Heads | `h2.font_2.wixui-rich-text__text` |
| `{type.heading-md}` | 30px | 39px | normal | 400 | Card Titles | `h5.font_5.wixui-rich-text__text` |
| `{type.body-lg}` | 19px | 30.72px | normal | 400 | Lead Paragraphs | `p.font_8.wixui-rich-text__text` |
| `{type.body-md}` | 16px | 24.93px | normal | 400 | Standard Body | `p.font_9.wixui-rich-text__text` |
| `{type.button}` | 16px | 25.23px | normal | 400 | CTA Labels | `span.Gf1CuA.wixui-button__label` |
| `{type.caption}` | 11px | normal | normal | 400 | Gallery Captions | `div.gallery-item-content` |

### Principles
1. **Lightweight Display**: Headlines favor 400 weight even at large scales (73px), maintaining a "light" and airy feel.
2. **Generous Leading**: Body text uses a ~1.5x line-height ratio (16px/24.93px) to ensure readability of complex medical copy.
3. **Teal Emphasis**: Subtitles and secondary headings frequently use `#358aa0` instead of black to soften the hierarchy.

## Spacing
**Base unit:** 8px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 17 |
| `{space.sm}` | 16px | 3 |
| `{space.md}` | 24px | 7 (approx) |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, standard inputs | 893 occurrences |
| `{radius.md}` | 16px | Feature cards, news cards | 27 occurrences |
| `{radius.lg}` | 23px | Interactive panels | 12 occurrences |
| `{radius.full}` | 50px | Primary buttons, pill badges | 14 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call-to-action (e.g., "Speak with an expert")
**Pages observed:** https://icometrix.com, https://icometrix.com/about
**Spec:** Background: `#8fbadc` / Text: `#ffffff` / Radius: `50px` / Padding: `8px 24px` / Typography: `16px`
**States observed:** Default: `#8fbadc` | Hover: `#8fbadc` (with subtle brightness shift) | Active: Captured

#### Ghost Button
**Role:** Secondary actions (e.g., "Our story")
**Pages observed:** https://icometrix.com
**Spec:** Background: `transparent` / Text: `#358aa0` / Border: `1px solid #358aa0` / Radius: `50px`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying disease-specific solutions
**Pages observed:** https://icometrix.com
**Spec:** Background: `#ffffff` / Border: `none` / Radius: `16px` / Padding: `24px`
**States observed:** Default: Captured | Hover: Subtle elevation (not tokenized)

#### News Card
**Role:** Blog and news feed items
**Pages observed:** https://icometrix.com
**Spec:** Background: `#f7f7f7` / Text: `#000000` / Radius: `16px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Quote Block
**Role:** Testimonials and expert quotes
**Pages observed:** https://icometrix.com
**Spec:** Background: `#358aa0` (or gradient) / Text: `#ffffff` / Radius: `0px`
**States observed:** Default: Captured

#### Expert Profile Card
**Role:** Team and expert directory
**Pages observed:** https://icometrix.com/about
**Spec:** Background: `transparent` / Text: `#000000` / Radius: `18px` (image container)
**States observed:** Default: Captured

## Layout
| Property | Value |
|------|-------|
| Max Width | 1200px (approx) |
| Section Gap | 80px - 120px |
| Grid | 12-column desktop / 1-column mobile |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Display type scales from 73px to ~40px. |
| Desktop | 1440px | Full horizontal navigation; multi-column card grids (3-up). |

## Do's
- Use `#358aa0` for all subtitles and secondary emphasis text.
- Apply `50px` border-radius to all primary action buttons.
- Maintain a minimum of `80px` vertical padding between major sections.
- Use `#f7f7f7` to distinguish background content from the main white canvas.
- Ensure all body text is set to `16px` for accessibility.

## Don'ts
- **Wrong:** Using `#8fbadc` for body text. **Right:** Use `#000000`. **Reason:** Contrast on white is insufficient for long-form reading.
- **Wrong:** Using sharp corners for buttons. **Right:** Use `50px` pill shape. **Reason:** Sharp corners contradict the brand's "humanized AI" DNA.
- **Wrong:** Overusing the decorative purple `#6022a6`. **Right:** Keep it to specific data visualizations or rare accents.
- **Wrong:** Applying heavy drop shadows to cards. **Right:** Use 1px borders or subtle background shifts.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --wst-color-primary: #358aa0;
  --wst-color-action: #8fbadc;
  --wst-color-bg-secondary: #f7f7f7;
  --wst-radius-pill: 50px;
  --wst-radius-card: 16px;
  --wst-font-display: "wfont_57a328_...", sans-serif;
}
```

## Known gaps
- Hover state transitions for primary buttons were not explicitly tokenized in the source.
- Specific shadow values for elevated cards were not captured; cards appear flat or use hairline borders.
- Mobile-specific spacing tokens were not differentiated from desktop in the evidence.

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