# Aplos · Design system migration spec

> Source: https://aplos.world  ·  Curated by OpenDesign  ·  en

> This site is a strong example of using a limited color palette and high-quality photography to establish a sophisticated, modern brand identity.

## 1. Identity DNA

The Aplos identity is a system of stark contrasts and careful restraint, built to feel both immediate and refined. Its guiding analogy is that of a modern luxury apothecary—a space where the ceremonial weight of tradition meets the clean precision of contemporary wellness. Every element serves a dual purpose: to showcase the botanical subject with photographic gravity and to guide the user with the confidence of a well-told story.

**One-liner:** A premium direct-to-consumer brand for sophisticated botanical beverages, featuring rich dark imagery and refined serif typography.
**Keywords:** Non-alcoholic · Sophisticated · Botanical · Wellness
**Analogy:** A modern luxury apothecary for zero-proof spirits.

## 2. Color

The palette is a deliberate study in absence and warmth, built on a high-contrast monochrome foundation of deep black and warm off-white. This stark duality focuses attention entirely on the photographic subject matter, using color as a tool for framing rather than decoration.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#F2F1ED` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#646464` | secondary text |
| `--muted` | `#646464` | placeholder |
| `--line` | `rgba(180,174,172,1)` | divider |

**Color principle:** High-contrast monochrome foundation with warm, off-white surfaces for readability and focus.

The principle is absolute clarity: every surface exists either to absorb focus into the image or to provide a warm, readable field for interaction.

## 3. Typography

Typography is bifurcated by role, with a refined transitional-serif carrying the editorial weight of headlines and a clean humanist-sans handling the functional clarity of the interface. This pairing establishes a voice that is simultaneously sophisticated and direct.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.05 | 400 | -0.5px | Hero and modal headlines |
| subtitle | 26px | 1.08 | 400 | -0.325px | Subheadings and supporting text |
| body | 13px | 1.23 | 400 | 0 | Navigation, form labels, and small UI text |

## 4. Spacing

The system’s rhythm is built on strict multiples of a 3px base unit, with 12px and 24px serving as the primary gutters that give content its measured, unhurried pace.

- **Base unit:** 3px
- **Scale:** 3 / 6 / 12 / 24 / 48 / 96 px
- **Rhythm:** Strict multiples of 3px with 12px and 24px as primary gutters.

## 5. Surfaces

Surfaces are defined not by added layers, but by subtle incisions. A palette of off-white is treated with inset box-shadows and delicate 1px borders to create containers that feel carved from the background rather than placed upon it.

- **Radius:** sm 3px · md 5px · lg 12px · pill 999px
- **Shadows:**
  - rgb(180, 174, 172) 0px 0px 0px 1px inset
- **Borders:** Subtle 1px borders and inset box-shadows to define input fields and containers.

## 6. Layout

The structural skeleton begins with a full-bleed, dark photographic hero that commands the viewport. This immersive field then yields to a split-view modal, a focused overlay that pairs cinematic imagery with a clean, functional form.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed dark hero with large, centered modal overlays.

## 7. Motion & Interaction

Motion in the Aplos system is understated and purposeful, serving as punctuation rather than performance. A standardized 0.3s cubic-bezier easing governs all transitions, ensuring interactive feedback feels both smooth and predictable.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.645, 0.045, 0.355, 1)`
- **Patterns:**
  - Smooth background and color transitions for interactive elements
  - Transform animations for fill and hover states

- **Hover:** Subtle color and background transitions on interactive elements.
- **Click:** Immediate visual response with a standard pointer cursor.
- **Transition:** Standardized 0.3s cubic-bezier easing for property changes.
- **Keyboard:** Standard focus behavior for form elements.

## 8. Voice & Don'ts

The editorial voice is sophisticated, confident, and inviting, matched by large, refined serif headlines with tight letter spacing. Calls to action are direct and action-oriented, while the system actively avoids playful language, busy layouts, and the visual noise of bright accents.

- **Tone:** Sophisticated, confident, and inviting.
- **Headline style:** Large, refined serif headlines with tight letter spacing.
- **CTA style:** Direct and action-oriented, such as 'Shop Now' or 'Continue'.
- **Avoid:** Loud, neon colors / Playful or overly casual language / Busy, cluttered layouts / Generic sans-serif headlines

### Don'ts
- ❌ don't use bright accent colors — screenshot shows a strict black, white, and off-white palette
- ❌ don't use rounded buttons with large radii — screenshot shows buttons with a more subtle, modern radius of 5px
- ❌ don't use generic sans-serif fonts for display — screenshot shows transitional-serif for all major headlines
- ❌ don't use busy, multi-column layouts — screenshot shows a clean, focused split-view modal and full-bleed hero
- ❌ don't use light, airy backgrounds for the main site — screenshot shows a dominant deep black background
- ❌ don't use aggressive drop shadows — screenshot shows subtle inset box-shadows and borders for definition

By design, this system deliberately rejects clutter, vibrant accents, and generic typographic choices in favor of a focused, photographic-forward narrative.

## System Prompt (paste into AI tool)

```
This design represents a premium, direct-to-consumer beverage brand specializing in zero-proof spirits. It leverages a sophisticated, minimalist aesthetic dominated by deep black (#000000) and warm off-white (#F2F1ED) surfaces. Typography is anchored by a refined transitional-serif for display and a clean humanist-sans for body and UI elements. Key interaction patterns include high-contrast, large-radius primary buttons and subtle inset borders for form fields. Critical constraints: strictly avoid vibrant accent colors, never use generic sans-serifs for headlines, and maintain the restrained, photographic-forward layout.
```