---
title: "Impilo design system"
variant: extended
source: https://impilo.health/
captured_at: 2026-10-12
theme: dark
industry: health
generator: Design DNA (https://four.wiralomi.com/style/impilo-health)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Impilo · Design System

> Remote healthcare, powered by vivid blue

**Theme:** dark · **Industry:** health · **Source:** https://impilo.health/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Impilo’s homepage uses a saturated blue-violet field to frame remote patient monitoring as clear, modern infrastructure. Oversized white headlines, cyan emphasis, medical-device line art, and a floating dashboard create a technology-forward health identity.

## North star

Let one saturated blue-violet canvas, oversized white typography, and a single cyan emphasis carry the page.

## Overview

The page is built around a vivid blue-violet hero rather than a conventional white healthcare canvas. White navigation and headline text remain crisp against the saturated field, while the oversized cyan keyword creates a strong visual focal point. Gilroy’s geometric sans-serif forms support the digital-health tone: display text is large, heavy, tightly tracked, and arranged in short lines; supporting copy is compact and readable. The hero pairs fine, low-contrast line art of monitoring devices on the left with a translucent-looking patient dashboard across the lower right, making the product tangible without shifting to photography. Navigation and the demo action sit at the top, with the headline and explanatory copy aligned to the right of the illustration. The captured page is unusually spacious below the hero content, so preserve the broad uninterrupted color field rather than filling it with invented sections. Rounded controls and restrained edge highlights soften the strong geometry.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Indigo | `#16165c` | `--color-deep-indigo` | brand | Semantic dark canvas and occasional dark text; use as a deep brand anchor, not the dominant visible hero field. |
| Clinical White | `#ffffff` | `--color-clinical-white` | surface | Navigation, primary headline, and high-contrast text on the blue-violet hero. |
| Vivid Periwinkle | `#403cd5` | `--color-vivid-periwinkle` | brand | Main hero canvas and dominant full-bleed background. |
| Border Indigo | `#232269` | `--color-border-indigo` | semantic | Dark edge and border tone for restrained outlines and some dark text. |
| Soft Lavender Gray | `#d8d8e3` | `--color-soft-lavender-gray` | neutral | Muted supporting text and subdued details against dark brand surfaces. |
| Cool Porcelain | `#f4f4f6` | `--color-cool-porcelain` | surface | Pale inverse surface for navigation and compact interface elements. |
| Button Violet | `#5350cc` | `--color-button-violet` | accent | Measured demo-button and link accent; screenshot shows a bright, pale CTA treatment. |
| Signal Cyan | `#00b1ff` | `--color-signal-cyan` | accent | Cyan emphasis in hero copy and selected links; also appears in product-interface details. |
| Electric Iris | `#524fe1` | `--color-electric-iris` | accent | Secondary accent recorded in text; treat as a restrained highlight, not a new background. |
| Mint Signal | `#00ffaa` | `--color-mint-signal` | accent | Small measured text accent; likely limited to interface or graphic details rather than core surfaces. |
| Sky Blue | `#59b4ff` | `--color-sky-blue` | accent | Minor blue highlight, including dashboard-style graphic details. |

### Semantic aliases

`--color-canvas` → `#16165c` (Deep Indigo) · `--color-surface` → `#ffffff` (Clinical White) · `--color-surface-2` → `#f4f4f6` (Cool Porcelain) · `--color-text` → `#ffffff` (Clinical White) · `--color-text-muted` → `#d8d8e3` (Soft Lavender Gray) · `--color-border` → `#232269` (Border Indigo) · `--color-accent` → `#403cd5` (Vivid Periwinkle) · `--color-accent-2` → `#5350cc` (Button Violet) · `--color-accent-3` → `#232269` (Border Indigo) · `--color-on-accent` → `#16165c` (Deep Indigo)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#16165c` | 16.11:1 | AAA |
| `#ffffff` | `#f4f4f6` | 1.1:1 | fail |
| `#d8d8e3` | `#16165c` | 11.39:1 | AAA |
| `#d8d8e3` | `#ffffff` | 1.41:1 | fail |
| `#d8d8e3` | `#f4f4f6` | 1.29:1 | fail |
| `#403cd5` | `#16165c` | 2.17:1 | fail |
| `#403cd5` | `#ffffff` | 7.43:1 | AAA |
| `#403cd5` | `#f4f4f6` | 6.77:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Gilroy | `--font-body` | webfont | 600, 500 | Across navigation, hero headings, body copy, links, and buttons. | Plus Jakarta Sans |

- **Gilroy:** Use semibold display and heading weights with tight negative tracking; body and controls stay compact and medium-weight.

### Type scale — Perfect Fifth (ratio ≈ 1.471, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 124px | 600 | 0.92 | -0.04em | — | Gilroy | Oversized hero keyword or short display statement. |
| h1 | 92px | 600 | 0.92 | -0.04em | — | Gilroy | Primary hero headline, set in large stacked lines. |
| h2 | 66px | 600 | 0.92 | -0.075em | — | Gilroy | Major section heading where subsequent content appears. |
| h3 | 54px | 600 | 0.92 | -0.04em | — | Gilroy | Feature or supporting section headline. |
| h4 | 46px | 600 | 0.92 | -0.04em | — | Gilroy | Compact subsection heading. |
| body | 18px | 500 | 1.44 | -0.04em | — | Gilroy | Hero description and general explanatory copy. |
| caption | 14px | 600 | 1.44 | -0.04em | — | Gilroy | Small dashboard labels and supporting metadata. |
| button | 14px | 600 | 1.44 | -0.04em | — | Gilroy | Demo and article action labels. |
| nav | 14px | 600 | 1.44 | -0.04em | — | Gilroy | Top-level navigation links. |
| link | 14px | 600 | 1.44 | -0.04em | — | Gilroy | Inline calls to action and navigation links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 8, 9, 12, 15, 16, 17, 20, 24, 30, 32, 34, 36, 43, 48, 50 px.
- Section rhythm 50px · element gap 8px · card padding — · max content width —.

The hero is a full-bleed color field with a horizontal navigation row at the top. Its main composition balances cropped device line art on the left against a right-aligned text column, with a wide patient dashboard overlapping the lower portion. Keep content aligned to a broad central span while allowing the illustration to extend beyond the text column. The screenshot shows generous open space below the initial content; maintain that airy, low-density rhythm rather than inventing packed modules.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `7px` · nav `9999px` · xs `7px` · sm `16px` · md `24px` · lg `32px` · pill `9999px`
- Shadow `inset` (nav, other, footer): `rgba(0, 0, 0, 0.45) 0px 0.9936px 4.0032px 0px, rgb(178, 176, 255) 0px -0.9936px 2.9952px 0px inset, rgb(60, 57, 185) 0px 0px 0px 0.9936px`
- Shadow `inset-2` (button): `rgb(251, 250, 255) 0px -0.9936px 0.9936px 0.9936px inset, rgba(212, 209, 242, 0.68) 0px 2.0016px 4.9968px 0px, rgba(133, 143, 172, 0.25) 0px 0px 0px 0.9936px`
- Motion: standard transition `0.5s ease` on interactive elements.

The composition is mostly flat, with fine outlines separating the dashboard and its internal panels from the saturated background. The navigation CTA and dashboard gain subtle lifted, inset-looking highlights rather than heavy shadows. Use rounded pill controls and softly rounded media corners; avoid large drop shadows or card stacks.

## Imagery

Use delicate medical-device line art—monitor, thermometer, and connected equipment—as a large cropped illustration entering from the left. Pair it with a wide patient-monitoring dashboard panel in the lower foreground. Keep both integrated into the blue-violet field with fine, low-contrast outlines and cool highlights. The screenshot contains no prominent photography; prioritize product UI and illustration over stock healthcare imagery.

## Components

### Top navigation

White logo and compact links sit across the hero’s top edge; finish with a pale pill-shaped Request Demo control.

### Hero headline

Large, bold, tightly tracked white text forms short stacked lines, followed by a prominent cyan keyword.

### Hero description

A short, left-aligned supporting statement sits beneath the headline in small white text.

### Medical line art

Oversized, thin-outline monitoring devices occupy the left side and crop off the viewport.

### Patient dashboard

A wide, outlined monitoring interface overlaps the lower hero, combining a patient summary, navigation labels, and metric panels.

### Demo CTA

A compact, rounded pale control contrasts with the hero field and anchors the far-right side of navigation.

### Measured component styles

- **Primary button** (“Request Demo Request Demo”): background #5350cc · text #16165c · radius 1425.6px · padding 8px · 500 18px Gilroy
- **Secondary button** (“Read Full Article →”): transparent background · text #16165c · border 2px solid #16165c · radius 8px · padding 12px 24px · 500 18px Gilroy
- **Link** (“Learn more about Our Solutions”): transparent background · text #00b1ff · radius 0px · padding 0px · 600 13.9968px Gilroy
- **Card**: transparent background · text #ffffff · border 1px solid #00b1ff · radius 15.9984px · padding 0px · 500 18px Gilroy
- **Navigation item** (“About Us”): transparent background · text #f4f4fc · radius 0px · padding 0px · 600 13.9968px Gilroy

## Do

- Use Vivid Periwinkle (#403cd5) as the dominant hero field.
- Keep primary headlines white and emphasize one short phrase in Signal Cyan (#00b1ff).
- Use Gilroy or a close geometric sans-serif substitute.
- Set display and heading text with tight tracking and strong weight.
- Pair medical line art with a realistic-looking monitoring dashboard.
- Leave broad, uninterrupted breathing room around hero content.

## Don't

- Do not replace the vivid hero with a white healthcare layout.
- Do not introduce unmeasured colors or gradients.
- Do not fill the page with dense cards or repeated content modules.
- Do not use generic hospital or clinician stock photography as the focal point.
- Do not make the dashboard visually heavier than the headline.
- Do not use oversized shadows or sharp, default rectangular buttons.

## Agent prompt

Build a new Impilo-style health technology page around a full-bleed Vivid Periwinkle (#403cd5) canvas. Use Gilroy, or Plus Jakarta Sans as a free substitute, with bold oversized white headings, tight tracking, and one short Signal Cyan (#00b1ff) phrase as the focal accent. Place a compact white navigation row at the top and a pale rounded Request Demo control at the far right. Compose the hero with fine medical-device line art cropped along the left edge, a right-side text block, and a wide patient dashboard panel overlapping below. Keep UI outlines subtle, use Clinical White (#ffffff) and Cool Porcelain (#f4f4f6) sparingly for contrast, and reserve Deep Indigo (#16165c) for deeper details. Maintain generous open space and a restrained, low-elevation interface; do not invent dense sections or decorative gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed blue-violet canvas; top navigation above a two-sided hero, with line art left and copy plus dashboard to the right. | Primary demo action, Top-level navigation | Oversized stacked headline, Cyan keyword accent, Medical line art, Patient dashboard panel |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/impilo-health