DESIGN.md inspired by Jupiter

---
name: Jupiter
tagline: Jupiter lime on near-black — Solana DeFi aggregator with Inter, a cat-in-space mascot, and playful pill-CTA energy.
updated_at: 2026-05-28T23:13:47.824Z
published_at: 2026-05-28T23:13:47.824Z
author: webdesignhot
source_url: https://jup.ag
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [fintech]
tags: [dark, playful, sans, crypto, defi, green]
preview_swatch: ['#090d10', '#c7f284', '#212a36']
related: [solana-com, phantom-app]
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.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-muted
  border: border
  ring: border-brand
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:
    family: 'Inter, system-ui, -apple-system, sans-serif'
    weights: [500, 600, 700]
  body:
    family: 'Inter, system-ui, -apple-system, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 80, weight: 700, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-lg:      { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h1:              { size: 40, weight: 700, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h2:              { size: 32, weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h3:              { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h4:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    amount:          { size: 36, weight: 600, lineHeight: 1.0,  tracking: '-0.012em', family: display }
    address:         { size: 13, weight: 400, lineHeight: 1.5,  tracking: '0',        family: mono }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  card: '0 2px 12px rgba(0, 0, 0, 0.40)'
  card-hover: '0 8px 24px rgba(0, 0, 0, 0.55)'
  glow: '0 0 0 1px rgba(199, 242, 132, 0.20), 0 8px 32px rgba(199, 242, 132, 0.12)'
  modal: '0 24px 64px rgba(0, 0, 0, 0.70)'

accessibility:
  contrast-text-on-bg: 19.2
  contrast-brand-on-bg: 15.4
  contrast-on-brand-on-brand: 14.9
  focus-ring: '2px solid #c7f284'
  reduced-motion-honored: true

components:
  button-primary: { bg: brand, text: on-brand, padding: '10px 20px', radius: pill }
  button-connect: { bg: surface-strong, text: text-muted, padding: '10px 16px', radius: 8 }
  button-ghost:   { bg: transparent, text: text, border: border, padding: '10px 16px', radius: 8 }
  button-chip:    { bg: brand-tint, text: brand, padding: '6px 14px', radius: pill }
  card:           { bg: surface-soft, border: '1px solid border', radius: 12, padding: 24, shadow: 'card' }
  input:          { bg: bg-deep, border: '1px solid border', text: text, radius: 8, padding: '10px 14px', focus-border: brand }

lineage:
  summary: 'Jupiter''s design system descends from Solana''s playful-but-technical DeFi culture, but deliberately diverges from the brutalist black-and-cyan default of most aggregators. The signature lime-green `#c7f284` is the brand''s defining choice — a soft chartreuse that reads warmer and friendlier than Solana''s neon `#14f195`, glowing against the near-black `#090d10` canvas. Inter handles every weight (the Vercel/Linear-era neutral sans), keeping the type voice clean while the cat-and-space mascot carries the personality. Full-pill action chips and an 8px-radius slate "Connect" button (`#212a36`) set the interaction language; slate-blue UI text (`#cad5e2`, `#90a1b9`) keeps secondary copy quiet so the lime can pop. The result is DeFi-for-everyone: a serious liquidity router wearing an approachable, slightly whimsical face.'
  influences:
    - { name: 'Solana', role: 'Layer 1 chain and ecosystem register Jupiter is built on', url: 'https://solana.com' }
    - { name: 'Inter by Rasmus Andersson', role: 'neutral neo-grotesque sans for the entire type system', url: 'https://rsms.me/inter/' }
    - { name: 'Phantom', role: 'Solana wallet peer — shared dark-DeFi UI conventions', url: 'https://phantom.app' }
    - { name: 'Uniswap', role: 'playful-confident DeFi precedent rejecting brutalism', url: 'https://uniswap.org' }
    - { name: 'Jupiter / JUP', role: 'aggregator brand and lime-green identity origin', url: 'https://jup.ag' }
---

## 1. Visual Theme & Atmosphere

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

## 2. Color Palette & Roles

### 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.

## 3. Typography Rules

### 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.

## 4. Component Stylings

### 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

## 5. Layout Principles

### 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.

## 6. Shapes & Radius Scale

| 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.

## 7. Depth & Elevation

| 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.

## 8. Interaction & Motion

- **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.

## 9. Accessibility & A11y

### 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.

## 10. Responsive Behavior

| 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.

## 11. Content & Voice

### 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.

## 12. Dark Mode & Theming

**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.

## 13. Lineage & Influences

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

## 14. 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.

## 15. Agent Prompt Guide

### 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.