SaaS UI UX Designer Skill Typography Flex

Overview

Use this skill to design calm, premium SaaS UI where typography and flex/grid layout carry the hierarchy. Favor readable product structure over decorative styling.

Workflow

1. Define the screen purpose, main action, and primary vs secondary zones.
2. Start with layout first:
   • flex vs grid
   • sticky vs flowing regions
   • main vs supporting panels
   • desktop vs mobile stacking
3. Establish typography hierarchy before decoration.
4. Apply neutral surfaces, restrained accent use, and consistent card rhythm.
5. Check states, spacing, and responsiveness.
6. Read references/typography-flex.md for the detailed rules when needed.