Figma – Styles and the mini UI guideline

Goal

You give the surfaces refined on the basis of the tests a consistent visual language. You create the mini UI guideline: colors, text styles, spacing, and button, input field, and icon rules that live in Figma as reusable styles. By the end of the exercise, the UI guideline for homework 8 is ready.

Why do we need a UI guideline?

If on every screen you choose the color and font size "by feel", the interface will be slightly different in every view, and the user cannot use their earlier experience. A UI guideline records which visual decisions apply to the whole product, and when to use which. It is not decoration: it is the tool of the hierarchy and consistency learned in chapter 6.

The three main layers of the mini UI guideline:

1. Colors: by role (not "blue", but "primary action").
2. Typography: a set of styles from headings to body text.
3. Spacing and elements: a spacing scale, the rules of buttons, fields, and icons.

Colors

A color system ties the product's colors to roles. For a mini palette, this is enough:

Role	Purpose	Rule
Primary	The main action and emphasis	One primary-colored button per screen
Neutral	Text, background, borders	3–5 shades from light to dark
Success	Confirmation, done	Always with a supplementary icon / text
Warning	Caution	Always with a supplementary icon / text
Error	Error, deletion	Always with a text message (color cannot be the only signal)

Check the contrast of every color pairing (as in chapter 3): text on its background at least 4.5 : 1, large text and interface elements 3 : 1. Document the checked values at the palette.

Typography

Typography is the conscious use of the form and system of text. A typographic style is a repeating set of predefined text properties (typeface, size, weight, line height). Thanks to styles, all text of the same role can be modified with a single decision.

A mini set:

Style	Use	Example size / weight
Heading (H1)	The main title of the screen	28 / bold
Subheading (H2)	Titles of sections	20 / bold
Body text	Running text, descriptions	16 / regular
Label / helper text	Field labels, notes	14 / regular
Button label	Text of buttons	16 / bold

Tips:

• One, at most two typefaces are enough; hierarchy is given by size and weight.
• The line height for body text is about 1.4–1.6 times the font size, so that it is readable.
• On mobile, do not go below 16 points for body text, if possible.
• Visual weight is the degree to which an element draws attention to itself; the style set gives the system of this.

Spacing, buttons, fields

Choose a base spacing unit (for example 8 points), and use only its multiples (8, 16, 24, 32). This gives a consistent rhythm, and also simplifies decisions.

Button rules:

• One primary button per screen; the secondary and text variants have less emphasis.
• The label names the consequence ("Submit registration").
• States: default, focus, pressed, disabled, loading (chapter 6).
• Minimum touch size: it should not be smaller than the 24 × 24 CSS pixels of WCAG 2.2; a comfortable size is larger.

Input field rules:

• Label above the field (not just placeholder text).
• States: default, focus, filled, error (with a text error message), disabled.
• The error state should not signal with color alone.

Icon rules:

• One icon set, with consistent stroke width and style.
• An icon is good if it supports quick recognition; for important or ambiguous actions, it should not replace the text label.
• Every icon should have a text alternative (for screen readers).

Task: the mini UI guideline in Figma

1. Create a "UI guideline" page in the Figma file.
2. Define the colors: create color styles (Color styles) according to the roles, and name them descriptively (for example "Primary", "Error").
3. Measure the contrast: write next to them the ratio of the text–background pairings, and mark if it reaches the AA level.
4. Define the text styles (Text styles) according to the table above: at least heading, subheading, body text, label.
5. Apply the styles to the refined screens: replace the existing texts with the styles, and the colors with the color styles.
6. Show how the hierarchy works: on one screen mark the most important element, and how size, weight, and color express this.
7. Make a button and input field sample with the relevant states, and write a rule of 2–3 sentences next to it.
8. Make an icon list with the icons used, and write their meaning next to them; where doubtful, add text.
9. Document the spacing: write down the base spacing unit, and show it on one screen.
10. Update the screens based on the tests (the rest of homework 8), and share the file.

Checklist

• The colors are named by role, the contrasts are checked.
• The texts are formatted with styles, not with custom settings.
• The states (button, field) are documented.
• Error signaling is not based on color alone.
• The guideline is short but usable: someone else would be able to follow it.

Learning resources

• Figma Learn – official help: search for "styles", "text styles", and "color styles"
• W3C – WCAG 2.2 Quick Reference