---
name: Aaply
description: "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."
version: alpha

colors:
  background: "#f2f2f2"
  primary: "#000000"
  tertiary: "#e6e51e"
  neutral: "#c4c4c4"
  bg-soft: "#ffffff"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  headline:
    fontFamily: humanist-sans
    fontSize: 31px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 16px
  md: 30px
  lg: 50px
  pill: 3000px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A collaborative tool for teams to design mobile apps and create user-centered product experiences.

*Figma for mobile wireframing*

## Colors

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

- **Background (`#f2f2f2`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#e6e51e`)** — uses `accent` token
- **Muted (`#c4c4c4`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

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

## Layout

Centered container with large typography and generous vertical spacing.

*Rhythm:* Generous whitespace between sections to maintain a clean, airy feel.

## Elevation & Depth

- rgba(0, 0, 0, 0.2) 0px 10px 10px -5px
- Borders: 1px solid black

## Shapes

- `sm`: 16px
- `md`: 30px
- `lg`: 50px
- `pill`: 3000px

## Components

- **button:** Large, pill-shaped buttons with high contrast (solid black or solid yellow) and no border radius constraints.
- **card:** Large, white, rounded containers for content sections.
- **chip:** Not prominently featured.
- **input:** Not prominently featured.
- **hero:** Centered headline with inline emojis, followed by primary and secondary CTAs.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```