---
name: Rainbow
description: "Worth including for its masterful use of 3D typography and illustrations to make a complex fintech product feel approachable, friendly, and fun."
version: alpha

colors:
  background: "#F1F3F6"
  primary: "#000000"
  secondary: "#777885"
  tertiary: "#FF8A00"
  neutral: "#777885"
  bg-soft: "#FFFFFF"
  line: "rgba(15,16,26,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 0.95
    fontWeight: 900
    letterSpacing: "-3px"
  headline:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 800
    letterSpacing: "-2px"
  body:
    fontFamily: geometric-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 12px
  md: 24px
  lg: 32px
  pill: 999px

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

---

## Overview

An expressive and secure cryptocurrency wallet that prioritizes fun and ease of use.

*A playful, everyday wallet for the colorful world of crypto*

## Colors

A vibrant, multi-chromatic palette anchored by a clean, light neutral background, using saturated gradients and 3D elements to convey playfulness and accessibility.

- **Background (`#F1F3F6`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#777885`)** — uses `ink-soft` token
- **Accent (`#FF8A00`)** — uses `accent` token
- **Muted (`#777885`)** — uses `muted` token
- **Borders (`rgba(15,16,26,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- Heavily weighted, rounded geometric sans-serif for headlines to maximize approachability
- Tight tracking on large text to create a bold, modern presence
- Clean, legible sans-serif for body text to maintain readability

## Layout

Asymmetrical grid layouts with floating 3D elements and overlapping UI components.

*Rhythm:* Generous internal padding within large, rounded UI elements to maintain a spacious, uncluttered feel.

## Elevation & Depth

- inset 0px 0.48px 0.87px -1px rgba(255, 255, 255, 0.59)
- inset 0px 8px 14.4px -3px rgba(255, 255, 255, 0.4)
- 0px 0.6px 0.6px -1.25px rgba(15, 16, 26, 0.086)
- 0px 2.29px 2.29px -2.5px rgba(15, 16, 26, 0.075)
- Borders: No visible hard borders; depth is achieved through soft shadows and inset glows on 3D elements.

## Shapes

- `sm`: 12px
- `md`: 24px
- `lg`: 32px
- `pill`: 999px

## Components

- **button:** Large, rounded pill-shaped buttons with vibrant gradients (orange, pink) and soft inner glows, accompanied by illustrative 3D icons.
- **card:** Rounded rectangular containers with soft shadows and occasional gradient backgrounds, used to showcase features.
- **chip:** Minimal use; informational badges and inline links within feature descriptions.
- **input:** Clean, well-padded input fields with rounded corners, often nested within larger feature card UIs.
- **hero:** A large, expressive hero section featuring massive 3D assets, oversized bold typography, and prominent CTA buttons.

## Do's and Don'ts

**Don't:**
- don't use sharp corners — screenshot shows large, rounded pill shapes (32px+ radius)
- don't use a single flat accent color — screenshot shows vibrant multi-color gradients (orange, pink) on CTAs
- don't use thin, delicate typography — screenshot shows heavy, bold geometric sans-serif fonts
- don't use heavy, dark backgrounds — screenshot shows a predominantly light, airy palette (white, light gray)
- don't use flat, 2D iconography — screenshot prominently features glossy, 3D illustrative elements
- don't use a rigid, strict grid — screenshot shows an expressive, slightly asymmetrical layout with floating elements

---

## System Prompt (paste into AI agent)

```
Positioning: A playful and accessible cryptocurrency wallet designed for everyday use. Key hex colors: #FF8A00 (orange CTA), #FF54BB (pink CTA), #000000 (ink), #F1F3F6 (bg). Font categories: Bold geometric-sans for display, clean geometric-sans for body. Critical donts: Do not use sharp corners; do not use a single flat accent color; do not use thin, delicate typography; do not use heavy, dark backgrounds; do not use flat, 2D iconography; do not use a rigid, strict grid.
```