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

# Aaply · Design System

> Playful mobile design tools with bold, human-centered clarity

**Theme:** light · **Industry:** design · **Source:** https://aaply.app/ · **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._

Aaply pairs an airy, pale-gray canvas with oversized black typography and bright, playful accents to present a mobile app design tool. Rounded calls to action and colorful feature cards make the long, spacious page feel approachable rather than austere.

## North star

Keep the page spacious and typographically bold, using lemon yellow for decisive actions and colorful visuals as contained accents.

## Overview

The visual strategy centers on restraint interrupted by vivid, playful moments. A pale gray canvas (#f2f2f2) gives the opening hero a quiet field, while white content areas and black type keep the product story crisp and legible. The lemon-yellow accent (#e6e51e) anchors the primary sign-up action and returns as a strong feature band; red and blue appear as secondary accents, especially within colorful feature illustrations and demo cards. Poppins supplies the oversized, heavy headline character, while Inter handles navigation, body copy, and buttons with a more functional voice. The page uses a centered content composition and generous vertical breathing room, then shifts into compact, rounded feature cards that mix short copy with visual demonstrations. Images and playful graphic marks add warmth without displacing the clear black-and-white framework. Pills, soft corners, and thin pale dividers provide structure; elevation stays subtle, so color, typography, and spacing do most of the work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Headline and body text, navigation, dark CTA fills, and the contrasting footer. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Navigation shell, content sections, light card surfaces, and text on dark controls. |
| Soft Canvas | `#f2f2f2` | `--color-soft-canvas` | surface | Main hero canvas and pale section background that creates generous visual breathing room. |
| Lemon Signal | `#e6e51e` | `--color-lemon-signal` | accent | Primary sign-up button and vivid feature band; the page's leading action color. |
| Quiet Divider | `#e6e6e6` | `--color-quiet-divider` | neutral | Fine borders and understated separators around light surfaces and navigation controls. |
| Coral Pop | `#f34646` | `--color-coral-pop` | accent | Secondary accent, chiefly visible in feature-card artwork and illustrated product examples. |
| Cobalt Pop | `#466cf3` | `--color-cobalt-pop` | accent | Secondary accent used in blue demo panels and feature imagery, not as the main CTA. |

### Semantic aliases

`--color-canvas` → `#f2f2f2` (Soft Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#000000` (Studio Ink) · `--color-surface-3` → `#e6e6e6` (Quiet Divider) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#e6e6e6` (Quiet Divider) · `--color-accent` → `#e6e51e` (Lemon Signal) · `--color-accent-2` → `#f34646` (Coral Pop) · `--color-accent-3` → `#466cf3` (Cobalt Pop) · `--color-on-accent` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f2f2f2` | 18.76:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e6e6e6` | 16.83:1 | AAA |
| `#ffffff` | `#f2f2f2` | 1.12:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#e6e6e6` | 1.25:1 | fail |
| `#e6e51e` | `#f2f2f2` | 1.2:1 | fail |
| `#e6e51e` | `#ffffff` | 1.35:1 | fail |
| `#e6e51e` | `#000000` | 15.59:1 | AAA |
| `#e6e51e` | `#e6e6e6` | 1.08:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 700, 300 | Navigation, body copy, captions, buttons, and functional interface text. | Inter |
| Poppins | `--font-display` | webfont | 500, 700, 400 | Display headlines and prominent section headings. | Outfit |

- **Inter:** Use regular weight for interface copy; keep body text compact and readable, with minimal tracking.
- **Poppins:** Use bold weight for the hero display and medium weight for section headings; headline letter spacing is slightly tight.

### Type scale — Major Third (ratio ≈ 1.259, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 57px | 700 | 1.05 | -0.018em | — | Poppins | Oversized hero headline, bold and tightly tracked. |
| h1 | 52px | 700 | 1.56 | -0.019em | — | Poppins | Primary page heading and prominent feature titles. |
| h2 | 34px | 500 | 1.35 | 0 | — | Poppins | Major section headings and introductory feature copy. |
| h3 | 31px | 500 | 1.55 | 0 | — | Inter | Supporting feature-card headings. |
| h4 | 27px | 500 | 1.33 | 0 | — | Poppins | Compact card and subsection headings. |
| body | 18px | 400 | 1.44 | -0.028em | — | Inter | Feature descriptions, explanatory copy, and supporting text. |
| caption | 15px | 400 | 1.53 | 0 | — | Inter | Small labels, notes, and card metadata. |
| nav | 18px | 400 | 1.55 | 0 | — | Inter | Header navigation links and primary menu labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 10, 20 px.
- Section rhythm — · element gap 10px · card padding — · max content width 1128px.

Use a centered content area capped at the measured 1128px maximum width. The hero is centered and isolated within a tall pale canvas, with a compact pill-shaped navigation shell above it and generous vertical space below. Follow with mostly white content sections and a card-based feature sequence; later cards form a two-column arrangement before a wide yellow feature band. The overall density is comfortable: keep copy concise and allow broad gaps between major blocks, while card interiors are more information-rich.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · link `9999px` · xs `16px` · sm `36px` · md `40px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.2) 0px 10px 10px -5px`
- Shadow `sm` (nav): `rgba(0, 0, 0, 0) 0px 1px 3px 0px`
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The interface is predominantly flat, with clear section color changes and pale hairlines doing most of the separation. Use restrained shadows only where a floating interface element needs distinction. Rounded pills and cards create the primary sense of layering; avoid heavy shadows or dense borders.

## Imagery

Use colorful product demonstrations, playful graphic marks, and illustrated scenes rather than relying on conventional product photography. Keep visuals contained within feature cards and avoid letting their coral, blue, or other illustration colors redefine the brand palette. The hero uses small expressive visual inserts within its headline; below, larger card artwork and demo panels sit alongside explanatory text.

## Components

### Pill navigation

White rounded header shell with a compact logo, centered link group, outlined login control, and black sign-up pill.

### Hero headline

Centered, heavy Poppins display copy on the pale canvas, punctuated by small colorful visual marks.

### Primary CTA

Lemon-yellow pill with black Inter text and an arrow; pair with a black, white-text demo CTA.

### Feature cards

Rounded white or vivid-color panels combining numbered labels, concise copy, thin dividers, and product illustrations.

### Demo panel

Bright blue rounded card with short welcome copy and a small white pill action.

### Feature summary band

Wide lemon-yellow rounded panel with a numbered heading, compact bulleted feature list, and dark comparison action.

### Dark footer

High-contrast black closing area for final signup content, links, and brand details.

### Measured component styles

- **Primary button** (“Sign up fo free →”): background #e6e51e · text #000000 · radius 30px · padding 0px · 400 18px Inter
- **Secondary button** (“Try demo project”): background #000000 · text #ffffff · radius 30px · padding 0px · 400 18px Inter
- **Link** (“Compare Features →”): background #000000 · text #ffffff · radius 50px · padding 0px · 400 18px Inter
- **Navigation item** (“Log in Sign up Sign up Features Value Pr”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Times New Roman · shadow rgba(0, 0, 0, 0) 0px 1px 3px 0px

## Do

- Use Poppins for large, confident display headlines.
- Keep functional copy and controls in Inter.
- Reserve Lemon Signal (#e6e51e) for key actions and standout bands.
- Let the pale canvas and white sections carry generous negative space.
- Use rounded pill controls and softly rounded feature cards.
- Keep colorful artwork contained within feature demonstrations.

## Don't

- Do not crowd the hero with extra content.
- Do not make red or blue compete with the primary yellow accent.
- Do not use heavy shadows to define ordinary cards.
- Do not turn feature sections into dense, text-heavy panels.
- Do not replace the clear black text with low-contrast gray.
- Do not use sharp, square-edged buttons where the pill treatment is established.

## Agent prompt

Build a new Aaply-style page with a calm Soft Canvas (#f2f2f2) foundation, Gallery White (#ffffff) content areas, and Studio Ink (#000000) typography. Use Lemon Signal (#e6e51e) for the main action and occasional full-width emphasis; treat Coral Pop (#f34646) and Cobalt Pop (#466cf3) as contained illustration colors. Set expressive display headings in bold Poppins and navigation, body copy, and controls in Inter. Center content within the measured 1128px maximum width. Give the hero ample vertical breathing room, then organize product explanations into rounded, illustration-led cards with concise copy and fine dividers. Use pill-shaped controls, restrained borders, and minimal shadow. Preserve a clean, high-contrast hierarchy and avoid visual clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | White rounded navigation shell centered across the page top. | Logo home link, Section navigation, Login and signup actions | White pill-shaped shell, Black signup pill, Outlined login control |
| 2 | hero | Centered headline and paired actions on a pale-gray canvas with generous empty space. | Prominent value proposition, Free signup, Demo entry | Large bold type, Yellow and black pill CTAs, Playful inline visuals |
| 3 | feature-split | White feature section with product imagery paired with concise explanatory copy. | Feature explanation, Product demonstration | White background, Numbered feature treatment, Illustrated product visual |
| 4 | feature-grid | White, card-oriented feature area with imagery and compact feature descriptions. | Journey planning explanation, Related feature discovery | Numbered cards, Red and yellow artwork, Thin internal dividers |
| 5 | feature-grid | Two-column-style collection of white and blue feature cards. | Collaboration overview, Demo invitation | Blue demo panel, Rounded cards, Illustrated collaboration cues |
| 6 | comparison | Wide yellow feature band with a heading, bulleted list, and dark comparison action. | Feature summary, Compare plans | Yellow rounded panel, Compact bullet list, Black pill CTA |
| 7 | footer | Dark closing section with signup invitation, playful media, links, and brand details. | Early-access invitation, Contact and footer links | Black background, High-contrast text, Decorative imagery |

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