Variables, not hex codes
Why variables
In Filis I never typed a hex code on a screen. Every colour, size, gap, corner and shadow is a Figma variable, so one change reaches every screen at once, from the home dashboard to the home-screen widget.
201variables
5collections
24text styles
Five collections
- Colour (120): primary, text, surfaces, borders, feedback and accent, each with light, normal and dark steps and hover and active states.
- Typography (46): family, size, line height, weight and letter spacing for headings, body and buttons.
- Spacing and padding (15): a 4-point scale from 4 to 32, plus screen padding 16, card padding 16, top bar 56 and bottom nav 84.
- Radius (5): 4, 8, 12, 16 and 20.
- Effects (15): three shadows, light, medium and heavy.
Name the job, not the colour
“Text muted” survives a rebrand; “grey 600” doesn’t. When I needed a calmer secondary text I changed one value, and every caption in the app followed.
Variables don’t make a design good. They make a good decision cheap to repeat.
