Design tools, prompts, and visual systems in one place.

Contrast Checker Check WCAG AA/AAA contrast with instant foreground/background previews.

Live

Gradient Builder Build linear, radial, and conic CSS gradients with copy-ready output.

Live

Shadow Builder Tune offset, blur, spread, opacity, and inset shadows visually.

Live

Tint & Shade Generator Generate 50-950 token scales from a base color.

Live

Palette Harmony Generate complementary, analogous, triadic, split, tetradic, and mono palettes.

Live

Font Pairing Preview Preview heading and body font combinations with live sample text.

Live

Border Radius Builder Preview uniform and per-corner radius systems.

Live

Spacing Visualizer Compare spacing scales and export CSS custom properties.

Live

README Badge Generator Build shields.io badges for project READMEs.

Live

Favicon Generator Create a simple text or emoji favicon and download it as PNG.

Live

OG Image Generator Compose 1200x630 social preview images.

Live

CSS Keyframe Builder Build keyframe animations visually and copy CSS output.

Live

Responsive Preview Preview a URL at multiple viewport widths side by side.

Live

Tailwind Theme Generator Configure tokens and export a Tailwind theme block.

Live

Color Extractor Extract a small dominant palette from a local image in-browser.

Live

Dark Mode Converter Convert light UI tokens into practical dark mode starting values.

Live

Design Audit Checklist Score visual, accessibility, copy, and flow quality before shipping.

Live

A/B Test Hypothesis Builder Generate a structured hypothesis statement for experiments.

Live

Component Prop Table Define component props and export a clean Markdown table.

Live

Tailwind Cheatsheet Search common Tailwind utility classes and copy them quickly.

Live

Design Token Studio Build a full design system — colors, type, spacing, shadows, radius, motion — and export to CSS, Tailwind, JSON, or SCSS.

New

Gradient Library Curated linear, radial, conic, and brand gradient snippets.

CSS

Shadow Styles Soft, hard, elevated, inset, and glow shadow presets.

CSS

Motion Presets Hover, focus, reveal, and loading motion recipes.

CSS

Easing Reference Visual easing curve comparisons with cubic-bezier output.

CSS

Glassmorphism Presets Backdrop-filter cards and panels with fallback-friendly CSS.

CSS

Clip-Path Gallery Visual clip-path shapes for masks, frames, and accents.

CSS

SVG Pattern Library Repeating SVG background patterns with copy-ready markup.

CSS

Noise Texture Gallery CSS/SVG grain and noise overlay styles.

CSS

Micro-interaction Library Hover, click, and focus interaction recipes.

CSS

CSS Variables Token sets for themes, roles, spacing, and typography.

CSS

Tailwind Config Snippets Ready-to-use Tailwind config extensions.

CSS

Container Queries Responsive component patterns using container queries.

CSS

CSS Reset Comparison Modern CSS reset options and tradeoffs.

CSS

Print Style Reference Print media snippets for A4, Letter, and receipts.

CSS

Button Gallery Solid, ghost, icon, segmented, and tool-button patterns.

Pattern

Form Field Styles Inputs, selects, checkboxes, radios, and textareas.

Pattern

Card Styles Compact cards, gallery cards, stat cards, and code cards.

Pattern

Navigation Patterns Topbar, sidebar, tabs, breadcrumbs, and mobile drawers.

Pattern

Hero Sections Text-first, full-bleed, and editorial hero section references.

Pattern

CTA Sections Call-to-action blocks with concise hierarchy.

Pattern

Footer Templates Simple, mega, and editorial footer structures.

Pattern

Pricing Tables Tier, toggle, and comparison pricing layouts.

Pattern

Testimonial Blocks Quote, avatar, and logo-wall testimonial patterns.

Pattern

Feature Sections Grid, alternating, and icon-left feature layouts.

Pattern

Empty States No-result, first-run, error, and permission states.

Pattern

Loading States Skeleton, spinner, and shimmer loading patterns.

Pattern

Error Pages 404, 500, offline, and permission page references.

Pattern

Toast Notifications Success, error, warning, and info toast styles.

Pattern

Modal & Dialog Confirmation, form, and media modal patterns.

Pattern

Sidebar Layouts Left, right, collapsible, and icon sidebar patterns.

Pattern

Dashboard Layouts Admin and analytics layouts for operational tools.

Pattern

Mobile UI Patterns Compact mobile interface patterns and controls.

Pattern

Dark UI Inspiration Dark interface references with practical contrast.

Pattern

Email Templates Transactional and marketing email HTML patterns.

Pattern

OG Image Templates Open Graph layout patterns with dimension guidance.

Pattern

Icon Style Guide Lucide, Heroicons, Phosphor, and Tabler comparison notes.

Pattern

Illustration Styles Flat, 3D, outlined, and pixel illustration references.

Pattern

Photography Guide Photography style references for product and brand shoots.

Pattern

Type Scales Major third, perfect fourth, modular, and editorial scales.

Reference

Line Heights Readable body, compact UI, and display line-height references.

Reference

Letter Spacing Tracking presets for headings, body, and labels.

Reference

Font Clamps Responsive CSS clamp() recipes for headings and body text.

Reference

Border Radius Scale Visual border-radius token references.

Reference

Spacing Scale Visual spacing tokens for UI rhythm and layout gutters.

Reference

Z-index Manager Named z-index layers for app shells and overlays.

Reference

Breakpoint Reference Tailwind, Bootstrap, and custom breakpoint references.

Reference

Aspect Ratios Common image, video, card, and avatar ratios.

Reference

Viewport Units vw, vh, dvh, svh, cqi, and related examples.

Reference

CSS Grid Auto-fit, named areas, editorial grids, and gallery grids.

Reference

Flexbox Alignment, wrapping, toolbar, and list layout patterns.

Reference

UI Color Roles Background, surface, border, text, and action role mapping.

Color

Mesh Gradient Gallery Multi-point mesh-like gradient references and recipes.

Color

Background Patterns Dot, grid, and line CSS-only backgrounds.

Color

Accessible Color Pairs WCAG-compliant foreground and background combinations.

Color

Brand Archetypes Visual and tonal color examples for archetypal brands.

Color

Color Stories Narrative palette references for design presentations.

Color

Editorial Sans + Humanist Text High-trust pairing for essays, blog posts, and culture pages.

Reference

Grotesk Display + Mono UI A sharp pairing for dashboards, design systems, and technical tools.

Reference

Soft Serif + Neutral Sans A warm pairing for premium editorial landing pages.

Reference

Condensed Display + Utility Sans Compact, strong hierarchy for gallery and index pages.

Reference

Editorial Muse White canvas, soft purple accent, hairline borders, and calm gallery rhythm.

Palette

Gallery Neutral Quiet neutral palette for board-heavy browse experiences.

Palette

Editorial Contrast Serious editorial palette tuned for long-form readability.

Palette

Signal System Accessible success, warning, error, and information colors.

Palette

Redesign a Design Archive Create a browsing system for 100 visual references with filters and hierarchy.

Prompt

Build a Color Story Turn a palette into a landing page mood, role map, and art direction note.

Prompt

Typography Mood Shift Use one layout and three type pairings to change the emotional tone.

Prompt

Component Critique Sprint Audit buttons, forms, empty states, and loading states for a product screen.

Prompt

Tool Hub Hero Dense, utility-first hero for a product/tool directory.

Section

Editorial Blog Index Article list layout with category, search, and strong scan rhythm.

Section

Gallery Browse Grid Moodboard grid pattern with metadata and save affordances.

Section

Admin Health Panel Operational status cards for deploy, SEO, media, and AdSense checks.

Section

Font Pairings Curated heading and body font combinations.

Library

Color Palettes Hand-picked palettes with mood tags and CSS variable guidance.

Library

Design Prompt Library Skill-building challenges for UI, branding, and illustration.

Library

Section Gallery Website section inspiration for production pages.

Library

Brief Generator Generate a structured landing page design brief.

Library