---
name: Rainbowkit
description: "This site is a prime example of modern developer tooling aesthetics, combining a friendly, approachable brand with a technically precise and highly functional interface."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#F5F8FF"
  tertiary: "#3898FF"
  neutral: "#8B8B8B"
  bg-soft: "#1B1C1E"
  bg-quiet: "#25292E"
  line: "rgba(245, 248, 255, 0.12)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 52px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.35px"
  caption:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 6px
  md: 12px
  lg: 24px
  pill: 9999px

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

---

## Overview

The best way to connect a wallet for Web3 applications.

*A friendly, colorful bridge between developers and blockchain wallets.*

## Colors

Dark, high-contrast base with vibrant blue and purple accents for visibility.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#F5F8FF`)** — uses `ink-soft` token
- **Accent (`#3898FF`)** — uses `accent` token
- **Muted (`#8B8B8B`)** — uses `muted` token
- **Borders (`rgba(245, 248, 255, 0.12)`)** — uses `line` token

## Typography

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

- Use humanist-sans for all primary UI text
- Use monospace for code snippets and version numbers
- Maintain tight letter-spacing for headlines

## Layout

Centered single-column layout for content-heavy sections, with full-width dark backgrounds.

*Rhythm:* Consistent vertical rhythm based on 4px increments, with generous padding for hero sections.

## Elevation & Depth

- rgba(0, 0, 0, 0.4) 0px 8px 24px 0px
- rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset
- Borders: 1px solid rgba(245, 248, 255, 0.12)

## Shapes

- `sm`: 6px
- `md`: 12px
- `lg`: 24px
- `pill`: 9999px

## Components

- **button:** Rounded pill shape with solid blue background and white text
- **card:** Dark rounded containers with subtle borders and internal padding
- **chip:** Small rounded badges for version numbers or labels
- **input:** Dark background with subtle borders, used for command line snippets
- **hero:** Large centered text with prominent call-to-action buttons and background gradients

## Do's and Don'ts

**Don't:**
- Don't use a light theme — the screenshot shows a strictly dark mode interface.
- Don't use sharp corners — the screenshot shows predominantly rounded and pill-shaped elements.
- Don't use a single flat color — the screenshot shows vibrant blue and purple gradients.
- Don't use wide, expansive line heights — the screenshot shows tight, compact vertical spacing.
- Don't use serif fonts — the screenshot shows a humanist-sans for all primary UI text.
- Don't use small, cramped buttons — the screenshot shows large, well-padded interactive elements.

---

## System Prompt (paste into AI agent)

```
RainbowKit is a Web3 developer tool for connecting wallets, designed with a dark, high-contrast interface. It features a black background (#000000) with vibrant blue (#3898FF) and purple gradients as primary accents. The typography uses a humanist-sans category for all UI text and monospace for code snippets, with a bold, tightly-spaced scale. Key features include rounded pill-shaped buttons and large, generous spacing. Critical donts: avoid light themes, sharp corners, or serif fonts. Keep the interface clean and focused on developer experience.
```