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

# A Better Lou · Design System

> Warm clinical clarity, without the friction

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

A Better Lou pairs a near-black espresso canvas with creamy panels and vivid amber calls to action. Oversized editorial headlines, candid photography, and plainly presented plan pricing make telehealth feel approachable and direct.

## North star

Use warm contrast and clear, human photography to make each healthcare decision feel simple and trustworthy.

## Overview

The visual identity alternates a deep espresso canvas (#140b00) with broad cream panels (#fff1e0), creating strong section-level contrast rather than a uniformly dark page. Amber (#ffb442) marks primary actions, selected phrases, and small numbered badges; borders stay subdued and warm. PP Neue Montreal supplies a restrained sans-serif voice: large, tightly tracked medium-weight headlines contrast with compact, comfortably spaced body copy. The hero is a full-bleed photograph with darkening overlays, cream text, and amber pill-shaped actions. Further down, pale sections organize team portraits, plan cards, comparison rows, and FAQs, while dark sections carry long-form storytelling and image-led content. The layout favors large open fields around key messages, then switches to compact, aligned data and pricing blocks. Most UI stays flat, using hairlines and minimal rounding instead of prominent shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Espresso Ink | `#140b00` | `--color-espresso-ink` | brand | Main dark canvas for the hero and storytelling sections; also used for dark text on cream and amber. |
| Clinic Cream | `#fff1e0` | `--color-clinic-cream` | surface | Primary light text on dark sections and the broad background for team, comparison, pricing, and FAQ content. |
| Roast Shadow | `#0b0600` | `--color-roast-shadow` | surface | Near-black supporting surface and gradient stop within dark navigation and section treatments. |
| Signal Amber | `#ffb442` | `--color-signal-amber` | accent | Primary CTA fill, highlighted headline words, price emphasis, and small numbered badges. |
| Linen Rule | `#d0c3b3` | `--color-linen-rule` | semantic | Warm hairline border on comparison cards and structured rows across light panels. |
| Burnt Umber | `#060300` | `--color-burnt-umber` | neutral | Deep gradient endpoint supporting image overlays; not a prominent standalone interface color. |
| Walnut Line | `#43392d` | `--color-walnut-line` | semantic | Subtle dark-section card and row borders, separating content without bright outlines. |
| Parchment Veil | `#e5d8c9` | `--color-parchment-veil` | surface | Secondary pale surface tone, visible as a supporting neutral rather than a dominant section background. |
| Mushroom Trace | `#c8beb1` | `--color-mushroom-trace` | neutral | Low-emphasis warm gray detail within secondary interface and media-derived elements. |
| Coffee Divider | `#372d21` | `--color-coffee-divider` | semantic | Muted separator tone in dark navigation and adjacent dark interface details. |

### Semantic aliases

`--color-canvas` → `#140b00` (Espresso Ink) · `--color-surface` → `#fff1e0` (Clinic Cream) · `--color-surface-2` → `#0b0600` (Roast Shadow) · `--color-surface-3` → `#e5d8c9` (Parchment Veil) · `--color-text` → `#fff1e0` (Clinic Cream) · `--color-text-muted` → `#140b00` (Espresso Ink) · `--color-border` → `#d0c3b3` (Linen Rule) · `--color-accent` → `#ffb442` (Signal Amber) · `--color-on-accent` → `#140b00` (Espresso Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fff1e0` | `#140b00` | 17.55:1 | AAA |
| `#fff1e0` | `#0b0600` | 18.18:1 | AAA |
| `#fff1e0` | `#e5d8c9` | 1.26:1 | fail |
| `#140b00` | `#fff1e0` | 17.55:1 | AAA |
| `#140b00` | `#0b0600` | 1.04:1 | fail |
| `#140b00` | `#e5d8c9` | 13.92:1 | AAA |
| `#ffb442` | `#140b00` | 11.01:1 | AAA |
| `#ffb442` | `#fff1e0` | 1.59:1 | fail |
| `#ffb442` | `#0b0600` | 11.4:1 | AAA |
| `#ffb442` | `#e5d8c9` | 1.26:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.3) 47%, rgba(0, 0, 0, 0.71))`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.58))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PP Neue Montreal | `--font-body` | webfont | 400, 500, 700 | Site-wide typeface for display headlines, body copy, navigation, buttons, and labels. | DM Sans |

- **PP Neue Montreal:** Use medium weights for headlines and actions, regular body copy, subtly negative headline tracking, and natural sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.324, base 14.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 59px | 500 | 1.1 | -0.002em | — | PP Neue Montreal | Large editorial statements and prominent campaign messaging. |
| h1 | 54.5px | 500 | 1 | -0.003em | — | PP Neue Montreal | Hero headline and primary page-level message. |
| h2 | 43px | 500 | 1.1 | -0.003em | — | PP Neue Montreal | Section headings, including team, plans, and FAQ. |
| h3 | 33px | 400 | 1.1 | -0.004em | — | PP Neue Montreal | Subsection titles and prominent explanatory content. |
| h4 | 30px | 500 | 1 | -0.005em | — | PP Neue Montreal | Plan, comparison, and supporting feature headings. |
| body | 14.5px | 400 | 1.5 | 0 | — | PP Neue Montreal | Explanatory copy, pricing details, and standard content. |
| caption | 13px | 500 | 1 | -0.011em | — | PP Neue Montreal | Compact supporting labels and image or card metadata. |
| nav | 13.5px | 500 | 1 | -0.011em | — | PP Neue Montreal | Header links and compact navigation actions. |

## Spacing & layout

- Base unit **1px**, density **compact**.
- Scale (most used values): 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 16, 17, 18, 22 px.
- Section rhythm 32px · element gap 11px · card padding 3px · max content width 1376px.

The page uses a wide desktop canvas capped at a measured maximum width of 1376px, with the hero treated as full-bleed media. Content aligns mostly to the start edge; sections shift between single-column storytelling, two-column plan or comparison layouts, and a four-column team row. A compact 1px-based spacing scale supports tight interface details, while broad section bands create the main rhythm. Dark and cream sections alternate, with generous open areas in long-form storytelling and denser, orderly content in pricing and FAQ blocks.

## Shape & elevation

- Radius: button `9999px` · card `6px` · badge `4px` · nav `50%` · xs `4px` · sm `6px` · pill `9999px`
- Shadow `md` (other): `rgba(255, 215, 0, 0.6) 0px 0px 12px 0px`
- Motion: standard transition `0.4s ease` on interactive elements.

The interface is predominantly flat. Warm, thin borders divide comparison rows and cards, while dark sections use low-contrast brown rules. Rounded amber pills and small badges provide the main shape contrast; cards remain square or subtly rounded. Avoid prominent drop shadows: the measured gold glow is isolated rather than a defining elevation style.

## Imagery

Photography is central: a full-bleed hero portrait, team headshots, a product-style vial image, and a wide human-interest image support the story. Several team portraits are presented as video thumbnails. Hero and dark editorial media use layered black gradients for legible cream text; the hero's blue landscape and skin tones are photographic content, not brand palette colors.

## Components

### Amber pill CTA

Use a #ffb442 fill with #140b00 text, medium weight, and a fully rounded pill silhouette; paired arrow actions may sit beside the main button.

### Header navigation

Compact PP Neue Montreal links sit over the hero image in cream, with outlined patient access and amber contact or start actions.

### Plan cards

Two side-by-side price panels on cream: one amber and one Espresso Ink, each with clear monthly pricing and a contrasting rounded Start Today action.

### Comparison rows

Align numbered badges, short headings, and compact explanatory rows; separate items with thin warm borders rather than raised cards.

### Team portraits

Show a four-column row of tightly framed headshots with compact names and role labels on a cream section.

### FAQ list

Place the section heading beside a structured question list, with warm hairlines and a small plus affordance for each item.

### Measured component styles

- **Primary button** (“Start Today”): background #ffb442 · text #140b00 · radius 2916px · padding 8.7px 58.3px · 500 29.16px PP Neue Montreal
- **Secondary button** (“Start Today”): background #140b00 · text #ffb442 · radius 2916px · padding 8.7px 58.3px · 500 29.16px PP Neue Montreal
- **Link** (“Get GLP-1 Now”): transparent background · text #140b00 · radius 0px · padding 0px · 500 12.96px PP Neue Montreal
- **Card** (“1 Faster Get started quickly We call you”): transparent background · text #140b00 · border 1px solid #d0c3b3 · radius 0px · padding 12px 0px 0px 0px · 400 14.4px PP Neue Montreal
- **Badge** (“1”): background #ffb442 · text #140b00 · radius 4px · padding 4.4px 12.1px 3.8px 12.1px · 500 10.08px PP Neue Montreal
- **Navigation item** (“Home”): transparent background · text #fff1e0 · radius 0px · padding 0px · 500 13.68px PP Neue Montreal

## Do

- Alternate Espresso Ink and Clinic Cream section bands.
- Reserve Signal Amber for actions and purposeful emphasis.
- Keep hero copy legible over imagery with a dark gradient.
- Use PP Neue Montreal or a close sans-serif substitute.
- Build plans and comparisons from aligned, clearly labeled rows.
- Keep borders warm, subtle, and low contrast.

## Don't

- Don't introduce cool interface colors from the hero photograph.
- Don't use large shadows to lift ordinary cards.
- Don't crowd large editorial headlines with dense copy.
- Don't make secondary links compete with the amber CTA.
- Don't round every panel; reserve strong rounding for pills.
- Don't obscure medication pricing in decorative treatments.

## Agent prompt

Build a new telehealth page in A Better Lou's visual style. Use Espresso Ink (#140b00) as the principal dark canvas and Clinic Cream (#fff1e0) for light content bands; apply Signal Amber (#ffb442) selectively to pill-shaped actions, prices, and small emphasis details. Set all text in a clean geometric sans-serif similar to PP Neue Montreal, with large medium-weight editorial headings and compact, readable body copy. Organize content into wide section bands, alternating dark storytelling areas with cream information panels. Use authentic, human photography with restrained dark overlays wherever text sits on an image. Present pricing and benefits in simple aligned rows with fine warm borders, not raised cards. Keep navigation compact, spacing purposeful, and the overall interface flat, warm, and direct.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed photographic hero with overlaid header, large left-aligned offer, and a three-part benefit strip. | Primary offer first, Direct call and start actions, Benefits at a glance | Dark image overlay, Cream headline, Amber pill CTAs, Compact top navigation |
| 2 | stats | Tall dark single-column section with a centered weight visualization and headline. | Visual progress cue, Headline-led explanation | Espresso Ink background, Amber headline emphasis, Circular dotted graphic |
| 3 | team | Cream band with a heading and four aligned portrait cards. | Meet the care team, Role identification | Four-column portrait row, Compact captions, Video thumbnails |
| 4 | feature-split | Two-column band: dark text and CTA panel beside a large product image. | Explain the simpler process, Prompt immediate action | Cream and amber typography, Pill CTA, Full-height product photography |
| 5 | comparison | Cream two-column section with a large introductory heading and ordered comparison rows. | Summarize key differences, Support quick scanning | Numbered items, Thin warm separators, Compact explanatory copy |
| 6 | pricing | Two side-by-side plan cards followed by a two-column included-benefits list. | Compare monthly prices, Show included services, Clear start action | Amber and dark plan surfaces, Contrasting pill buttons, Checkmarked benefits |
| 7 | comparison | Long dark section with a subtle media background, headline, and stacked comparison content. | Identify common pain points, Contrast with the simpler path | Dark gradient media, Amber subheads and badges, Fine dark-row borders |
| 8 | cta | Wide image-led statement within the dark canvas. | Reassure on price and support, Reinforce human contact | Full-bleed grayscale photo, Cream overlay text, Darkened image treatment |
| 9 | other | Dark editorial section with a feature image, centered mission statement, and small founder attribution. | Communicate mission, Add founder credibility | Open dark canvas, Centered cream statement, Small portrait attribution |
| 10 | faq | Cream two-column FAQ with section heading at left and question rows at right. | Answer purchase concerns, Expandable questions | Hairline question dividers, Plus affordances, Compact typography |

## Source CSS custom properties (selected)

```css
--primary: #ffb442;
```

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