---
name: Phantom
description: "A strong example of a modern fintech brand that balances playful aesthetics with a sense of security and trust."
version: alpha

colors:
  background: "#FDFCFE"
  primary: "#3C315B"
  tertiary: "#AB8FF8"
  neutral: "#86848D"
  line: "rgba(60,49,91,1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 96px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-2.4px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

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

---

## Overview

A playful and accessible crypto wallet for trading and managing digital assets.

*A friendly, secure gateway to the crypto world*

## Colors

A high-contrast purple-based palette with a light neutral background and a vibrant, friendly accent color.

- **Background (`#FDFCFE`)** — uses `bg` token
- **Primary text (`#3C315B`)** — uses `ink` token
- **Accent (`#AB8FF8`)** — uses `accent` token
- **Muted (`#86848D`)** — uses `muted` token
- **Borders (`rgba(60,49,91,1.0)`)** — uses `line` token

## Typography

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

- Use the Phantom custom font for all text.
- Headlines use a tight letter-spacing of -2.4px at large sizes.
- Maintain a clean, rounded aesthetic in typography to match the brand.

## Layout

A centered, single-column layout with large, immersive hero sections and generous whitespace.

*Rhythm:* A consistent 4px base unit grid with generous padding for content blocks.

## Elevation & Depth

- 0px 0px 4px 0px rgba(226,223,254,1)
- Borders: 1px solid border color matching the ink color

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Rounded pill-shaped buttons with soft background colors and smooth transitions.
- **card:** Clean, simple cards with subtle shadows or borders.
- **chip:** Pill-shaped navigation or filter elements.
- **input:** Standard text inputs with rounded corners.
- **hero:** Large, immersive hero sections with bold typography and playful 3D graphics.

## Do's and Don'ts

**Don't:**
- Don't use sharp, hard edges for buttons or cards — screenshot shows rounded corners.
- Don't use a purely black and white color scheme — screenshot shows a purple-dominant palette.
- Don't use a serif or monospaced font for body text — screenshot shows a humanist-sans font.
- Don't make the hero section feel cramped — screenshot shows generous spacing and large text.
- Don't use overly complex or cluttered navigation — screenshot shows a clean, simple top bar.
- Don't use harsh, jarring transitions — screenshot shows smooth, elegant easing curves.

---

## System Prompt (paste into AI agent)

```
Phantom is a friendly and secure crypto wallet app. The design uses a deep purple (#3C315B) as the primary ink color on a light, slightly purple-tinted white (#FDFCFE) background, with a vibrant light purple accent (#AB8FF8). The typography is a custom, rounded humanist-sans that gives a playful yet trustworthy feel. Critical donts: 1) Don't use sharp, square corners for UI elements, 2) Don't use a cold, purely corporate color palette, 3) Don't use a generic sans-serif font, 4) Don't create dense, information-heavy layouts without whitespace, 5) Don't use abrupt, linear transitions.
```