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

# Luffu · Design System

> Warm, human-centered health technology

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

Luffu pairs family-focused health technology with an editorial, reassuring visual language. Earthy neutral surfaces, expressive serif headlines, and immersive lifestyle photography make the homepage feel personal rather than clinical.

## North star

Make family health technology feel reassuring and human through restrained earthy surfaces, editorial serif headlines, and authentic lifestyle imagery.

## Overview

The visual strategy balances a muted, earthy canvas with product storytelling that feels domestic and human. The measured canvas #d7d7cb anchors the page, while pale #e4e7da and warm off-white #f6f7f0 distinguish content bands without relying on strong dividers. Deep blue-black #192830 and charcoal #2f3136 carry readable text; light text is reserved for dark overlays and CTA contexts. ABCArizonaFlare gives headings an editorial, approachable character, while ABCArizonaSans keeps navigation and supporting copy crisp. A full-bleed family hero establishes emotional context, followed by image-led product cards, a centered caregiving feature, and quieter story, press, newsletter, and footer sections. Layouts alternate between broad photographic compositions and compact centered content. Rounded controls and cards soften the interface; the overall treatment stays mostly flat, with photography supplying much of the visual depth and color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Quiet Sage | `#d7d7cb` | `--color-quiet-sage` | brand | Main page canvas and broad background tone beneath the homepage's photographic and content sections. |
| Soft Linen | `#f6f7f0` | `--color-soft-linen` | surface | Light headings and navigation over imagery, pale section details, and outlined CTA text. |
| Mist Olive | `#e4e7da` | `--color-mist-olive` | surface | Subtle alternate section and footer surface, especially around the newsletter and lower-page content. |
| Deep Fjord | `#192830` | `--color-deep-fjord` | brand | Primary dark text and dark CTA background, providing strong contrast against pale surfaces. |
| Graphite Ink | `#2f3136` | `--color-graphite-ink` | neutral | Supporting text and dark navigation text where the interface is not overlaid on photography. |
| Stone Line | `#9ea29c` | `--color-stone-line` | semantic | Fine footer and interface borders; use as a quiet separator rather than a prominent outline. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | White CTA fills, cookie notice surface, and occasional high-contrast text; not the main page canvas. |

### Semantic aliases

`--color-canvas` → `#d7d7cb` (Quiet Sage) · `--color-surface` → `#e4e7da` (Mist Olive) · `--color-surface-2` → `#f6f7f0` (Soft Linen) · `--color-text` → `#192830` (Deep Fjord) · `--color-text-muted` → `#f6f7f0` (Soft Linen) · `--color-text-subtle` → `#ffffff` (Pure White) · `--color-border` → `#9ea29c` (Stone Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#192830` | `#d7d7cb` | 10.43:1 | AAA |
| `#192830` | `#e4e7da` | 12.07:1 | AAA |
| `#192830` | `#f6f7f0` | 14.04:1 | AAA |
| `#f6f7f0` | `#d7d7cb` | 1.35:1 | fail |
| `#f6f7f0` | `#e4e7da` | 1.16:1 | fail |
| `#ffffff` | `#d7d7cb` | 1.45:1 | fail |
| `#ffffff` | `#e4e7da` | 1.25:1 | fail |
| `#ffffff` | `#f6f7f0` | 1.08:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABCArizonaSans | `--font-body` | webfont | 400 | Navigation, body copy, captions, links, and CTA labels. | DM Sans |
| ABCArizonaFlare | `--font-display` | webfont | 400 | Display and heading hierarchy, from the hero headline through section titles. | Lora |

- **ABCArizonaSans:** Regular weight throughout; compact tracking and sentence-case text keep small UI copy calm and legible.
- **ABCArizonaFlare:** Regular-weight editorial serif with tight negative tracking; use sentence case and avoid heavy bold styling.

### Type scale — Major Third (ratio ≈ 1.262, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1 | -0.031em | — | ABCArizonaFlare | Large editorial statements and prominent brand storytelling headlines. |
| h1 | 48px | 400 | 1 | -0.042em | — | ABCArizonaFlare | Primary hero headline introducing Luffu's family-care proposition. |
| h2 | 44px | 400 | 1 | -0.045em | — | ABCArizonaFlare | Major product, caregiver, story, and newsletter section headings. |
| h3 | 28px | 400 | 1 | -0.036em | — | ABCArizonaFlare | Subsection headings and key feature titles. |
| h4 | 24px | 400 | 1 | -0.042em | — | ABCArizonaFlare | Smaller feature and product-card headings. |
| body | 20px | 400 | 1.2 | -0.01em | — | ABCArizonaSans | Introductory and supporting explanatory copy. |
| caption | 16px | 400 | 1.2 | -0.02em | — | ABCArizonaSans | Compact labels and secondary supporting text. |
| nav | 16px | 400 | 1.2 | -0.012em | — | ABCArizonaSans | Header navigation links. |
| link | 14px | 400 | 1.2 | -0.02em | — | ABCArizonaSans | Small inline links and secondary actions. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 11, 12, 16, 17, 18, 24, 32, 40, 64, 72, 108, 120 px.
- Section rhythm 40px · element gap 12px · card padding — · max content width 681px.

The page uses broad, full-bleed visual sections, with content arranged in changing grids: a photographic hero, three product cards, a centered caregiving feature, and single-column story and press bands. Measured content has a compact density and a 681px page max-width reference for text-led content, while media extends beyond it. Headings shift between left alignment for introduction and center alignment for feature storytelling. Sections maintain clear vertical separation, but transitions are soft and rely more on surface changes than borders.

## Shape & elevation

- Radius: button `6px` · card `8px` · link `8px` · xs `6px` · sm `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.24s ease-in-out` on interactive elements.

The measured interface has no notable shadow system; most sections and cards read as flat compositions. Layer text and controls directly over photographs where contrast allows, using darkened image areas for legibility. Cards use restrained rounded corners, and hairline borders are most appropriate for footer separators and subtle outlined actions.

## Imagery

Use authentic, warm lifestyle photography as the emotional anchor, especially family members interacting outdoors or at home. Product cards show close, tactile views of devices and app screens, while the caregiving section uses product imagery in a centered, isolated composition. Video and image-led blocks are prominent; avoid decorative illustration as the main storytelling device. Let photography retain natural, nuanced color.

## Components

### Announcement strip

A narrow dark top band with centered preorder messaging and a small inline link.

### Overlay navigation

Brand mark and compact sans-serif links sit over the hero image in light text, with a simple utility icon at the opposite edge.

### Hero CTA card

A translucent, image-overlaid product availability panel pairs a short serif message with an outlined preorder action.

### Product cards

Three image-led cards introduce the app, wearable Link, and upcoming device; use concise light copy and a directional affordance.

### Feature tabs

A centered caregiver feature pairs a row of topic labels with short explanatory copy and a prominent product visual.

### Newsletter field

A wide white signup field with a compact prompt and a simple right-aligned submit affordance.

### Footer link columns

A quiet pale footer organizes brand, navigation, social, and legal links with subtle separators.

### Measured component styles

- **Primary button** (“Preorder Luffu Link Preorder Luffu Link”): background #ffffff · text #192830 · radius 6px · padding 12px 18px · 400 10px ABCArizonaSans
- **Secondary button** (“Preorder Luffu Link Preorder Luffu Link”): transparent background · text #f6f7f0 · border 1px solid #f6f7f0 · radius 6px · padding 11px 17px · 400 10px ABCArizonaSans
- **Link** (“Preorder today”): transparent background · text #f6f7f0 · radius 0px · padding 0px · 400 14px ABCArizonaSans
- **Card** (“Luffu Link is now available Preorder Luf”): background #e0dcd0 · text #f6f7f0 · radius 8px · padding 0px · 400 10px ABCArizonaSans
- **Navigation item** (“Luffu Link Life with Luffu What's Next O”): transparent background · text #f6f7f0 · radius 0px · padding 0px · 400 10px ABCArizonaSans

## Do

- Use authentic family photography as the emotional entry point.
- Set major headings in the editorial display serif.
- Keep body and interface text in the measured sans-serif style.
- Use Quiet Sage and pale surfaces as the foundation.
- Reserve Deep Fjord for strong text and dark actions.
- Let media span wide while keeping text blocks controlled.

## Don't

- Do not make the page feel clinical or sterile.
- Do not add saturated accent colors absent from the measured palette.
- Do not place heavy shadows on cards or controls.
- Do not turn every section into a centered card grid.
- Do not use bold, oversized navigation styling.
- Do not overdecorate product imagery with illustrations.

## Agent prompt

Build a new Luffu page with a warm, family-centered health-tech identity. Use Quiet Sage (#d7d7cb) as the grounding canvas, alternate with Mist Olive (#e4e7da) and Soft Linen (#f6f7f0), and use Deep Fjord (#192830) for primary text and dark actions; Graphite Ink (#2f3136) is supporting text. Pair an editorial serif similar to ABCArizonaFlare with a clean sans like ABCArizonaSans. Lead with authentic lifestyle photography and concise, human copy, then mix image-led product cards with centered feature storytelling and quieter content bands. Keep layouts broad and airy but text blocks controlled; use subtle rounded corners, minimal borders, and no prominent shadows. Favor light text only where image or dark-surface contrast requires it. Keep all UI calm, legible, and understated.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed family photo with overlaid navigation, left-aligned headline, and lower-left product CTA. | preorder announcement, hero carousel indicators, primary preorder action | photo overlay, light navigation, translucent product panel, white CTA |
| 2 | product-grid | Introductory copy above three side-by-side image-led product cards. | product discovery, card navigation | three-column cards, full-bleed card images, light overlaid labels |
| 3 | feature-grid | Centered heading and feature tabs above explanatory copy, action, and product imagery. | feature tabs, caregiver benefit explanation, story action | centered alignment, tab row, isolated device visual |
| 4 | video | Single-column, centered story panel with a brand mark and a prominent statement. | brand story entry | centered headline, soft color wash, outlined action |
| 5 | logo-cloud | Centered section title above a single horizontal row of publication marks. | press credibility | logo strip, light neutral surface |
| 6 | newsletter | Centered headline and small community image above a wide signup field. | email signup | pale section band, wide white input, minimal submit affordance |
| 7 | footer | Two-column footer with brand area, grouped navigation and social links, and legal links. | site navigation, social links, legal information | pale background, fine separators, compact link groups |

## Source CSS custom properties (selected)

```css
--font-family-sans: 'ABCArizonaSans', sans-serif;
--font-family-display: 'ABCArizonaFlare', Georgia, serif;
--font-h1: 'ABCArizonaFlare', Georgia, serif;
--font-h2: 'ABCArizonaFlare', Georgia, serif;
--font-h3: 'ABCArizonaFlare', Georgia, serif;
--font-h4: 'ABCArizonaFlare', Georgia, serif;
--font-h5: 'ABCArizonaFlare', Georgia, serif;
--font-body-1: 'ABCArizonaSans', sans-serif;
--font-body-2: 'ABCArizonaSans', sans-serif;
--font-body-3: 'ABCArizonaSans', sans-serif;
--font-md-trimmed: 'ABCArizonaSans', sans-serif;
--font-cta: 'ABCArizonaSans', sans-serif;
--font-legal: 'ABCArizonaSans', sans-serif;
--container-radius: 8px;
--color-white: #ffffff;
--color-background: #d7d7cb;
--color-tan: #e4e7da;
--color-tan-2: #f5f5ee;
--color-police-blue: #395666;
--color-inverted-text: #f6f7f0;
--color-darker-tan: #cdd3bb;
--color-text-body: #2f3136;
--color-text: #192830;
--color-dim: color-mix(in srgb, #192830 40%, transparent);
```

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