# Web3

> Web3

- Skill: `jdsadminllc/web3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/web3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/web3/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/web3

---

# 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
1. Use glass-morphism (blur + transparency + subtle border) for cards and panels
2. Apply gradient blooms as background light sources — not hard edges
3. Display wallet addresses and hashes in monospace with truncation
4. Layer depth through z-index stacking of glass panels
5. Include subtle particle or grid animations for atmosphere
### ❌ Don't
1. Use flat opaque cards — glass is the signature of Web3 design
2. Overdo the gradients — one primary bloom per section max
3. Use light backgrounds anywhere on the page
4. Write marketing copy that oversells — Web3 audiences value honesty
5. 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