question.design

Design System AI & Design Vibe Coding Design Process

Getting Started

Introduction Theme Generator

Components

44

Accordion Alert Alert Dialog Aspect Ratio Avatar Badge Breadcrumb Button Calendar Card Carousel Checkbox Collapsible Command Context Menu Dialog Drawer Dropdown Menu Form Hover Card Input Input OTP Label Menubar Navigation Menu Pagination Popover Progress Radio Group Resizable Scroll Area Select Separator Sheet Skeleton Slider Sonner Switch Table Tabs Textarea Toggle Toggle Group Tooltip

Modern Components

16

AI Chat Bento Grid Gradient Text Animated Counter Spotlight Card Typing Animation File Upload Stepper Code Block Marquee Shimmer Button Blur Fade Timeline Dock Animated List Ripple

AI Components

8

AI Chat AI Prompt Input AI Message Bubble AI Suggestion Cards AI Model Selector AI Code Block AI Conversation List AI Markdown Renderer

Blocks

16

Hero Section Features Grid Pricing Section Testimonials CTA Section Stats Section Footer FAQ Section Team Section Logo Cloud Comparison Table Newsletter Section Login Page Error Page Dashboard Layout Dashboard (Density)

Footer

Block

Multi-column footer with links, social icons, and branding.

Q

question.design

The designer's toolkit for the AI age. Components, guides, resources, and process frameworks.

Toolkit

Design System
AI & Design
Vibe Coding
Design Process

Design System

Components
Blocks
Theme Generator

Community

GitHub
Twitter
Discord

© 2026 question.design. All rights reserved.

Built with Next.js, Tailwind CSS & shadcn/ui

Theme Generator

Mode

Theme Presets

Font:Geist|Geist Mono

Brand

Primary#171717

Primary Foreground#fafafa

Secondary#f5f5f5

Secondary Foreground#171717

Accent#f5f5f5

Accent Foreground#171717

Destructive#e7000b

Surfaces

Background#ffffff

Foreground#0a0a0a

Card#ffffff

Card Foreground#0a0a0a

Popover#ffffff

Popover Foreground#0a0a0a

Muted#f5f5f5

Muted Foreground#737373

Utility

Border#e5e5e5

Input#e5e5e5

Ring#a1a1a1