# Aaply · Design system migration spec

> Source: https://aaply.app  ·  Curated by OpenDesign  ·  en

> The site's playful integration of emojis into typography and its bold, high-contrast aesthetic make it a strong example of expressive, human-centered SaaS design.

## 1. Identity DNA

Aaply positions itself as a collaborative design tool for mobile, drawing a direct parallel to Figma's desktop paradigm. The system is built on a high-contrast foundation of stark black and light gray, punctuated by a vibrant, high-chroma yellow that serves as the primary action color, creating an interface that feels both bold and unmistakably human-centered.

**One-liner:** A collaborative tool for teams to design mobile apps and create user-centered product experiences.
**Keywords:** collaborative · mobile-first · design tool · human-centered
**Analogy:** Figma for mobile wireframing

## 2. Color

The color system establishes a rigorous hierarchy through a high-contrast palette of light gray, black, and white. This clean foundation is dramatically punctuated by a vibrant, high-chroma yellow accent reserved exclusively for primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f2f2f2` | main background |
| `--bg-soft` | `#ffffff` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#c4c4c4` | placeholder |
| `--accent` | `#e6e51e` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High-contrast black and white foundation with a punchy, high-chroma yellow accent for primary actions.

The principle is clarity through contrast, using a restrained base to make the playful, high-energy accent impossible to ignore.

## 3. Typography

Typographic voice is split between a bold, geometric sans-serif for display headlines and a clean humanist sans-serif for body text. This pairing delivers expressive, impactful statements while maintaining excellent readability for longer content.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -2px | Hero headline |
| headline | 31px | 1.2 | 500 | -1px | Section headlines |
| body | 16px | 1.6 | 400 | 0 | Body text |

## 4. Spacing

Generous whitespace is the system's rhythm, applied liberally between sections to create an open, uncluttered atmosphere that frames content with breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace between sections to maintain a clean, airy feel.

## 5. Surfaces

Surfaces rely on crisp, 1px black borders and a subtle, diffuse shadow to create clear depth without heavy skeuomorphism. The result is a floating, paper-like quality for contained elements like cards.

- **Radius:** sm 16px · md 30px · lg 50px · pill 3000px
- **Shadows:**
  - rgba(0, 0, 0, 0.2) 0px 10px 10px -5px
- **Borders:** 1px solid black

## 6. Layout

The layout skeleton centers content within a contained vertical flow, allowing large typography and significant vertical spacing to dictate the visual pace. This structure prioritizes focus and clarity, guiding the eye downward through clearly defined sections.

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

**Skeleton:** Centered container with large typography and generous vertical spacing.

## 7. Motion & Interaction

Motion philosophy favors subtlety and function, employing refined fade-and-slide-up animations on page load to establish content hierarchy. Hover and focus states use smooth transitions on color and elevation to provide immediate, clear feedback.

- **Durations:** micro 220ms · small 400ms · medium 1000ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Fade and slide up on page load
  - Color and shadow transitions on hover

- **Hover:** Background color transitions and subtle elevation changes via box-shadow.
- **Click:** Immediate feedback with subtle scale or color change.
- **Transition:** Smooth transitions on background-color, color, border-color, and box-shadow over 0.2s ease-in-out.
- **Keyboard:** Standard focus management for interactive elements.

## 8. Voice & Don'ts

Editorial voice is playful, direct, and conversational, often weaving emojis directly into headline text to reinforce a human-centered tone. The language is action-oriented and inviting, consistently avoiding cold corporate jargon and complex sentence structures.

- **Tone:** Playful, direct, and human-centered.
- **Headline style:** Conversational and expressive, often incorporating emojis directly into the text.
- **CTA style:** Action-oriented and inviting, using simple, clear language.
- **Avoid:** Technical jargon / Cold or corporate language / Complex sentence structures

### Don'ts
- ❌ don't use a dark theme — screenshot shows a light gray (#f2f2f2) background with black text
- ❌ don't use thin, delicate typography — screenshot shows bold, geometric sans-serif display text
- ❌ don't use sharp, rectangular corners — screenshot shows heavily rounded pill-shaped buttons and rounded card containers
- ❌ don't use subtle, muted accents — screenshot shows a vibrant, high-chroma yellow (#e6e51e) as the primary accent
- ❌ don't use dense, cramped layouts — screenshot shows generous whitespace and large, centered content
- ❌ don't avoid inline visual elements — screenshot shows emojis integrated directly into the main headline text

The system deliberately rejects dark themes, thin typography, sharp corners, muted accents, cramped layouts, and sterile headlines without visual warmth.

## System Prompt (paste into AI tool)

```
This is a playful, high-contrast SaaS landing page for a mobile app design tool. The core identity is built on a light gray (#f2f2f2) background with stark black (#000000) text and a vibrant, high-chroma yellow (#e6e51e) accent for primary actions. Typography features bold, geometric sans-serif display fonts (Poppins) paired with clean humanist sans-serif body text (Inter). The layout uses generous whitespace, centered containers, and heavily rounded, pill-shaped UI elements. Critical donts: avoid dark modes, avoid thin typography, avoid sharp corners, avoid muted accents, avoid cramped layouts, and avoid sterile, emoji-free headlines. The design is expressive, human-centered, and focused on collaborative mobile wireframing.
```