---
version: alpha
name: Ask Ape
description: Playful fintech energy — a vibrant lime-green brand accent and banana-gold highlights over a clean white canvas, friendly geometric sans headlines, pill-shaped CTAs, and softly-rounded cards. Approachable money-talk ("No suits. No jargon") rendered as bold, colorful, high-contrast UI.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f7f4"
  ink: "#10110f"
  ink-secondary: "#5b5f57"
  ink-muted: "#8a8f84"

  # Brand
  primary: "#1fd65a"          # Ape lime green — CTAs, brand accent
  primary-deep: "#12a743"     # hover / pressed green
  banana: "#ffd23f"           # banana-gold highlight
  banana-deep: "#e6b400"

  # On-color
  on-primary: "#0a2b14"       # dark green ink on lime fill (contrast-safe)
  on-banana: "#3a2e00"
  on-ink: "#ffffff"

  # Neutral scale
  gray-900: "#10110f"
  gray-600: "#5b5f57"
  gray-400: "#8a8f84"
  gray-200: "#e4e6e0"
  gray-100: "#eef0ea"
  gray-50: "#f6f7f4"

  # Interactive
  border: "#e4e6e0"
  focus-ring: "#1fd65a"
  link: "#12a743"

  # Status
  positive: "#1fd65a"
  negative: "#e5484d"

typography:
  display-hero:
    fontFamily: "Poppins, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -1.0px
  card-title:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 28px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  button-banana:
    backgroundColor: "{colors.banana}"
    textColor: "{colors.on-banana}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  badge:
    backgroundColor: "{colors.gray-50}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-brand:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.gray-100}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.focus-ring}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# Ask Ape Design System

## Overview

Ask Ape (Ape AI) is an AI trading companion that strips the suits and jargon out of investing, and its visual language does exactly the same thing to the interface. The canvas is clean white (`{colors.background}`) with near-black ink (`{colors.ink}`), but the personality lives in a single, loud move: a vibrant lime-green brand accent (`{colors.primary}`) that signals "go", energy, and money-in-motion. Where most fintech reaches for navy and gravitas, Ask Ape reaches for a playful, almost cartoonish green and a banana-gold (`{colors.banana}`) highlight that nods to the ape mascot.

The type system is friendly and geometric. Headlines lean on a rounded geometric sans (Poppins-class) at heavy weights with mild negative tracking, giving them confidence without the cold compression of a developer-tooling brand. Body copy runs in a neutral, highly readable sans (Inter-class) so the conversational voice ("No suits. No jargon") reads as approachable rather than slick. The result is bold and colorful but never noisy — color is rationed to CTAs, brand moments, and status, while the surrounding layout stays calm and white.

Shape is the third pillar. CTAs are fully pill-shaped (`{rounded.pill}`), cards and panels carry generous 20px corners (`{rounded.lg}`), and inputs sit at a softer 12px. Nothing is hard-edged; the geometry is rounded and friendly to match the mascot-driven, accessible tone. Borders are light and neutral (`{colors.border}`), letting the green do the talking.

**Key Characteristics:**
- Vibrant lime-green brand accent (`{colors.primary}`) as the single dominant color
- Banana-gold (`{colors.banana}`) as a secondary playful highlight
- Clean white canvas with near-black ink — high contrast, gallery-calm
- Friendly geometric sans (Poppins-class) headlines, neutral sans (Inter-class) body
- Pill-shaped CTAs and softly-rounded cards (20px) throughout
- Contrast-safe on-color: dark-green ink (`{colors.on-primary}`) on lime fills, never white-on-lime
- Color rationed to CTAs, brand moments, and status — layout stays restrained

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headlines. Near-black with a faint warmth.
- **White** (`{colors.background}`): Page background and card surfaces.
- **Ape Lime** (`{colors.primary}`): The brand accent — primary CTAs, active states, positive status.

### Brand & Accent
- **Lime Deep** (`{colors.primary-deep}`): Hover/pressed state for green CTAs and links.
- **Banana Gold** (`{colors.banana}`): Playful secondary highlight, mascot-adjacent accents.
- **Banana Deep** (`{colors.banana-deep}`): Hover state for banana fills.

### On-Color
- **On Primary** (`{colors.on-primary}`): Dark-green ink placed on lime fills for safe contrast.
- **On Banana** (`{colors.on-banana}`): Dark-brown ink on banana-gold.
- **On Ink** (`{colors.on-ink}`): White text on dark fills.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Headlines, primary text.
- **Gray 600** (`{colors.gray-600}`): Secondary copy, descriptions.
- **Gray 400** (`{colors.gray-400}`): Muted/placeholder text.
- **Gray 200 / 100 / 50** (`{colors.gray-200}` / `{colors.gray-100}` / `{colors.gray-50}`): Borders, dividers, soft surface tints.

### Interactive & Status
- **Border** (`{colors.border}`): Card and input outlines.
- **Focus Ring** (`{colors.focus-ring}`): Lime focus ring on interactive elements.
- **Link** (`{colors.link}`): Deep-green text links.
- **Positive / Negative** (`{colors.positive}` / `{colors.negative}`): Gains green, losses red — fintech ledger cues.

## Typography

### Font Family
- **Display / Headings**: `Poppins`-class geometric sans, with fallbacks `Inter, Helvetica Neue, Arial, sans-serif`
- **Body**: `Inter`-class neutral sans, with fallbacks `Helvetica Neue, Arial, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline — bold, friendly impact |
| `section-heading` | Feature section titles |
| `card-title` | Card and feature headings |
| `body-large` | Hero subtitle, intros |
| `body` | Standard reading text |
| `body-small` | Dense UI text, labels |
| `button-ui` | Buttons and nav links |
| `caption` | Badges, metadata |

### Principles
- **Two families, clear roles**: geometric sans announces (headlines, buttons), neutral sans reads (body). Never blend them within one role.
- **Heavy headlines, light tracking**: 700 weight with mild negative tracking gives confidence without coldness.
- **Conversational over corporate**: type sizes are comfortable, copy is plain-spoken — the design backs the "no jargon" voice.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with comfortable jumps to 40px, 64px, and 96px for section rhythm.

### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single-column with generous top padding and a bold green CTA
- Feature sections: 2–3 column card grids
- Mobile-first: generous whitespace, single-column stacking

### Whitespace Philosophy
- **Calm canvas, loud accent**: lots of white space keeps the lime green from overwhelming.
- **Friendly density**: comfortable padding inside cards (24px) so content never feels cramped.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small chips, inline elements |
| `md` | 12px | Inputs, small cards |
| `lg` | 20px | Cards, panels, feature tiles |
| `xl` | 28px | Large hero panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Lime fill, dark-green ink, full pill. The default CTA.
- **`button-secondary`** — White with a light neutral border, dark ink.
- **`button-banana`** — Banana-gold fill for playful secondary actions.

### Pills & Badges
- **`badge`** — Soft gray pill for neutral metadata.
- **`badge-brand`** — Lime pill with dark-green ink for brand/feature tags.

### Cards
- **`card`** — White, 20px radius, light neutral border.
- **`card-soft`** — Tinted soft surface for grouped/secondary content.

### Inputs
- **`input`** — White, 12px radius, neutral border; focus switches the border to lime (`{colors.focus-ring}`).

### Navigation
- **`nav-bar`** — White sticky header, geometric-sans links, lime pill CTA on the right.

## Do's and Don'ts

### Do
- Use lime green (`{colors.primary}`) as the single dominant accent — CTAs, active states, gains
- Place dark-green ink (`{colors.on-primary}`) on lime fills, never white
- Keep the canvas white and let color be rationed and intentional
- Use pill CTAs and 20px rounded cards for the friendly, rounded geometry
- Use banana-gold sparingly as a playful secondary highlight
- Pair geometric-sans headlines with neutral-sans body

### Don't
- Don't put white text on the lime fill — contrast fails
- Don't introduce navy/corporate fintech palettes that fight the playful tone
- Don't hard-edge buttons or cards — the system is rounded throughout
- Don't let banana-gold compete with lime for primary-action duty
- Don't crowd the layout — whitespace is what keeps the bright accent from shouting

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, full-width CTAs |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | >1024px | Full layout, 3-column feature grids, max 1200px |

### Collapsing Strategy
- Hero: 56px headline scales down, keeps weight and tracking proportionally
- Navigation: horizontal links → hamburger menu, CTA stays visible
- Feature cards: 3-column → 2-column → single column
- Section spacing: 64–96px → ~40px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ape Lime `{colors.primary}` with `{colors.on-primary}` text
- Background: White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Border: `{colors.border}`
- Focus ring: `{colors.focus-ring}`
- Playful highlight: Banana `{colors.banana}`

### Example Component Prompts
- "Create a hero on white. Headline 56px Poppins weight 700, line-height 1.05, letter-spacing -1.6px, color `{colors.ink}`. Subtitle 20px Inter weight 400, `{colors.gray-600}`. Lime pill CTA (`{colors.primary}` fill, `{colors.on-primary}` text, 9999px radius, 14px 28px padding) plus a white bordered secondary pill."
- "Design a feature card: white background, 20px radius, 1px `{colors.border}`, 24px padding. Title 22px Poppins weight 600, body 17px Inter weight 400 in `{colors.gray-600}`."
- "Build a brand badge: lime `{colors.primary}` background, `{colors.on-primary}` text, 9999px radius, 4px 12px padding, 13px weight 500."
- "Create an input: white, 12px radius, `{colors.border}`, 12px 16px padding; on focus switch border to `{colors.focus-ring}` (lime)."

### Iteration Guide
1. Lime green is the only loud color — ration it to CTAs, active states, and gains
2. Always dark-green ink on lime, never white-on-lime
3. Everything is rounded: pill buttons, 20px cards, 12px inputs
4. Geometric sans announces, neutral sans reads
5. Keep the canvas white and spacious so the accent stays bright, not overwhelming

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Ask Ape. Brand names and trademarks belong to their respective owners.