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

# Healthy Together · Design System

> Dark, human-centered technology for public services

**Theme:** dark · **Industry:** health · **Source:** https://www.healthytogether.co/ · **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._

A dark, spacious SaaS homepage presenting AI-powered software for health and human services agencies. High-contrast typography, atmospheric gradients, agency logos, and dashboard imagery make the product feel both enterprise-ready and people-focused.

## North star

Keep the canvas consistently deep navy and let crisp typography, restrained glows, and real product context create contrast.

## Overview

The visual system is anchored by a near-black navy canvas (#101722), used continuously across the page so the long-form homepage feels cohesive rather than divided into contrasting bands. White headlines carry the message; two muted grays support supporting copy, while green and violet glow effects appear mainly in hero and CTA imagery rather than as a dependable UI palette. Inter is used throughout, with bold, tightly tracked display headlines and smaller, softer supporting text. The composition alternates between centered statements, compact metric groups, product-led sections, and testimonial cards. Large areas of dark negative space give the oversized hero and product imagery room to register. Government logos establish trust early; later dashboard visuals show the software in context. Fine borders distinguish cards and controls without turning the page into a heavily elevated interface. A vivid violet CTA is a restrained exception to the otherwise subdued palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Navy | `#101722` | `--color-midnight-navy` | brand | Dominant page canvas, carrying the navigation, hero, feature sections, testimonials, CTA, and footer. |
| Soft Porcelain | `#fcfdfa` | `--color-soft-porcelain` | neutral | Primary headline, navigation, and other high-priority text on the dark canvas. |
| Quiet Silver | `#bbbbbb` | `--color-quiet-silver` | neutral | Main secondary copy and muted descriptions, including supporting hero and feature text. |
| Slate Hairline | `#838383` | `--color-slate-hairline` | semantic | Measured border tone for subtle outlines and card divisions; use sparingly against the dark canvas. |
| Blue Slate | `#26324c` | `--color-blue-slate` | surface | Secondary dark structural tone seen in borders and product-interface details, not a broad section background. |
| Night Surface | `#141c2a` | `--color-night-surface` | surface | Subtle raised dark surface for contained areas within the predominantly navy page. |
| Cool Mist | `#c7cacc` | `--color-cool-mist` | neutral | Less prominent muted text, supporting low-emphasis information against dark surfaces. |
| Ash Gray | `#949494` | `--color-ash-gray` | neutral | Occasional subdued text detail; not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#101722` (Midnight Navy) · `--color-surface` → `#141c2a` (Night Surface) · `--color-text` → `#fcfdfa` (Soft Porcelain) · `--color-text-muted` → `#bbbbbb` (Quiet Silver) · `--color-text-subtle` → `#c7cacc` (Cool Mist) · `--color-border` → `#838383` (Slate Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fcfdfa` | `#101722` | 17.62:1 | AAA |
| `#fcfdfa` | `#141c2a` | 16.73:1 | AAA |
| `#bbbbbb` | `#101722` | 9.37:1 | AAA |
| `#bbbbbb` | `#141c2a` | 8.9:1 | AAA |
| `#c7cacc` | `#101722` | 10.92:1 | AAA |
| `#c7cacc` | `#141c2a` | 10.37:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter:Medium | `--font-body` | webfont | 500 | Body copy, navigation, captions, and medium-weight headings. | Inter |
| Inter:Regular | `--font-inter-regular` | webfont | 400 | Regular-weight headings and selected product or link text. | Inter |
| Inter:Semi Bold | `--font-display` | webfont | 600 | Display headlines and uppercase eyebrow labels. | Inter |
| Inter:Bold | `--font-inter-bold` | webfont | 700 | Strong section headings and prominent product or navigation text. | Inter |

- **Inter:Medium:** Primary workhorse; measured body copy uses medium weight, close tracking, and relaxed line height.
- **Inter:Regular:** Use regular weight for lighter heading contrast; measured h4 tracking is notably tight.
- **Inter:Semi Bold:** Display text is tightly tracked; eyebrow labels are uppercase with expanded letter spacing.
- **Inter:Bold:** Use for emphatic section titles; headline hierarchy relies on weight and scale, not decorative styling.

### Type scale — Major Third (ratio ≈ 1.289, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1 | -0.05em | — | Inter:Semi Bold | Oversized hero and campaign statements. |
| h1 | 36px | 500 | 1.4 | -0.005em | — | Inter:Medium | Primary page headline and major introductory text. |
| h2 | 32px | 700 | 1.4 | 0 | — | Inter:Bold | Major section titles, including solutions and social proof. |
| h3 | 30.5px | 700 | 1 | -0.05em | — | Inter:Bold | Strong feature and product section headings. |
| h4 | 24px | 400 | 1.3 | -0.05em | — | Inter:Regular | Secondary headings and supporting card titles. |
| body | 18px | 500 | 1.45 | -0.005em | — | Inter:Medium | Feature descriptions and primary explanatory copy. |
| caption | 16px | 500 | 1.45 | -0.005em | — | Inter:Medium | Testimonials, interface notes, and compact supporting copy. |
| nav | 64px | 700 | 1.2 | -0.05em | — | Inter:Bold | Prominent navigation or expanded-menu headline treatment. |
| eyebrow | 12px | 600 | 1.33 | 0.06em | uppercase | Inter:Semi Bold | Small uppercase labels above section headings. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 2, 4, 8, 9, 10, 14, 16, 18, 24, 27, 32, 36, 40, 48, 64, 160 px.
- Section rhythm 32px · element gap 9px · card padding — · max content width 1280px.

A centered content system sits within a measured page maximum width of 1280px, with a compact overall density but unusually generous vertical pauses between major stories. The header spans the canvas, while the hero headline is centered and the trust logos form a horizontal strip beneath it. Later sections alternate between centered messaging, multi-column metrics, split product narratives, and full-width visual showcases. Keep content edges and card groups aligned; use the measured 32px section gap as a baseline rhythm, allowing the page's large visual interludes to feel expansive rather than crowded.

## Shape & elevation

- Radius: media `50%` · xs `16px` · sm `20px` · md `32px` · pill `9999px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.02) 0px 4px 8px 0px, rgba(0, 0, 0, 0.04) 0px 12px 32px 0px`
- Shadow `lg-2` (media): `rgba(23, 73, 77, 0.15) 0px 20px 30px 0px`

The page is mostly flat, relying on the uninterrupted navy canvas and negative space instead of pronounced shadows. Cards and product panels are separated by fine, low-contrast outlines and darker surfaces. Product imagery carries its own layered panels and occasional glow; reserve measured shadows for media or subtle card depth, not every section.

## Imagery

Use product-interface imagery as the key proof of capability: dark dashboards with compact panels, charts, navigation, and muted teal highlights. The hero and CTA use soft, atmospheric teal, blue, violet, and warm glows against navy; treat these as image effects, not extra core UI colors. Government logos appear as a restrained monochrome trust strip. Testimonial cards mix app-store marks, brief quotes, and ratings. Prefer contextual product compositions over generic stock photography.

## Components

### Top navigation

Compact logo and horizontal link row on the navy canvas, with a distinct violet pill-shaped help action at the far right.

### Hero and trust strip

Centered, high-contrast headline above a small trust statement and a row of subdued government agency logos over atmospheric media.

### Solutions metrics

Centered section introduction followed by four compact proof points, each combining a small green icon, a strong value, and muted supporting text.

### AI feature block

A short uppercase eyebrow and bold, tightly set heading lead into explanatory copy alongside or above dark product imagery.

### Program integrations

Large centered statement with a concise program label, a horizontal set of program marks, and dashboard imagery beneath.

### Testimonial cards

Outlined dark cards with compact customer quotes, platform or agency marks, and occasional star ratings; preserve varied card content.

### Demo CTA and footer

Centered closing headline with a small violet action, followed by a dense multi-column footer of program, support, and legal links.

### Measured component styles

- **Primary button** (“AI Offerings”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px ui-sans-serif
- **Link** (“AI Doc Extraction”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Inter:Regular
- **Navigation item** (“AI & digital transformation for immediat”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px ui-sans-serif

## Do

- Use Midnight Navy (#101722) as the continuous page canvas.
- Set primary headlines in Soft Porcelain (#fcfdfa) with strong Inter weights.
- Use Quiet Silver (#bbbbbb) for secondary descriptions.
- Keep green and violet glows inside visual media rather than treating them as core palette colors.
- Show agency marks early and realistic dashboard imagery in product sections.
- Use fine outlines and Night Surface (#141c2a) to separate contained content.

## Don't

- Do not introduce alternating bright section backgrounds.
- Do not use vivid gradients as the default treatment for buttons, cards, or text.
- Do not make every heading centered; align feature copy to its product composition.
- Do not crowd large hero and showcase areas with extra UI.
- Do not rely on heavy shadows to define cards.
- Do not promote illustration-only colors into the core brand palette.

## Agent prompt

Build a new enterprise SaaS page in the Healthy Together visual style. Use Midnight Navy (#101722) as the continuous canvas, Soft Porcelain (#fcfdfa) for primary headings, and Quiet Silver (#bbbbbb) for supporting copy. Use Inter throughout, with bold, tightly tracked display headlines and compact uppercase eyebrows. Keep a centered content frame within the measured 1280px page maximum, but vary alignment between centered hero/CTA moments and product-led feature layouts. Use subdued borders, Night Surface (#141c2a) panels, and restrained Blue Slate (#26324c) details. Add contextual dark dashboard imagery and atmospheric teal or violet glows as media treatment, not as new UI tokens. Include a trust-logo strip, metric proof points, outlined testimonials, one violet CTA, and a dense multi-column footer. Preserve generous vertical pauses between major sections.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width navy hero with a centered headline, agency trust strip, and atmospheric media. | Agency trust proof, Primary message first | Large white headline, Monochrome logo row, Soft teal glow |
| 2 | other | Single-column visual interlude with extensive dark space and a centered statement over media. | Problem framing, Narrative pause | Large glowing circular visual, Muted centered copy |
| 3 | stats | Centered section introduction followed by a four-column row of metrics. | Benefits overview, Numeric proof points | Small green icons, Bold metric labels, Muted descriptions |
| 4 | feature-split | Two-column feature area pairing an eyebrow and copy with product media. | Capability explanation, Product proof | Colored eyebrow, Strong white heading, Dark dashboard image |
| 5 | integrations | Centered platform statement, program label, horizontal integration marks, and product imagery. | Program discovery, Platform breadth | Centered headline, Horizontal program strip, Dashboard panels |
| 6 | product-showcase | Wide, dark product-interface showcase with dashboard panels spanning the section. | Product inspection, Visual capability proof | Dense dashboard panels, Muted teal highlights, Layered interface imagery |
| 7 | testimonials | Horizontally arranged testimonial cards with a centered section heading. | Social proof, Customer feedback | Outlined dark cards, App or agency marks, Star ratings |
| 8 | cta | Centered closing message and compact action over a subtle atmospheric glow. | Demo conversion, Single primary action | Centered bold heading, Violet pill CTA, Soft gradient media |
| 9 | footer | Dense multi-column link groups with brand mark and a bottom legal and app-store row. | Product navigation, Support access, Legal links | Small muted labels, Column link lists, App-store badges |

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