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

# Little Amps Coffee · Design System

> Warm coffee craft, told with playful editorial energy

**Theme:** light · **Industry:** food-beverage · **Source:** https://littleampscoffee.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._

Little Amps pairs a cream-and-roast palette with expressive lettering, candid roastery photography, and a compact storefront. Product discovery sits alongside community stories, wholesale information, and brand merchandise.

## North star

Keep the warm paper-and-roast palette constant while letting candid coffee imagery and expressive display type give each compact section its own character.

## Overview

The page builds its identity from a warm parchment canvas (#fff9f2), deep coffee-brown typography (#522c25), and unvarnished photographs of roasting and serving coffee. Orange-red (#c03001), golden orange (#c46500), and soft yellow (#febf6f) act as small, high-visibility accents for calls to action, highlighted words, and product controls; pale blue (#89b4ca) appears as a distinctive band and occasional button treatment. Display headings use the custom Little Amps face with tight tracking, while Inclusive Sans keeps descriptions readable and Necto Mono gives navigation and labels a utilitarian, all-caps character. The page alternates full-width photographic features with tightly packed product and story grids, using thin warm-gray rules to distinguish blocks without adding heavy shadows. Hand-drawn coffee illustrations add an informal counterpoint to real product and community photography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Roast Ink | `#522c25` | `--color-roast-ink` | brand | Primary headings, body text, navigation, links, and dark card surfaces. |
| Parchment Cream | `#fff9f2` | `--color-parchment-cream` | surface | Main page canvas and the light background for product cards and buttons. |
| Roaster Red | `#c03001` | `--color-roaster-red` | accent | High-contrast quick-view controls, selected links, and the vivid footer frame. |
| Warm Divider | `#e6dad4` | `--color-warm-divider` | neutral | Fine rules separating navigation, product cells, and content sections. |
| Honey Gold | `#febf6f` | `--color-honey-gold` | accent | Soft gold quick-view buttons and highlighted words or small link details. |
| Copper Orange | `#c46500` | `--color-copper-orange` | accent | Secondary orange product controls and occasional emphasized text. |
| Oat Milk | `#f6ede3` | `--color-oat-milk` | surface | Secondary card and overlay surface, including pale shop-all treatments. |
| Roastery Blue | `#89b4ca` | `--color-roastery-blue` | semantic | Contrasting announcement band and occasional cool-toned button or section detail. |

### Semantic aliases

`--color-canvas` → `#fff9f2` (Parchment Cream) · `--color-surface` → `#522c25` (Roast Ink) · `--color-surface-2` → `#f6ede3` (Oat Milk) · `--color-surface-3` → `#89b4ca` (Roastery Blue) · `--color-text` → `#522c25` (Roast Ink) · `--color-border` → `#e6dad4` (Warm Divider) · `--color-accent` → `#c03001` (Roaster Red) · `--color-accent-2` → `#febf6f` (Honey Gold) · `--color-accent-3` → `#c46500` (Copper Orange) · `--color-on-accent` → `#fff9f2` (Parchment Cream)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#522c25` | `#fff9f2` | 11.5:1 | AAA |
| `#522c25` | `#f6ede3` | 10.39:1 | AAA |
| `#522c25` | `#89b4ca` | 5.41:1 | AA |
| `#c03001` | `#fff9f2` | 5.48:1 | AA |
| `#c03001` | `#522c25` | 2.1:1 | fail |
| `#c03001` | `#f6ede3` | 4.95:1 | AA |
| `#c03001` | `#89b4ca` | 2.58:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inclusive Sans | `--font-body` | webfont | 400 | Body copy, captions, and product descriptions. | Inclusive Sans |
| Little Amps | `--font-display` | webfont | 500 | Display headings, featured product names, and expressive navigation branding. | Bree Serif |
| Necto Mono | `--font-mono` | webfont | 400, 500 | Navigation, eyebrows, labels, and compact calls to action. | Space Mono |
| Roboto Mono | `--font-roboto-mono` | webfont | 400 | Minor monospace details and small utility text. | Roboto Mono |

- **Inclusive Sans:** Regular weight and compact leading; keep paragraphs small and straightforward.
- **Little Amps:** Custom display face at medium weight; tight negative tracking and close line spacing.
- **Necto Mono:** Regular or medium weight; uppercase labels with slight positive tracking.
- **Roboto Mono:** Regular monospace treatment; keep usage limited so Necto Mono remains the primary utility voice.

### Type scale — Perfect Fourth (ratio ≈ 1.364, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 45px | 500 | 1 | -0.1em | — | Little Amps | Hero and primary display headline styling. |
| h2 | 41px | 500 | 1 | -0.1em | — | Little Amps | Major section headings and promotional feature titles. |
| h3 | 21.5px | 500 | 1 | -0.1em | — | Little Amps | Product-feature and editorial card headings. |
| h4 | 20px | 500 | 1 | -0.1em | capitalize | Little Amps | Smaller titled content blocks, often capitalized. |
| body | 13px | 400 | 1.1 | 0 | — | Inclusive Sans | Compact explanatory paragraphs and product descriptions. |
| caption | 12px | 400 | 1.1 | 0 | — | Inclusive Sans | Product metadata, dates, and image captions. |
| link | 21.5px | 500 | 1 | -0.1em | — | Little Amps | Expressive product names and prominent text links. |
| eyebrow | 12px | 400 | 1 | 0.05em | uppercase | Necto Mono | Uppercase section labels and category markers. |
| code | 12px | 400 | 1 | 0.05em | uppercase | Necto Mono | Small uppercase monospace utility labels. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 2, 3, 4, 5, 6, 7, 8, 10, 12, 15, 16, 20, 24, 30, 36, 90 px.
- Section rhythm 40px · element gap 2px · card padding 36px · max content width —.

A long, vertically stacked storefront uses a full-width video hero, a slim announcement strip, and a compact horizontal navigation bar before moving into content. Product areas mix a large feature tile with a narrow featured item and a four-column merchandise grid; later sections alternate two-column promotions and multi-column community cards. Most sections align to the viewport with consistent side gutters, while product and story cards are separated by fine rules. The measured page has a compact density, with short gaps inside blocks and clearer breathing room between major bands.

## Shape & elevation

- Radius: button `2px` · card `8px` · media `3px` · link `8px` · xs `2px` · sm `3px` · md `4px` · lg `8px` · xl `22px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s linear` on interactive elements.

The interface is largely flat: no measured shadows, and borders are sparse, thin, and warm-toned. Card identity comes from pale fills, image framing, and spacing rather than floating layers. Rounded corners appear on cards and media, while buttons remain nearly square. Use overlapping only where a photograph or graphic naturally crosses a promotional composition.

## Imagery

Use candid, warmly lit footage and photography of roasting, pouring, packaging, and people in the coffee community. Hero and promotional imagery can run broad and immersive, while product photos stay isolated on pale backgrounds in orderly cards. Supplement photography with small hand-drawn coffee or music-inspired line illustrations; keep these illustrative colors secondary to the measured interface palette.

## Components

### Announcement bar

A narrow blue band carries centered, uppercase shipping copy in a small monospace style.

### Store navigation

A pale horizontal bar combines the wordmark, uppercase Necto Mono menu links, subtle dividers, and account/cart utilities.

### Featured coffee grid

A large lifestyle feature sits beside a featured coffee card, followed by four compact product cards with names, notes, prices, and quick-view controls.

### Quick-view button

Small uppercase Necto Mono label on a compact, 2px-radius control; red, copper, or honey fills vary across products.

### Photo-led promotion

A broad coffee-making image carries a heading, short copy, and small product cards in a split promotional composition.

### Community feed

A row of editorial cards combines portrait or origin photography, compact date/category metadata, short titles, and small read-more links.

### Brand footer

A large cream panel framed in red pairs an oversized wordmark with visit, company, and shop links above a thumbnail strip.

### Measured component styles

- **Primary button** (“QUICK VIEW”): background #c03001 · text #fff9f2 · radius 2px · padding 3px 6px · 400 12px Necto Mono · uppercase
- **Secondary button** (“QUICK VIEW”): background #c46500 · text #fff9f2 · radius 2px · padding 3px 6px · 400 12px Necto Mono · uppercase
- **Link** (“Friend Blend”): transparent background · text #522c25 · radius 0px · padding 0px · 500 20px Little Amps · capitalize
- **Card** (“The Hits The Hits Regular price From $19”): background #fff9f2 · text #522c25 · radius 8px · padding 36px · 400 16px Inclusive Sans
- **Navigation item** (“SHOP”): transparent background · text #522c25 · radius 0px · padding 12px · 400 14px Necto Mono · uppercase

## Do

- Use Parchment Cream (#fff9f2) as the dominant page canvas.
- Set primary text and links in Roast Ink (#522c25).
- Reserve the orange and honey accents for compact controls and emphasis.
- Use the custom display face for expressive, closely tracked headings.
- Pair product grids with candid coffee photography and concise metadata.
- Separate dense cards with fine Warm Divider (#e6dad4) rules.
- Use small hand-drawn illustrations as supporting details.

## Don't

- Do not replace the warm cream canvas with stark white.
- Do not use large gradients or heavy drop shadows.
- Do not make every section a uniform product grid.
- Do not let decorative illustrations overwhelm product photography.
- Do not use large blocks of uppercase monospace body copy.
- Do not introduce unmeasured brand colors for interface elements.

## Agent prompt

Build a new Little Amps Coffee page as a warm, compact specialty-coffee storefront. Use Parchment Cream (#fff9f2) for the canvas, Roast Ink (#522c25) for core text, and Warm Divider (#e6dad4) for subtle separators. Apply Roaster Red (#c03001), Copper Orange (#c46500), and Honey Gold (#febf6f) sparingly to small actions and highlighted details; use Roastery Blue (#89b4ca) for an occasional band or control. Pair expressive, tightly tracked display headings with readable Inclusive Sans copy and uppercase Necto Mono labels. Organize content into varied full-width photo features, product grids, split promotions, and editorial community cards. Favor candid roasting and coffee-service photography, plus restrained hand-drawn illustrations. Keep surfaces flat, cards gently rounded, and product metadata concise; avoid gradients and heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width video hero with overlaid brand mark; rounded media frame within the page canvas. | Brand introduction, Immersive video | Large photographic frame, Display wordmark overlay, Warm yellow accent |
| 2 | other | Left-aligned statement with a small decorative illustration alongside. | Brand story, Introductory copy | Expressive heading, Inline color emphasis, Small line illustration |
| 3 | product-grid | Large lifestyle feature and featured product lead into a four-column product row. | Browse featured coffee, Quick view, Shop all | Photo-led tile, Pale product cards, Colored compact buttons |
| 4 | feature-split | Full-width coffee photography with copy and two light product cards over the composition. | Subscription promotion, Explore curated picks | Photo background, Display headline, Inset product cards |
| 5 | feature-split | Two-column block pairing a roastery photograph with a text-led wholesale panel. | Wholesale inquiry, Contact link | Split image and copy, Cool-blue section edge, Hand-drawn illustration |
| 6 | product-grid | Three-column merchandise card row beneath a short editorial heading. | Browse brand merchandise, Quick view | Isolated product photography, Compact product details, Small colored buttons |
| 7 | content-feed | Multi-column horizontal editorial feed with image-led story cards. | Browse community stories, Read more | Portrait and origin photography, Date labels, Compact article cards |
| 8 | footer | Two-column footer with wordmark and visit details beside grouped company and shop links. | Find store details, Navigate company and shop | Large brand mark, Grouped link lists, Framed light panel |
| 9 | footer | Compact legal and credit row below the main footer, alongside a thumbnail strip. | Site credits, Footer navigation | Small uppercase utility text, Image strip, Colorful footer frame |

## Source CSS custom properties (selected)

```css
--color-background: 255,249,242;
--color-background-secondary: 246,237,227;
--gradient-background: #fff9f2;
--color-foreground: 82, 44, 37;
--color-foreground-secondary: 82, 44, 37;
--color-foreground-title: 82, 44, 37;
--menu-shadow-color: 82, 44, 37;
--color-button-text: 255, 249, 242;
--color-button-text-hover: 255, 249, 242;
--color-button: 82, 44, 37;
--color-button-hover: 192, 48, 1;
--color-button-secondary: 82, 44, 37;
--color-button-secondary-hover: 82, 44, 37;
--color-button-secondary-text: 82, 44, 37;
--color-button-secondary-text-hover: 82, 44, 37;
--color-button-tertiary-text: 82, 44, 37;
--color-button-tertiary-text-hover: 82, 44, 37;
--color-overlay: 246, 237, 227;
--color-border-input: 0, 0, 0;
--color-border-input-hover: 0, 0, 0;
--color-background-input: 0, 0, 0;
--color-background-input-hover: 0, 0, 0;
--color-label-input: 82, 44, 37;
--color-label-input-hover: 82, 44, 37;
--color-border: 230, 218, 212;
--color-accent: 192, 48, 1;
--color-slider-arrows: 82, 44, 37;
--color-badge-text: 82, 44, 37;
--color-badge-background: 255, 249, 242;
--color-blog-slider-heading-hover: 192, 48, 1;
--color-badge-sale-background: 137, 180, 202;
--color-badge-sale-text: 246, 237, 227;
--color-badge-soldout-background: 192, 48, 1;
--color-badge-soldout-text: 246, 237, 227;
--color-badge-custom-background: 246, 237, 227;
--color-badge-custom-text: 82, 44, 37;
--color-pagination-bullet-dis: 214, 214, 214;
--color-pagination-bullet-active: 31, 30, 32;
--color-border-btn: 229, 229, 229;
--spaced-section: 16rem;
```

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