Documentation

DESIGN VARIANTS

Design Variants Specification

Visual Preview

Preview any variant: http://localhost:3001/?variant=N (0-59)

Variant Gallery

#	Name	Style	Key Visual Elements
0	Split View	Default	Side-by-side editors, rounded 8px corners
10	Newspaper	Column	Sepia tones, serif fonts, column layout
20	Typewriter	Vintage	Monospace, paper texture, worn look
30	Space Mission	Sci-fi	Dark bg, cyan accents, star field
40	Wire Diagram	Technical	Dotted borders, schematic flow
50	Brutalist	Raw	4px black borders, no decoration

Design Element Variations

Each variant should have distinct styling across these dimensions:

Button Styles

Range	Style	Border Radius	Shadow
0-9	Rounded	8-12px	Soft shadow
10-19	Pill	999px	Drop shadow
20-29	Sharp	0-2px	Hard shadow
30-39	Beveled	4px	Inset
40-49	Outlined	Variable	None
50-59	Brutalist	0px	Offset box

Border Styles

Range	Style
0-9	Subtle, 1px solid
10-19	None or dashed
20-29	Bold 2-3px
30-39	Double or groove
40-49	Dotted or mixed
50-59	Thick 4px+

Typography

Range	Font Style
0-9	System sans-serif
10-19	Geometric sans
20-29	Monospace heavy
30-39	Serif / classic
40-49	Condensed / narrow
50-59	Display / decorative

Spacing

Range	Density
0-9	Comfortable (16-24px)
10-19	Airy (24-32px)
20-29	Compact (8-12px)
30-39	Dense (4-8px)
40-49	Asymmetric
50-59	Extreme (varied)

Color Schemes

Range	Palette
0-9	Neutral grays
10-19	Warm earth tones
20-29	Cool blues/greens
30-39	High contrast
40-49	Pastels
50-59	Vibrant/neon

Variant List (60 Total)

0-9: Foundation Variants

Split view (default)

Stacked vertical

Terminal green

Minimal zen

Retro amber

Cyberpunk

Paper notepad

IDE dark

Sunset warm

Ocean calm

10-19: Card-Based Variants

Newspaper

Bulletin board

HUD overlay

Notebook lined

Blueprint

Recipe card

Flashcard

Dashboard

Comic book

Minimal cards

20-29: Themed Variants

Typewriter

Chalkboard

Arcade cabinet

Music player

iOS app

Terminal pro

Polaroid

Magazine

Diff view

Kanban

30-39: Creative Variants

Space mission

Vintage book

Neon 80s

Zen Japanese

Construction

Movie credits

Weather app

Social media

Video player

Mind map

40-49: Outlined/Minimal Variants

#	Name	Visual Description
40	Wire Diagram	Dotted 2px borders, flow chart layout, technical schematic aesthetic
41	Sketch Pad	Hand-drawn look, Comic Sans, wavy underlines, slightly rotated boxes
42	Metro UI	Windows 8 flat tiles, sharp 0px corners, bold color blocks
43	Material Design	Google Material, FAB button, 4px radius, subtle elevation shadows
44	Ghost Buttons	Outline-only elements, 1px borders, minimal fills, hover fills
45	Line Art	Single-weight 1px strokes, A/B section markers, minimal decoration
46	Sticker Sheet	Playful stickers, 3px offset shadows, rotated elements, emoji
47	Badge Collection	Achievement badges, gold gradients, ribbon banners, dark bg
48	Tag Cloud	Hashtag style, scattered sizes, blue palette, rounded 4px tags
49	Breadcrumb Trail	Step indicators, numbered circles, progression layout

50-59: Brutalist Variants

#	Name	Visual Description
50	Brutalist	Heavy 4px black borders, yellow highlights, no shadows, raw
51	Newsprint	Newspaper columns, Times New Roman, sepia paper, figure captions
52	Punk Zine	DIY aesthetic, rotated elements, ransom-note key, scrawled text
53	Warning Signs	Yellow/black hazard stripes, triangle icons, ATTENTION headers
54	Price Tag	Retail tag with hole, brand/item/price hierarchy, SKU numbers
55	Shipping Label	Barcode header, FROM/TO addresses, dashed dividers, tracking #
56	Protest Poster	Red/black bold, PROBLEM/SOLUTION panels, activist typography
57	Carbon Copy	Typewriter paper, faded carbon text, old document feel
58	Redacted Doc	Classified stamps, CONFIDENTIAL watermark, exhibit labels
59	Assembly Manual	IKEA style, circled key, A→B parts, step numbers

URL Parameter

Use ?variant=N to preview any variant (0-59).

Keyboard Shortcuts

Alt+0-9: Variants 0-9
Shift+Alt+0-9: Variants 10-19
Ctrl+Alt+0-9: Variants 20-29
Ctrl+Shift+Alt+0-9: Variants 30-39
(Additional shortcuts TBD for 40-59)