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

# Aplós · Design System

> Quiet editorial elegance, grounded in striking product imagery

**Theme:** dark · **Industry:** food-beverage · **Source:** https://www.aplos.world/ · **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._

Aplós pairs a restrained black-and-ivory framework with cinematic product photography and graceful serif headlines. Alternating full-bleed image stories and warm, light editorial sections create a premium, unhurried shopping experience.

## North star

Let cinematic product imagery and elegant serif headlines lead, while the interface stays quiet, monochrome and precisely structured.

## Overview

The page is built around a strong black and warm-ivory contrast: black anchors the navigation, hero, immersive brand stories and footer, while #f2f1ed marks benefits, reviews and editorial event content. White is reserved for legibility, fine rules and compact controls; muted gray supports quieter text. The palette in the product and cocktail photography adds olive, citrus and earthy tones, but these read as image content rather than a competing interface palette. Large Goudy Old Style headlines lend the page an editorial, spirits-label character, balanced by compact Neue Haas Unica navigation and body copy. Full-bleed product imagery alternates with centered or column-based light sections, giving the long page a deliberate sequence of visual pauses. Content sits within a measured maximum width, with generous section separation and restrained card framing. Keep controls small and quiet so the photography and headlines carry the emphasis.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Ink | `#000000` | `--color-midnight-ink` | brand | Primary canvas for the hero, immersive image sections, navigation and footer; also supports strong text contrast. |
| Pure Porcelain | `#ffffff` | `--color-pure-porcelain` | neutral | Navigation and headline text on black, thin section rules, and compact light CTA surfaces. |
| Warm Parchment | `#f2f1ed` | `--color-warm-parchment` | surface | Light section canvas for benefits, customer reviews and Aplós Hour editorial content. |
| Soft Graphite | `#646464` | `--color-soft-graphite` | semantic | Muted supporting text where secondary copy needs less emphasis than the primary white or black text. |
| Charcoal Slate | `#333333` | `--color-charcoal-slate` | surface | Subtle dark surface detail; measured at low prevalence and not a defining page canvas. |

### Semantic aliases

`--color-canvas` → `#000000` (Midnight Ink) · `--color-surface` → `#f2f1ed` (Warm Parchment) · `--color-surface-2` → `#ffffff` (Pure Porcelain) · `--color-surface-3` → `#333333` (Charcoal Slate) · `--color-text` → `#ffffff` (Pure Porcelain) · `--color-text-muted` → `#000000` (Midnight Ink) · `--color-text-subtle` → `#646464` (Soft Graphite) · `--color-border` → `#ffffff` (Pure Porcelain)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f2f1ed` | 1.13:1 | fail |
| `#ffffff` | `#333333` | 12.63:1 | AAA |
| `#000000` | `#f2f1ed` | 18.58:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#333333` | 1.66:1 | fail |
| `#646464` | `#000000` | 3.55:1 | AA-large |
| `#646464` | `#f2f1ed` | 5.24:1 | AA |
| `#646464` | `#ffffff` | 5.92:1 | AA |
| `#646464` | `#333333` | 2.14:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Haas Unica | `--font-body` | webfont | 400 | Navigation, body copy, buttons, labels and compact utility text. | Inter |
| Goudy Old Style | `--font-display` | webfont | 400 | Hero and section headlines, oversized editorial links and prominent quotation copy. | EB Garamond |

- **Neue Haas Unica:** Measured at regular weight; small, restrained interface text uses natural case rather than all caps.
- **Goudy Old Style:** Regular-weight serif with graceful editorial presence; measured headline tracking is neutral to slightly tight.

### Type scale — Custom (ratio ≈ 1.754, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1.05 | 0 | — | Goudy Old Style | Hero headline and major brand statement. |
| h2 | 26px | 400 | 1.08 | -0.012em | — | Goudy Old Style | Section headings such as Benefits and Aplós Hour. |
| body | 13px | 400 | 1.23 | 0 | — | Neue Haas Unica | Product descriptions, reviews and supporting editorial copy. |
| button | 13px | 400 | 1.23 | 0 | — | Neue Haas Unica | Compact shopping and section-action labels. |
| nav | 13px | 400 | 1.23 | 0 | — | Neue Haas Unica | Primary links and header utility navigation. |
| link | 40px | 400 | 1.05 | -0.012em | — | Goudy Old Style | Large editorial product or collection links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 6, 9, 12, 24, 48, 96 px.
- Section rhythm 48px · element gap 12px · card padding — · max content width 1416px.

A long, full-width homepage alternates full-bleed photographic stories with light editorial sections. The measured page maximum width is 1416px, with comfortable density and clear separation between major bands. The benefits area centers its heading above three columns; reviews use a split arrangement, while Aplós Hour presents an image-led multi-column gallery. Navigation remains a slim overlay-like band at the top of the hero, and the dark footer separates its statement from grouped link columns.

## Shape & elevation

- Radius: button `5px` · card `3px` · nav `5px` · link `5px` · xs `1px` · sm `3px` · md `5px`
- Shadow `inset` (link): `rgb(180, 174, 172) 0px 0px 0px 1px inset`
- Motion: standard transition `0.3s cubic-bezier(0.645, 0.045, 0.355, 1)` on interactive elements.

The interface is mostly flat: large color bands and imagery provide structure instead of shadows. Thin light rules define the navigation boundary, while cards use restrained corner rounding and little visual chrome. Product photography and overlaid content create the main sense of depth; the measured inset shadow is limited to a link detail, not a general elevation system.

## Imagery

Photography is the dominant visual material: oversized cans and cocktails appear in carefully staged, full-bleed hero and product-story compositions. Close crops, dramatic lighting and deep backgrounds make packaging legible while keeping the scene atmospheric. Reviews pair testimonial cards with a product image; event content uses a row of editorial photographs. Olive and citrus hues belong chiefly to the photographed products and settings, rather than the interface palette.

## Components

### Announcement strip

A slim white bar above the dark hero carries centered shipping information and a close control.

### Primary navigation

White wordmark and compact Neue Haas Unica links sit on black, separated from the hero by a fine light rule.

### Hero CTA

A small white Shop Now button with black text and a measured 5px radius sits beneath the large serif headline.

### Benefit cards

Three-column benefit content on warm ivory uses restrained card treatment, with a dark featured card among light cards.

### Product story panels

Full-width product photography supports overlaid serif collection links and compact shopping actions.

### Review panel

A light editorial section pairs stacked customer review cards with a large product-and-cocktail photograph.

### Editorial gallery

A centered heading and short introduction precede a multi-column event image row on warm ivory.

### Footer

A large serif brand statement leads into compact link, contact and email-signup columns on black.

### Measured component styles

- **Primary button** (“Add to Cart — $78.00”): background #5c5c5c · text #ffffff · radius 5px · padding 9px 12px · 400 13px Neue Haas Unica
- **Secondary button** (“Shop Now”): background #ffffff · text #000000 · border 1px solid · radius 5px · padding 9px 12px · 400 13px Neue Haas Unica
- **Link** (“Learn More”): background #5c5c5c · text #ffffff · radius 5px · padding 9px 12px · 400 13px Neue Haas Unica
- **Input**: transparent background · text #ffffff · radius 0px · padding 12px 0px · 400 13px Neue Haas Unica
- **Card** (“Premium Quality 02”): background #ffffff · text #000000 · radius 3px · padding 0px · 400 13px Neue Haas Unica
- **Navigation item** (“Shop Recipes Journal Store Locator Cart”): transparent background · text #ffffff · radius 0px · padding 0px · 400 13px Neue Haas Unica

## Do

- Use black and warm ivory as the dominant section canvases.
- Reserve serif display type for headlines and editorial statements.
- Use compact sans-serif text for navigation, buttons and utility content.
- Give product photography full-bleed space when telling a brand story.
- Alternate immersive dark imagery with calm light editorial sections.
- Keep controls understated and clearly legible.

## Don't

- Do not introduce bright interface accents absent from the measured palette.
- Do not turn the page into a dense dashboard or app-like grid.
- Do not add heavy shadows to ordinary cards and controls.
- Do not make every text element oversized or serif.
- Do not mistake colors inside product photographs for interface colors.
- Do not crowd full-bleed imagery with extra decorative UI.

## Agent prompt

Build a new Aplós-style page as a premium, image-led storefront. Use Midnight Ink (#000000) for dark story bands, navigation and footer, and Warm Parchment (#f2f1ed) for calm editorial sections. Set headlines in an elegant Goudy Old Style-like serif and interface copy in a compact Neue Haas Unica-like sans serif. Keep the measured interface palette restrained: Pure Porcelain (#ffffff) for contrast and controls, Soft Graphite (#646464) only for muted copy, and Charcoal Slate (#333333) only as a subtle surface detail. Organize content into full-bleed product photography alternating with centered or multi-column editorial sections. Make CTAs compact, lightly rounded and visually quiet. Favor fine rules and spacing over shadows; let product imagery, typography and alternating canvases establish hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed product scene with a slim top announcement and overlaid navigation and hero copy. | shipping announcement, primary Shop Now action | black header, fine divider, serif headline, product photography |
| 2 | feature-grid | Centered heading and introduction above three benefit columns on a warm light canvas. | three benefit items, Learn More action | warm ivory background, mixed light and dark cards, serif heading |
| 3 | product-showcase | Full-width product photograph with layered product names and shopping actions. | product discovery, Add to Cart action, collection links | full-bleed image, overlaid panels, serif product links |
| 4 | feature-split | Full-bleed cocktail photograph with editorial quotation and publication attribution overlaid. | press quotation, publication attribution | dark photographic field, serif quote, overlay text |
| 5 | testimonials | Light review area split between stacked text cards and a large product photograph. | customer review cards, rating display | warm ivory canvas, white cards, product image |
| 6 | feature-split | Full-bleed blue-toned brand-story image with a compact text and link overlay. | brand explanation, Philosophy link | full-width image, serif copy, small light button |
| 7 | gallery | Centered editorial heading and introduction above a horizontal multi-column event gallery. | event browsing, gallery pagination | warm ivory canvas, image-led cards, compact captions |
| 8 | footer | Black footer with a large statement above three compact information and signup columns. | explore links, contact details, email signup | black canvas, large serif statement, fine column rules |

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