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

# Tedy · Design System

> Flexible benefits, styled with warmth and clarity

**Theme:** light · **Industry:** saas · **Source:** https://www.tedy.app/us/ · **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._

Tedy presents an employee benefits platform through a bright editorial layout, expressive serif headlines, and candid workplace photography. Vivid pink calls to action and occasional lavender surfaces add energy to an otherwise restrained white canvas.

## North star

Keep the page predominantly white and editorial, using oversized serif headlines, candid human imagery, and pink pill CTAs as its defining signals.

## Overview

The page builds its identity around a clean white canvas, near-black text, and a restrained pink-and-lavender accent system. White space keeps the long landing page airy, while a lavender feature band and softly tinted product imagery create occasional visual pauses. Large PP Right Serif Casual headings bring an editorial, expressive character; Montreal Neue handles navigation, paragraphs, labels, and buttons in a compact, legible sans-serif voice. The hero pairs oversized stacked copy with a three-image lifestyle collage, and later sections alternate product visuals with concise explanatory text. Bright pink pill-shaped CTAs provide the clearest interaction cue. Rounded image frames and cards soften the otherwise crisp layout, while thin pale-gray borders define a few content elements without making the page feel boxed in. Dark inverse surfaces are concentrated in the closing demo treatment and selected UI imagery rather than used as the page-wide background.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, open section backgrounds, and pale text on inverse surfaces. |
| Midnight Ink | `#030712` | `--color-midnight-ink` | neutral | Main headline, body, navigation, and other high-contrast text. |
| Tedy Pink | `#fd1774` | `--color-tedy-pink` | accent | Primary demo buttons and the strongest interaction highlight. |
| Lavender Field | `#e5d6ff` | `--color-lavender-field` | surface | Full-width benefits feature band and selected soft card surfaces. |
| Slate Gray | `#6b7280` | `--color-slate-gray` | semantic | Muted supporting copy and secondary explanatory text. |
| Quiet Border | `#e5e7eb` | `--color-quiet-border` | semantic | Subtle card and content-divider hairlines. |
| Deep Stage | `#020202` | `--color-deep-stage` | surface | Dark inverse section backing, most notably around the closing demo panel. |
| Soft Black | `#171717` | `--color-soft-black` | surface | Dark UI and inverse button details, distinct from the white main canvas. |
| Graphite Line | `#292929` | `--color-graphite-line` | semantic | Dark hairline or outline detail, mainly within inverse and interface elements. |
| Warm Parchment | `#f4efe9` | `--color-warm-parchment` | surface | Warm neutral card fill, used sparingly in supporting UI. |
| Oat Mist | `#ece8e1` | `--color-oat-mist` | surface | Secondary warm card tone within supporting interface visuals. |
| Charcoal Edge | `#2f2f2f` | `--color-charcoal-edge` | semantic | Dark outline and gradient detail, not a dominant page surface. |
| Pale Gray | `#cccccc` | `--color-pale-gray` | semantic | Occasional low-emphasis text detail. |
| Silver Text | `#a7a7a7` | `--color-silver-text` | semantic | Muted link, button, or supporting text detail. |
| Lilac Haze | `#e6deff` | `--color-lilac-haze` | accent | Soft transition tint in decorative gradients and product-facing visuals. |
| Violet Glow | `#a33ffb` | `--color-violet-glow` | accent | Purple highlight within gradient treatments, not a dominant flat UI color. |
| Orchid Light | `#c088fd` | `--color-orchid-light` | accent | Lighter purple gradient highlight used in decorative visual treatments. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e5d6ff` (Lavender Field) · `--color-surface-2` → `#020202` (Deep Stage) · `--color-surface-3` → `#171717` (Soft Black) · `--color-surface-4` → `#f4efe9` (Warm Parchment) · `--color-text` → `#030712` (Midnight Ink) · `--color-text-muted` → `#6b7280` (Slate Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e5e7eb` (Quiet Border) · `--color-accent` → `#fd1774` (Tedy Pink) · `--color-accent-2` → `#a33ffb` (Violet Glow) · `--color-accent-3` → `#c088fd` (Orchid Light) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#030712` | `#ffffff` | 20.13:1 | AAA |
| `#030712` | `#e5d6ff` | 14.76:1 | AAA |
| `#030712` | `#020202` | 1.03:1 | fail |
| `#030712` | `#171717` | 1.12:1 | fail |
| `#6b7280` | `#ffffff` | 4.83:1 | AA |
| `#6b7280` | `#e5d6ff` | 3.54:1 | AA-large |
| `#6b7280` | `#020202` | 4.29:1 | AA-large |
| `#6b7280` | `#171717` | 3.71:1 | AA-large |
| `#ffffff` | `#e5d6ff` | 1.36:1 | fail |
| `#ffffff` | `#020202` | 20.75:1 | AAA |

### Gradients

- `radial-gradient(circle at 18% 24%, color(srgb 0.903373 0.868863 1) 0px, rgba(0, 0, 0, 0) 34%), radial-gradient(circle at 82% 26%, color(srgb 0.639373 0.248941 0.985098) 0px, rgba(0, 0, 0, 0) 32%), radial-gradient(circle `
- `radial-gradient(circle at 52% 18%, rgba(147, 51, 234, 0.18), rgba(0, 0, 0, 0) 34%), radial-gradient(circle at 22% 82%, rgba(253, 23, 116, 0.16), rgba(0, 0, 0, 0) 36%), radial-gradient(circle at 72% 94%, rgba(20, 184, 196`
- `radial-gradient(circle at 42% 0%, rgba(255, 255, 255, 0.68), rgba(0, 0, 0, 0) 48%), linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 44%, rgba(255, 255, 255, 0.28))`
- `linear-gradient(115deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0) 42%), radial-gradient(circle at 60% 50%, rgba(255, 255, 255, 0.2) 0px, rgba(255, 255, 255, 0.2) 1px, rgba(0, 0, 0, 0) 1px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Montreal Neue | `--font-body` | webfont | 400, 500 | Navigation, body copy, buttons, captions, and links | Inter |
| PP Right Serif Casual | `--font-display` | webfont | 500, 700 | Display and section headings | DM Serif Display |

- **Montreal Neue:** Use regular and medium weights; keep interface copy clean and compact, with restrained negative tracking in body and link text.
- **PP Right Serif Casual:** Use medium or bold weights for oversized editorial headlines; maintain tight line spacing and natural, non-uppercase casing.

### Type scale — Augmented Fourth (ratio ≈ 1.435, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 103.5px | 500 | 0.98 | 0 | — | PP Right Serif Casual | Oversized editorial display headline treatment. |
| h1 | 85.5px | 500 | 0.9 | -0.05em | — | PP Right Serif Casual | Hero headline and primary page-level heading. |
| h2 | 85px | 700 | 1.02 | -0.025em | — | PP Right Serif Casual | Large feature-section and content-block headings. |
| h3 | 80px | 500 | 0.9 | -0.065em | — | PP Right Serif Casual | Prominent supporting section titles. |
| h4 | 61px | 500 | 0.98 | -0.045em | — | PP Right Serif Casual | Smaller editorial headings within the section hierarchy. |
| body | 17px | 400 | 1.4 | -0.025em | — | Montreal Neue | Paragraphs describing platform benefits and features. |
| caption | 16.5px | 400 | 1.4 | -0.025em | — | Montreal Neue | Compact supporting copy and image/UI captions. |
| button | 15.5px | 500 | 1 | 0 | — | Montreal Neue | Short CTA labels such as “Book a demo.” |
| nav | 16px | 400 | 1.5 | 0 | — | Montreal Neue | Top navigation links and menu items. |
| link | 15.5px | 400 | 1.5 | -0.02em | — | Montreal Neue | Inline links and secondary navigation actions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 7, 8, 10, 12, 13, 14, 16, 18, 20, 24, 28, 32, 40, 48, 72, 80 px.
- Section rhythm 48px · element gap 20px · card padding — · max content width 1392px.

The page follows a comfortable long-form rhythm within a measured maximum content width of 1392px. Its hero is a two-column composition, with headline and copy beside a multi-image collage; later content alternates image and text placement, while the logo row and some feature content span broad horizontal areas. Most section backgrounds stay white, with a distinct lavender band as a break. Content is generally left-aligned, with centered headings in the category and lavender feature sections. Use generous qualitative whitespace between blocks, rather than dense card stacking.

## Shape & elevation

- Radius: button `9999px` · card `45px` · media `32px` · xs `16px` · sm `24px` · md `30px` · lg `32px` · xl `45px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(17, 24, 39, 0.16) 0px 28px 52px 0px`
- Shadow `lg` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(253, 23, 116, 0.6) 0px 14px 35px -18px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.03) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.35) 0px 30px 80px 0px`
- Motion: standard transition `0.16s ease` on interactive elements.

The interface is mostly flat: whitespace, image crops, and pale hairlines establish structure more than shadows. Cards and media use generously rounded corners, while inverse demo artwork creates depth through layered dark surfaces and subtle lighting. Reserve pronounced shadow treatment for product imagery or focal UI, not ordinary text sections.

## Imagery

Use candid lifestyle and workplace photography to keep the benefits product grounded in real people. The hero uses a prominent central portrait image flanked by smaller photos, all cropped into rounded rectangular frames. Later sections mix people-at-work images with product UI screenshots and category illustrations. Product visuals may carry pink, lavender, or warm neutral tints; keep those treatments within the imagery instead of allowing them to overwhelm the white page.

## Components

### Top navigation

A compact horizontal header with logo, Montreal Neue links, country selector, pink “Book a demo” pill, and dark sign-in pill.

### Hero collage

Pair an oversized serif headline and short supporting copy with a large lifestyle image and two smaller stacked image crops.

### Primary CTA

Use a white-text “Book a demo” label on #fd1774 with a fully pill-shaped silhouette.

### Logo strip

A restrained horizontal row of customer marks below a short trust statement, set on white.

### Feature split

Combine concise text with product UI or lifestyle imagery; alternate which side carries the image across sections.

### Lavender feature band

Use #e5d6ff as a full-width visual break for a centered heading and supporting feature content.

### Closing demo panel

Place a prominent serif CTA over layered dark artwork, with pink action and small secondary links.

### Measured component styles

- **Primary button** (“Book a demo”): background #fd1774 · text #ffffff · radius 999px · padding 12.8px 20px · 500 15.36px Montreal Neue
- **Link** (“Terms & conditions”): transparent background · text #ffffff · radius 0px · padding 0px · 400 15.68px Montreal Neue
- **Card** (“Select from 20 wellness categories that ”): transparent background · text #030712 · border 1px solid #e5e7eb · radius 0px · padding 0px · 400 16px Montreal Neue
- **Navigation item** (“Overview Solutions Why Tedy? Resources P”): transparent background · text #030712 · radius 0px · padding 0px · 400 16px Montreal Neue

## Do

- Keep the main canvas white and the section rhythm spacious.
- Use the serif display face for major editorial headlines.
- Use Montreal Neue for navigation, body copy, and controls.
- Make pink pill buttons the clearest interaction cue.
- Use lavender as a selective section-level color break.
- Favor candid people photography in rounded crops.

## Don't

- Do not turn the whole page into a dark theme.
- Do not use purple as the default CTA color.
- Do not make every section a bordered card grid.
- Do not replace the editorial serif headlines with generic sans-serif display type.
- Do not let UI screenshots dominate the human photography.
- Do not add unsupported colors, dimensions, or spacing values.

## Agent prompt

Build a new Tedy-style SaaS page with a bright editorial feel. Use Gallery White (#ffffff) for the main canvas and Midnight Ink (#030712) for primary text. Set major headings in an expressive serif similar to PP Right Serif Casual, and use a clean sans-serif like Inter for navigation, body copy, and controls. Create spacious split layouts with candid workplace photography in rounded crops, interspersed with product UI visuals. Reserve Tedy Pink (#fd1774) for pill-shaped primary CTAs and use Lavender Field (#e5d6ff) for an occasional broad section band. Keep secondary copy muted and borders subtle. Favor alternating text-image sections and a restrained logo row; finish with a dark, layered demo panel rather than making the whole page dark. Match the measured hierarchy without inventing unsupported measurements.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Header above a two-column hero: stacked serif message and CTAs beside a three-image collage. | Primary demo action, Secondary video action | Large editorial headline, Rounded photo collage, Pink pill CTA |
| 2 | logo-cloud | A compact trust heading followed by a wide horizontal row of customer logos. | Social proof | Logo strip, Minimal white background |
| 3 | feature-split | Single-column statement paired with a benefits-platform product visual. | Value proposition | Serif heading, Product UI image |
| 4 | how-it-works | Product visual and explanatory text arranged as a spacious split section. | Expert demo link, Process explanation | Soft-tinted product card, Serif section heading |
| 5 | product-showcase | Centered category introduction with product imagery and category examples across a long section. | Browse benefit options, Explore categories | Centered title, Product imagery, Category visuals |
| 6 | feature-grid | Lavender section band with a centered introduction and three-column feature content. | Scan platform benefits | Lavender band, Centered heading, Three-column layout |
| 7 | feature-split | Employer-focused copy and checklist opposite a workplace photo. | Review employer capabilities | Checklist rows, Rounded workplace photo |
| 8 | feature-split | Employee-focused content and checklist paired with a lifestyle image. | Review employee experience | Checklist rows, Rounded lifestyle photo |
| 9 | cta | Centered headline and actions inside a layered dark closing panel, with small footer links below. | Book a demo, Watch a video, Access trust and policy links | Dark layered panel, Pink CTA, Serif heading |

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