---
version: alpha
name: Eclipse
description: Cosmic minimalism for an SVM L2 — deep space-navy canvas, near-white ink, violet-to-blue accent gradients, sharp-cornered cards with hairline borders, and a clean geometric sans that lets atmospheric moon/star imagery carry the mood.
colors:
  # Canvas + ink
  background: "#070710"
  surface: "#0e0e1c"
  surface-soft: "#13131f"
  ink: "#f5f5fa"
  ink-secondary: "#a3a3b8"
  ink-muted: "#6b6b80"

  # Accent — violet/blue cosmic gradient
  primary: "#6d5efc"
  primary-hover: "#5a4be0"
  accent-violet: "#8b5cf6"
  accent-blue: "#4f7cff"
  accent-soft: "#1a1733"      # tinted violet surface over canvas

  # On-color
  on-primary: "#ffffff"
  on-ink: "#070710"

  # Borders + lines
  border: "#22222e"
  border-soft: "#1a1a26"
  border-strong: "#33334a"

  # Status / functional
  link: "#9b8cff"
  focus-ring: "#6d5efc"

typography:
  display-hero:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -2px
  section-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 140px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 22px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 22px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 22px
    borderColor: "{colors.border-strong}"
  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.link}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-soft}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.focus-ring}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border-soft}"
---

# Eclipse Design System

## Overview

Eclipse is the visual language of a blockchain that fuses Solana's execution with Ethereum's settlement, and its website reads exactly like that thesis made atmospheric: deep, near-black space-navy canvas (`{colors.background}`) with crisp near-white ink (`{colors.ink}`) and violet accents that feel celestial rather than corporate. The whole page behaves like a night sky. Content floats in generous darkness, and the brand lets photographic moon, cloud, and star imagery do the emotional work while the typographic system stays quiet and geometric.

The accent story is a single cosmic gradient family. A core violet (`{colors.primary}`) anchors primary CTAs and links, sliding toward blue (`{colors.accent-blue}`) in decorative gradients and toward a soft tinted surface (`{colors.accent-soft}`) for badges and pills. Color is used sparingly and with intent: the dark canvas dominates, so a single violet button or a violet-tinted badge reads as a beacon. There are no warm tones in the chrome, nothing decorative competing with the imagery.

Structurally the system is restrained and modern. Cards sit on slightly-lifted dark surfaces (`{colors.surface}`) separated from the canvas by hairline borders (`{colors.border}`) rather than heavy shadows, keeping the night-sky flatness intact. Corners are gently rounded, not pill-soft and not sharp. Inter (a clean geometric sans) carries headings and body alike, with tight negative tracking at display sizes for a compressed, engineered feel, while a monospace label voice (`{typography.mono-label}`) marks technical metadata and stats.

**Key Characteristics:**
- Deep space-navy canvas (`{colors.background}`) — near-black, faintly cool
- Near-white ink (`{colors.ink}`) with layered secondary/muted grays for hierarchy
- Single violet-to-blue cosmic accent family; color is rare and functional
- Hairline borders (`{colors.border}`) over shadows — preserves flat night-sky depth
- Geometric sans (Inter) with tight negative tracking at display sizes
- Monospace label voice for technical metadata and stats
- Atmospheric imagery (moon, stars, clouds) carries mood; chrome stays minimal

## Colors

### Canvas & Ink
- **Space Navy** (`{colors.background}`): Page canvas. Near-black with a cool cast.
- **Surface** (`{colors.surface}`): Cards, buttons-secondary, inputs — one step lifted from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Nested/alternate panels.
- **Ink** (`{colors.ink}`): Primary text and headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, descriptions, nav links.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled, fine print.

### Accent — Cosmic Violet
- **Primary Violet** (`{colors.primary}`): Primary CTAs, key interactive accents.
- **Primary Hover** (`{colors.primary-hover}`): CTA hover state.
- **Accent Violet** (`{colors.accent-violet}`): Decorative gradient stop.
- **Accent Blue** (`{colors.accent-blue}`): Gradient counterpart, sliding toward Ethereum blue.
- **Accent Soft** (`{colors.accent-soft}`): Violet-tinted surface for badges/pills.

### Borders & Lines
- **Border** (`{colors.border}`): Standard card/divider hairline.
- **Border Soft** (`{colors.border-soft}`): Subtler separators, nav underline.
- **Border Strong** (`{colors.border-strong}`): Input outlines, secondary button edge.

### Interactive
- **Link** (`{colors.link}`): Inline links, badge text — a lighter violet for contrast on dark.
- **Focus Ring** (`{colors.focus-ring}`): Keyboard focus outline.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Arial, sans-serif`
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 64px hero headline — maximum compression |
| `section-heading` | Major section titles |
| `sub-heading` | Sub-section headings |
| `card-title` | Feature/card headings |
| `body-large` | Lead paragraphs, hero subtitles |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons, CTAs |
| `caption` | Metadata, small labels |
| `mono-label` | Technical labels, stats, metadata |

### Principles
- **Compression at scale**: Display sizes use negative tracking (-2px at 64px) for an engineered, infrastructure feel; tracking relaxes to neutral by body size.
- **One sans, strict weights**: 400 (read), 500 (UI/interact), 600 (headings). No 700 in chrome.
- **Mono for the machine voice**: Monospace marks technical metadata, stats, and on-chain numbers.
- **Hierarchy by ink, not size alone**: Three ink grays (`{colors.ink}` → `{colors.ink-secondary}` → `{colors.ink-muted}`) carry most of the contrast work on the dark canvas.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px with larger jumps (`{spacing.3xl}`–`{spacing.5xl}`) for the generous between-section breathing room.

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: centered single column with atmospheric imagery behind/around
- Feature sections: 2–3 column card grids
- Heavy vertical rhythm — large `{spacing.4xl}`–`{spacing.5xl}` gaps between sections

### Whitespace Philosophy
- **Night-sky emptiness**: The dark canvas IS the design; content floats in deliberate darkness.
- **Color as beacon**: A single violet element reads loud against the dark — used sparingly.
- **Imagery carries mood**: Moon/star/cloud graphics provide atmosphere so chrome stays minimal.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, on canvas | Text blocks, hero |
| Hairline (Level 1) | 1px solid `{colors.border}` on `{colors.surface}` | Standard cards |
| Soft panel (Level 1b) | 1px solid `{colors.border-soft}` on `{colors.surface-soft}` | Nested panels |
| Focus | 2px `{colors.focus-ring}` outline | Keyboard focus |

**Depth Philosophy**: Eclipse avoids heavy shadows almost entirely — depth comes from one-step surface lifts and hairline borders, preserving the flat, atmospheric night-sky quality. Glow effects, when present, are violet and live in imagery rather than UI chrome.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 4px | Small chips, inline elements |
| `sm` | 6px | Compact controls |
| `md` | 8px | Buttons, inputs |
| `lg` | 12px | Cards, panels |
| `xl` | 16px | Large feature cards |
| `pill` | 9999px | Badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Violet fill (`{colors.primary}`), white text, `{rounded.md}`. The default CTA.
- **`button-secondary`** — Dark surface with `{colors.border-strong}` outline.

### Badges
- **`badge`** — Violet-tinted surface (`{colors.accent-soft}`), lighter violet text, full pill, monospace label.

### Cards
- **`card`** — Lifted dark surface, hairline border, `{rounded.lg}`. No shadow.
- **`card-soft`** — Subtler nested panel variant.

### Inputs
- **`input`** — Dark surface, `{colors.border-strong}` outline. Focus swaps to `{colors.focus-ring}`.

### Navigation
- **`nav-bar`** — Canvas-colored sticky header, secondary-gray links, soft bottom hairline.

## Do's and Don'ts

### Do
- Keep the canvas deep and near-black (`{colors.background}`) — it carries the cosmic mood
- Use violet (`{colors.primary}`) sparingly as a beacon against the dark
- Use hairline borders instead of shadows for card separation
- Carry hierarchy with the three ink grays, not just size
- Use monospace for stats, on-chain numbers, and technical labels
- Apply tight negative tracking at display sizes

### Don't
- Don't introduce warm tones (orange, yellow, green) into the chrome
- Don't use heavy drop shadows — keep depth flat and atmospheric
- Don't overuse violet; if everything glows, nothing does
- Don't set body text on the canvas below `{colors.ink-secondary}` contrast
- Don't use weight 700 in UI chrome — 600 is the heading max
- Don't use pill radius on primary buttons — pills are for badges/tags

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced section gaps |
| Tablet | 600–1024px | 2-column grids, tightened padding |
| Desktop | 1024–1200px | Full multi-column layout |
| Large Desktop | >1200px | Centered, max-width content with generous margins |

### Collapsing Strategy
- Hero: 64px → scales down, maintains negative tracking proportionally
- Navigation: horizontal links → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Section spacing: `{spacing.5xl}` → `{spacing.3xl}` on mobile
- Atmospheric imagery simplifies/softens on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Space Navy `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Primary CTA: Violet `{colors.primary}`
- Border: 1px `{colors.border}`
- Link: `{colors.link}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Hero on space-navy `{colors.background}`. Headline 64px Inter weight 600, letter-spacing -2px, color `{colors.ink}`. Subtitle 18px weight 400, color `{colors.ink-secondary}`. Violet CTA (`{colors.primary}`, 8px radius, 12px 22px padding) and dark outline button (`{colors.surface}`, 1px `{colors.border-strong}`)."
- "Card: `{colors.surface}` background, 1px solid `{colors.border}`, 12px radius, 24px padding. Title 20px Inter weight 600. Body 16px weight 400 in `{colors.ink-secondary}`. No shadow."
- "Badge: `{colors.accent-soft}` background, `{colors.link}` text, 9999px radius, 4px 12px padding, 12px JetBrains Mono."

### Iteration Guide
1. Start dark — the near-black canvas is the foundation, not a theme toggle
2. Reach for violet only for the single most important action in view
3. Borders over shadows; one-step surface lifts for depth
4. Three ink grays do the hierarchy work on dark
5. Monospace for anything machine-flavored: stats, addresses, fees

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Eclipse. Brand names and trademarks belong to their respective owners.