| name | saas-ui-ux-designer-skill-typography-flex |
| description | Typography-first SaaS UI/UX workflow for internal product screens and components. Use when designing or refactoring dashboards, settings pages, editors, builders, tables, or modals where typography hierarchy, flex/grid layout, spacing rhythm, and premium neutral surfaces need to be the main organizing system. Also use when a UI feels cramped, visually noisy, misaligned, or inconsistent. |
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
- Define the screen purpose, main action, and primary vs secondary zones.
- Start with layout first:
- flex vs grid
- sticky vs flowing regions
- main vs supporting panels
- desktop vs mobile stacking
- Establish typography hierarchy before decoration.
- Apply neutral surfaces, restrained accent use, and consistent card rhythm.
- Check states, spacing, and responsiveness.
- Read references/typography-flex.md for the detailed rules when needed.
Defaults
- Typography drives hierarchy
- Flex/grid drives structure
- Neutral surfaces with restrained accent
- One clear primary action per zone
- Reusable patterns over one-off layouts
- Settings and builder pages should feel product-grade, not admin-raw
Use This Skill To
- redesign SaaS settings pages
- improve dashboard or editor layout rhythm
- fix misalignment, cramped cards, or noisy spacing
- choose between stacked, split, and sticky panel layouts
- make internal product UI feel premium and production-ready
References
Read references/typography-flex.md for:
- typography hierarchy rules
- flex and grid layout recipes
- section and card composition
- settings page structure
- common UI anti-patterns
Constraints
- Prefer existing product tokens and components when present.
- Keep output responsive and production-ready.
- Avoid decorative clutter, loud color, and concept-art styling.
