15 catalog entries
Patterns
Reusable decision and implementation structures.
Generation ContractResolve the product thesis, audience feeling, content spine, assets, and constraints before generating visual directions.Macrostructure FirstChoose the page or screen structure and reading order before selecting component recipes or detailed styling.Structural FingerprintUse two stable system constants and one flexible signature so the interface feels authored without coating every region in the same motifs.Spacing ContractDeclare page gutters, section gaps, panel insets, stack gaps, and control gaps as separate relationships before component styling.Direction BranchingGenerate three materially different visual routes, then choose the product-derived direction with the strongest audience, content, asset, and responsive fit.Visual Move BudgetAllocate one display apex, one signature subject or object, one motion motif, one texture or field, and one accent logic across the page.Hero MathConstrain display type, vertical budget, subcopy, action position, and mobile proof so expressive heroes remain readable and useful.Image-First Asset LoopWhen a page needs a memorable visual subject, create or select one focused asset and design around its composition.Front-Door Art DirectionChoose an authored entry strategy, strong visual carrier, memorable type move, navigation posture, and visible motion signature before detailed component styling.Craft Refinement LoopMake one focused visual pass after implementation for optical alignment, spacing, crop, type fit, states, and responsive composition.Stable State GeometryReserve dimensions for controls, rows, media, and async regions so labels and state changes do not shift the layout.Semantic State SystemDefine color, text, icon, and behavior for default, focus, disabled, loading, error, success, and empty states.Mobile RecompositionChange grouping, order, disclosure, and control layout for narrow screens instead of proportionally shrinking desktop UI.Proportionate UI ReviewTie every UI/UX quality claim to design reasoning, static inspection, existing project checks, or rendered review when practical.Real Workflow FirstImplement the primary task or experience as the first screen instead of surrounding an incomplete feature with marketing content.