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

# AYOCIN · Design System

> Nature-led wellness, framed as contemporary design.

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

AYOCIN presents a wellness lamp through an immersive, full-bleed product hero in warm, nature-inspired neutrals. Oversized typography and restrained navigation keep the focus on the illuminated object and its health benefits.

## North star

Let one atmospheric, full-bleed product image lead; keep type and controls quiet, legible, and warm-toned.

## Overview

The page builds its identity around a restrained warm-neutral palette: cream typography sits over a softly blurred taupe interior, while dark brown is reserved for the Order Now control and limited supporting details. Several measured beige tones appear in gradients or rendered imagery; treat them as supporting atmosphere rather than additional interface colours. Systemia is used consistently, from the compact navigation and utility copy to the oversized, all-caps product name. The hero is a single expansive visual field: large type spans the upper canvas, while a tall illuminated lamp anchors the center and smaller copy sits near the lower edges. Fine horizontal rules and a translucent-feeling navigation band organize the composition without making it feel boxed in. Spacious separation, sparse interface chrome, and the lamp’s golden light create contrast and hierarchy without relying on heavy cards, shadows, or decorative accents.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Linen Glow | `#fcf6ec` | `--color-linen-glow` | surface | Cream canvas and primary type over the hero image, including navigation, headings, and button labels. |
| Warm Stone | `#cec1b2` | `--color-warm-stone` | brand | Measured page canvas tone; reflects the softly warm taupe atmosphere of the hero backdrop. |
| Dune Taupe | `#c4b3a3` | `--color-dune-taupe` | neutral | Gradient stop in section styling; supporting warm-neutral tone, not a dominant interface accent. |
| Weathered Umber | `#9f8e7a` | `--color-weathered-umber` | neutral | Darker gradient stop and environmental tone; use as background atmosphere rather than text. |
| Oat Haze | `#c8b8a3` | `--color-oat-haze` | neutral | Gradient tone supporting the warm interior look; not a primary control or text colour. |
| Mushroom Sand | `#baae9e` | `--color-mushroom-sand` | neutral | Secondary gradient tone that blends with the taupe imagery and subdued page atmosphere. |
| Roasted Bark | `#2e2521` | `--color-roasted-bark` | semantic | Dark text and the filled Order Now CTA, providing the strongest interface contrast against cream. |

### Semantic aliases

`--color-canvas` → `#cec1b2` (Warm Stone) · `--color-surface` → `#fcf6ec` (Linen Glow) · `--color-text` → `#fcf6ec` (Linen Glow) · `--color-text-muted` → `#2e2521` (Roasted Bark)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fcf6ec` | `#cec1b2` | 1.64:1 | fail |
| `#2e2521` | `#cec1b2` | 8.48:1 | AAA |
| `#2e2521` | `#fcf6ec` | 13.92:1 | AAA |

### Gradients

- `linear-gradient(266.47deg, rgb(196, 179, 163) 41.41%, rgb(159, 142, 122) 97.58%), linear-gradient(rgb(200, 184, 163), rgb(186, 174, 158))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Systemia | `--font-body` | webfont | 400, 500 | Site-wide type for navigation, oversized product title, supporting copy, captions, and buttons. | Inter |

- **Systemia:** Use measured 400 and 500 weights. Keep tracking neutral; the hero product name is oversized uppercase, while small captions are uppercase.

### Type scale — Custom (ratio ≈ 2.07, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1 | 0 | — | Systemia | Oversized product name across the hero image. |
| h1 | 36px | 500 | 1 | 0 | — | Systemia | Primary editorial headline in supporting content. |
| body | 14px | 400 | 1.4 | 0 | — | Systemia | Benefit descriptions and explanatory copy. |
| caption | 12px | 400 | 1.4 | 0 | uppercase | Systemia | Small uppercase utility labels and product annotations. |
| button | 14px | 500 | 1 | 0 | — | Systemia | Order Now CTA label. |
| nav | 14px | 500 | 1.2 | 0 | — | Systemia | Compact top-level navigation links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 5, 8, 9, 10, 12, 18, 20, 25, 35, 100 px.
- Section rhythm 100px · element gap 8px · card padding — · max content width 680px.

Use a full-bleed hero as the primary page grid, with navigation spanning the top and the product image centered beneath a very large title. Keep secondary copy aligned to the lower-left and feature notes toward the right, with small utility details at the edges. The measured page max width is 680px for constrained content, while hero media runs edge to edge. The spacing system is spacious, with a 100px section gap and 8px element gap. Maintain centered headline alignment and avoid dense card layouts.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.8s cubic-bezier(0.77, 0, 0.18, 1)` on interactive elements.

The interface reads as largely flat, with no measured shadows and no prominent card borders. Separate navigation and hero details with delicate hairlines rather than boxed panels. Preserve depth through the photograph’s soft-focus background, natural shadows, lamp glow, and careful foreground layering.

## Imagery

Use cinematic product photography or high-quality 3D rendering of a tall interior wellness lamp. Frame it centrally and large, against a soft-focus taupe room with diagonal natural-light shadows. Let the warm yellow lamp glow be the main image color accent; it belongs to the product rendering, not the interface palette. Keep the image full-bleed and let overlaid cream text remain readable.

## Components

### Overlay navigation

Compact top-row links in 14px Systemia medium, set in cream over the hero image, with brand mark at left and purchase control at right.

### Order Now CTA

Dark brown pill-shaped button with cream 14px medium text; pair it with a small separate light circular cart/count control.

### Hero product title

Very large uppercase cream product name spanning almost the full viewport width, layered behind or above the centered lamp.

### Benefit list

Short cream labels with small line icons for air purification, full-spectrum lighting, and red-light therapy, placed beside the product.

### Hero utility captions

Small cream supporting copy and copyright details aligned to the hero edges, balanced against the central product.

### Measured component styles

- **Primary button** (“Order Now”): background #2e2521 · text #fcf6ec · radius 20px · padding 10px 60px 10px 20px · 500 14px Systemia
- **Navigation item** (“Features Air Purification Light Therapy ”): transparent background · text #fcf6ec · radius 0px · padding 0px · 500 14px Systemia

## Do

- Use cream typography over warm, image-led backgrounds.
- Keep the hero product large and centrally framed.
- Use dark brown sparingly for the primary purchase action.
- Set the product name in oversized uppercase lettering.
- Place small benefit labels around the hero subject.
- Keep content spacious and interface chrome restrained.

## Don't

- Do not add bright interface accents outside the product imagery.
- Do not turn the hero into a grid of cards.
- Do not use heavy shadows or thick borders.
- Do not let navigation compete with the product title.
- Do not treat image-only golden yellow as a core UI colour.
- Do not crowd the hero with long paragraphs.

## Agent prompt

Build a new AYOCIN-style wellness product page with an immersive, edge-to-edge hero. Use Linen Glow (#fcf6ec) for overlaid type and Warm Stone (#cec1b2) for the warm canvas atmosphere; reserve Roasted Bark (#2e2521) for the primary purchase button and occasional dark text. Let a softly blurred, taupe-toned room frame one large centered product rendering, with its own warm illumination kept within the image. Use Systemia or a close sans-serif substitute, with an oversized uppercase product title, compact navigation, and brief supporting captions. Align benefit labels beside the product and small utility copy near the edges. Keep the page open and spacious, use delicate hairlines only where needed, and avoid cards, heavy shadows, or extra accent colours.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed image hero; overlay navigation, oversized title, centered lamp, and edge-aligned product details. | Persistent-looking top navigation, Primary purchase CTA, Benefit scan | Cream overlay typography, Warm taupe backdrop, Central illuminated product, Fine horizontal rules |

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