---
version: alpha
name: Uniswap
description: A hot-pink swap card adrift in a galaxy of blurred token orbs.
colors:
  on-surface: "#131313"
  surface: "#FFFFFF"
  outline: "#F2F2F2"
  error: "#E10F0F"
  primary: "#F50DB4"
  muted-ink: "#222222"
  slate: "#48577F"
  surface-2: "#F9F9F9"
  interactive-pink: "#FF37C7"
  pink-base: "#FC74FE"
  pink-light: "#FEF4FF"
  blue-pastel: "#B0CFFC"
  ethereum-blue: "#627EEA"
  spectrum-orange: "#FF4D00"
  spectrum-green: "#0C8911"
  spectrum-violet: "#8251FB"
  turquoise: "#00C3A0"
  uniswapx-violet: "#4673FA"
typography:
  micro-monospace:
    fontFamily: Basel Grotesk
    fontSize: 12px
    fontWeight: 485
    lineHeight: 16px
    letterSpacing: 0em
  body-3-caption:
    fontFamily: Basel Grotesk
    fontSize: 14px
    fontWeight: 485
    lineHeight: 18px
    letterSpacing: 0em
  body-2-button:
    fontFamily: Basel Grotesk
    fontSize: 16px
    fontWeight: 485
    lineHeight: 24px
    letterSpacing: 0em
  body-1-subheading:
    fontFamily: Basel Grotesk
    fontSize: 18px
    fontWeight: 485
    lineHeight: 28px
    letterSpacing: 0em
  heading-3:
    fontFamily: Basel Grotesk
    fontSize: 24px
    fontWeight: 485
    lineHeight: 29px
    letterSpacing: 0em
  heading-2:
    fontFamily: Basel Grotesk
    fontSize: 36px
    fontWeight: 485
    lineHeight: 40px
    letterSpacing: 0em
  heading-1:
    fontFamily: Basel Grotesk
    fontSize: 52px
    fontWeight: 485
    lineHeight: 49.92px
    letterSpacing: 0em
  display-hero:
    fontFamily: Basel Grotesk
    fontSize: 64px
    fontWeight: 485
    lineHeight: 1.1
    letterSpacing: 0em
rounded:
  hairline-chip-small-control: 4px
  swap-input-digit-field: 0px
  card-swap-widget: 12px
  nested-token-button: 16px
  feature-card: 24px
  pill-button-token-selector-avatar: 999999px
spacing:
  "1": 1px
  "2": 2px
  "4": 4px
  "8": 8px
  "12": 12px
  "16": 16px
  "20": 20px
  "24": 24px
  "32": 32px
  "40": 40px
  "48": 48px
  "60": 60px
---
# Uniswap — Style Reference
> A hot-pink swap card adrift in a galaxy of blurred token orbs.

**Theme:** light

Uniswap runs an almost-white canvas (`#FFFFFF` fading to `#F9F9F9`) scattered with softly-blurred, out-of-focus token coins in every hue of a full rainbow spectrum — the only place the palette runs loud. Against that, the interface itself is disciplined to near-monochrome: `#131313` ink text on white, hairline `#F2F2F2` borders, and exactly one saturated interactive color — a hot magenta-pink (`#FF37C7`) reserved for the CTA, links, and the wordmark. The type is Basel Grotesk, a geometric grotesk set at a light-ish 485 weight even at 64px display size, so headlines read confident but never heavy. Shapes split two ways: fully-round pills (`999999px`) for chips and primary buttons, versus generously-rounded `12–32px` cards for the swap widget and content blocks. The result is a fintech product that feels like a toy — playful spectrum confetti wrapped around a coldly precise trading instrument.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#131313` | `--color-ink` | Primary text, headings, icons, input digits — carries nearly all copy. Not pure black; a warm near-black. |
| Muted Ink | `#222222` | `--color-ink-muted` | Secondary/ghost button labels and lower-emphasis controls. |
| Slate | `#48577F` | `--color-slate` | Tertiary/metadata text ("$0", helper captions). |
| White | `#FFFFFF` | `--c-white` | Page canvas and primary card surface. |
| Surface | `#F9F9F9` | `--color-surface` | Recessed swap-input panels and nested cards — the one-step-down luminance. |
| Hairline | `#F2F2F2` | `--color-border` | 1px card borders and dividers; the only stroke color in chrome. |
| Interactive Pink | `#FF37C7` | `--color-accent1` | THE signature. CTA fill, text links, the "Uniswap" wordmark. The sole saturated interactive color — never used for body text or large fills. |
| Pink Vibrant | `#F50DB4` | `--c-pinkVibrant` | Inline text-link pink ("zero app fees") and hot emphasis; a deeper cousin of the accent. |
| Pink Base | `#FC74FE` | `--c-pinkBase` | Brand fills and gradient anchor; the lighter spectrum pink. |
| Pink Light | `#FEF4FF` | `--c-pinkLight` | Tinted fill for the soft "Get started" hero button (pink text on pale pink). |
| Blue Pastel | `#B0CFFC` | `--color-blue-pastel` | Soft card / callout fill in the marketing spectrum. |
| Ethereum Blue | `#627EEA` | `--color-eth` | Token chrome (the ETH selector) and cool spectrum orbs. |
| Spectrum Orange | `#FF4D00` | `--c-orangeVibrant` | Token-orb spectrum + editorial accent; never a CTA. |
| Spectrum Green | `#0C8911` | `--c-greenBase` | Positive / price-up signal and accented headings. |
| Spectrum Violet | `#8251FB` | `--color-violet` | Token orbs and UniswapX branding. |
| Turquoise | `#00C3A0` | `--c-turquoiseBase` | Token orbs and secondary positive accent. |
| Critical Red | `#E10F0F` | `--color-critical` | Errors and destructive states only. |
| UniswapX Violet | `#4673FA` | `--c-uniswapXViolet` | UniswapX product identity (paired with `#7D55FB`). |

## Tokens — Typography
### Basel Grotesk — the single UI + display family, everything from 12px captions to the 64px hero, kept at a light 485 weight so even large headlines stay airy · `--font-basel`
- **Substitute:** Basel, Space Grotesk, Inter, then `-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`.
- **Weights:** 485 (book/default), 500 (medium), 535 (semibold — used for emphasis subheads and links).
- **Sizes:** 12, 14, 16, 18, 24, 36, 52, 64 px.
- **Line height:** 16px (micro) → 28.8px (small) → 40px (medium) → 49.92px (large) — roughly 1.2–1.3× and tightening as size grows.
- **Letter spacing:** Effectively none; the grotesk's own geometry carries the display presence.
- **Role:** One family does all work — there is no serif, no separate display face. Weight (485 vs 535), not family, marks hierarchy.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Micro / Monospace | 12px | 16px | normal | `--t-font-monospace` |
| Body 3 / Caption | 14px | ~18px | normal | `--t-font-body3` |
| Body 2 / Button | 16px | ~24px | normal | `--t-font-body2` |
| Body 1 / Subheading | 18px | ~28px | normal | `--t-font-body1` |
| Heading 3 | 24px | ~29px | normal | `--t-font-heading3` |
| Heading 2 | 36px | 40px | normal | `--t-font-heading2` |
| Heading 1 | 52px | 49.92px | normal | `--t-font-heading1` |
| Display / Hero | 64px | ~1.1 | normal | *(inferred)* |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 1 | 1px | `--t-space-spacing1` |
| 2 | 2px | `--t-space-spacing2` |
| 4 | 4px | `--t-space-spacing4` |
| 8 | 8px | `--t-space-spacing8` |
| 12 | 12px | `--t-space-spacing12` |
| 16 | 16px | `--t-space-spacing16` |
| 20 | 20px | `--t-space-spacing20` |
| 24 | 24px | `--t-space-spacing24` |
| 32 | 32px | `--t-space-spacing32` |
| 40 | 40px | `--t-space-spacing40` |
| 48 | 48px | `--t-space-spacing48` |
| 60 | 60px | `--t-space-spacing60` |

### Border Radius
| Element | Value |
|---------|-------|
| Hairline chip / small control | 4px – 8px |
| Swap-input digit field | 0px (unrounded, flush) |
| Card / swap widget | 12px – 20px |
| Nested token button | 16px |
| Feature card | 24px – 32px |
| Pill button, token selector, avatar | 999999px (full) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Short | `0px 1px 6px 2px #00000008, 0px 1px 2px 0px #00000005` | `--shadow-short` |
| Medium | `0px 6px 12px -3px #1313130a, 0px 2px 5px -2px #13131308` | `--shadow-medium` |
| Large | `0px 10px 20px -5px #1313130d, 0px 4px 12px -3px #1313130a` | `--shadow-large` |

### Layout
- **Page max-width:** contained, center-stacked hero (~1200px content column) on a full-bleed white canvas.
- **Section gap:** 48–60px between stacked marketing blocks.
- **Card padding:** 8–20px inside the swap widget; nested panels pad 8–16px.
- **Element gap:** 8–16px between controls; 4px within tight groups.

## Components
### Primary CTA Button (Get started, header)
**Role:** The single loudest action — top-right "Get started" and inline conversions.
Solid Interactive Pink `#FF37C7` fill, Ink `#131313` label at 16px / 485, radius `12px`, padding `8px 12px`. A pill variant (`999999px`) appears for the in-widget "Select token". Pink fill is exclusive to this control class.

### Soft CTA Button (in-widget Get started)
**Role:** The primary action inside the swap card, styled quieter so the card stays calm.
Pale pink `#FEF4FF` fill with Interactive Pink `#FF37C7` text at 16px / 535, generous radius, full-width. Same color story as the loud CTA but inverted (tint bg, pink text) to lower the temperature.

### Secondary / Ghost Button
**Role:** Low-emphasis controls (nav, menu, wallet chips).
Transparent or `#FFFFFF` fill, Muted Ink `#222222` label at 16px / 485, 1px `#F2F2F2` border, radius up to `999999px` (pill). No shadow.

### Swap Widget (hero card)
**Role:** The product itself — the Sell/Buy trade surface floating over the canvas.
White `#FFFFFF` card, radius `~20px`, soft `--shadow-medium` depth. Holds two stacked input panels separated by a circular flip control.

### Swap Input Panel
**Role:** The Sell and Buy amount fields.
Recessed `#F9F9F9` surface, radius `16–20px`, `8px` inner padding, `4px #FFFFFF` inset ring. Digit input is Basel at **36px / 485**, Ink `#131313`, borderless and flush (radius 0). Sub-caption ("$0") in Slate `#48577F`.

### Token Selector Pill
**Role:** The asset chooser (ETH ▾ / Select token).
Full pill (`999999px`), holds a circular token icon + ticker + chevron. "Select token" appears as a solid pink pill; a chosen token shows on white with hairline border.

### Text Link
**Role:** Inline emphasis and navigation ("zero app fees").
Interactive Pink `#FF37C7` (or `#F50DB4` for hotter inline emphasis) at 16px, weight 485 → 535 on emphasis. No underline; color alone signals interactivity.

### Search Bar
**Role:** Global token/pool/wallet search in the header.
Pill-shaped, white fill with hairline border, leading magnifier icon, placeholder in muted grey, trailing `/` keyboard-shortcut hint chip.

### Feature Card (spectrum)
**Role:** Marketing content blocks below the fold.
Fully-saturated spectrum fills — `#B0CFFC`, `#FC72FF`, `#8251FB`, `#00C3A0` — at radius `32px`, no border. This is the one place large saturated color is allowed.

### Token Orb (decorative)
**Role:** The floating, out-of-focus coin field behind the hero.
Circular (`50%`), heavily gaussian-blurred, drawn from the full `--c-*` spectrum (pink, blue, green, orange, turquoise, purple). Pure atmosphere — never interactive, never sharp.

### Nav Bar
**Role:** Top-level navigation (Trade / Explore / Pool / Portfolio).
Transparent over the white canvas, Ink `#131313` labels at ~16px / 485, generous horizontal gap. Pink wordmark + unicorn mark anchors the left; overflow "…" and pink CTA anchor the right.

### Price / Positive Text
**Role:** Gains, positive deltas, success accents.
Spectrum Green `#0C8911` at the heading's own size/weight (e.g. 24px / 535). Critical Red `#E10F0F` for the negative counterpart.

## Do's and Don'ts
### Do
- Keep exactly one saturated interactive color: pink `#FF37C7`. If it isn't a link, a CTA, or the wordmark, it isn't pink.
- Set headings in Basel at the light **485** weight, even at 52–64px — resist the urge to bold.
- Recess inputs one luminance step to `#F9F9F9` on a `#FFFFFF` card; convey depth with luminance and soft `--shadow-medium`, not heavy borders.
- Reserve the full rainbow `--c-*` spectrum for blurred token orbs and marketing feature cards — atmosphere and decoration, never chrome.
- Mix the two shape languages deliberately: full pills for buttons/chips/avatars, `12–32px` rounds for cards.

### Don't
- Don't paint body text, large surfaces, or backgrounds pink — it is a spot color only.
- Don't introduce a second UI typeface; Basel does display, body, and captions alike.
- Don't render token orbs sharp or interactive — they must stay soft-blurred background.
- Don't add hard drop shadows or dark borders; the elevation vocabulary is pale, near-transparent Ink shadows (`#1313130a`).
- Don't darken the canvas — this system lives in near-white; there is no dark hero here.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page background, hero field. |
| 0.5 | Canvas Wash | `#F9F9F9` | Subtle full-page wash / large section grounds. |
| 1 | Card | `#FFFFFF` | Swap widget, content cards (lifted by shadow). |
| 2 | Recessed Panel | `#F9F9F9` | Swap input wells, nested panels (stepped down). |
| — | Border | `#F2F2F2` | Hairline separators between surfaces. |

## Elevation
Depth is luminance + soft shadow, never a dark line. Cards sit on the white canvas via three near-transparent Ink shadow tiers (`--shadow-short/medium/large`, all built on `#131313` at 3–5% alpha) — the swap widget uses the medium tier. Inside a card, the opposite move applies: input panels *recede* to `#F9F9F9` with a `4px #FFFFFF` inset ring, so nesting reads as sinking rather than stacking. There is no heavy border in the whole system — the strongest stroke is the `#F2F2F2` hairline.

## Imagery
No photography. The signature visual is a generative field of **out-of-focus token orbs** — dozens of circular coins in the full brand spectrum, heavily gaussian-blurred and scattered at varying scale and depth across the near-white hero, evoking a bustling multi-chain universe without a single sharp asset. Iconography is minimal, geometric, monoline in Ink. The unicorn mark and pink wordmark are the only fixed brand imagery. Effect: the product feels alive and colorful while the interface stays clinically clean.

## Layout
Full-bleed white canvas with a single centered, vertically-stacked hero: oversized display headline → the swap widget → a one-line value prop → a "Scroll to learn more" cue. The swap widget is the fixed anchor of composition, roughly `~460px` wide and centered. Navigation is a transparent top bar (wordmark + primary links left, search center, overflow + pink CTA right). Below the fold, content shifts to full-saturation spectrum feature cards at `32px` radius. Rhythm is calm and generous — lots of white, one focal object per viewport.

## Typography Signature
Uniswap's type move is *restraint through weight, not family*. A single grotesk (Basel) spans 12px captions to a 64px hero, and it stays at the light **485** "book" weight even at display size — so the headline "Swap anytime, anywhere." reads large and confident but never shouty or corporate-bold. Hierarchy is drawn almost entirely from size and generous line-height (40px lead on the 36px heading, 49.92px on the 52px), with a single step to **535** for emphasis subheads and links. The 36px / 485 input digit is the tell: even the number you're typing is set like editorial display type, treating the trade itself as the hero content.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` (wash `#F9F9F9`) / text: `#131313` / surface: `#F9F9F9` / border: `#F2F2F2` / accent: `#FF37C7` / primary action: `#FF37C7` (pink fill, Ink label)

## Example Component Prompts
1. **Swap widget**: Build a centered `~460px` white card, radius `20px`, soft shadow `0px 6px 12px -3px #1313130a`. Stack two `#F9F9F9` input panels (radius `16px`, `8px` padding, `4px #FFFFFF` inset ring) split by a circular flip button. Each panel: label in `#48577F` 14px, a borderless `36px / 485` Ink `#131313` amount field, and a right-aligned token pill. Below: a full-width pale-pink `#FEF4FF` CTA with `#FF37C7` `535` "Get started" text.
2. **Primary CTA button**: Solid `#FF37C7` fill, `#131313` label, Basel 16px / 485, radius `12px`, padding `8px 12px`. Header variant only; no shadow, no border.
3. **Token selector pill**: Full-round (`999999px`) chip on white with a `1px #F2F2F2` border, a circular token icon, ticker in `#131313` 16px / 485, and a chevron. Unset state = solid `#FF37C7` pill reading "Select token" in white.
4. **Hero headline**: Basel `64px`, weight `485`, color `#131313`, tight ~1.1 line-height, centered, no letter-spacing — e.g. "Swap anytime, anywhere."
5. **Token orb field**: Scatter ~20 circular blobs (`50%` radius) across a `#FFFFFF` canvas, each `40–120px`, heavily blurred (`blur(20px)`), colors drawn from `#FC74FE`, `#627EEA`, `#0C8911`, `#FF4D00`, `#00C3A0`, `#8251FB`, `#2ABDFF` — decorative background only, behind all content.

## Similar Brands
- **Robinhood** — a clean near-white fintech surface where a single loud brand color spot-lights the one action that matters.
- **Coinbase** — crypto-native trading UI that keeps chrome monochrome and lets asset color provide the life.
- **Rainbow (wallet)** — shares the playful full-spectrum, softly-blurred gradient aesthetic layered over a calm interface.
- **Linear** — the same discipline of one accent, hairline borders, and luminance-based elevation on a light canvas.
- **Stripe** — geometric grotesk type at light weights and a gradient-forward but clinically clean product surface.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — core neutrals */
  --c-white: #FFFFFF;
  --c-black: #000000;
  --c-scrim: rgba(0,0,0,0.60);
  --color-ink: #131313;
  --color-ink-muted: #222222;
  --color-slate: #48577F;
  --color-surface: #F9F9F9;
  --color-border: #F2F2F2;

  /* Colors — interactive accent (the signature pink) */
  --color-accent1: #FF37C7;

  /* Colors — full brand spectrum (--c-*) */
  --c-pinkLight: #FEF4FF;
  --c-pinkPastel: #FDAFF0;
  --c-pinkBase: #FC74FE;
  --c-pinkVibrant: #F50DB4;
  --c-pinkDark: #361A37;
  --c-redLight: #FFF2F1;
  --c-redPastel: #FDCFC4;
  --c-redBase: #FF5F52;
  --c-redVibrant: #FF0000;
  --c-redDark: #220D0C;
  --c-orangeLight: #FEF5EA;
  --c-orangePastel: #FFE8BC;
  --c-orangeBase: #FF8934;
  --c-orangeVibrant: #FF4D00;
  --c-orangeDark: #371B0C;
  --c-yellowLight: #FFFE8B;
  --c-yellowPastel: #FFF8B4;
  --c-yellowBase: #FFBF17;
  --c-yellowVibrant: #FFF612;
  --c-yellowDark: #1F1E02;
  --c-brownLight: #F7F6F1;
  --c-brownPastel: #E2E0CD;
  --c-brownBase: #85754A;
  --c-brownVibrant: #996F01;
  --c-brownDark: #231E0F;
  --c-greenLight: #EEFBF1;
  --c-greenPastel: #C2E7D0;
  --c-greenBase: #0C8911;
  --c-greenVibrant: #21C95E;
  --c-greenDark: #0F2C1A;
  --c-limeLight: #F7FEEB;
  --c-limePastel: #E4F6C4;
  --c-limeBase: #78E744;
  --c-limeVibrant: #B1F13C;
  --c-limeDark: #232917;
  --c-turquoiseLight: #F7FEEB;
  --c-turquoisePastel: #CAFFDF;
  --c-turquoiseBase: #00C3A0;
  --c-turquoiseVibrant: #5CFE9D;
  --c-turquoiseDark: #1A2A21;
  --c-cyanLight: #EBF8FF;
  --c-cyanPastel: #B9E3F8;
  --c-cyanBase: #23A3FF;
  --c-cyanVibrant: #3ADCFF;
  --c-cyanDark: #15242B;
  --c-blueLight: #EFF4FF;
  --c-bluePastel: #D0D9F8;
  --c-blueBase: #4981FF;
  --c-blueVibrant: #0047FF;
  --c-blueDark: #10143D;
  --c-purpleLight: #FAF5FF;
  --c-purplePastel: #E9D8FD;
  --c-purpleBase: #9E62FF;
  --c-purpleVibrant: #4300B0;
  --c-purpleDark: #1A0040;
  --c-uniswapXViolet: #4673FA;
  --c-uniswapXPurple: #7D55FB;
  --c-fiatOnRampBanner: #FB36D0;

  /* Colors — other measured spectrum roles */
  --color-blue-pastel: #B0CFFC;
  --color-eth: #627EEA;
  --color-violet: #8251FB;
  --color-critical: #E10F0F;

  /* Typography — family */
  --font-basel: "Basel Grotesk", Basel, "Space Grotesk", Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Typography — scale */
  --t-font-monospace: 12px;
  --t-font-body3: 14px;
  --t-font-body2: 16px;
  --t-font-body1: 18px;
  --t-font-heading3: 24px;
  --t-font-heading2: 36px;
  --t-font-heading1: 52px;
  --text-display: 64px;

  /* Typography — weights */
  --f-weight-book: 485;
  --f-weight-medium: 500;
  --f-weight-semibold: 535;

  /* Typography — line heights */
  --f-lineHeight-micro: 16px;
  --f-lineHeight-small: 28.8px;
  --f-lineHeight-medium: 40px;
  --f-lineHeight-large: 49.92px;

  /* Spacing */
  --t-space-spacing1: 1px;
  --t-space-spacing2: 2px;
  --t-space-spacing4: 4px;
  --t-space-spacing8: 8px;
  --t-space-spacing12: 12px;
  --t-space-spacing16: 16px;
  --t-space-spacing20: 20px;
  --t-space-spacing24: 24px;
  --t-space-spacing32: 32px;
  --t-space-spacing40: 40px;
  --t-space-spacing48: 48px;
  --t-space-spacing60: 60px;

  /* Border radius */
  --t-radius-rounded4: 4px;
  --t-radius-rounded8: 8px;
  --t-radius-rounded12: 12px;
  --t-radius-rounded16: 16px;
  --t-radius-rounded20: 20px;
  --t-radius-rounded24: 24px;
  --t-radius-rounded32: 32px;
  --t-radius-roundedFull: 999999px;

  /* Shadows */
  --shadow-short: 0px 1px 6px 2px #00000008, 0px 1px 2px 0px #00000005;
  --shadow-medium: 0px 6px 12px -3px #1313130a, 0px 2px 5px -2px #13131308;
  --shadow-large: 0px 10px 20px -5px #1313130d, 0px 4px 12px -3px #1313130a;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — core neutrals */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-ink: #131313;
  --color-ink-muted: #222222;
  --color-slate: #48577F;
  --color-surface: #F9F9F9;
  --color-border: #F2F2F2;

  /* Colors — interactive accent */
  --color-accent1: #FF37C7;

  /* Colors — full brand spectrum */
  --color-pink-light: #FEF4FF;
  --color-pink-pastel: #FDAFF0;
  --color-pink-base: #FC74FE;
  --color-pink-vibrant: #F50DB4;
  --color-pink-dark: #361A37;
  --color-red-base: #FF5F52;
  --color-red-vibrant: #FF0000;
  --color-orange-base: #FF8934;
  --color-orange-vibrant: #FF4D00;
  --color-yellow-base: #FFBF17;
  --color-yellow-vibrant: #FFF612;
  --color-brown-base: #85754A;
  --color-green-base: #0C8911;
  --color-green-vibrant: #21C95E;
  --color-lime-base: #78E744;
  --color-turquoise-base: #00C3A0;
  --color-turquoise-vibrant: #5CFE9D;
  --color-cyan-base: #23A3FF;
  --color-cyan-vibrant: #3ADCFF;
  --color-blue-base: #4981FF;
  --color-blue-vibrant: #0047FF;
  --color-blue-pastel: #B0CFFC;
  --color-purple-base: #9E62FF;
  --color-purple-vibrant: #4300B0;
  --color-eth: #627EEA;
  --color-violet: #8251FB;
  --color-critical: #E10F0F;
  --color-uniswapx-violet: #4673FA;
  --color-uniswapx-purple: #7D55FB;

  /* Typography */
  --font-basel: "Basel Grotesk", Basel, "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --text-caption: 12px;
  --text-body3: 14px;
  --text-body: 16px;
  --text-body1: 18px;
  --text-heading3: 24px;
  --text-heading2: 36px;
  --text-heading1: 52px;
  --text-display: 64px;
  --font-weight-book: 485;
  --font-weight-medium: 500;
  --font-weight-semibold: 535;
  --leading-micro: 16px;
  --leading-small: 28.8px;
  --leading-medium: 40px;
  --leading-large: 49.92px;

  /* Spacing */
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;

  /* Border radius */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-full: 999999px;

  /* Shadows */
  --shadow-short: 0px 1px 6px 2px #00000008, 0px 1px 2px 0px #00000005;
  --shadow-medium: 0px 6px 12px -3px #1313130a, 0px 2px 5px -2px #13131308;
  --shadow-large: 0px 10px 20px -5px #1313130d, 0px 4px 12px -3px #1313130a;
}
```