jdsadminllc Web3
Mission
Build interfaces that feel like the future of the internet — translucent panels, gradient light blooms, and the quiet confidence of decentralized technology.
Brand
🎨 Colors
#7C3AED— Primary (deep purple)#3B82F6— Secondary (electric blue)#06B6D4— Accent (cyan)#0A0A1A— Background (deep space black)#1E1B4B— Surface (dark indigo)#F8FAFC— Text (near-white)
🔤 Typography
- Heading font: Space Grotesk (Google Fonts, geometric with personality)
- Body font: Inter (Google Fonts, clean sans-serif)
- Code font: Fira Code (Google Fonts, for addresses/hashes)
- Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 1.375rem / 2xl 1.75rem / 3xl 2.5rem
📐 Spacing
- Grid: 12-column, 8px base unit
- Section padding: 6rem vertical, 2rem horizontal
- Card gaps: 1.5rem
🧩 Components
- Buttons: Gradient fill (purple→blue), rounded (8px), white text, glow shadow on hover. Secondary: glass border with translucent fill.
- Cards: Glass-morphism panels —
backdrop-filter: blur(12px), semi-transparent dark background, 1px white border at 10% opacity, rounded corners. - Nav: Sticky glass bar, left logo + center links, right "Connect Wallet" gradient button. Persistent blur background.
- Hero: Deep space background with gradient light blooms (purple/blue), large heading, animated floating glass cards or token visuals.
- Footer: Dark indigo surface, four-column layout, subtle gradient separator line, on-chain social links.
♿ Accessibility
- Gradient button text must pass 4.5:1 on the gradient fill — test at the midpoint
- Glass panels: ensure sufficient contrast between text and the blurred background
- Focus rings: 2px solid cyan with glow, visible on both dark and glass surfaces
prefers-reduced-motion: disable floating animations and gradient shifts
✍️ Writing Tone
Confident, forward-looking, technically credible. Use Web3-native terms (on-chain, decentralized, protocol) naturally — but define them on first use for newcomers. Avoid hype; let the technology speak.
Do / Don't
✅ Do
- Use glass-morphism (blur + transparency + subtle border) for cards and panels
- Apply gradient blooms as background light sources — not hard edges
- Display wallet addresses and hashes in monospace with truncation
- Layer depth through z-index stacking of glass panels
- Include subtle particle or grid animations for atmosphere
❌ Don't
- Use flat opaque cards — glass is the signature of Web3 design
- Overdo the gradients — one primary bloom per section max
- Use light backgrounds anywhere on the page
- Write marketing copy that oversells — Web3 audiences value honesty
- Animate continuously — motion should be subtle and purposeful
Quality Gates
- Glass-morphism panels used for cards (backdrop-filter + transparency)
- Gradient purple/blue present in hero and CTAs
- Dark background throughout — no light sections
- Monospace font used for addresses, hashes, and code
- All text passes 4.5:1 on its immediate background
- Gradient bloom or particle effect present in at least one section