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

# Phoebe — Alden Acquisition Announcement · Design System

> Calm editorial clarity with a confident teal anchor.

**Theme:** light · **Industry:** saas · **Source:** https://www.phoebe.work/blog/phoebe-acquires-alden · **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._

Phoebe presents its acquisition announcement as a restrained editorial page, with a centered headline and a bold, dark brand graphic. A cloud-backed demo callout and deep-teal footer provide the strongest color contrasts.

## North star

Keep the article calm and spacious on white, using deep teal for identity and violet only for decisive action.

## Overview

The page uses a white canvas to keep attention on the acquisition story, while deep teal (#002429) gives the headline and footer a distinctly branded anchor. Most copy is set in slate gray (#374151) with subdued gray-green secondary text; violet (#5533ee) is reserved for the primary pill CTA. The article opens with centered breadcrumb and display heading, then gives a wide, black-backed Phoebe-and-Alden graphic substantial breathing room. Below it, a narrow text column restores an editorial reading rhythm. A full-width cloud-image CTA introduces pale cyan (#71cff0) and mist gray (#dbe3e3) as atmospheric colors rather than core interface fills. MDSystem handles navigation, body text, and controls; PolymathDisplay distinguishes the headline. The layout stays flat and spacious, with thin neutral dividers and rounded controls rather than pronounced shadows or card framing.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, article background, button text, and light contrast in the brand mark. |
| Slate Ink | `#374151` | `--color-slate-ink` | neutral | Primary body and navigation text; also appears in a subtle dark gradient. |
| Deep Teal | `#002429` | `--color-deep-teal` | brand | Brand-colored page heading and full-width footer background. |
| Soft Divider | `#e5e7eb` | `--color-soft-divider` | semantic | Fine navigation and interface hairlines against the light canvas. |
| Night Slate | `#111827` | `--color-night-slate` | neutral | Dark link and navigation detail; also contributes to the gradient. |
| Muted Teal Gray | `#42595e` | `--color-muted-teal-gray` | neutral | Secondary copy with a subdued, cool green-gray tone. |
| Footer Sage | `#73878a` | `--color-footer-sage` | neutral | Low-emphasis footer text and supporting labels. |
| Signal Violet | `#5533ee` | `--color-signal-violet` | accent | Primary Get Started button and small brand accent. |
| Teal Hairline | `#1a3a3f` | `--color-teal-hairline` | semantic | Subtle footer border detail, distinct from the page's main surface. |
| Graphic Black | `#000000` | `--color-graphic-black` | neutral | Navigation details and the large black-backed acquisition graphic; treat the graphic as media, not a page surface. |
| Cloud Cyan | `#71cff0` | `--color-cloud-cyan` | accent | Appears in the cloud-image CTA background and its gradient, not as a general UI fill. |
| Mist Gray | `#dbe3e3` | `--color-mist-gray` | neutral | Pale gradient transition within the cloud-image CTA artwork. |
| Quiet Sage | `#8c9c9e` | `--color-quiet-sage` | neutral | Muted heading detail, used as secondary text rather than a prominent brand color. |
| Pale Divider | `#ccd3d4` | `--color-pale-divider` | semantic | Occasional subdued border or text detail; keep it secondary to the main hairline. |
| Fogged Teal | `#829494` | `--color-fogged-teal` | neutral | Low-contrast navigation detail, not a dominant text or surface color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#002429` (Deep Teal) · `--color-text` → `#374151` (Slate Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#42595e` (Muted Teal Gray) · `--color-border` → `#e5e7eb` (Soft Divider) · `--color-accent` → `#5533ee` (Signal Violet) · `--color-accent-2` → `#71cff0` (Cloud Cyan) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#374151` | `#ffffff` | 10.31:1 | AAA |
| `#374151` | `#002429` | 1.59:1 | fail |
| `#ffffff` | `#002429` | 16.35:1 | AAA |
| `#42595e` | `#ffffff` | 7.44:1 | AAA |
| `#42595e` | `#002429` | 2.2:1 | fail |
| `#5533ee` | `#ffffff` | 6.79:1 | AA |
| `#5533ee` | `#002429` | 2.41:1 | fail |

### Gradients

- `linear-gradient(to right bottom, rgb(17, 24, 39), rgb(55, 65, 81))`
- `url("https://www.phoebe.work/images/bg-clouds-cta.webp"), linear-gradient(rgb(113, 207, 240) 0%, rgb(219, 227, 227) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MDSystem | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, captions, buttons, and links. | Inter |
| PolymathDisplay | `--font-display` | webfont | 600, 700 | Main article headline and other display headings. | DM Sans |

- **MDSystem:** Use the measured regular-to-bold weights; body copy has subtly open tracking and relaxed leading. Navigation and controls stay compact and mixed case.
- **PolymathDisplay:** Use a strong semibold display treatment with natural casing; keep the headline centered and visually distinct from the reading text.

### Type scale — Custom (ratio ≈ 2.667, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | 1.25 | 0 | — | PolymathDisplay | Centered article title beneath the breadcrumb. |
| body | 18px | 400 | 1.6 | 0.01em | — | MDSystem | Article paragraphs in the narrow reading column. |
| caption | 14px | 400 | 1.43 | 0 | — | MDSystem | Breadcrumb and small supporting labels. |
| button | 14px | 500 | 1.43 | 0 | — | MDSystem | Primary and secondary CTA labels. |
| nav | 14px | 500 | 1.43 | 0 | — | MDSystem | Header navigation and compact footer navigation. |
| link | 18px | 500 | 1.6 | 0.01em | — | MDSystem | Inline Alden references and demo or career links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 12, 16, 20, 23, 24, 32, 36, 40, 48, 64 px.
- Section rhythm 64px · element gap 8px · card padding — · max content width 1232px.

A compact top navigation sits above a centered editorial hero. The content uses a measured 1232px page maximum, with the main article image spanning broadly and the reading copy kept in a much narrower single column. The article title and CTA heading are centered; the body remains left aligned for comfortable reading. Sections are separated by generous white space, followed by a broad CTA band and a three-column dark footer. Overall density is comfortable rather than card-heavy.

## Shape & elevation

- Radius: button `9999px` · nav `8px` · xs `8px` · pill `9999px`
- Shadow `hairline` (text): `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`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat: white sections sit directly on the canvas, with no meaningful shadow system. Hairline borders separate small interface details, while the CTA background and acquisition graphic provide contrast through media and color rather than layered cards. The header's divider remains subtle.

## Imagery

The article lead is a wide black-backed brand graphic showing the Phoebe and Alden marks in white; it is a media asset, not a reusable black interface surface. The lower CTA uses a pale cloud image with cyan-to-mist tones and soft, pastel edges. There is no dominant photography or 3D treatment; preserve the calm framing and avoid adding decorative imagery to the article copy.

## Components

### Header navigation

White horizontal header with Phoebe mark at left, compact dark navigation at right, and a violet pill-shaped Get Started CTA.

### Article heading

Centered breadcrumb followed by a large semibold PolymathDisplay headline in deep teal.

### Acquisition artwork

Wide, black-backed lead graphic with white Phoebe and Alden marks; keep this treatment confined to the image.

### Article body

Short left-aligned paragraphs in a narrow column, using MDSystem at the measured 18px body size and slate text.

### Scheduling CTA

Centered heading and supporting copy over cloud artwork, with a violet Book a Demo pill and a quieter secondary Careers link.

### Footer

Deep-teal full-width band with brand and supporting details on the left, grouped link columns on the right, and subdued small text.

### Measured component styles

- **Primary button** (“Get Started”): background #5533ee · text #ffffff · radius 9999px · padding 8px 16px · 600 14px MDSystem
- **Link** (“Alden”): transparent background · text #111827 · radius 0px · padding 0px · 500 18px MDSystem
- **Navigation item** (“Home Care Scheduling About Caregiver Ass”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 16px MDSystem

## Do

- Use white as the dominant canvas.
- Reserve deep teal for branded headings and the footer.
- Keep the article title centered above its lead graphic.
- Set the article copy in a narrow, left-aligned column.
- Use violet for the primary action, not general decoration.
- Treat cloud cyan and mist gray as CTA artwork colors.
- Maintain generous breathing room between content blocks.

## Don't

- Do not turn the black lead graphic into a page-wide background.
- Do not add shadows to otherwise flat sections.
- Do not use the CTA gradient as a general interface theme.
- Do not center-align the article paragraphs.
- Do not crowd the headline and lead media together.
- Do not introduce extra bright accent colors.
- Do not frame every section as a card.

## Agent prompt

Build a new Phoebe-style editorial page on a Gallery White (#ffffff) canvas. Use Deep Teal (#002429) for brand-forward headings and dark footer surfaces, Slate Ink (#374151) for readable copy, and Signal Violet (#5533ee) only for the primary rounded CTA. Set interface and body text in MDSystem or a close sans-serif substitute, with a distinct display face for the centered headline. Keep navigation compact, article content narrow and left aligned, and lead media wide with clear surrounding whitespace. If using a CTA banner, treat Cloud Cyan (#71cff0) and Mist Gray (#dbe3e3) as atmospheric image colors, not default UI fills. Keep sections flat, dividers subtle, and footer links grouped in a restrained multi-column layout.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-detail | Centered breadcrumb and title, wide lead graphic, then a narrow single-column article. | Editorial reading flow, Inline brand links | Centered display heading, Wide lead media, Left-aligned body copy |
| 2 | cta | Broad cloud-art banner with centered heading, supporting copy, and two actions. | Primary demo action, Secondary careers link | Cloud-image background, Violet pill CTA, Centered text |
| 3 | footer | Full-width dark band with brand details at left and grouped link columns at right. | Grouped site navigation, Legal links | Deep-teal surface, Multi-column links, Muted supporting text |

## Source CSS custom properties (selected)

```css
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card-foreground: 0 0% 3.9%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--radius: 0.5rem;
```

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