Site style library
27 styles from live sites I've built and designs I study. Find your vibe, send it to me, and I'll match it for your project.
My own brand site. Deep black canvas, electric green accent, Space Grotesk headlines. Terminal mockup, scroll-reveal sections, 3D icosahedron hero. Builder aesthetic — confident but not flashy.
Space Grotesk + Inter + JetBrains Mono · Bold dark
Linear / Vercel / shadcn-adjacent. Clean SaaS without the flashy gradients. Inter on a 4pt grid, CSS Variables for instant light/dark, dense data tables, sparkline metric cards. Built to look at home next to Notion, Stripe Dashboard, or Cal.com. The "boring but rich" aesthetic that founders trust.
Inter · 4pt grid · Light + Dark via CSS Variables
One-Person Software showcase. Particle star field, monospace brand treatment, huge bold headline with hot pink strikethrough. Manifesto energy — this style works for any product with a strong stance.
JetBrains Mono + Inter · Warm dark + cyan
Immersive music player. Full-screen dark ambient background, green matrix particle rain, warm amber corner glow, centered album art. This vibe fits musicians, podcasters, or any audio-forward brand.
Inter + JetBrains Mono · Warm dark + matrix particles
Personal life metrics dashboard. Score rings, sparklines, warm dark palette. Real-time Convex backend. This style works for any data-heavy ops or analytics product.
Inter + JetBrains Mono · Warm dark ops
Weather micro-app. Dark ambient with particle stars + warm amber bottom glow. Centered card with big temperature display, stat pills (Wind / Humidity / UV), 24-hour forecast strip. Atmospheric.
Inter + JetBrains Mono · Warm dark + particle stars
Business KPI tracker for the 1BB community. Grid of metric cards, dark command-center aesthetic. Built for quick scanning at a glance. Clean borders, minimal noise.
Inter + JetBrains Mono · Command center
The 1BB mastermind site. Clean SaaS energy — dark base, bold headline hierarchy, clear value props. Community-forward layout. No clutter, high credibility.
Inter + Space Grotesk · Clean dark SaaS
Single-function micro-tool. Grid layout, instant copy on click, zero chrome. The pattern: one job, done perfectly. Use this style when your product has a single clear action.
Inter + JetBrains Mono · Micro-tool minimal
My AI music project site. 177 tracks, immersive dark canvas, gradient hero orb, AVIF/WebP covers. Cinematic — this style fits musicians, artists, and anyone leading with creative identity.
Inter + Space Grotesk · Cinematic gradient dark
AI content coach for creators. Warm, approachable, personality-forward. Not trying to impress — trying to connect. This style fits coaches, educators, and anyone selling a relationship.
Inter + Space Grotesk · Warm coach
Client nonprofit site for a Tampa General hospital initiative. Completely different vibe — warm beige/cream, serif display font, teal accent. Trustworthy and human. The go-to for nonprofits, healthcare, and cause-driven brands.
Serif display + Inter · Warm light — nonprofit
Drey's take on the t3.gg minimal dev portfolio style. Black, white, conviction. Monospace heavy, zero decoration. Every line earns its place.
System UI + Courier New · Pure minimal
Fintech dashboard with dark slate base, sharp data tables, amber accent. Dense information hierarchy — every pixel working. The reference for premium financial UX.
Inter + system mono · Dark slate fintech
Dark premium finance landing page. Deep navy, gold accent, editorial typography. High trust, high price-point energy. The look for wealth management, banking, or any high-ticket service.
Serif display + Inter · Dark navy + gold
Modern SaaS landing page with deep black canvas, subtle gradient accents, bold headline typesetting. This is what well-funded developer tools look like. Surgical and confident.
Inter + system · Dark SaaS, gradient accent
Rich dark analytics dashboard. Dense data grid, sidebar nav, multi-color chart system. The reference when you need a product that feels like mission control. Enterprise-tier SaaS energy.
Inter + mono · Enterprise dark ops
Personal ops dashboard. Warm dark + amber, SVG score rings for life areas, finance snapshot, 7-day habit tracker, sparklines. The style for anyone who runs their life like a business.
System UI + Courier New · Warm dark + amber
4-column Kanban board with warm dark base, cyan accent, P1/P2/P3 priority badges, drag-ready card structure. Clean sprint management energy — the look for any project or task tool.
System UI · Warm dark + cyan
Course sales page with warm dark base, amber pricing cards, featured plan badge, curriculum modules, testimonial grid. High-converting operator energy — Drey's exact style for The Operator Playbook.
System UI + Courier New · Warm dark + amber
Business KPI command center. Pure black + green, 4 metric cards with top-border accents, revenue bar chart, pipeline table with deal stages, live activity feed. Drey's exact 1BB dashboard aesthetic.
System UI + mono · Black + green command center
Full admin panel with 220px sidebar, stat cards, data table with user avatars, status chips (Active/Trial/Churned), plan chips, and pagination. The clean SaaS backend look — warm dark, cyan accent.
System UI · Warm dark + cyan sidebar
AI chat UI (Dottie). 260px sidebar with conversation history, model pill indicator, message bubbles, typing animation, input bar. The reference for any AI assistant or chat product.
System UI · Warm dark + cyan AI
Booking and scheduling page. Profile panel with session details + pricing, calendar month grid with available/taken/selected states, time slot picker, confirm form. Clean calendar SaaS energy.
System UI · Warm dark + cyan calendar
Template marketplace gallery. Filter bar, search, stat strip, CSS-only mini previews inside cards, HOT/NEW/PRO badges, tag chips. The look for any marketplace, gallery, or content library product.
System UI · Warm dark + cyan marketplace
Lead capture / work with me page. Two-column: offer list on left, form card on right with radio group for service type, pricing, trust indicators. Drey's exact client intake style.
System UI · Warm dark + cyan
AI video clipping tool UI. Dark zinc + purple, video timeline with waveform and draggable clip handles, AI-detected clips with viral score bars, model selector, export settings panel. The reference for any AI media tool.
System UI · Dark zinc + purple AI
Library grows with every build. Submit a site