DevpoolDevpool
Devpool Design Specification • v2.6

The Living Design System of Devpool

Curated color tokens, atomic primitives, typography scales, glassmorphic cards, and high-performance micro-interactions powering the unified developer economy platform.

Color Architecture

Design Tokens & Harmonic Palettes

Click any swatch to copy HEX to clipboard

Canvas Zinccanvas
Global background canvas for all platform pages
#f4f4f5•bg-zinc-100
Surface Purecanvas
Primary cards, modals, popovers & dropdown menus
#ffffff•bg-white
Surface Subtlecanvas
Secondary section frames & bento card containers
#fafafa•bg-zinc-50
Deep Onyxcanvas
Hero card canvas, high-contrast pills & primary buttons
#09090b•bg-zinc-950
Card Charcoalcanvas
Inner bento tiles & dark elevated surfaces
#18181b•bg-zinc-900
Border Precisioncanvas
Hairline boundaries, separators, and card borders
#e4e4e7•border-zinc-200
Resourcio Emeraldbrand
Primary electric brand accent & active state glow
#07e772•bg-emerald-400
Deep Emeraldbrand
Verified checkmarks, button hovers & text links
#059669•bg-emerald-600
Mint Accentbrand
Primary CTA buttons, progress bars & success states
#10b981•bg-emerald-500
Mint Washbrand
Subtle chip backgrounds & success highlight containers
#ecfdf5•bg-emerald-50
Currency Ambergamification
Official currency tokens, wallet balance badges & quest incentives
#f59e0b•bg-amber-500
Streak Flamegamification
Daily check-in streak counters & proof-of-work fires
#f97316•bg-orange-500
Warm Goldgamification
Streak claim buttons & milestone award glows
#fbbf24•bg-amber-400
Verified Cyanstatus
Verified partner badges, conference tags & live tags
#06b6d4•bg-cyan-500
AI Violetstatus
AI builder challenges, hackathons & machine learning
#8b5cf6•bg-purple-500
Bounty Rosestatus
High-priority bounties, urgent hiring & alerts
#f43f5e•bg-rose-500
Typography Scale

Plus Jakarta Sans & JetBrains Mono Hierarchy

Display: font-sans • Metadata: font-mono
Display Hero • text-3xl to text-6xl (font-extrabold)Leading [1.1]
The All-in-One Platform for Developers
Section Headline • text-xl to text-3xl (font-extrabold)Tracking Tight
High-Velocity Engineering, Digital Commerce & Verified Proof
Card Title • text-sm to text-base (font-bold)UI Labels
Senior Full-Stack Engineer • ResWallet Ledger Verified
Body Copy • text-xs to text-sm (font-normal)Leading Relaxed

Every streak check-in, blog publication, code roadmap, and referral credits verified balance directly to your primary wallet ledger. Build on peer-reviewed templates and connect with verified recruiters.

Monospace Metadata & Hashes • font-mono (text-xs)JetBrains Mono
TX_92A8..B4•+50CoinCREDITED•STREAK: 14_DAYS•VERIFIED_RECRUITER
Interaction Primitives

Pill Buttons, Micro-Capsules & Floating Actions

Interactive: Click to test active micro-animations
Status & Verification System

Status Badges & Proof-of-Work Chips

Consistent visual metadata across headers & profiles
Verified DeveloperVerified RecruiterCreator • Keep 95%14 Day StreakCoin2,450 (₹2,450)Actively ReviewingRemote • Full-Time
Card Architecture

High-Fidelity Bento & Hero Card Specimens

Exact layouts used across Home & Dashboards
Specimen A: 4:5 Hero Rotary Job Card
Urgent Hire
Remote
▲
Vercel

Senior Full-Stack Engineer

$165k - $210k
Next.js • TypeScript38 Applied
Posted 2h agoApply
Specimen B: Multi-Role Pillar Bento
Seller StudioPillar 02

Digital Product Merchant Hub

Sell production Next.js starter kits, design systems, and developer tools with automatic UPI deposits.

Creator Cut
95%
Settlement
Instant UPI
Specimen C: Proof-of-Work Economy Card
CoinBalance Pegged1Coin= ₹1.00 INR
750Coin

Cash Equivalent: ₹750 INR

Coin100Coin5,000
Redeemable for:3 Starter Kits
Developer Integration

CSS Variables & Tailwind Token Config

Drop directly into Tailwind v4 or global CSS
resourcio-theme.css
:root {
  /* Canvas & Surface Tokens */
  --canvas-zinc: #f4f4f5;
  --surface-pure: #ffffff;
  --surface-subtle: #fafafa;
  --deep-onyx: #09090b;
  --border-precision: #e4e4e7;

  /* Resourcio Brand Identity */
  --resourcio-emerald: #07e772;
  --deep-emerald: #059669;
  --mint-accent: #10b981;

  /* Gamification & Economy */
  --currency-amber: #f59e0b;
  --streak-flame: #f97316;
  --coin-peg-rate: 1.00; /* 1 coin = ₹1.00 INR */

  /* Typography Stacks */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", SFMono-Regular, monospace;
}