21 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 BranchingCompare materially different visual routes when substantial creative work leaves the direction open, then select for audience, content, assets, and responsive fit.Visual Move BudgetChoose a dominant visual idea and keep supporting type, media, color, and optional motion subordinate to it.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.Asset Art-Direction BriefDefine the subject, scene, camera, light, material, negative space, crop safety, and responsive variants before generating or selecting primary media.Typography Voice ContractChoose display and text roles from brand voice, content length, language, and loading constraints, then choreograph the real headline across viewports.Responsive Art-Direction ContractSpecify content priority, order, subject crop, navigation, action posture, and relocated content for each viewport class before breakpoint styling.Product-Derived Motion ContractDefine one motion signature through meaning, trigger, subject, property, timing, rest, interruption, and reduced-motion behavior.Direction FingerprintCompare macrostructure, hero, navigation, display class, palette, media treatment, section sequence, and motion before selecting a direction.Category Content SpinePreserve the small set of concrete facts, proof, options, and actions users need for the specific product surface before adding brand narrative.