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

# Alpine Bio · Design System

> Quiet science, made tangible through ingredients

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

Alpine Bio pairs restrained typography and pale surfaces with ingredient-led photography to present functional ingredients as refined, practical innovations. A soft blue CTA and vivid yellow footer provide the page’s clearest color accents.

## North star

Keep the interface quiet and editorial, letting ingredient photography lead while reserving color for clear calls to action and section changes.

## Overview

The visual strategy balances scientific restraint with tactile ingredient imagery. A light gray canvas (#f5f5f5) carries most content, with warm cream (#f8f4e6) reserved for a contact invitation and pale gray (#e9e9e9) used on ingredient tiles and navigation details. Black typography establishes a direct hierarchy; muted black and white text variants adapt to light panels and the darkened hero photograph. Yellow (#f7ca50) is a strong footer band rather than a general-purpose highlight, while sky blue (#8ec7e2) marks compact calls to action and small directional controls. Switzer and Geist give headings and body copy a contemporary sans-serif character; PT Mono adds technical, uppercase labels. The page uses broad, calm section fields, compact controls, and large editorial headlines. Photography supplies most of the texture, with a subdued overlay supporting legibility over the full-screen hero.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#f5f5f5` | `--color-soft-canvas` | neutral | Main page canvas and large light content fields; the dominant background outside image-led sections. |
| Carbon Ink | `#000000` | `--color-carbon-ink` | brand | Primary headings, navigation, footer marks, and strong text on light surfaces. |
| Warm Cream | `#f8f4e6` | `--color-warm-cream` | surface | Warm contact CTA band and footer text surface, separating the invitation from the gray canvas. |
| Graphite | `#1e1e1f` | `--color-graphite` | semantic | Muted dark text for supporting copy on pale backgrounds. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Hero headline and supporting copy placed over the darkened full-bleed photograph. |
| Harvest Yellow | `#f7ca50` | `--color-harvest-yellow` | accent | Large footer band; a distinct closing color field, not a recurring UI highlight. |
| Cloud Gray | `#e9e9e9` | `--color-cloud-gray` | surface | Ingredient tiles and small navigation or button surfaces on the light canvas. |
| Alpine Blue | `#8ec7e2` | `--color-alpine-blue` | accent | Compact pill-shaped CTAs and circular arrow controls, including over the hero image. |

### Semantic aliases

`--color-canvas` → `#f5f5f5` (Soft Canvas) · `--color-surface` → `#f8f4e6` (Warm Cream) · `--color-surface-2` → `#e9e9e9` (Cloud Gray) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#1e1e1f` (Graphite) · `--color-text-subtle` → `#ffffff` (Paper White) · `--color-accent` → `#f7ca50` (Harvest Yellow) · `--color-accent-2` → `#8ec7e2` (Alpine Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#000000` | `#f8f4e6` | 19.07:1 | AAA |
| `#000000` | `#e9e9e9` | 17.3:1 | AAA |
| `#1e1e1f` | `#f5f5f5` | 15.28:1 | AAA |
| `#1e1e1f` | `#f8f4e6` | 15.13:1 | AAA |
| `#1e1e1f` | `#e9e9e9` | 13.72:1 | AAA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffffff` | `#f8f4e6` | 1.1:1 | fail |
| `#ffffff` | `#e9e9e9` | 1.21:1 | fail |
| `#f7ca50` | `#f5f5f5` | 1.42:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500 | Main body copy, secondary headings, and general interface text. | Inter |
| Switzer | `--font-display` | webfont | 500, 400 | Display headline, hero title, and selected prominent section headings. | Manrope |
| PT Mono | `--font-mono` | webfont | 400 | Small technical labels, navigation captions, and uppercase metadata. | IBM Plex Mono |

- **Geist:** Regular to medium weights; compact body leading and subtly tight tracking.
- **Switzer:** Regular-weight headlines with tight negative tracking and open, clean forms.
- **PT Mono:** Regular monospaced text; uppercase labels with tight tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.383, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 76px | 400 | 1.1 | -0.05em | — | Switzer | Oversized hero headline over the opening image. |
| h1 | 48px | 400 | 1.1 | -0.05em | — | Switzer | Primary page headline when a section needs top-level emphasis. |
| h2 | 42px | 400 | 1.2 | -0.05em | — | Geist | Prominent section titles, including introduction or showcase headings. |
| h3 | 32px | 400 | 1.2 | -0.05em | — | Switzer | Secondary feature or ingredient titles. |
| h4 | 22px | 500 | 1.2 | -0.05em | — | Geist | Compact subheadings and emphasized supporting labels. |
| body | 15px | 400 | 1.35 | -0.03em | — | Geist | Introduction copy, explanatory text, and CTA supporting copy. |
| caption | 13px | 400 | 1.2 | -0.04em | uppercase | PT Mono | Small uppercase section labels and image captions. |
| nav | 13px | 400 | 1.2 | -0.04em | uppercase | PT Mono | Uppercase main navigation labels. |
| code | 13px | 400 | 1.2 | -0.04em | uppercase | PT Mono | Technical-style uppercase microcopy and metadata. |

## Spacing & layout

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

The page is organized as a vertically stacked sequence of broad full-width bands, with a full-bleed image hero followed by open introduction, ingredient tiles, application photography, contact CTA, and footer. Content uses a measured maximum width of 1392px; the screenshot shows generous horizontal fields with compact controls and restrained column groupings. Headings and the hero copy are centrally aligned, while supporting content and footer details shift to left-aligned, multi-column arrangements. The measured spacing system is compact, but section changes provide visual breathing room.

## Shape & elevation

- Radius: button `3px` · nav `4px` · xs `3px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is predominantly flat, relying on large color fields and image contrast instead of shadows. Measured shadow styles are absent. Light gray tile surfaces and the cream CTA band distinguish sections without visible borders; navigation and buttons use subtly rounded corners, while pill-like blue controls and circular arrow buttons create small layered accents.

## Imagery

Photography carries the page’s sensory character: the hero uses a close-up of a pale ingredient or formulation, darkened to support white centered text. Lower application cards show food and beverage use cases in close, tactile crops. Ingredient tiles pair simple monochrome line icons with short labels. Images are rectangular and edge-aligned; no prominent gradients or decorative 3D effects define the identity.

## Components

### Floating navigation

A pale, compact rounded panel at the hero’s upper left holds the logo and uppercase monospace navigation; a separate blue contact pill and circular arrow sit at the upper right.

### Hero

Full-bleed ingredient photography is darkened behind a large centered white headline, concise supporting copy, a blue sample CTA, and a small scroll cue.

### Ingredient tiles

Three pale gray rectangular tiles pair monochrome icons with concise ingredient or pipeline labels and small circular affordances.

### Application gallery

A horizontal row of large photographic use-case cards, with small captions and compact carousel controls, sits within a light section.

### CTA band

A centered contact invitation uses a warm cream field, small mono label, dark heading, and compact blue action control.

### Footer

A saturated yellow closing band combines a sample prompt, small grouped links, a large black wordmark, and fine-print legal text.

### Measured component styles

- **Primary button**: background #e9e9e9 · text #000000 · radius 3px · padding 0px · 400 12px sans-serif
- **Link** (“Iron Supplements View Application”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Navigation item** (“INGREDIENTS APPLICATIONS COMPANY INTEL”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use a light gray canvas for the main content.
- Let large, high-quality ingredient photography anchor the hero.
- Keep headline typography clean, large, and tightly tracked.
- Use PT Mono for small uppercase labels and navigation.
- Reserve Alpine Blue for compact, actionable controls.
- Use cream and yellow as distinct section fields, not scattered decoration.

## Don't

- Do not add gradients or prominent drop shadows.
- Do not turn every section into a bordered card.
- Do not use the footer yellow as a general highlight color.
- Do not let hero copy compete with the background photograph.
- Do not replace the restrained palette with saturated multicolor UI.
- Do not make technical labels large or sentence-case.

## Agent prompt

Build a new Alpine Bio page using a calm, scientific editorial style. Use Soft Canvas (#f5f5f5) as the primary content background, Carbon Ink (#000000) for strong text, and Graphite (#1e1e1f) for supporting copy. Set Warm Cream (#f8f4e6) aside for a clear CTA band, Harvest Yellow (#f7ca50) for a distinct footer field, and Alpine Blue (#8ec7e2) for compact action pills and arrow controls; use Cloud Gray (#e9e9e9) for restrained tiles. Use Switzer or a close sans-serif for display headings, Geist-like sans-serif for body text, and PT Mono-like uppercase labels. Pair full-bleed, subdued ingredient photography with centered hero copy, then use spacious section bands, simple icon-led ingredient tiles, and close-cropped application imagery. Keep surfaces flat, corners subtly rounded, and controls compact.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Two-column closing block on a light canvas, with sample-support copy, grouped links, wordmark, and legal line. | Sample request link, Grouped site navigation, Career and social links | Two-column layout, Black wordmark, Small uppercase metadata |

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