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

# Aiper · Design System

> Smart pool technology in a bright, spacious showcase

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://aiper.com/us/home · **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._

Aiper’s homepage pairs immersive outdoor product imagery with a clean, white ecommerce canvas. Poppins typography, rounded product cards, and restrained cyan-to-violet accents carry the brand across editorial stories, awards, and a dark, information-dense footer.

## North star

Let high-impact outdoor product imagery lead, then surround it with a spacious white canvas and restrained cyan-to-violet accents.

## Overview

The visual strategy balances cinematic outdoor scenes with a predominantly white, uncluttered canvas. Full-bleed hero and campaign media provide the page’s strongest color and atmosphere; product and editorial content returns to pale neutral cards and generous white space. Poppins is used throughout, with bold, compact headlines and calm regular-weight supporting copy. The measured hierarchy moves from a 38px semibold hero heading to lighter 28px section titles, with body text at 16px. Cyan #1ecad3 and violet #9486f7 appear as a signature gradient in the announcement bar, small highlights, and campaign elements rather than as broad solid-color blocks. Rounded cards and pill-shaped controls soften the interface, while shadows remain subtle. The page shifts to near-black #151515 for its dense footer, creating a clear endpoint and contrast against the airy shopping and storytelling sections.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, white text over dark imagery, and outlined hero controls. |
| Frosted Pearl | `#f8f8f9` | `--color-frosted-pearl` | surface | Pale backgrounds for product and editorial cards. |
| Soft Graphite | `#666666` | `--color-soft-graphite` | neutral | Measured text and heading tone, including subdued content and links. |
| Midnight Panel | `#151515` | `--color-midnight-panel` | semantic | Dark footer background and inverse section surface. |
| Quiet Silver | `#d3d3d3` | `--color-quiet-silver` | neutral | Muted small links and supporting text on dark sections. |
| Deep Moss Ink | `#212322` | `--color-deep-moss-ink` | neutral | Secondary dark text and card copy; also present in photographic pixels. |
| Mist Gray | `#999999` | `--color-mist-gray` | neutral | Low-emphasis text and supporting headings. |
| Slate Hairline | `#4f4f4f` | `--color-slate-hairline` | semantic | Measured section borders and dark neutral details. |
| Pool Cyan | `#1ecad3` | `--color-pool-cyan` | accent | Brand accent in cyan-violet gradients, small highlights, and links. |
| Iris Violet | `#9486f7` | `--color-iris-violet` | accent | Pairs with Pool Cyan in announcement and campaign gradients. |
| Cool Pebble | `#c6c7ca` | `--color-cool-pebble` | surface | Occasional neutral surface detail, not a dominant page background. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Strong text and small high-contrast control details. |
| Cloudstone | `#dadbde` | `--color-cloudstone` | surface | Secondary pale surface tone used in isolated details. |
| Pale Divider | `#cccccc` | `--color-pale-divider` | neutral | Light border and divider details. |
| Charcoal Text | `#333333` | `--color-charcoal-text` | neutral | Dark supporting text and compact footer copy. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f8f9` (Frosted Pearl) · `--color-surface-2` → `#151515` (Midnight Panel) · `--color-surface-3` → `#c6c7ca` (Cool Pebble) · `--color-surface-4` → `#dadbde` (Cloudstone) · `--color-text` → `#666666` (Soft Graphite) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#d3d3d3` (Quiet Silver) · `--color-border` → `#4f4f4f` (Slate Hairline) · `--color-accent` → `#1ecad3` (Pool Cyan) · `--color-accent-2` → `#9486f7` (Iris Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#f8f8f9` | 5.41:1 | AA |
| `#666666` | `#151515` | 3.18:1 | AA-large |
| `#666666` | `#c6c7ca` | 3.4:1 | AA-large |
| `#ffffff` | `#f8f8f9` | 1.06:1 | fail |
| `#ffffff` | `#151515` | 18.26:1 | AAA |
| `#ffffff` | `#c6c7ca` | 1.69:1 | fail |
| `#d3d3d3` | `#ffffff` | 1.5:1 | fail |
| `#d3d3d3` | `#f8f8f9` | 1.41:1 | fail |
| `#d3d3d3` | `#151515` | 12.2:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(30, 202, 211) 0%, rgb(148, 134, 247) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0))`
- `linear-gradient(87.83deg, rgb(30, 202, 211) 3.65%, rgb(148, 134, 247) 96.35%)`
- `linear-gradient(90deg, rgb(30, 202, 211), rgb(148, 134, 247))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| poppins-regular | `--font-body` | webfont | 400 | Body copy, captions, links, and regular section headings. | Poppins |
| poppins-bold | `--font-display` | webfont | 600, 700 | Primary hero and product headings, plus emphatic section titles. | Poppins |
| poppins-medium | `--font-poppins-medium` | webfont | 500, 700 | Medium-weight controls and emphasized interface labels. | Poppins |
| poppins-heavy | `--font-poppins-heavy` | webfont | 800 | Rare extra-bold display emphasis. | Poppins |

- **poppins-regular:** Regular weight with open, readable forms; sentence case and compact link styling.
- **poppins-bold:** Semibold to bold weight; headlines stay compact and avoid all-caps except award messaging.
- **poppins-medium:** Used for stronger small labels and button text without changing the overall type character.
- **poppins-heavy:** Sparing use for emphatic display wording; measured at weight 800.

### Type scale — Major Third (ratio ≈ 1.241, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 38px | 600 | 1 | 0 | — | poppins-bold | Main hero product name and prominent launch headline. |
| h2 | 28px | 400 | 1 | 0 | — | poppins-regular | Section-level titles and lighter editorial headings. |
| h3 | 24px | 600 | 1.5 | 0 | — | poppins-bold | Product names and feature block headlines. |
| h4 | 20px | 600 | 1.5 | 0 | — | poppins-bold | Card headings, product labels, and subsection titles. |
| body | 16px | 400 | 1.5 | 0 | — | poppins-regular | Product descriptions, testimonials, and general supporting copy. |
| caption | 12px | 400 | 1.5 | 0 | — | poppins-regular | Small card metadata, event details, and image captions. |
| link | 12px | 400 | 1 | 0 | — | poppins-regular | Compact navigation, card, and footer links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 8, 10, 12, 14, 16, 18, 20, 23, 24, 30, 40, 48, 60 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width 840px.

The homepage uses a wide, responsive canvas with full-bleed hero and campaign media broken up by centered content groups. Product listings form a two-column card grid; reviews, partner stories, customer stories, and event updates use horizontal multi-card rows. Headings align to the left for most content, while the awards block centers its title and badges. Section spacing feels comfortable, with clear white gaps between modules. The long page ends in a two-part dark footer with newsletter content and multiple link columns.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `12px` · link `9999px` · xs `2px` · sm `4px` · md `5px` · lg `6px` · xl `12px` · 2xl `20px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.08) 0px 8.8px 53.6px 0px`
- Shadow `xl-2` (other): `rgba(129, 139, 156, 0.3) 0px 5.85px 102.31px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most sections feel flat against the white canvas, with spacing rather than borders defining their boundaries. Cards use pale neutral fills and rounded corners; shadows are soft and most visible on raised card or promotional surfaces. The hero’s layered text and navigation sit over photography with a dark overlay, while footer content is grouped on a solid near-black panel.

## Imagery

Large photographic and video scenes dominate the hero and campaign blocks, showing products in gardens, pools, and real outdoor settings. Product renders sit beside concise copy in pale cards, while customer and partner sections use portraits and lived-in settings. Image corners are rounded in card layouts; full-bleed media uses a dark overlay where white copy needs contrast. Awards appear as a grid of compact badge images.

## Components

### Announcement strip

A slim cyan-to-violet gradient band at the top, with centered offer copy and a compact contrasting Explore control.

### Hero carousel

Full-width outdoor media with overlaid white product heading, supporting copy, outlined pill CTAs, side arrows, and bottom slide indicators.

### Product cards

Pale #f8f8f9 cards with rounded corners, concise product labels, a small accent category line, and a product render.

### Editorial carousels

Horizontal cards for reviews, partner voices, customer stories, and event updates, combining image, brief copy, and compact metadata.

### Awards gallery

A centered title above a regular grid of award badge images on a bright background.

### Service benefits row

Four evenly distributed service promises with small cyan-toned icons and short labels.

### Dark footer

Near-black footer grouping a newsletter signup and membership perks above multiple compact link columns.

### Measured component styles

- **Primary button** (“Sign Up”): background #ffffff · text #000000 · radius 0px · padding 0px · 400 16px ui-sans-serif
- **Secondary button** (“LEARN MORE”): transparent background · text #ffffff · border 1px solid #ffffff · radius 100px · padding 0px 20px · 400 16px ui-sans-serif
- **Link** (“SHOP NOW”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px poppins-regular
- **Input**: transparent background · text #ffffff · radius 0px · padding 0px 0px 0px 12px · 400 16px poppins-regular
- **Card** (“Robotic Pool Cleaner Aiper Experts Duo A”): background #f8f8f9 · text #000000 · radius 20px · padding 0px · 400 16px poppins

## Do

- Keep the default content canvas white and spacious.
- Use full-bleed outdoor photography for the hero and campaign moments.
- Use Poppins consistently for headings, body copy, and links.
- Reserve the cyan-to-violet gradient for small brand accents and banners.
- Use rounded pale cards for products and editorial content.
- Switch to a near-black surface for the dense footer.

## Don't

- Do not turn the whole page into saturated color blocks.
- Do not let card copy compete with product imagery.
- Do not use heavy borders to separate every section.
- Do not apply the accent gradient to long paragraphs.
- Do not use oversized, tightly packed navigation or body copy.
- Do not omit contrast overlays when white text sits on photography.

## Agent prompt

Build a new Aiper-style ecommerce page on a Gallery White (#ffffff) canvas. Use Poppins for every text role, with bold concise headings, regular supporting copy, and restrained small labels. Lead with a full-width outdoor product photo or video; overlay white copy and pill-shaped outlined controls, ensuring legibility with a dark image treatment when needed. Use Frosted Pearl (#f8f8f9) rounded cards for product and editorial modules, arranged in clean grids or horizontal carousels with generous white gaps. Apply Pool Cyan (#1ecad3) and Iris Violet (#9486f7) as a limited gradient accent, not a dominant background. Keep the main content visually airy and image-led, then end with a structured Midnight Panel (#151515) footer containing newsletter signup, benefits, and compact link columns.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed media carousel under a slim gradient announcement and overlaid navigation. | carousel arrows, slide indicators, paired product CTAs | white overlay copy, outlined pill buttons, gradient announcement strip |
| 2 | product-grid | Two-column product feature cards followed by image-led product content. | shop links, learn-more links | pale rounded cards, product renders, small category labels |
| 3 | feature-split | Full-bleed landscape campaign visual with text and a call to action. | campaign CTA, informational message | wide photo band, text overlay, rounded media |
| 4 | testimonials | Horizontal row of media review cards with image thumbnails and compact copy. | horizontal browsing, video play controls | rounded thumbnails, white cards, review attribution |
| 5 | testimonials | Horizontal partner story cards alternating written quotes and lifestyle photography. | carousel browsing, partner attribution | split image-and-copy cards, pale surfaces, rounded corners |
| 6 | video | Full-bleed video backdrop with centered quotation and media logos. | brand proof, press recognition | darkened video overlay, centered white copy, logo row |
| 7 | testimonials | Horizontal customer story cards featuring people and short location metadata. | carousel browsing, customer story discovery | rounded photo cards, overlaid location labels, white section canvas |
| 8 | content-feed | Event and brand update cards in a horizontal row beneath a section title. | browse event updates, video preview controls | image-led cards, compact captions, carousel arrows |
| 9 | logo-cloud | Centered headline above a multi-row grid of award badges. | trust signaling, award recognition | gradient headline, badge image grid, even alignment |
| 10 | other | Four service benefits displayed in one evenly spaced row. | shipping reassurance, returns and support reassurance | small line icons, short labels, open white layout |
| 11 | newsletter | Dark two-column footer lead-in with signup form and membership benefits. | email signup, member benefit summary | near-black background, compact form, grouped benefit list |
| 12 | footer | Deep dark footer with multiple link columns and compact contact and payment details. | site-wide navigation, contact access, policy links | multi-column link groups, small muted copy, social and payment icons |

## Source CSS custom properties (selected)

```css
--primary: #db1215;
--text: #545454;
--text-2: #909090;
--text-3: #868686;
--bg-1: #fcfbf9;
--bg-2: #f6f6f6;
--bg-3: #fcffb2;
--bg-4: #c9f4aa;
--bg-5: #ff7b54;
--bg-6: #8054ff;
--bg-7: #f1f0ed;
--bg-8: #f0edf1;
--bg-9: #edeef1;
--bg-10: #fcfbf9;
--bg-11: #f2f2f2;
--bg-load: #d9d9d9;
--bg-scrollbar-track: #f1f1f1;
--bg-scrollbar-thumb: #c1c1c1;
--color1: #1ecad3;
--color2: #9486f7;
--font-weight-800: 800;
--font-weight-700: 700;
--font-weight-600: 600;
--font-weight-400: 400;
--font-weight-300: 300;
--activity-theme-color: #000;
--activity-navbar-bgColor: #fff;
--activity-navbar-color: #333;
--activity-navbar-select-color: #fff;
--activity-navbar-btn-borderColor: #000;
--activity-navbar-btn-bgColor: #fff;
--activity-navbar-btn-select-bgColor: #000;
--activity-evtBen-card-bgColor: #fff;
--activity-userBen-card-bgColor: #fff;
--activity-page-bgColor: #f7f7f7;
--activity-card-bgColor: #fff;
--activity-newPrice-color: #212123;
--activity-oldPrice-color: #828282;
--activity-shop-bgColor: #000;
--activity-shop-color: #fff;
```

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