Design System & Visual QA
Gouache Component Lab
A comprehensive visual testing ground verifying every reusable painted component and state.
1. PaintButton Variants & Sizes
2. Canonical Painted Icons (Zero Generic SVGs)
home
search
user
settings
heart
trash
close
arrow
Rotated Arrows:
right
down
left
up
3. Form Controls (Inputs, Textarea, Checkbox, Toggle)
Responsive 3-slice caps prevent distorted brush edges.
Special characters are not allowed in delicious burger names.
Toggle Switch (ON)
4. Progress System (Real Ketchup Fill Clipping)
Assembly Completion65%
Adjust:
5. Badges, Tooltips & Dialog Shell
3Notifications✓Success!Attention
Hover or Focus for Tooltip 💬
6. Painted Horizontal Dividers
Ketchup Brush Line:
Mustard Brush Line:
6.5. Bread Card & Large Panel Containers
Bread Slice Card
Framed in card-bread.webp with hover physics.
Large Section Panel
Framed in large-panel.webp for story and editorial narratives.
7. Burger Stack Rendering & Loader
Small Mini Stack
Animated Drop Loader
Burger loading sequence...
8. Application State Illustrations
Pantry Empty
Zero items found in your pantry.
Kitchen Hiccup
The skillet got too hot. Please refresh.
Recipe Perfected
Your burger has been toasted and plated.