dj funboy

Design systems your AI agent can actually build with — colors, typography, spacing, components, and motion, extracted from top products.

47 systems

Easel
Design AI Canvas Web
Buttons
Generate Canvas ✦ Remix
Typography
Playfair Display
Vintage serif display · Inter Tight body, 16px.
Inter Tight · prompt-to-canvas labels
Prompt Card
Describe a layout
Prompt → Canvas ready
Status Pills
Generated Drafting Open source
Revline
Analytics Dashboard SaaS Web
Buttons
View report Export ✦ Insights
Typography
Inter Semibold
Geometric sans · 56/40/24px display, 16px body.
Inter · tabular numerals
Metric Card
Monthly recurring revenue
$48.2K +12% ARR
Status Pills
Healthy Churn risk Cohort
Agentdeck
macOS App Dev Tools Mono
Buttons
Download Merge Learn more →
Typography
SF Mono
monospace everywhere / 400 / 500 / 600 / 700
Primary: #2c2826 Merge: #00c758 Radius: 6px Warm dark
Rebar
Fintech Construction SaaS
Buttons
Apply Now Learn More Contact →
Typography
Roboto
single family / 400 / 500 / 700
Primary: #1863DC Accent: #CC3366 Radius: 2px Industrial
Paycraft
Fintech Web Dashboard
Buttons
Primary Accent Learn more →
Typography
sohne-var (variable)
+ SourceCodePro (code)
Primary: #533afd Button: #635bff Radius: 8px/pill Angled sections
Trackline
SaaS Next.js Dark Desktop
Buttons
Primary Secondary Ghost
Typography
Inter Variable
+ Berkeley Mono (code)
Primary: #5e6ad2 Accent: #7170ff Radius: 6px Dark-first
Coachmark
SaaS Framer
Buttons
Get Started Book Demo Learn More
Typography
Matter Medium
Body text in Matter Regular with green brushwork undertones.
Caption Text
Card
✓
AI Coach Score
92% empathy detected
Navigation
Product Pricing Get Started
Chronicle
Mac / iOS Calendar
Buttons
Try Free Buy Now Features
Typography
Effra Bold
Body text with SF Pro for native app screens.
CAPTION TEXT
Event Card
15
Team Standup
9:00 AM - 9:30 AM
Navigation
Features Pricing Download
Jetstream
iOS Dark-First
Buttons
Download Track Details
Typography
Inter Bold
SF Pro for native app with dark purple backgrounds.
FLIGHT STATUS
Flight Card
ON
SFO → JFK
On Time — Gate B42
Status
On Time Delayed Cancelled
Stride
iOS / watchOS Fitness
Buttons
Start Run Share Edit
Typography
SF Pro Bold
SF Pro Rounded for playful numeric displays.
DISTANCE
Workout Card
▲
Morning Run
5.2 km — 28:14
Brand Shape
Signature oval — 50% radius
Pongo
iOS Meditation
Buttons
Get started Subscribe Log In
Typography
Stress less
Custom rounded sans, 700 weight, split-color highlight headlines.
MEDITATION · 5 MIN
Hero Card
☺
A Mindful Morning
5 min · Featured
Sleep Mode
☾
Drift into Sleep
555 Hz · 45 min
Stillpoint
iOS / Web Meditation
Buttons
Start Free Trial Explore Log In
Typography
Stillpoint Apercu
Warm, rounded, playful type for mindfulness content.
MEDITATION
Session Card
☺
Morning Calm
5 min — Basics
Sleep Mode
☾
Deep Sleep
45 min — Sleepcasts
Heartwise
iOS Couples Wellness
Buttons
Try for free Sign in Topic chip
Typography
Gabarito + Kantumruy Pro
Warm display + humanist body for relationship copy.
COUPLES WELLNESS
Pack hero
❤
Living Long Distance
Pack · 3 of 10 answered
App splash
☺
5 minutes a day
Connect with your partner daily
Narrator
Web / iOS TTS
Buttons
Try Free Upgrade Sign In
Typography
ABC Diatype
Clean, modern typeface for text-to-speech interface.
READING SPEED
Reader Card
▶
Article Title
2.5x speed — Snoop Dogg
Highlight
The quick brown fox jumps over the lazy dog today
Folio
Mac / iOS Docs
Buttons
Download Sign In Learn More
Typography
Untitled Serif
Untitled Sans for UI, Untitled Serif for headings.
DOCUMENT
Document Card
□
Project Notes
3 pages — Updated today
Glassmorphism
Frosted glass effect
Cadence
macOS Now Playing
Buttons
Buy $5.99 Download Learn More
Typography
System Black
System font stack — up to 96px hero headings.
NOW PLAYING
Widget Card
♫
Midnight City
M83 — Hurry Up, We're Dreaming
Color Themes
Neural
Web / Mac AI Chat
Buttons
Get Plus Sign Up Log In
Typography
Neural Sans
25-step gray scale for precise contrast control.
GPT-4o
Chat Bubble
G
Hello! How can I help?
GPT-4o — just now
Chat Themes
Quickbar
macOS Launcher
Buttons
Get Started Download Learn More
Typography
Inter Bold
SF Pro for native app, Inter for marketing site.
EXTENSIONS
Command Brushwork
⚡
Clipboard History
⌘⇧V
Accent Brushwork
Brushwork
macOS Image Editor Apple
Buttons
Download Learn More Export
Typography
SF Pro
Apple system font. Dark theme throughout.
ML-POWERED
Editor Chrome
◆
Inspector Panel
260px · Dark chrome
Tool Colors
Drawboard
macOS Web App Design Tool
Buttons
Get Started Sign In Learn More
Typography
Inter / Cera Pro
SF Pro for native app, geometric sans for web.
PLATFORM
App Chrome
◆
Inspector Panel
260px · SF Pro 11px
Brand Brushwork
Paystream
B2B Fintech Web App
Buttons
Pay Now Sign Up Learn More
Typography
Paystream Pro
Proprietary font family, heavy black weight.
PILL BUTTONS
Dashboard
$
Balance
Activity · Send · Request
Brand Blues
Vault
B2B Fintech Web App
Buttons
Get Started Sign In Learn More
Typography
Inter / Flecha
Clean, minimal with tight letter-spacing.
-0.02EM TRACKING
Dashboard
B
Spend Management
Cards · Expenses · Bill Pay
Brushwork
Meetroom
B2B Video Web App
Buttons
Sign Up Free Join Plans
Typography
Happy Face / Almaden
Custom display + body font pairing.
BLOOM BLUE
Meeting Card
▶
Team Standup
Daily · 9:00 AM
Brushwork
Kindred
AI B2B Web App
Buttons
Get Started Try Kindred API Docs
Typography
Kindred Sans/Serif
Warm ivory tones, earth-tone brushwork.
CLAY · FIG · OLIVE
Chat Interface
C
Kindred Response
Warm · Thoughtful · Helpful
Earth Tones
Bridgepoint
API B2B Web App
Buttons
Get API Key Try Free Docs
Typography
Poppins / Inter
Dark navy + yellow CTA combo.
JETBRAINS MONO
Integration
⚡
Messaging API
LinkedIn · WhatsApp · Email
Brushwork
Inkwell
AI SaaS Web App
Buttons
Start Free Trial Upgrade Watch Live
Typography
Space Grotesk / Geist
Dark futuristic theme with gold accent.
GEIST MONO · GEIST PIXEL
Agent Colors
Tokens
Primary#c9a962
Accent#00d4ff
Radius8px
ThemeDark
Autopilot
AI / SaaS Dashboard
Buttons
Try Autopilot Get Started Learn More
Typography
Georgia (Logo)
Inter for all UI — clean, minimal dashboard aesthetic.
ENGINEERING TAG
Task Card
●
Fix production bug
Running for 0m 14s
Navigation
Features Pricing Try Autopilot
Tender
Fintech Payments
Buttons
Send Money Sign Up Learn More
Typography
Nuxt / Vue Stack
Awwwards-winning fintech with 3D coin-shaped brand.
TRANSACTION LABEL
Shipyard
Platform Next.js Dark
Buttons
Primary Deploy Ghost
Typography
Geist Sans
+ Geist Mono (code)
Accent: #0070F3 Ready: #50E3C2 Radius: 6px B&W Minimal
Turnstyle
Interactive Webflow Music
Buttons
▶ ▶ ▶
Typography
Termina
+ Helvetica Now Display
Brand: #F7594A Blue: #0080DE Radius: 100vw VW Units
Auteur
Portfolio Next.js Retro OS
BIOS Terminal
BIOS v3.2 — Auteur OS
CPU: OK • RAM: OK
Loading desktop...
Typography
DOS Monospace
21px desktop / 16px mobile
Purple: #723DAE Cyan: #31F8CC Font: DOS mono Nostalgia Art
Retrowave
Radio Vue 3 Mac OS
Buttons
Primary Play
Typography
Pixolde + Chicago
5 custom nostalgia fonts
Cream: #F9F0E9 Pink: #F6D5D5 Teal: #AFE2E5 Classic Mac OS
Nostalgia
OS Sim Vanilla JS Win95
Boot Screen
Nostalgia [Version 3.1]
CPU: OK | RAM: 640K
Starting Nostalgia...
Buttons
OK Cancel Start
Magenta: #FF00FF Cyan: #00FFFF Lime: #C3FF00 Win95 Chrome
Mosaic
Art GeoCities Retro
Catscape Navigator
Catscape Navigator 2.0
Location: geocities.com/Area51/
Neon Brushwork
33 Sections 336 GeoCities 2,052 Images Neon + Dark
Roster
Fintech WordPress iOS
Buttons
Get started Split your bills
Typography
Cooper (display)
ABC Diatype + Lexend
Card
$
Rent
Split into two payments
Nav
Bills About Start now
Primary: #000000 Accent: #8d70ee Radius: 8px/pill Light theme
Bullion
Fintech Crypto Dashboard
Buttons
Primary Secondary Link →
Typography
CDS Custom Fonts (5 families)
styled-components + atomic CSS
Primary: #0052FF Dark: #141519 Radius: pill Light + Dark
Remit
Fintech B2B Dashboard
Buttons
Primary Secondary Learn more →
Typography
Inter + Chakra UI
React + TypeScript
Primary: #7849ff Success: #00b386 Radius: 8px Light theme
Bankwell
Fintech Banking 14 Themes
Buttons
Primary Secondary Link →
Typography
Arcadia Design System
Next.js + Tailwind v4
Primary: #5266eb Error: #d03275 Radius: 12px 7 light + 7 dark themes
Flowwork
SaaS Automation AI Agents
Buttons
Start for free Secondary Learn more →
Typography
DM Sans + Open Sans
Next.js + Framer
Primary: #4461FF Purple: #AD70FB Radius: 8px / 40px Light theme
Spendwell
Fintech SaaS Dashboard
Buttons
Primary Secondary Learn more →
Typography
Next.js + Radix UI
Tailwind CSS
CTA: #FFD700 Accent: #0066FF Radius: 10px Light + Dark
GoStash
gostash.ai
macOS Productivity
Buttons
Download Accent Ghost
Typography
Inter
Screenshot + Clipboard Manager
Accent: #5ed580 Primary: #1a1a1a Radius: 8px Light theme
Degree Daddy
degreedaddy.com
iOS Health Dark
Buttons
Download Secondary CTA
Typography
Inter
Cold Plunge & Sauna Tracker
Blue: #3b82f6 Orange: #ff5f1f Radius: 12px Dark-first
Remind
remind.ing
macOS AI Meetings
Buttons
Download Try Pro Learn More
Typography
Inter
AI Meeting Briefings
Accent: #5B8EFF Primary: #000000 Radius: 12px Light theme
Dance Party
danceparty.ai
Apple TV Office Dark
Buttons
Get Started Learn More
Typography
Inter
Office Display Widgets
Purple: #A855F7 Pink: #EC4899 Radius: pill Dark-first
Matchday
Console Web Storefront Dark
Buttons
Sign In Subscribe Wishlist
Typography
Inter Black
Geometric sans · 49–61px hero titles, 16px body.
PS5 · PS4
Edition Tile
ART
Standard Edition
$41.99 · PS5 · PS4
Badges
Subscription −40% FREE
Cardplane
Fintech Dashboard Dark
Buttons
Get started Learn more ✦ AI
Typography
Geist Semibold
Vercel sans · 100/65/40px display, 16px body.
Geist Mono
KPI Card
Average spending
$ 80.53 +10%
Status Pills
Approved Lost Purchase
QUANTBOT
Fintech Dashboard Dark Tailwind v4
Buttons
Empezar Reservar → Saber más →
Typography
Inter
+ Press Start 2P logo · 400 / 500 / 600 / 700
Primary: #2563eb Page: #09090b / #020617 Radius: 8/12px Widget grid · rims-not-shadows