This skill should be used when the user is defining brand personality in design, choosing between illustration and photography, adding motion or animation, creating visual motifs, ensuring layout variety, customizing CSS framework defaults, or calibrating the level of creative expression for a given context. Covers Lavie & Tractinsky's expressive aesthetics, the expression spectrum (restrained to bold), brand personality translation, illustration systems, photography direction, and template independence.
npx claudepluginhub oborchers/fractional-cto --plugin visual-design-principlesThis skill uses the workspace's default tool permissions.
Lavie & Tractinsky (2004) distinguish classical aesthetics (clean, orderly) from expressive aesthetics (creative, original). Both dimensions independently predict user satisfaction. A design can be perfectly structured and still feel lifeless if it lacks any visual personality. The challenge is calibrating expression to context — too little feels generic, too much feels chaotic.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Lavie & Tractinsky (2004) distinguish classical aesthetics (clean, orderly) from expressive aesthetics (creative, original). Both dimensions independently predict user satisfaction. A design can be perfectly structured and still feel lifeless if it lacks any visual personality. The challenge is calibrating expression to context — too little feels generic, too much feels chaotic.
Match the level of visual expression to the product context. Mismatched expression erodes trust.
| Context | Expression Level | Characteristics |
|---|---|---|
| Government / Healthcare | Minimal | Neutral colors, system fonts, no illustration, maximum restraint |
| Enterprise SaaS (B2B) | Low-Moderate | Subtle brand color, clean icons, restrained illustration, professional photography |
| Consumer SaaS (B2C) | Moderate | Distinctive brand palette, custom illustrations, personality in microcopy, playful motion |
| Creative Agencies / Portfolio | High | Bold typography, strong color, expressive layout, animation as storytelling |
| Luxury / Fashion | High but Controlled | Rich imagery, refined typography, generous whitespace, minimal UI chrome |
Map Aaker's brand personality dimensions (1997) to visual decisions.
| Dimension | Typography | Color | Imagery | Motion |
|---|---|---|---|---|
| Sincerity | Rounded sans-serif, warm | Earth tones, warm neutrals | Friendly illustrations, real photography | Gentle, ease-in-out |
| Excitement | Bold display, tight tracking | Vibrant, high-saturation | Dynamic angles, bold graphics | Energetic, spring curves |
| Competence | Clean geometric sans | Blue-dominant, cool neutrals | Data visualizations, structured layouts | Precise, linear easing |
| Sophistication | Serif or thin sans, generous spacing | Black/white + one accent | High-end photography, minimal illustration | Subtle, slow reveals |
| Ruggedness | Slab serif, heavy weight | Dark, muted earth tones | Textured backgrounds, raw photography | Minimal, mechanical |
Use 3-5 distinct section layout patterns. Repeating the same layout creates monotony; using too many creates chaos.
| Pattern | Structure | Best For |
|---|---|---|
| Hero | Full-width, large heading + CTA + hero image/illustration | Opening section, above the fold |
| Text + Media | 50/50 or 60/40 split, alternating sides | Feature explanations, benefit sections |
| Card Grid | 3-4 column grid of equal cards | Feature lists, pricing, testimonials |
| Full-Width Break | Edge-to-edge image, quote, or color block | Visual breathing room between dense sections |
| Data/Social Proof | Large numbers, logos, or stats in a row | Trust signals, metrics |
Rhythm rule: Alternate between dense sections (card grid, text+media) and open sections (full-width break, hero) to create visual cadence.
Animate only to communicate meaning. Motion without purpose is decoration that slows the experience.
| Rule | Guideline |
|---|---|
| Animate only transform + opacity | GPU-composited, avoids layout thrashing |
| Duration | 150-300ms for UI transitions; up to 500ms for page-level choreography |
| Easing | ease-out for entrances, ease-in for exits, ease-in-out for state changes |
| Stagger | 50-100ms delay between list items for sequential reveal |
| Reduced motion | Always respect prefers-reduced-motion: reduce — disable non-essential animation |
Evaluate how far a design has departed from its framework default. Customer-facing products must reach Level 2 or higher.
| Level | Description | Indicator |
|---|---|---|
| 0 | Raw template | Default colors, default components, placeholder content |
| 1 | Themed template | Custom colors applied but layout/components unchanged |
| 2 | Customized | Custom layout, modified components, brand typography |
| 3 | Distinctive | Unique visual language, custom illustrations, motion system |
| 4 | Bespoke | Fully original design, no trace of framework origin |
Establish 2-3 recurring visual elements that appear across pages: a distinctive shape (rounded rectangles, circles, angular cuts), a pattern (dot grids, subtle lines), or a color treatment (gradient, duotone). Apply them consistently in headers, dividers, backgrounds, and illustrations.
| Anti-Pattern | Why It Fails | Fix |
|---|---|---|
| Unmodified template (Level 0-1) | Looks identical to thousands of other sites | Customize layout, typography, and components to Level 2+ |
| Animation on every element | Feels chaotic, slows perceived performance | Animate only on meaningful state changes |
| Inconsistent expression (playful here, corporate there) | Confusing brand signal | Define expression level once, apply uniformly |
| Stock everything (illustrations + photos + icons from different sources) | Visual incoherence, no brand identity | Commit to one illustration style, one photo treatment |
Motion without prefers-reduced-motion | Accessibility violation, motion-sensitivity risk | Always provide reduced-motion fallback |
Working implementations in examples/:
examples/motion-and-layout-variety.md — Purposeful animation with CSS transitions, prefers-reduced-motion handling, and a layout variety pattern in CSS/Tailwind/ReactWhen reviewing or building for visual expression:
transform and opacity at 150-300msprefers-reduced-motion: reduce disables all non-essential animation