Lesson 4 of 12Article15 min
Shapes, Text & Color
Rectangles, ellipses, lines, and polygons cover most UI chrome. Round corners with the corner radius field. Use independent corners for cards with one sharp edge.
01Basic shapes
Rectangles, ellipses, lines, and polygons cover most UI chrome. Round corners with the corner radius field. Use independent corners for cards with one sharp edge.
Strokes add borders; fills add solid color, gradients, or images. Multiple fills/strokes stack like layers.
02Typography basics
- Press T, click, and type. Pick a font family, weight, size, line height, and letter spacing in the right panel.
- For UI, start with Inter, SF Pro, or system fonts; pair one display face with one body face.
- Use consistent type scale: e.g. 12 / 14 / 16 / 20 / 24 / 32 — not random sizes per screen.
- Line height ~1.4–1.6 for body text; tighter for large headings.
03Color that stays consistent
Pick a primary brand color, neutrals (grays), and semantic colors (success, warning, danger). Store them as Color Styles so every button uses the same token.
Real-life example: Color styles are like branded paint cans. You do not remix a slightly different blue for every wall.
- Check contrast — light gray on white fails accessibility.
- Design in grayscale first for wireframes, then apply color.
- Use HSL or hex consistently; document hex values for developers.