---
name: MetaMask
description: "This site is a strong example of how to use extreme typography and a vibrant, non-traditional color palette to create a distinctive and memorable brand identity in the crypto space."
version: alpha

colors:
  background: "#FFF0E6"
  primary: "#0A0A0A"
  secondary: "#3D065F"
  neutral: "#573D46"
  bg-soft: "#E5FFC3"
  bg-quiet: "#F7F9FC"
  muted-soft: "#C8CEDA"
  line: "rgba(10,10,10,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 120px
    lineHeight: 0.9
    fontWeight: 700
    letterSpacing: "-2px"
  h1:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 600
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A robust and distinctive crypto wallet interface that balances technical credibility with expressive, bold branding.

*A bold, geometric gateway to decentralized finance, blending technical precision with approachable, playful aesthetics.*

## Colors

A bold, high-contrast palette that uses expressive, saturated colors against soft pastels to create visual interest.

- **Background (`#FFF0E6`)** — uses `bg` token
- **Primary text (`#0A0A0A`)** — uses `ink` token
- **Secondary text (`#3D065F`)** — uses `ink-soft` token
- **Muted (`#573D46`)** — uses `muted` token
- **Borders (`rgba(10,10,10,0.1)`)** — uses `line` token

## Typography

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

- Headlines use extremely tight line-heights and letter-spacing for impact.
- Body text maintains high legibility with standard weight.
- UI labels and navigation use a medium weight.

## Layout

A centered, column-driven layout with large, expressive hero sections and a grid-based feature showcase.

*Rhythm:* A consistent 4px base grid with a linear scale for predictable, harmonious spacing.

## Elevation & Depth

- rgb(204, 204, 204) 0px 0px 2px 2px
- rgb(128, 128, 128) 0px 0px 5px 0px
- Borders: Minimal, relying on background color contrast and strong typography for separation.

## Shapes

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

## Components

- **button:** Pill-shaped, high-contrast (black or dark purple with white text) buttons with generous padding.
- **card:** Colorful, rounded-corner cards with solid background fills and no visible borders, used for feature highlights.
- **chip:** Not a prominent element in this view.
- **input:** Simple, pill-shaped input fields with clean borders.
- **hero:** Massive, tightly stacked typography dominating the viewport, accompanied by abstract geometric illustrations.

## Do's and Don'ts

**Don't:**
- Don't use thin, lightweight fonts for headlines — the screenshot shows extremely heavy, bold display typography.
- Don't use a dark mode as default — the primary backgrounds are soft pastels like peach and lime green.
- Don't apply heavy box shadows to cards — the screenshot shows flat, colorful surfaces without drop shadows.
- Don't use sharp, rectangular buttons — the screenshot shows consistently pill-shaped (high-radius) buttons.
- Don't create dense, text-heavy layouts — the screenshot shows generous whitespace and large, impactful type.
- Don't use a muted, monochromatic color palette — the screenshot shows vibrant, multi-colored sections.

---

## System Prompt (paste into AI agent)

```
Design a bold, expressive Web3 product site that feels both technically credible and approachably playful. Use a core palette of soft peach (#FFF0E6) and lime (#E5FFC3) backgrounds with deep purple (#3D065F) and dark teal (#013330) for high contrast. Typography should be a mix of an ultra-bold geometric display font for massive headlines and a clean, geometric sans-serif for body copy. Key interactions should feel bouncy and elastic. CRITICAL: Never use thin fonts for headings; always use pill-shaped buttons; avoid default dark mode; keep layouts spacious with large text; do not add heavy shadows to cards; ensure colors are vibrant and high-contrast.
```