name: aether-design
version: alpha
description: >
  A dark, cosmic self-custody crypto dashboard on a deep indigo-black canvas
  (#0D0B1F) lit by a neon trio — aqua (#3BE8D1), ember (#FF6B5C) and magenta
  (#C13BFF) — that color gains, losses and accents respectively. The whole UI is
  built from frosted glass panels (rgba(28,26,54,0.6) + 24px blur) outlined by
  glowing 1px neon borders, with text-shadow glows on key numbers. The signature
  move is a radial composition: a rotating donut allocation ring at center,
  diamond-shaped (rotate 45°) glass asset cards on a constellation of SVG spokes,
  a twinkling starfield, and a hover-up live transaction drawer. Type pairs Clash
  Display (headlines/values) with Satoshi (UI) and Space Mono (data/labels,
  wide-tracked uppercase).
colors:
  # Brand neon trio
  aqua: '#3BE8D1'             # gains, primary accent, glows, neon borders
  ember: '#FF6B5C'           # losses / negative deltas, warning borders
  magenta: '#C13BFF'         # total-value glow, brand dot, refresh accent
  violet: '#7C5CFF'          # ring segment / tertiary chart color
  off-white: '#E8E3FF'       # ring segment / soft light accent
  # Surface
  surface: '#0D0B1F'         # deep indigo-black page canvas
  surface-glass: 'rgba(28,26,54,0.6)'   # frosted glass panels (+24px blur)
  # Text
  on-surface: '#ffffff'      # primary text / values
  on-surface-muted: 'rgba(255,255,255,0.45)'  # labels, secondary data
  on-surface-faint: 'rgba(255,255,255,0.35)'  # captions, fine print
  # Hairlines / borders
  hairline: 'rgba(255,255,255,0.18)'   # luminous glass border (.border-lum)
  # Glows (as box-shadow / text-shadow color sources)
  glow-aqua: 'rgba(59,232,209,0.25)'
  glow-ember: 'rgba(255,107,92,0.25)'
  glow-magenta: 'rgba(193,59,255,0.2)'
typography:
  display:
    fontFamily: "'Clash Display', sans-serif"
    fontSize: 52px            # total net worth value (clamps down on labels)
    fontWeight: 600
    lineHeight: 1.0
  title:
    fontFamily: "'Clash Display', sans-serif"
    fontSize: 15px            # asset card names, action labels
    fontWeight: 500
  body:
    fontFamily: "'Satoshi', sans-serif"
    fontSize: 16px            # default UI text
    fontWeight: 400
  mono:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11px            # data, deltas, wide-tracked uppercase labels
    fontWeight: 400
    letterSpacing: 2.5px      # tracking-[0.25em] on labels
    textTransform: uppercase
rounded:
  lg: 16px      # glass cards / asset diamonds (rounded-2xl)
  md: 12px      # transaction chips (rounded-xl)
  full: 9999px  # pills, refresh button, status dots
spacing:        # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
components:
  panel-glass:                 # status pills, drawer, chips
    backgroundColor: '{colors.surface-glass}'
    borderColor: '{colors.hairline}'
    borderWidth: '1px'
    rounded: '{rounded.lg}'
    backdropFilter: 'blur(24px)'
  card-asset-diamond:          # rotated 45° glass asset tiles
    backgroundColor: '{colors.surface-glass}'
    borderColor: '{colors.aqua}'   # or ember for losing assets
    borderWidth: '1px'
    rounded: '{rounded.lg}'
    boxShadow: '0 0 18px {colors.glow-aqua}, inset 0 0 22px rgba(59,232,209,0.08)'
    transform: 'rotate(45deg) (content counter-rotated)'
  button-pill:                 # REBALANCE / refresh
    backgroundColor: '{colors.surface-glass}'
    borderColor: '{colors.hairline}'
    textColor: '{colors.on-surface}'
    typography: '{typography.mono}'
    rounded: '{rounded.full}'
    padding: '8px 20px'
  chip-tx:                     # live transaction stream cards
    backgroundColor: '{colors.surface-glass}'
    borderColor: '{colors.hairline}'
    rounded: '{rounded.md}'
    padding: '16px 20px'
    width: '230px'
motion:
  ring-rotate: 'rotateZ 360° over 60s linear infinite (allocation donut)'
  ring-fill: "gsap back.out(1.7), 0.4s (segment proportions)"
  starfield: 'twinkle opacity .2↔.85 over 3s ease-in-out infinite'
  drawer: 'translateY reveal on hover, .6s cubic-bezier(.16,1,.3,1)'
  chip-scroll: 'translateX -50% over 38s linear infinite (ticker)'
  pulse: 'wifi + chevron sine.inOut yoyo loops'
icons:
  library: Tabler (ti webfont)
  style: outline line icons
  sizes: { sm: 16px, md: 18px, lg: 20px }
  color: '{colors.aqua}'

Aether Vault

aether-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional self-custody crypto product; described factually.

Overview

Aether Vault is a dark, cosmic crypto dashboard rendered on a deep indigo-black canvas (surface #0D0B1F) with a photographic nebula image and a radial vignette behind everything. The entire interface is assembled from frosted glass panels — rgba(28,26,54,0.6) with a blur(24px) backdrop — each outlined by a glowing 1px border. There is no single voltage but a neon trio with strict roles: aqua #3BE8D1 for gains and primary accents, ember #FF6B5C for losses, and magenta #C13BFF for the headline total and brand marks. Key numbers carry literal text-shadow glows. The composition is radial and unmistakable: a rotating donut allocation ring at center showing the total net worth, diamond-shaped glass asset cards (rotated 45°, content counter-rotated) pinned to a constellation of SVG spokes, a twinkling starfield, and a hover-up live transaction drawer with a scrolling ticker. Type pairs Clash Display (headline values) with Satoshi (UI) and Space Mono (wide-tracked uppercase data labels).

Colors

Neon trio (accents). aqua #3BE8D1 is the dominant accent — positive deltas, glows, the default neon border (.border-aqua), sparkline strokes, status text. ember #FF6B5C is reserved for losses and negative deltas (.border-ember). magenta #C13BFF powers the total-net-worth glow, the AETHER·VAULT brand dot, the gas badge and the refresh accent. violet #7C5CFF and off-white #E8E3FF appear only as additional donut-ring segments.

Surface. The canvas is surface #0D0B1F (deep indigo-black) under a nebula photo dimmed by a radial gradient to the same color. Every container is surface-glass rgba(28,26,54,0.6) with 24px blur.

Text. Primary #ffffff; secondary/labels at rgba(255,255,255,0.45); faint captions at 0.35. Mono labels are tracked wide and uppercased.

Hairlines. hairline rgba(255,255,255,0.18) is the luminous glass border (.border-lum), paired with a faint inner glow (inset 0 0 20px rgba(255,255,255,0.05)).

Glows. Borders and numbers emit soft colored light — 0 0 18px outer plus inset 0 0 22px washes keyed to aqua/ember, and text-shadow glows on values.

Typography

Families: Clash Display (display/values) and Satoshi (UI body), both from Fontshare, plus Space Mono (data/labels) from Google Fonts. Tabler icons load as a webfont. Clash carries the brand voice on big numbers; Space Mono — wide 0.25em tracking, uppercase — does all the telemetry-style labeling.

Token	Family	Size	Weight	Tracking	Usage
display	Clash Display	52px	600	0	Total net worth value
title	Clash Display	14–15px	500	0	Asset names, action labels
body	Satoshi	16px	400	0	Default UI text
mono	Space Mono	10–15px	400	0.25em	Data, deltas, uppercase status labels

Layout

Base unit 4px (Tailwind scale). The page is a fixed 1280px-min radial composition rather than a flowing document: a centered allocation ring at top:450px, five diamond asset cards placed by absolute left/top on SVG spokes radiating from center, a top row of three glass HUD widgets (node status, brand wordmark, gas badge), and a bottom transaction drawer that slides up on hover. A starfield and constellation lines fill the negative space. The silhouette is symmetrical and instrument-panel-like.

Elevation & Depth

Depth comes from glass + glow, not drop shadows. Panels are translucent with backdrop-filter: blur(24px); borders glow outward (0 0 18px) and inward (inset 0 0 22px). The drawer uses a large soft top shadow (0 -20px 60px rgba(0,0,0,0.5)) to lift off the canvas. The donut ring uses an SVG Gaussian-blur filter for a neon bloom.

Shapes

Soft and rounded: glass cards and asset diamonds at 16px (rounded-2xl), transaction chips at 12px (rounded-xl), and full pills/dots for the refresh button and status indicators. Asset cards are squares rotated 45° into diamonds, with their content counter-rotated back to level.

Components

• panel-glass — frosted rgba(28,26,54,0.6) + 24px blur, 1px luminous border, 16px radius (HUD widgets, drawer, chips).
• card-asset-diamond — 45°-rotated glass square, aqua or ember neon border + glow, counter-rotated content (name, holdings, value, delta, sparkline).
• button-pill — glass fill, luminous border, full radius, mono uppercase label ("REBALANCE", "↻"); hover shifts border toward magenta.
• chip-tx — 230px glass card, 12px radius, chain label + colored value + action + truncated address; duplicated into an infinite scroll ticker.
• status HUD — node-synced / gas badges: glass + mono micro-labels with aqua/magenta glows; the gas badge uses an angled clip-path.

Motion

Driven by GSAP. The allocation ring rotates a full turn every 60s and its segments animate to new proportions with a back.out(1.7) overshoot on rebalance. The starfield twinkles (opacity 0.2↔0.85, 3s). The drawer slides up on hover (.6s cubic-bezier(.16,1,.3,1)), the ticker scrolls -50% over 38s, and the wifi icon and chevron run gentle sine.inOut yoyo pulses.

Iconography

Tabler outline icons via webfont (ti ti-*): wifi, flame, refresh, chevron-up. Small (16–20px), drawn in aqua or magenta to match their context. Purely functional — no decorative glyph motifs.

Do's and Don'ts

• Do keep the deep indigo-black canvas and build every container from frosted glass with a glowing 1px border.
• Do assign the trio strictly: aqua = gains/primary, ember = losses, magenta = total/brand.
• Do glow the important numbers (text-shadow) and keep mono labels uppercase and wide-tracked.
• Do preserve the radial, instrument-panel composition (center ring + diamond satellites).
• Don't use opaque flat fills or hard drop shadows — depth is glass + glow.
• Don't let ember leak onto positive/neutral data, or recolor the brand magenta.
• Don't straighten the asset diamonds or bold the mono labels.

Known Gaps

• Colors and effects are read directly from inline styles and class rules in index.html. Clash Display and Satoshi are Fontshare faces — substitute a geometric display + a neutral grotesk if unavailable. Glow radii and the SVG ring bloom are authored CSS/SVG-filter values; rendered intensity varies by browser backdrop-filter support.