---
version: alpha
name: "Jupiter"
description: "Jupiter (JUP) is Solana's dominant DeFi aggregator, and its site reads as playful-DeFi rather than brutalist-DeFi. The canvas is a near-black `#090d10` (rgb 9,13,16), body sits in Inter, and the brand identity is the signature Jupiter lime-green `#c7f284` — a soft chartreuse that glows against the dark and anchors brand marks, reward chips, and accent moments. Where Solana went cinematic-gradient and Phantom went editorial-restrained, Jupiter leaned playful-confident: a cat-and-space mascot, full-pill action chips, an 8px-radius \"Connect\" wallet button in slate `#212a36`, and slate-blue UI text `#cad5e2` / `#90a1b9`. The voice is warm-crypto-native, the Solana register without the jargon wall: \"The Home of Onchain Finance\". The whole brand reads as DeFi-for-everyone — deep enough to route liquidity across every Solana DEX, friendly enough that a cat in a spacesuit feels right at home."
colors:
  bg: "#090d10"
  bg-deep: "#05080a"
  bg-section: "#0d1318"
  surface: "#19242e"
  surface-soft: "#111922"
  surface-strong: "#212a36"
  brand: "#c7f284"
  brand-hover: "#d5f79c"
  brand-pressed: "#b6e96a"
  brand-deep: "#9fd34f"
  brand-tint: "rgba(199, 242, 132, 0.10)"
  brand-soft: "rgba(199, 242, 132, 0.25)"
  on-brand: "#090d10"
  text: "#ffffff"
  text-strong: "#ffffff"
  text-bright: "#e2e8f0"
  text-muted: "#cad5e2"
  text-soft: "#90a1b9"
  text-faint: "#62748e"
  link: "#c7f284"
  link-hover: "#d5f79c"
  selected-bg: "rgba(199, 242, 132, 0.12)"
  border: "#1c2530"
  border-strong: "#2a3542"
  border-soft: "#141c24"
  border-brand: "#c7f284"
  connect-bg: "#212a36"
  connect-text: "#cad5e2"
  success: "#4ade80"
  warning: "#fbbf24"
  danger: "#f87171"
  info: "#60a5fa"
typography:
  display:
    fontFamily: "Inter"
    fontSize: "80px"
    lineHeight: 1.55
    letterSpacing: "-0.03em"
  body:
    fontFamily: "Inter"
    fontSize: "16px"
    lineHeight: 1.55
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "8px"
  card: "12px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Jupiter is the Solana DeFi aggregator that decided seriousness and play could share a screen. The canvas is a near-black `#090d10` (rgb 9, 13, 16) — not true black, but a cool, slightly blue-leaning charcoal that softens the contrast and lets the brand color glow rather than scream. Body text sits in **Inter** at 16px, the same neutral neo-grotesque that Vercel and Linear made the default voice of modern product UI. The brand identity is the signature **Jupiter lime-green** `#c7f284` — a soft chartreuse that anchors brand marks, reward chips, and accent highlights. It is warmer and gentler than Solana's neon mint `#14f195`, and that warmth is the whole point: Jupiter is the friendly face of onchain finance.

Where Solana went cinematic-gradient and Phantom went editorial-restrained, Jupiter leaned **playful-confident**. The cat-and-space mascot is the brand's personality engine — a small astronaut cat that turns a liquidity-routing protocol into something you'd actually want to hang out with. Action moments are full-pill chips; the "Rewards" chip glows lime against the dark, the "Search anything /" affordance sits in a translucent slate field, and the headline "Connect" wallet button is an 8px-radius slate rectangle in `#212a36` with slate-blue label text `#cad5e2`. Two interaction shapes coexist on purpose: the soft pill for brand/marketing moments, the tighter 8px rectangle for the utilitarian wallet action.

The supporting palette is a cool slate-blue ramp — `#e2e8f0` for bright headings, `#cad5e2` for primary UI text, `#90a1b9` for muted secondary copy, `#62748e` for the faintest captions. Nothing competes with the lime. Surfaces lift off the canvas in subtle steps (`#111922` → `#19242e` → `#212a36`), and depth comes from dark shadows and the occasional lime glow rather than from heavy borders. The atmosphere is dark, calm, and quietly energetic — a trading floor that happens to have a cat in a spacesuit floating past.

The whole brand reads as **DeFi-for-everyone**: deep enough to route a swap across every Solana DEX for the best price, friendly enough that the playful register never feels like a costume. Lime is the energy; near-black is the focus; Inter is the clarity; the cat is the smile.

**Key Characteristics:**
- Near-black `#090d10` canvas (rgb 9, 13, 16) — cool charcoal, not true black
- Signature Jupiter lime-green `#c7f284` brand accent (warmer than Solana mint)
- Inter for the entire type system (display + body)
- Cat-and-space mascot as the personality engine
- Two CTA shapes: full-pill brand chips + 8px-radius slate "Connect" button
- Slate-blue UI text ramp (`#e2e8f0` → `#cad5e2` → `#90a1b9` → `#62748e`)
- Translucent lime tints for chips and selection states
- Subtle stepped dark surfaces with lime-glow accents instead of heavy borders
- Warm, crypto-native, jargon-light voice ("The Home of Onchain Finance")
- Playful-DeFi register that deliberately rejects brutalist black-and-cyan

## Colors

### Canvas / Background
- **Background** (`#090d10`): near-black canvas, rgb 9, 13, 16 — the live page bg.
- **Bg Deep** (`#05080a`): deepest recessed wells, input fields.
- **Bg Section** (`#0d1318`): alternate section banding, one step up from canvas.

### Surface
- **Surface Soft** (`#111922`): default card surface, one step off the canvas.
- **Surface** (`#19242e`): mid-elevation panels, search field fill.
- **Surface Strong** (`#212a36`): "Connect" button bg and topmost interactive surfaces.

### Text
- **Text** (`#ffffff`): pure white for primary body and high-emphasis copy.
- **Text Bright** (`#e2e8f0`): bright slate for large headings.
- **Text Muted** (`#cad5e2`): primary UI label text (the live "Connect" label color).
- **Text Soft** (`#90a1b9`): muted secondary copy, placeholder text.
- **Text Faint** (`#62748e`): faintest captions and disabled labels.

### Brand — Jupiter Lime
- **Brand** (`#c7f284`): the signature lime accent — brand marks, reward chips, links.
- **Brand Hover** (`#d5f79c`): lighter lime on hover.
- **Brand Pressed** (`#b6e96a`): pressed/active lime.
- **Brand Deep** (`#9fd34f`): deepest lime for fine text on lime or dense fills.
- **Brand Tint** (`rgba(199, 242, 132, 0.10)`): translucent lime chip backgrounds.
- **On Brand** (`#090d10`): near-black text placed on a lime fill.

### Borders
- **Border** (`#1c2530`): default hairline separators on the dark canvas.
- **Border Strong** (`#2a3542`): emphasized dividers and card edges.
- **Border Soft** (`#141c24`): faint internal separators.
- **Border Brand** (`#c7f284`): lime focus ring and active-state outline.

### Semantic
- **Success** (`#4ade80`): confirmed swaps, positive deltas.
- **Warning** (`#fbbf24`): slippage and caution notices.
- **Danger** (`#f87171`): failed transactions, negative deltas.
- **Info** (`#60a5fa`): neutral informational chips.

## Typography

### Font Family
- **Display + Body**: `Inter, system-ui, -apple-system, sans-serif`. Inter carries every weight; system fonts are the graceful fallback. This is the live computed body font.
- **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace` for wallet addresses, token amounts in dense contexts, and code.

### Hierarchy

| Role | Font | Size | Weight | LH | Tracking |
|------|------|------|--------|-----|----------|
| display-hero | Inter | 80 | 700 | 1.0 | -0.03em |
| display-lg | Inter | 56 | 700 | 1.05 | -0.02em |
| h1 | Inter | 40 | 700 | 1.1 | -0.018em |
| h2 | Inter | 32 | 600 | 1.2 | -0.012em |
| h3 | Inter | 24 | 600 | 1.25 | -0.005em |
| h4 | Inter | 20 | 600 | 1.3 | 0 |
| body-lg | Inter | 18 | 400 | 1.55 | 0 |
| body | Inter | 16 | 400 | 1.55 | 0 |
| body-sm | Inter | 14 | 400 | 1.5 | 0 |
| label | Inter | 13 | 500 | 1.4 | 0 |
| caption | Inter | 12 | 500 | 1.4 | 0.02em |
| amount | Inter | 36 | 600 | 1.0 | -0.012em |
| address | Mono | 13 | 400 | 1.5 | 0 |
| button | Inter | 14 | 600 | 1.0 | 0 |
| nav-link | Inter | 14 | 500 | 1.0 | 0 |

### Principles
- **Inter for everything**, mono reserved for addresses and dense numeric data.
- **700 weight only on display + h1** — confident headlines without shouting.
- **600 on h2–h4 and amounts** — substantial but lighter than the hero.
- **Tight negative tracking on display** (-0.03em hero, easing toward 0 by body).
- **Body line-height stays generous at 1.55** — readable in long-form copy on dark.
- **Slate-blue text colors, not pure white, for secondary copy** — keeps the lime legible as the loudest element.
- **Mixed case throughout** — no all-caps headlines; caption is the only tracked-out role.

## Layout

### Spacing System
- Base unit **4px**; scale `[0, 4, 8, 12, 16, 24, 32, 48, 64, 96]`.
- Component padding clusters at 16–24px; section rhythm at 64–96px.

### Grid & Container
- Page max width **1280px**, centered with generous side gutters.
- Prose max width **720px** for long-form readability.
- Feature grids: 3-up at desktop, 2-up at tablet, 1-up at mobile.

### Whitespace Philosophy
- Dark canvas does the breathing — negative space is the near-black itself, not white margin.
- Cards float on the canvas with clear gaps; avoid edge-to-edge density.
- The lime accent is rationed; one lime moment per visual cluster keeps it precious.

### Section Cadence
- Hero with mascot → value props → aggregator/product feature grid → ecosystem/stats band → footer.
- Alternate `#090d10` and `#0d1318` section bands for quiet rhythm without hard dividers.

| Breakpoint | Width | Behavior |
|-----------|-------|----------|
| mobile | <640 | hero 80→40; nav collapses to hamburger; single-column; full-width CTAs |
| tablet | 640–1023 | 2-up feature grids; condensed nav; mascot scales down |
| desktop | 1024–1279 | full nav; 3-up grids; mascot at full size |
| wide | ≥1536 | content capped at 1280px; extra canvas gutter |

- **Touch targets**: minimum 44×44px; pills and the 8px Connect button both meet it with 10px+ vertical padding.
- **Collapsing**: search field collapses to an icon on mobile; nav links move into a sheet; reward chips wrap or scroll horizontally.
- **Images / mascot**: mascot is decorative and may be hidden below tablet to protect layout; never let it overlap CTAs.

## Elevation & Depth

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 | flat on `#090d10`, no shadow | page canvas, section bands |
| 1 | `0 2px 12px rgba(0,0,0,0.40)` | resting cards on `#111922` |
| 2 | `0 8px 24px rgba(0,0,0,0.55)` | hovered cards, dropdowns |
| 3 | `0 0 0 1px rgba(199,242,132,0.20), 0 8px 32px rgba(199,242,132,0.12)` | lime-glow emphasis on hero CTA |
| 4 | `0 24px 64px rgba(0,0,0,0.70)` | modals, wallet-connect overlay |

**Shadow Philosophy:** On a near-black canvas, depth reads through darker, softer shadows and subtle surface-lightness steps rather than crisp drop shadows. Elevation is communicated mostly by surface color (`#111922` → `#19242e` → `#212a36`), with shadow as a secondary cue. The lime glow is the one expressive elevation — reserved for the single most important action on a screen.

## Shapes

| Tier | Value | Use |
|------|-------|-----|
| Micro | 2 | tiny indicators, progress nubs |
| Standard | 4 | small chips, inline tags |
| Comfortable | 8 | **inputs + "Connect" button** (live spec) |
| Relaxed | 12 | **default cards** |
| Large | 16 | featured panels, modals |
| Pill | 9999 | **brand CTAs, reward chips, token pills** |

The defining tension is **8px utility vs. full-pill brand**: the "Connect" wallet action is a tight 8px rectangle, while marketing CTAs and reward chips are full pills. Honor both — never pill the Connect button, never square the reward chips.

## Components

### Buttons (4 variants)

**Primary (Lime pill)** — the brand action:
- bg `#c7f284`, text `#090d10` (near-black), Inter 14px 600
- Padding 10×20, radius 9999 (full pill)
- Hover: bg `#d5f79c`; Active: bg `#b6e96a`
- Optional lime glow shadow on emphasis: `0 0 0 1px rgba(199,242,132,0.20), 0 8px 32px rgba(199,242,132,0.12)`

**Connect (Slate 8px)** — the wallet action (live spec):
- bg `#212a36`, text `#cad5e2`, Inter 14px 600
- Padding 10×16, radius **8px** (the one place the pill is rejected)
- Hover: bg `#2a3542`, text `#ffffff`

**Chip (Lime tint pill)** — reward/status chips like "Rewards":
- bg `rgba(199,242,132,0.10)`, text `#c7f284`, Inter 13px 500
- Padding 6×14, radius 9999 (full pill)
- Hover: bg `rgba(199,242,132,0.18)`

**Ghost** — quiet tertiary:
- bg transparent, text `#cad5e2`, 1px border `#1c2530`, radius 8
- Hover: bg `#111922`, border `#2a3542`

### Cards
- bg `#111922`, 1px border `#1c2530`, **12px radius**, padding 24
- Dark shadow `0 2px 12px rgba(0,0,0,0.40)`
- Hover: lift to `0 8px 24px rgba(0,0,0,0.55)`, optional border `#2a3542`
- Feature cards may carry a single lime accent (icon, top hairline, or chip)

### Badges / Tags / Pills
- **Reward/status chip**: lime tint bg, lime text, full pill (see Chip button above)
- **Token pill**: surface-strong `#212a36` bg, white text, token icon left, full pill
- **Semantic badge**: tinted bg of the semantic color at 12% alpha, matching text
- **Count badge**: lime `#c7f284` bg, near-black text, micro pill

### Inputs / Forms
- bg `#05080a` (bg-deep), 1px border `#1c2530`, text `#ffffff`, **8px radius**, padding 10×14
- Placeholder `#90a1b9`
- Focus: 2px lime ring `#c7f284`, border `#c7f284`
- The "Search anything /" field uses translucent slate fill `#19242e` with a `/` keyboard hint right-aligned in `#90a1b9`

### Navigation
- 64px sticky header, bg `#090d10` (canvas) with a faint bottom hairline `#1c2530`
- Jupiter wordmark + cat mark left; top-level nav links center in Inter 14px 500 `#cad5e2`
- "Search anything /" field and "Connect" slate 8px button right
- Active/hover nav link: text brightens `#cad5e2` → `#ffffff`, optional lime underline

- **Easing**: standard `cubic-bezier(0.4, 0, 0.2, 1)` for most transitions; emphasized `cubic-bezier(0.34, 1.56, 0.64, 1)` for playful overshoot on mascot and celebrate states.
- **Durations**: fast 150ms (hover, color), standard 240ms (panels, dropdowns), slow 320ms (page-level reveals, mascot animation).
- **Buttons**: 150ms bg + text color shift; lime CTA may pulse its glow on hover; "Connect" brightens slate bg and label.
- **Cards**: 240ms shadow + border lift on hover; no scale by default (keep dark UI calm).
- **Chips**: 150ms tint deepen on hover.
- **Mascot**: gentle idle float/bob using emphasized easing; never blocks content or interaction.
- **Page transitions**: 320ms fade + small upward translate on section reveal.
- **Reduced motion**: with `prefers-reduced-motion: reduce`, drop mascot animation, translate, and glow pulse; keep instant color/opacity feedback only.

### Computed contrast pairs (from live bg `#090d10`, text `#ffffff`, brand `#c7f284`)
- **Text `#ffffff` on bg `#090d10`** = **19.2:1** — AAA (body and headings).
- **Brand lime `#c7f284` on bg `#090d10`** = **15.4:1** — AAA (lime text/links on dark read effortlessly).
- **On-brand `#090d10` on brand `#c7f284`** = **14.9:1** — AAA (near-black on lime is the correct pairing for lime CTAs).
- **Text Muted `#cad5e2` on bg `#090d10`** = ~13.9:1 — AAA (UI labels).
- **Text Soft `#90a1b9` on bg `#090d10`** = ~7.3:1 — AAA for normal text (secondary copy).
- **Text Faint `#62748e` on bg `#090d10`** = ~3.6:1 — AA for large text only; avoid for body.

### Patterns
- **Focus indicators**: 2px lime ring `#c7f284` (15.4:1 on canvas) — high-visibility on dark.
- **Never use white text on the lime fill** — invert to near-black `#090d10`; white on lime fails contrast.
- **ARIA**: wallet-connect is a modal dialog (`role="dialog"`, focus-trapped); token selectors are `role="combobox"`; reward chips expose `aria-label` with full status.
- **Keyboard nav**: `/` focuses the search field (matches the visible hint); full tab order through nav, CTA, and modal.
- **Screen reader**: the mascot is decorative (`aria-hidden="true"`); truncated addresses expose the full value via `aria-label`/title.
- **Reduced motion**: honored — mascot and glow animations suppressed.

### Tone
**Warm, crypto-native, jargon-light.** Jupiter speaks the Solana-DeFi register but keeps it human — confident about routing and liquidity, never gatekeeping. The tagline "The Home of Onchain Finance" sets the register: inviting, not intimidating.

### Microcopy patterns
- Primary CTAs: **"Connect"** / **"Swap"** / **"Trade"** / **"Get started"**
- Status chips: **"Rewards"**, **"Earn"**, **"Pro"**
- Search affordance: **"Search anything /"** (with the `/` keyboard hint)
- Errors: **"Insufficient SOL balance — add funds to swap"**
- Loading: **"Finding the best route…"**
- Success: **"Swapped 100 USDC for 0.65 SOL"**

### Empty states
- Pair empty states with the mascot and a single lime CTA — e.g. "No positions yet — make your first swap."

### CTA verb conventions
- **Connect / Swap / Trade / Earn / Bridge / Get started**
- Avoid: brutalist all-caps shouting, dense jargon walls, NFT-bro slang.

**Dark-native** — Jupiter is built dark-first on the near-black `#090d10` canvas. There is no separate light theme on the marketing/app surfaces; the dark canvas *is* the brand. The lime `#c7f284`, slate UI text ramp, and stepped surfaces are all tuned for the dark register. If a light context is ever required (e.g. embeds or docs), keep the lime as the brand but deepen it toward `#9fd34f` so it holds contrast on a light background — never place the dark-tuned `#c7f284` on white as a text color without darkening it.

Jupiter's design descends from Solana's playful-but-technical DeFi culture, yet it deliberately diverges from the brutalist black-and-cyan default of most aggregators. The defining choice is the lime-green `#c7f284` — a soft chartreuse that reads warmer and friendlier than Solana's neon mint `#14f195`, glowing against the near-black `#090d10` canvas instead of competing with it. Inter handles the entire type system, the same neutral neo-grotesque that Vercel and Linear made the default voice of modern product UI, which keeps the typography clean while the cat-and-space mascot carries the personality.

The interaction language pairs full-pill brand chips (the lime "Rewards" chip, token pills) with a tight 8px-radius slate "Connect" button `#212a36` — two shapes coexisting on purpose. Slate-blue UI text (`#cad5e2`, `#90a1b9`) keeps secondary copy quiet so the lime stays the loudest element. The lineage is Solana-native but the spirit is closer to Uniswap's playful-confident rejection of DeFi brutalism: a serious liquidity router wearing an approachable, slightly whimsical face.

**Named influences:**
- **Solana** — the Layer 1 chain and ecosystem register Jupiter is built on
- **Inter by Rasmus Andersson** — neutral neo-grotesque sans for the whole system
- **Phantom** — Solana wallet peer sharing dark-DeFi UI conventions
- **Uniswap** — playful-confident DeFi precedent that rejects brutalism
- **Jupiter / JUP** — the aggregator brand and lime-green identity origin

## Do's and Don'ts

### Do
- **Use near-black `#090d10` (rgb 9, 13, 16) as the canvas** — the exact live bg, not pure black.
- **Use Jupiter lime `#c7f284` as the brand accent** — rationed, one moment per cluster.
- **Put near-black `#090d10` text on lime fills**, never white.
- **Use Inter for everything**; mono only for addresses and dense numbers.
- **Pill brand CTAs and reward chips** (full 9999 radius).
- **Use 8px radius for the "Connect" button and inputs** — the utility shape.
- **Keep secondary copy in the slate-blue ramp** (`#cad5e2`, `#90a1b9`).
- **Use the cat-and-space mascot for personality and empty states.**
- **Communicate depth through stepped surfaces** before reaching for shadows.
- **Reserve the lime glow for the single most important action on a screen.**

### Don't
- **Don't substitute the lime.** `#c7f284` is the brand, not Tailwind lime/green or Solana's `#14f195`.
- **Don't use pure black `#000000`** — the canvas is the warmer `#090d10`.
- **Don't put white text on the lime fill** — it fails contrast; invert to near-black.
- **Don't pill the "Connect" button** — it is intentionally an 8px rectangle.
- **Don't square the reward/brand chips** — they are full pills.
- **Don't all-caps headlines** — Inter stays mixed-case.
- **Don't drown the screen in lime** — over-use kills the glow.
- **Don't anthropomorphize the mascot into product copy** — it is personality, not a spokesperson.
- **Don't add gradient fills to the lime CTA** — keep it flat.
- **Don't adopt brutalist black-and-cyan DeFi aesthetics** — warm lime on near-black IS Jupiter.

### Quick Color Reference
- bg (canvas): `#090d10`
- bg-deep: `#05080a`
- surface: `#19242e` / surface-strong: `#212a36`
- text (white): `#ffffff`
- text-muted (UI label): `#cad5e2`
- text-soft: `#90a1b9`
- brand (Jupiter lime): `#c7f284` / hover `#d5f79c`
- on-brand (text on lime): `#090d10`
- connect button bg: `#212a36`
- border: `#1c2530`

### Example Component Prompts

> Build a Jupiter-style hero: near-black `#090d10` canvas, 80px Inter 700 -0.03em headline "The Home of Onchain Finance" in white, a cat-in-a-spacesuit mascot floating beside it, and a lime `#c7f284` full-pill CTA "Get started" with near-black `#090d10` text. Quiet slate-blue `#90a1b9` subhead below.

> Design a "Connect" wallet button: slate `#212a36` bg, slate-blue `#cad5e2` text, Inter 14px 600, 8px radius (not a pill), padding 10×16. Hover: bg `#2a3542`, text white.

> Render a reward chip: full-pill, translucent lime bg `rgba(199,242,132,0.10)`, lime `#c7f284` text, Inter 13px 500, padding 6×14, with a small star/gift icon left.

> Build a swap card: surface `#111922`, 1px border `#1c2530`, 12px radius, padding 24, dark shadow. "From" and "To" sections with `#05080a` inputs (8px radius, lime focus ring), token pills in `#212a36`, and a full-pill lime "Swap" CTA at the bottom with near-black text.

> Design a search field: translucent slate `#19242e` fill, placeholder "Search anything" in `#90a1b9`, a `/` keyboard hint right-aligned, 8px radius, lime `#c7f284` focus border.

> Create a feature grid card: near-black canvas, `#111922` card surface, white 24px Inter 600 title, slate `#90a1b9` body, a single lime `#c7f284` icon as the one accent, 12px radius.

### Iteration Guide

1. **Near-black `#090d10` + Jupiter lime `#c7f284` + Inter + the cat mascot** — get these four right first.
2. **Ration the lime** — one lime moment per visual cluster; if everything is lime, nothing is.
3. **Near-black text on lime, never white** — fix this contrast trap immediately.
4. **Two CTA shapes**: full-pill for brand/chips, 8px rectangle for "Connect" and inputs.
5. **Keep secondary copy in slate-blue** (`#cad5e2` / `#90a1b9`) so the lime stays loudest.
6. **Depth via stepped surfaces** (`#111922` → `#19242e` → `#212a36`) before shadows; reserve the lime glow for the one hero action.
7. **Mascot is personality, not chrome** — use it in heroes and empty states, never overlapping CTAs.
8. **Reject brutalist black-and-cyan** — warm lime on warm near-black is the whole identity.