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