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

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

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

Live

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

Live

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

v2

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

v2

Spacing Visualizer Compare spacing scales and export CSS custom properties.

v2

OG Image Generator Compose 1200x630 social preview images.

v2

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

VDJ Acid Dark Black surfaces, zinc borders, acid action color, and cool support tones.

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

Gradient Library Reusable linear, radial, mesh-like, 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

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

CSS

Container Queries Responsive component patterns using container query syntax.

CSS

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

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

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

Pattern

Dashboard Layouts Admin and analytics layouts for operational tools.

Pattern

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

Reference

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

Reference

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

Reference

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

Reference

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

Reference

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

Reference