Skip to content

DESIGN.md

Latest commit

 

History

History
79 lines (71 loc) · 2.69 KB

DESIGN.md

File metadata and controls

79 lines (71 loc) · 2.69 KB
version 1.0.0
name Crypto Disco DailyApp - Midnight Cyber Spec
description A premium, AI-native design system for Web3 agents, featuring high-contrast dark modes and glassmorphism.
colors
background text brand
primary secondary accent
#050505
#0a0a0a
rgba(59, 130, 246, 0.1)
primary secondary accent
#f1f5f9
#94a3b8
#3b82f6
primary secondary success error warning
#3b82f6
#0ea5e9
#10b981
#ef4444
#f59e0b
typography
family size
sans mono heading
Inter, system-ui, sans-serif
Fira Code, monospace
Orbitron, sans-serif
base h1 h2 h3
16px
2.5rem
2rem
1.5rem
rounded
sm md lg xl
4px
8px
12px
24px
spacing
unit base
4
16
components
card button
background border blur
rgba(255, 255, 255, 0.03)
1px solid rgba(255, 255, 255, 0.08)
12px
primary glass
bg text
#3b82f6
#ffffff
bg border
rgba(255, 255, 255, 0.05)
1px solid rgba(255, 255, 255, 0.1)

Design Specification

This document provides the visual identity and engineering standards for the Crypto Disco DailyApp ecosystem.

Overview

The "Midnight Cyber" aesthetic is designed for maximum clarity in high-density data environments (Calculators, Arbitrage Bots, Raffle Dashboards). It prioritizes Night-First readability, Glassmorphism for depth, and Neon Accents for call-to-actions.

Core Principles

  1. Rationale-First: Every design decision MUST have a functional reason. No decorative elements without purpose.
  2. Infinite Depth: Use varying levels of card opacity and backdrop blurs to create a spatial hierarchy.
  3. Cyber-Tactile: Interactive elements should feel alive through micro-animations and subtle glows.

Component Guidelines

Meteora Bot Dashboard

  • Real-time Feeds: Use high-contrast monospace (Fira Code) for price data.
  • Status Indicators: Pulse animations for "Live" states (Primary color for active, Grayscale for idle).
  • Control Panels: Glassmorphic "Control Pods" with 1px borders to simulate a cockpit feel.

Raffle Frontend

  • Ticket Visuals: Use vibrant gradients (#3b82f6 to #0ea5e9) to make reward elements feel "premium".
  • Interaction: Buttons must have a :hover scaling effect (1.02x) and a primary-colored shadow.

Do's and Don'ts

  • DO use backdrop-filter: blur(12px) for all overlay elements.
  • DO use !important sparingly, prioritize the Tailwind utility layer.
  • DON'T use pure white (#ffffff) for body text; use Slate-100 (#f1f5f9).
  • DON'T use flat, opaque backgrounds for desktop components.