A · LayoutBeginner35 min read
4. Color, text & effect styles
Figma · 52 pages source format
Styles are the bridge to variables and design tokens. Centralize color and typography before component explosion.
What you'll learn
- Color styles
- Text styles
- Effect styles
- Style naming convention
Color styles
Name: color/bg/default, color/text/primary, color/brand/accent. Avoid hex in layer names.
Do this now
Create 6 color styles. Apply to login + home — zero detached hex on text fills.
Clear?
Text styles
Map display, heading, body, caption. Include size, weight, line height.
Do this now
5 text styles applied across both screens.
Clear?
Effect styles (lite)
Shadow/elevation for cards. One subtle shadow style beats five random drops.
Do this now
Add elevation/shadow style to card. Document in Components page.
Clear?