Purpose
To provide a structured system for styling UI elements (components, actions, states) by mapping them into consistent visual weight categories — ensuring scalability and brand alignment.
Style Mapping Model
| Element Type | Style Tier | Definition | Usage Example | Notes |
| Buttons | Primary | High-visibility action (1 per screen) | “Book Demo,” “Save Project” | Always high contrast, filled style |
| Secondary | Supportive actions | “Cancel,” “Learn More” | Outlined/ghost buttons, lower emphasis | |
| Tertiary | Inline, low-priority actions | “Edit,” “More Options” | Icon-only, text links | |
| Form Fields | Default | Standard inputs | Name, email fields | Neutral border + placeholder |
| Highlighted | Focus/active state | Email field when user types | Accent border, subtle glow | |
| Error | Invalid input | Wrong email format | Red border + inline error message | |
| Cards/Blocks | Primary | Core content blocks | Pricing cards, feature highlights | Use stronger background + shadow |
| Secondary | Supporting info | Notifications, side blocks | Light outline or subtle background | |
| Text Styles | Heading | Primary headers | H1/H2 sections | Use font-heading tokens |
| Body | Main copy | Paragraphs, form instructions | Base font tokens | |
| Helper | Secondary/annotation | Footnotes, hints | Small, muted tone | |
| Alerts & Feedback | Success | Confirmation messages | “Project saved successfully” | Green tone + check icon |
| Error | Critical issues | “Payment failed” | Red tone + alert icon | |
| Warning | Non-blocking risks | “Unsaved changes” | Yellow tone + icon | |
| Info | Neutral updates | “New version available” | Blue tone + info icon |
Implementation Rules
- One Primary Action per screen — avoid multiple competing CTAs.
- Style tiers must cascade — never use primary button + primary card together without spacing hierarchy.
- Use tokens from Visual Token Reference Sheet (Doc 4.1) for all colors/spacing.
- Accessibility check — contrast ratios must meet WCAG AA.
- Consistency across platforms — mobile, web, and dashboard must use same mapping.
Example Mapping – SaaS Dashboard Screen
- Primary Button: “Create Project” (blue filled)
- Secondary Button: “Cancel” (outline grey)
- Card (Primary): Active projects (white bg, shadow)
- Card (Secondary): Recent activity (light bg, no shadow)
- Alert: “Project saved successfully” (green success banner)
Usage Notes
- Apply during wireframe → UI transition.
- Keep style mapping documented in Figma component library.
- Review in Design QA (EPIC 6) for consistency.