Flat Design

1. Define four to six brand colors plus one light neutral as Figma Variables.
2. Apply them only as solid fills; never add a gradient or texture fill.
3. Create state colors (hover, pressed) as shade steps of the same hues.
4. Use color, not shadow, to separate and group elements.

Limit the palette to a few saturated hues plus one neutral; flat color gets noisy fast.

1. Build a modular type scale as Text Styles, for example 12 / 14 / 16 / 20 / 28 / 40.
2. Set clear weight steps so headings and body separate at a glance.
3. Use generous line height and whitespace to do the work borders used to.
4. Let the largest type and a block of color anchor each screen.

In flat design type does the job depth used to; exaggerate the scale contrast.

1. Give buttons a solid fill, real padding via Auto Layout, and a clear label.
2. Build Variants for default, hover, pressed, and disabled using color shifts.
3. For flat 2.0, add one soft shadow or a 1px border to lift the control.
4. Keep links visibly distinct with color and weight, not just placement.

Test the weak-signifier risk: ask someone what is tappable before you ship.

1. Draw icons as single-color geometric shapes on one shared keyline grid.
2. Wrap each in a square tile filled with a flat brand color.
3. For the classic long shadow, add a darker shape offset down and to the right, clipped to the tile.
4. Keep the shadow hard and flat, with no blur.

The long shadow is a period detail; use it deliberately, not on everything.