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

# Baba · Design System

> Healthcare advocacy with warmth, clarity, and human connection

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

Baba’s homepage pairs a bold red opening with calm cream content sections to make healthcare advocacy feel approachable and dependable. Human photography, clear typography, testimonials, and a prominent eligibility path balance emotional reassurance with practical guidance.

## North star

Use bold, welcoming red for the emotional opening, then let warm cream, legible type, and human proof make the service feel trustworthy.

## Overview

The visual strategy opens with a full-width, saturated red field, white navigation and copy, and a large rounded photograph of older adults in motion. The hero’s image and generous surrounding red space make the brand feel energetic and human, while concise copy and paired calls to action keep the offer clear. Below, a warm cream canvas provides a quieter reading environment for service information, dark outcome panels, testimonials, and FAQs. Pale blush appears as a soft CTA band; deep brown-black anchors the metrics panel and supporting text. Söhne headings use confident, compact line breaks, while Atkinson Hyperlegible Next carries navigation, body copy, and controls for clarity. The page alternates broad section bands with restrained cards and hairline dividers rather than dense decoration. Rounded media, cards, and buttons soften the interface; real-life photography gives the healthcare service a personal, reassuring face.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Baba Cream | `#faf9f1` | `--color-baba-cream` | brand | Main page canvas and the broad, quiet background for lower informational sections. |
| Advocate Red | `#bc2823` | `--color-advocate-red` | brand | Deep brand red for links, footer, red section bands, and white-button CTA text. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Measured heading and text color; use for high-contrast headings on light content sections. |
| Muted Cocoa | `#5a4f49` | `--color-muted-cocoa` | neutral | Secondary copy on light backgrounds, including explanatory and supporting text. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Hero and footer text, cards, and inverse CTA buttons. |
| Blush Wash | `#f5dfde` | `--color-blush-wash` | surface | Soft pink section surface, including the closing CTA band. |
| Warm Hairline | `#dbd8d1` | `--color-warm-hairline` | semantic | Subtle borders and separators against cream and white surfaces. |
| Night Merlot | `#1d0b10` | `--color-night-merlot` | surface | Near-black burgundy surface for the outcomes and statistics panel. |
| Card Edge | `#e4e3da` | `--color-card-edge` | semantic | Thin outline around testimonial cards; a quiet, warm gray-beige edge. |
| Dusty Rose | `#d0c2c1` | `--color-dusty-rose` | semantic | Secondary section and gradient detail; keep subordinate to the main red. |
| Action Red | `#ea1111` | `--color-action-red` | accent | Primary filled CTA background, with white label text. |
| Soft Coral | `#faafaa` | `--color-soft-coral` | accent | Light accent within red gradient or section transitions, not a main text color. |
| Pale Gray | `#e9e7e8` | `--color-pale-gray` | neutral | Minor pale text detail; avoid using as primary copy on light surfaces. |
| Berry Charcoal | `#3f2f34` | `--color-berry-charcoal` | neutral | Supporting dark detail, chiefly measured in borders and small interface elements. |
| Roasted Ink | `#2a1d18` | `--color-roasted-ink` | neutral | Card and body text on white or cream, including testimonial copy. |
| Smoky Taupe | `#645953` | `--color-smoky-taupe` | neutral | Minor secondary text tone for supporting copy on light backgrounds. |

### Semantic aliases

`--color-canvas` → `#faf9f1` (Baba Cream) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#f5dfde` (Blush Wash) · `--color-surface-3` → `#1d0b10` (Night Merlot) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#5a4f49` (Muted Cocoa) · `--color-text-subtle` → `#ffffff` (Clean White) · `--color-border` → `#dbd8d1` (Warm Hairline) · `--color-accent` → `#bc2823` (Advocate Red) · `--color-accent-2` → `#ea1111` (Action Red) · `--color-accent-3` → `#faafaa` (Soft Coral) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#faf9f1` | 19.89:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f5dfde` | 16.49:1 | AAA |
| `#000000` | `#1d0b10` | 1.11:1 | fail |
| `#5a4f49` | `#faf9f1` | 7.51:1 | AAA |
| `#5a4f49` | `#ffffff` | 7.93:1 | AAA |
| `#5a4f49` | `#f5dfde` | 6.23:1 | AA |
| `#5a4f49` | `#1d0b10` | 2.39:1 | fail |
| `#ffffff` | `#faf9f1` | 1.06:1 | fail |
| `#ffffff` | `#f5dfde` | 1.27:1 | fail |

### Gradients

- `radial-gradient(85% 85% at 16.036% 20.9065%, rgba(61, 0, 23, 0.22), rgba(0, 0, 0, 0) 70%), radial-gradient(80% 80% at 83.705% 73.8345%, rgba(250, 36, 36, 0.35), rgba(0, 0, 0, 0) 70%), linear-gradient(rgb(188, 40, 35) 0%,`
- `radial-gradient(85% 85% at 16.036% 20.9065%, rgba(250, 36, 36, 0.3), rgba(0, 0, 0, 0) 70%), radial-gradient(90% 90% at 83.705% 73.8345%, rgba(61, 0, 23, 0.26), rgba(0, 0, 0, 0) 70%), radial-gradient(140% 120% at 15% 0%, `

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Atkinson Hyperlegible Next | `--font-body` | webfont | 400, 500, 600 | Navigation, body copy, buttons, captions, and readable interface text. | Atkinson Hyperlegible |
| Söhne | `--font-display` | webfont | 600, 500, 400 | Display and heading hierarchy across hero, section titles, and card headings. | Inter |

- **Atkinson Hyperlegible Next:** Use regular-to-medium weights for clear, approachable reading; sentence case and unembellished tracking.
- **Söhne:** Measured weights span regular to semibold; compact negative tracking gives headlines a confident, close-set shape.

### Type scale — Perfect Fourth (ratio ≈ 1.305, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 68px | 600 | 1 | -0.03em | — | Söhne | Large hero or campaign headlines, set as a bold focal point. |
| h1 | 56px | 600 | 1.05 | -0.03em | — | Söhne | Primary hero heading, with compact lines and strong contrast. |
| h2 | 48px | 400 | 1.17 | -0.045em | — | Söhne | Major section headings, including testimonials and CTA. |
| h3 | 36px | 600 | 1.15 | -0.02em | — | Söhne | Subsection titles and prominent content-card headings. |
| h4 | 24px | 500 | 1.25 | -0.015em | — | Söhne | Smaller card headings or FAQ question labels. |
| body | 18px | 400 | 1.6 | 0 | — | Atkinson Hyperlegible Next | Service descriptions and explanatory paragraphs. |
| caption | 12px | 400 | 1.63 | 0 | — | Atkinson Hyperlegible Next | Small metadata, footnotes, and testimonial details. |
| button | 15px | 500 | 1.5 | 0 | — | Atkinson Hyperlegible Next | CTA labels and compact action controls. |
| nav | 15px | 400 | 1.63 | 0 | — | Atkinson Hyperlegible Next | Header and footer navigation links. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 2, 4, 8, 10, 12, 14, 16, 20, 24, 32, 36, 40, 44, 64, 72, 80 px.
- Section rhythm 32px · element gap 8px · card padding 36px · max content width —.

The homepage uses broad, full-width color bands, with content arranged in centered, restrained-width groups rather than a visible grid system. The hero pairs left-aligned copy and CTAs with a large right-side photo; lower content shifts to cards, a dark metric panel, and a two-column FAQ. A blush CTA creates a distinct transition before the footer. The spacing feels compact between related controls but generous between major sections, leaving breathing room around the hero and content blocks.

## Shape & elevation

- Radius: button `12px` · card `16px` · media `24px` · nav `9999px` · xs `12px` · sm `14px` · md `16px` · lg `24px` · xl `32px` · pill `9999px`
- Shadow `sm` (button, card, other): `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(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `lg` (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(42, 29, 24, 0.16) 0px 12px 30px 0px`
- Shadow `xl` (nav): `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(0, 0, 0, 0.28) 0px 22px 70px 0px`
- Shadow `hairline` (other): `rgba(255, 255, 255, 0.55) 0px 0px 0px 0px`
- Shadow `hairline-2` (other): `rgba(255, 255, 255, 0.27) 0px 0px 0px 5.57076px`
- Shadow `hairline-3` (other): `rgba(255, 255, 255, 0.075) 0px 0px 0px 9.53375px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, using large color fields and subtle card borders instead of prominent shadows. Testimonial cards sit on cream with fine warm-gray outlines and restrained depth. Rounded media and card corners provide separation; the dark metrics panel relies on contrast and internal dividers rather than extra decoration.

## Imagery

Photography is the defining visual: candid older adults outdoors, framed as a large rounded rectangle in the hero. The image’s warm, active, social feeling supports the promise of human advocacy; it is visually integrated into the red field rather than isolated in a white frame. Small floating caption elements appear over the photo in the page screenshot. No illustrative or 3D style defines the brand.

## Components

### Header navigation

Brand mark and compact white links sit over the red hero; include phone and login details, plus a white rounded Get started control.

### Hero CTA pair

Place a white filled Get started button with red text beside a transparent, white-outlined Am I eligible? button.

### Rounded hero photograph

Large rounded landscape image of older adults outdoors, with small translucent service-caption pills layered over the image.

### Outcomes panel

Near-black burgundy rounded section with a bold outcome headline, action link, and horizontally arranged metric cells.

### Testimonial cards

Three white cards on cream with thin #e4e3da outlines, dark copy, customer details, and compact review marks.

### FAQ list

Question-and-answer rows on cream, with understated separators and simple expand indicators.

### Closing CTA and footer

Center the closing message and paired actions on blush, followed by a strong red footer with grouped links and small-print details.

### Measured component styles

- **Primary button** (“Get started”): background #ea1111 · text #ffffff · radius 12px · padding 0px 20px · 500 15px Atkinson Hyperlegible Next · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Get started”): background #ffffff · text #bc2823 · radius 12px · padding 0px 20px · 500 15px Atkinson Hyperlegible Next · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Refer a client”): transparent background · text #bc2823 · radius 0px · padding 0px · 500 16px Atkinson Hyperlegible Next
- **Card** (“T Traci United States “I have been very ”): background #ffffff · text #2a1d18 · border 1px solid #e4e3da · radius 16px · padding 36px · 400 16px Atkinson Hyperlegible Next · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“What we do”): transparent background · text #ffffff · radius 0px · padding 2px 0px · 400 15px Atkinson Hyperlegible Next

## Do

- Use #faf9f1 as the calm canvas beneath the high-energy hero.
- Keep the first viewport red-led, with white navigation and copy.
- Pair Söhne headlines with Atkinson Hyperlegible Next interface and body text.
- Use real, personable photography as a major emotional anchor.
- Make the primary action visually distinct from the outlined eligibility action.
- Use thin warm borders and dark contrast to organize cards and metrics.

## Don't

- Do not replace the warm cream canvas with stark white throughout.
- Do not use red gradients as decoration across every section.
- Do not make supporting copy compete with the hero headline.
- Do not add heavy shadows or dense ornamental borders.
- Do not use abstract stock illustrations in place of human photography.
- Do not crowd FAQs, testimonials, or footer links into the hero.

## Agent prompt

Build a healthcare advocacy page in Baba’s warm, human-centered style. Use Baba Cream (#faf9f1) for the main reading canvas and a confident red hero field anchored by Advocate Red (#bc2823); keep the exact measured palette values. Set large, tightly tracked headlines in Söhne or a close free substitute, and use Atkinson Hyperlegible Next for body copy, navigation, and controls. Create a two-column hero with concise white copy, paired CTAs, and a large rounded photograph of real people. Follow with quiet cream content, a Night Merlot (#1d0b10) metrics panel, restrained testimonial cards, and a scannable FAQ. Use Blush Wash (#f5dfde) for the closing CTA. Favor clear hierarchy, roomy section transitions, subtle borders, and minimal shadow; preserve legibility and avoid decorative clutter.

## Source CSS custom properties (selected)

```css
--brand-red: #fa2424;
--brand-red-cta: #ea1111;
--brand-red-deep: #bc2823;
--brand-cream: #faf9f1;
--brand-ink: #2a1d18;
--brand-white: #fff;
--primary-hover: #bc2823;
--control-font-size: 1rem;
--card-radius: .875rem;
--radius: .625rem;
--font-sans-base: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
--font-heading-base: "Söhne", ui-sans-serif, system-ui, sans-serif;
--font-serif-base: "Söhne", ui-sans-serif, system-ui, sans-serif;
--font-brand-base: "Söhne", ui-sans-serif, system-ui, sans-serif;
--font-section-base: "Söhne", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
--background: #faf9f1;
--foreground: #2a1d18;
--card-foreground: #1f1b1a;
--popover-foreground: #1f1b1a;
--primary: #bc2823;
--primary-action: #ea1111;
--primary-foreground: #fff;
--secondary: #f7f4f1;
--secondary-foreground: #1f1b1a;
--muted-foreground: #6b615c;
--accent: #fdecea;
--accent-foreground: #bc2823;
--border: #ede7e2;
--sidebar-foreground: #1f1b1a;
--sidebar-primary: #fdecea;
--sidebar-primary-foreground: #bc2823;
--sidebar-accent: #fdecea;
--sidebar-accent-foreground: #bc2823;
--sidebar-border: #ede7e2;
--success-foreground: #166534;
--warning-foreground: #92400e;
--info-foreground: #1e40af;
--destructive-foreground: #3d0017;
--category-blue-foreground: #1d4ed8;
--category-purple-foreground: #6d28d9;
```

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