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

# Turn.io · Design System

> Human-centered health services in a bold green canvas

**Theme:** light · **Industry:** health · **Source:** https://www.turn.io/ · **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._

Turn.io presents a WhatsApp-based patient-care platform through a deep-green hero, vivid orange calls to action, and evidence-rich health stories. Its long homepage alternates calm white content with purple product sections, soft pastel feature cards, and documentary-style portraits.

## North star

Anchor the page in deep green, then use clear DM Sans hierarchy, human health imagery, and distinct color-coded modules to make complex care workflows feel approachable.

## Overview

The page opens on a deep forest-green hero that anchors the brand, with pale mint display text and a brighter green highlight picking out “WhatsApp.” A cyan announcement strip and orange pill CTA provide the sharpest color contrast. DM Sans carries everything from oversized, compact headlines to clear navigation and small supporting copy; weights do the hierarchy work rather than decorative type treatments. The layout uses a broad centered content area, generous section breaks, and modular cards. White backgrounds give the feature grid and customer evidence room to breathe, while saturated purple and pale lavender distinguish the journey-automation and toolkit sections. Photography focuses on patients and health workers, paired with interface mockups that make the software concrete. Rounded card silhouettes, restrained hairlines, and minimal shadow keep the page approachable and clean despite its long, information-dense structure.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas and feature backgrounds; also used for text and buttons on dark sections. |
| Soft Hairline | `#f0f0f0` | `--color-soft-hairline` | neutral | Subtle borders and separators; keep it quiet against white surfaces. |
| Muted Slate | `#7a7a7a` | `--color-muted-slate` | neutral | Muted supporting copy and footer text. |
| Plum Shadow | `#47264c` | `--color-plum-shadow` | surface | Dark plum inverse surface and accent, visible in secondary colored page elements. |
| Graphite Copy | `#3d3d3d` | `--color-graphite-copy` | neutral | Muted body text where black would feel too strong. |
| Canopy Green | `#137345` | `--color-canopy-green` | brand | Green accent for emphasis and inverse surfaces; appears in brand and health-oriented details. |
| Deep Teal | `#006c85` | `--color-deep-teal` | accent | Teal accent and inverse surface, reinforcing the healthcare palette. |
| Forest Canvas | `#0a3922` | `--color-forest-canvas` | brand | Signature dark-green hero and impact-statistics backgrounds. |
| Signal Orange | `#ff643b` | `--color-signal-orange` | accent | Primary Book a Call button and orange illustration details. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Footer canvas and strong headings or text on light surfaces. |
| Lavender Mist | `#eee2ff` | `--color-lavender-mist` | surface | Pale lavender toolkit section background. |
| Vivid Violet | `#460095` | `--color-vivid-violet` | brand | Saturated background for the patient-journey automation section. |
| Iris Accent | `#945ae3` | `--color-iris-accent` | accent | Purple text and accent details in the violet product area. |
| Mint Wash | `#d2f2e3` | `--color-mint-wash` | surface | Pale mint feature-card and highlighted health content background. |
| Footer Gray | `#a6a6a6` | `--color-footer-gray` | neutral | Low-emphasis footer copy and secondary labels. |
| Lilac Tint | `#d7c0ff` | `--color-lilac-tint` | accent | Light purple text and accents within the lavender toolkit content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#47264c` (Plum Shadow) · `--color-surface-2` → `#137345` (Canopy Green) · `--color-surface-3` → `#006c85` (Deep Teal) · `--color-surface-4` → `#0a3922` (Forest Canvas) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#7a7a7a` (Muted Slate) · `--color-text-subtle` → `#3d3d3d` (Graphite Copy) · `--color-border` → `#f0f0f0` (Soft Hairline) · `--color-accent` → `#47264c` (Plum Shadow) · `--color-accent-2` → `#137345` (Canopy Green) · `--color-accent-3` → `#006c85` (Deep Teal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#47264c` | 1.65:1 | fail |
| `#000000` | `#137345` | 3.57:1 | AA-large |
| `#000000` | `#006c85` | 3.48:1 | AA-large |
| `#7a7a7a` | `#ffffff` | 4.29:1 | AA-large |
| `#7a7a7a` | `#47264c` | 2.97:1 | fail |
| `#7a7a7a` | `#137345` | 1.37:1 | fail |
| `#7a7a7a` | `#006c85` | 1.4:1 | fail |
| `#3d3d3d` | `#ffffff` | 10.86:1 | AAA |
| `#3d3d3d` | `#47264c` | 1.17:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DM Sans | `--font-body` | webfont | 400, 600, 500, 700 | All page typography, from navigation and buttons to display headings and body copy. | Manrope |

- **DM Sans:** Use a clean sans-serif throughout; bold, large headlines are sentence case, with weight and scale creating hierarchy.

### Type scale — Perfect Fifth (ratio ≈ 1.46, base 17.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 116px | 600 | 1 | 0 | — | DM Sans | Oversized hero emphasis and large brand-scale statements. |
| h1 | 80px | 600 | 1.1 | 0 | — | DM Sans | Primary hero headline. |
| h2 | 72px | 600 | 1 | 0 | — | DM Sans | Major section titles, including feature and results headings. |
| h3 | 69px | 600 | 1 | 0 | — | DM Sans | Subsection headlines and prominent card titles. |
| h4 | 52px | 600 | 1.1 | -0.019em | — | DM Sans | Supporting feature and product headings. |
| body | 17.5px | 400 | 1.2 | 0 | — | DM Sans | Main explanatory and descriptive paragraph copy. |
| caption | 16px | 500 | 1.4 | 0 | — | DM Sans | Small labels, annotations, and supporting metadata. |
| button | 18px | 600 | 1.33 | 0 | — | DM Sans | Calls to action such as Book a Call and Take a tour. |
| nav | 18px | 600 | 0.89 | 0 | — | DM Sans | Primary navigation and prominent menu items. |

OpenType features in use: `"ss03"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 5, 8, 10, 12, 16, 20, 24, 30, 32, 40, 50, 55, 64, 120 px.
- Section rhythm 40px · element gap 5px · card padding 30px · max content width 1360px.

Use a broad centered content area, measured at a 1360px page maximum, with left-aligned hero copy and modular sections. The first screen pairs a large text column with layered product and human imagery; subsequent white sections use card grids and centered proof points. Maintain clear vertical pauses between content bands, with the measured spacing scale available for implementation. Overall density is compact within cards but spacious between major sections; alternate dark, white, purple, and pale-lavender bands to guide the long scroll.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `12px` · nav `8px` · xs `4px` · sm `8px` · md `12px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `hairline` (text): `rgba(0, 0, 0, 0.05) 0px 1px 1px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The design is largely flat, with color blocks and rounded card surfaces doing most of the grouping. Use light hairlines sparingly; the measured shadow is only a subtle hairline. Layered hero media and interface mockups create depth through overlap rather than strong drop shadows.

## Imagery

Use real, warm portraits of patients and clinicians as the emotional anchor, especially in the hero and impact section. Pair photography with crisp product-interface mockups and small, colorful illustration details inside feature cards. Crop media into rounded rectangles, keep interface imagery legible, and avoid ornamental stock-image styling. People and product visuals should feel integrated rather than isolated in a decorative gallery.

## Components

### Announcement strip

A bright cyan message bar sits above the dark-green navigation, with a small NEW badge and an underlined learn-more link.

### Pill CTA

Book a Call uses a rounded pill shape; primary CTA is orange with white text, with a white-and-black variant in navigation.

### Hero composition

Large left-aligned headline and short copy sit opposite overlapping clinician photography and appointment-message UI.

### Feature cards

A multi-row grid of rounded pastel cards pairs concise benefit headings with small product or messaging illustrations.

### Customer proof card

A testimonial combines a light cyan text panel, prominent quote, measured outcomes, and a clinician portrait.

### Colored product bands

Use a saturated violet journey-automation band and pale lavender toolkit area to frame product content.

### Impact section

A full-bleed dark-green panel centers a large reach statistic among portraits and partner marks.

### Measured component styles

- **Primary button** (“Book a Call”): background #ff643b · text #ffffff · radius 50px · padding 14px 32px · 600 18px DM Sans
- **Secondary button** (“Book a Call”): background #ffffff · text #000000 · radius 50px · padding 13.4px 24px · 600 18px DM Sans
- **Link** (“NEW Booking is now available. Fill your ”): background #00b4dc · text #000000 · radius 0px · padding 0px · 400 16px DM Sans
- **Card** (“Caregiver Companion Noora Health collabo”): background #f2f2f2 · text #000000 · radius 24px · padding 30px · 400 16px DM Sans
- **Navigation item** (“Product”): transparent background · text #ffffff · radius 0px · padding 0px · 600 18px DM Sans

## Do

- Use Forest Canvas (#0a3922) to anchor hero and impact sections.
- Set all interface text in DM Sans or a close sans-serif substitute.
- Reserve Signal Orange (#ff643b) for high-priority CTA emphasis.
- Keep headlines large, bold, and sentence case.
- Use soft pastel cards for individual patient-care benefits.
- Pair product UI with authentic healthcare photography.
- Separate major content groups with clear background-color bands.

## Don't

- Do not introduce colors outside the measured palette.
- Do not make every section dark; retain broad white content areas.
- Do not use heavy shadows to separate cards.
- Do not crowd the hero with additional copy or controls.
- Do not replace the human photography with decorative 3D art.
- Do not use sharp, square corners for prominent cards and buttons.

## Agent prompt

Build a new Turn.io-style healthcare SaaS page with a clear, human-centered tone. Use Forest Canvas (#0a3922) for the hero and impact moments, Gallery White (#ffffff) for core content, and Signal Orange (#ff643b) for the primary CTA. Create distinct product modules with Vivid Violet (#460095) and Lavender Mist (#eee2ff), and use Mint Wash (#d2f2e3) for selected feature cards. Set the entire interface in DM Sans, using bold oversized sentence-case headings and readable compact body copy. Pair authentic patient or clinician photography with crisp messaging and dashboard mockups. Favor a broad centered layout, modular rounded cards, restrained borders, and minimal shadows. Keep generous pauses between sections, alternate background bands for long-page rhythm, and make each CTA visually unmistakable.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark-green full-width hero; copy and CTAs left, overlapping patient and product imagery right. | Announcement link, Primary and secondary CTA, Language and login navigation | Cyan announcement strip, Forest-green canvas, Mint display text, Rounded orange CTA |
| 2 | feature-grid | White section with a centered heading and two-column sequence of pastel benefit cards. | Scan benefits quickly, Feature-led explanation | Rounded pastel cards, Small messaging and interface illustrations |
| 3 | testimonials | Centered section title above a wide testimonial card, with partner marks below. | Customer quote, Outcome metrics, Customer identity | Cyan testimonial panel, Portrait media, Metric row |
| 4 | logo-cloud | A small centered brand-mark strip between the proof section and the next message. | Partner recognition | Compact logos, Light background |
| 5 | other | White full-width statement block with a large centered headline and supporting line. | Lead with adoption insight, Problem framing | Oversized dark-green typography, Small WhatsApp mark |
| 6 | comparison | Two-column comparison with text-led lists and a product inbox visual. | Compare current and improved workflows, Show operational benefits | Pale contrasting panels, Checklist rows, Product screenshot |
| 7 | how-it-works | Full-width saturated violet band with a heading and four evenly distributed journey stages. | Explain the end-to-end journey, Scan four stages | Vivid violet canvas, Colorful stage icons, Four-column content |
| 8 | product-showcase | Pale lavender two-column section with feature navigation on the left and product UI on the right. | Browse product capabilities, Show selected capability | Lavender canvas, Purple text accents, Large interface mockup |
| 9 | logo-cloud | White centered statement introducing organizations around the world. | Establish global credibility | Large black heading, Open white space |
| 10 | product-grid | Horizontally arranged cards showing multiple health programs and service categories. | Explore use cases, Compare program categories | Light gray rounded cards, Organization marks, Text-led descriptions |
| 11 | stats | Full-bleed dark-green impact panel with centered statistic, floating portraits, and investor marks. | Highlight reach, Support with investor credibility | Large mint statistic, Circular portrait crops, Partner logo row |
| 12 | cta | Centered content on a full-width plum section with colorful circular decoration. | Single focused CTA | Plum background, Large rounded shapes, Orange pill button |
| 13 | footer | Black full-width footer with a brand area and several compact link columns. | Browse grouped resources, Find company and social links | Black canvas, White and gray copy, Multi-column link lists |

## Source CSS custom properties (selected)

```css
--cs-testi-font: "DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
```

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