Sector Style Intelligence — Visual Direction by Industry

Why Sector-Specific Style Matters

Visual design does not exist in a vacuum. Every industry carries implicit expectations that users absorb through years of interaction with competing products, regulatory contexts, and cultural norms. A fintech application that uses playful rounded shapes and saturated candy colors will unconsciously erode trust — not because those choices are inherently bad, but because the sector has conditioned users to associate financial credibility with precision typography, muted palettes, and clinical spacing. Conversely, a wellness app that adopts the dense, data-heavy aesthetic of a trading platform will feel cold and clinical when users expect warmth, breathing room, and organic softness. Sector context is the single most important constraint that separates a technically competent UI from one that genuinely resonates.

The differences run deeper than color palettes. Trust signals vary dramatically: healthcare apps earn credibility through accessibility compliance and clinical precision, while social media platforms build trust through social proof and content velocity. Typography norms diverge — SaaS productivity tools lean on geometric sans-serifs that optimize for information density, while luxury e-commerce demands refined serif typefaces that communicate premium positioning. Spacing philosophy shifts from the deliberate density of a dashboard (where every pixel of screen real estate carries data value) to the generous whitespace of an editorial layout (where breathing room itself communicates sophistication). Even motion design carries sector-specific meaning: a fintech confirmation animation must feel precise and instantaneous, while a meditation app transition should feel slow, deliberate, and calming.

Understanding these sector conventions does not mean blindly following them. The most innovative products in any sector succeed by knowing the rules deeply enough to break them strategically. Stripe revolutionized fintech aesthetics by borrowing editorial elegance from publishing. Duolingo disrupted education by importing gaming mechanics wholesale. But these innovations worked precisely because their creators understood the baseline expectations and chose specific, intentional departures rather than accidental violations. This skill provides that baseline — the deep sector knowledge that makes both convention and strategic deviation possible.

Sector Coverage

Reference Architecture

This skill is organized into deeply researched sector reference files:

Page Template Reference Files

Complete page-level templates with block sequences, typography maps, color application, spacing rhythm, component selection, responsive behavior, and React/TSX skeletons:

Each Style Reference File Includes

1. Color Psychology — What colors mean in the sector, palettes from leading apps with hex values
2. Typography Norms — Exact fonts top apps use and the reasoning behind those choices
3. Component Conventions — Border radius, elevation, density, card styles, button styles with specific px values
4. Spacing Philosophy — Dense vs spacious approaches with specific spacing scale values
5. Motion Personality — Animation timing, easing curves, transition patterns
6. Trust Signals — What makes users trust apps in this sector
7. Anti-Patterns — Sector-specific mistakes that erode credibility
8. Reference Apps — 6+ apps with specific lessons to learn from each
9. W3C Design Token Starter Kit — JSON tokens ready for implementation
10. Inspiration Links — Mobbin/Screenlane filters for browsing real patterns

Cross-References

This skill works in concert with several other sumi skills:

• ui-visual-design-system — For foundational color theory, typography scales, and spacing systems that underpin all sector-specific guidance
• design-systems-architecture — For token architecture and multi-brand/multi-sector design system strategies
• interaction-motion-design — For detailed motion design principles that sector-specific motion personalities build upon
• desktop-app-design — For desktop-specific patterns in SaaS, productivity, and enterprise sectors
• component-patterns-code — For implementation-ready component code (React, SwiftUI, CSS) that can be styled with sector tokens
• accessibility-inclusive-design — For WCAG compliance requirements that apply across all sectors but have heightened importance in healthcare, education, and civic tech
• cognitive-psychology-ux — For the psychological principles behind sector-specific trust signals and engagement patterns
• cross-cultural-i18n-ux — For adapting sector styles across cultural contexts and markets

How to Use This Skill

With the /style Command

/style fintech — Get complete style direction for a fintech app
/style healthcare clinical — Get clinical healthcare style direction
/style e-commerce luxury — Get luxury e-commerce style direction

With the /benchmark Command

/benchmark my-app against stripe — Compare your app's visual language against Stripe
/benchmark my-app fintech — Compare against the fintech sector baseline

Direct Reference

When designing for a specific sector, read the relevant reference file to understand the sector's visual language conventions, then apply or strategically deviate from those conventions based on your product's positioning.