Phantom

# Phantom — Style Reference
> Soft Violet Dreamscape: A calming digital space where gentle curves meet understated color, feeling secure and approachable.

**Theme:** light

**Site:** https://phantom.app

Phantom presents a light, playful, yet sophisticated aesthetic, establishing trust through a unique palette of muted violets and near-achromatic grays. A signature rounded-rectangle form dominates, appearing in primary buttons, hero containers, and navigation elements. The custom 'Phantom' typeface, with its 350-weight headlines, feels intimate and approachable, avoiding the starkness of many crypto platforms while maintaining clarity.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Phantom Violet | `#3c315b` | `--color-phantom-violet` | Primary text, interactive elements (links, navigation items), primary button text. This muted violet forms the brand's core, appearing where attention is needed but aggression is avoided. |
| Lavender Mist | `#e2dffe` | `--color-lavender-mist` | Primary button background, providing a soft, almost glowing contrast to the Phantom Violet text. Also used as a subtle hover state or background highlight, contributing to the approachable feel. |
| Grape Glow | `#ab9ff2` | `--color-grape-glow` | Accent for secondary button backgrounds and occasionally as an SVG fill. A more saturated but still soft violet, used to draw moderate attention. |
| Paper White | `#fdfcfe` | `--color-paper-white` | Page backgrounds, card surfaces, and text on dark backgrounds. A slightly off-white that feels warmer than pure white. |
| Charcoal Black | `#1c1c1c` | `--color-charcoal-black` | Text on light backgrounds, certain secondary button backgrounds. A deep, desaturated black that provides strong contrast without being stark. |
| Silver Ash | `#e9e8ea` | `--color-silver-ash` | Subtle background for UI elements like certain buttons or input fields, creating a barely-there separation. |
| Fog Gray | `#f4f2f4` | `--color-fog-gray` | Minor background accents or very light borders, a whisper of a neutral shade. |
| Stone Gray | `#86848d` | `--color-stone-gray` | Subtler text, icons, and navigation elements, offering a secondary text color that recedes slightly. |
| Success Green | `#2ec08b` | `--color-success-green` | Used for success indicators and badges, a vibrant but not harsh green that complements the violet palette without clashing. |

## Tokens — Typography

### Phantom
- **Weights:** 350, 400
- **Sizes:** 13px, 15px, 16px, 20px, 24px, 30px, 64px, 80px, 96px
- **Line height:** 1, 1.1, 1.2, 1.21, 1.25, 1.35, 1.4
- **Letter spacing:** -0.025
- **Role:** Primary typeface for all text elements. The 350 weight is used prominently for large headlines, creating an intimate, almost whisper-like tone for potentially complex financial topics. The negative letter-spacing contributes to a tightly composed, unified visual block of text.

## Tokens — Spacing

- **Card padding:** 24px

## Tokens — Radius

- **Buttons:** 32px
- **Cards:** 24px
- **input:** 0px
- **pill:** 100px

## Layout

The layout is primarily a max-width contained design with content centered, but sections vary in background color. The hero section often features a full-width background, typically a solid color like Lavender Mist, with content centered. Subsequent sections alternate between Paper White backgrounds and more saturated violet backgrounds, creating a clear visual rhythm. Content is generally arranged in centered stacks, with strong emphasis on large, centrally aligned headlines and descriptive body text. Navigation is a sticky top bar, centered within the max-width container, featuring rounded buttons for primary actions.

## Components

### Download CTA Button Group

### Feature Section Card — Trading Tools

### Security Feature Card — Dark

### Primary Action Button
*Main call to action*

Rounded rectangle button using Lavender Mist (#e2dffe) background and Phantom Violet (#3c315b) text. `Phantom` font, often 15px or 16px, weight 400. Padding: 12px vertical, 20px horizontal. Border radius 32px. Subtle box shadow: #e2dffe 0px 0px 4px 0px.

### Inverted Dark Button
*Secondary action or featured button on dark backgrounds*

Dark button with Charcoal Black (#1c1c1c) background and Paper White (#fdfcfe) text. `Phantom` font. Padding: 48px vertical, 48px horizontal for larger variants. Border radius 24px.

### Ghost Button - Light
*Tertiary action or navigation*

Transparent background with Paper White (#fdfcfe) text and border. `Phantom` font. Padding: 16px all sides. Border radius 32px.

### Dark Card Button
*Button variant for dark cards/sections.*

Uses Charcoal Black (#1c1c1c) background with Paper White (#fdfcfe) text. `Phantom` font. Rounded corners: 24px. Large vertical padding: 48px top, 0px bottom.

### Light Card Button
*Button variant for light cards/sections.*

Uses Silver Ash (#e9e8ea) background with Charcoal Black (#1c1c1c) text. `Phantom` font. Rounded corners: 24px. Large vertical padding: 48px top, 0px bottom.

### Navigation Link
*Primary navigation elements*

Phantom Violet (#3c315b) text. `Phantom` font, typically 16px, weight 400. No explicit padding or background, text-based link.

### Success Badge
*Status indicator or small tag*

Circular badge with Success Green (#2ec08b) background and Phantom Violet (#3c315b) text. Border radius 50%. Zero padding, implies content dictates size.

### Hero Section Container
*Main content block for hero sections*

Large rounded-rectangle container with variable background color (e.g., Lavender Mist #e2dffe, or broader page purples). Border radius 24px. Significant internal padding (48px horizontal, 32px vertical) for content isolation.

## Guidelines

### Do

- Prioritize Phantom Violet (#3c315b) for primary text and interactive elements to maintain brand identity.
- Use Lavender Mist (#e2dffe) for primary button backgrounds and subtle interactive highlights.
- Apply a 24px border radius for main content blocks and card-like elements, and 32px for primary buttons.
- Use the Phantom font with a 350 weight and -0.025em letter spacing for display headlines (64px, 80px, 96px).
- Employ a base unit of 4px for all spacing measurements, translating to values like 4px, 8px, 12px, 16px, etc.
- Use Paper White (#fdfcfe) as the dominant page background color to support the soft, light theme.
- Ensure contrast ratio of 13:1 or higher for text-to-background combinations, using Charcoal Black (#1c1c1c) on light backgrounds like Paper White (#fdfcfe) and Lavender Mist (#e2dffe).

### Don't

- Avoid harsh, saturated colors that deviate from the muted violet and near-achromatic palette, except for specific semantic indicators like Success Green.
- Do not use sharp corners or square elements; maintain the rounded-rectangle and circular forms consistently.
- Refrain from using bold or heavy font weights for headlines; the 350 weight of Phantom font is a brand signature.
- Do not introduce unnecessary box shadows; elevation is minimal, confined to subtle effects like #e2dffe 0px 0px 4px 0px for interactive elements.
- Avoid high-contrast text on bright backgrounds, instead opting for the slightly desaturated Charcoal Black (#1c1c1c) on Paper White (#fdfcfe).
- Steer clear of aggressive or overly dynamic animations; the design encourages a calm and stable user experience.
- Do not vary letter spacing unless explicitly defined; the -0.025em for Phantom font is a stylistic choice, not a general rule.

## Agent Prompt Guide

### Quick Color Reference
- Text (primary): #3c315b
- Background (page): #fdfcfe
- CTA Button Background: #e2dffe
- CTA Button Text: #3c315b
- Accent (secondary button): #ab9ff2

### Example Component Prompts
1. Create a Primary Action Button: `backgroundColor: #e2dffe`, `color: #3c315b`, `borderRadius: 32px`, `padding: 12px 20px`, `fontFamily: Phantom`, `fontSize: 16px`, `fontWeight: 400`, `boxShadow: 0px 0px 4px 0px #e2dffe`.
2. Generate a Hero Section Headline: Centered `Phantom` font, `fontSize: 80px`, `fontWeight: 350`, `letterSpacing: -0.025em`, `color: #3c315b`, on a `backgroundColor: #e2dffe` hero container with `borderRadius: 24px`.
3. Design a Navigation Link: `color: #3c315b`, `fontFamily: Phantom`, `fontSize: 16px`, `fontWeight: 400`, with a subtle hover state changing text `color` to a slightly darker `#1c1c1c`.
4. Produce a Dark Card Button: `backgroundColor: #1c1c1c`, `color: #fdfcfe`, `borderRadius: 24px`, `padding: 48px 48px 0px 48px`, `fontFamily: Phantom`, `fontSize: 20px`, `fontWeight: 400`.