Getting Started
Before you start
Think of Lio as your operating system for web design: it doesn't create the work for you, it brings structure to everything you create.
What you're reading
This document explains The Lio Method: a flexible and automation-ready design system approach, created as a practical interpretation of Material Design, with specific application to web design workflows.
This documentation will help you:
Understand the philosophy behind the framework
Learn how the method is structured and why
Use and extend it in real web design projects
Communicate decisions clearly with developers
Avoid over-engineering at early stages
If you expect a plug-and-play UI kit, this is not that type of system. If you want to design faster, smarter and with structural thinking, you are in the right place.
Who this is for
This material is intended for mid-level to senior designers who already:
Work confidently with tools like Figma
Understand fundamental development and design systems concepts
Build websites or marketing experiences (not apps or product/UI platforms)
Care about clarity, scalability and handoff quality
Scope of application
Design happens everywhere but Lio happens in Figma.
The Lio Method is designed and implemented exclusively for Figma.
There is no official implementation for Sketch, Penpot, Framer or any other tool, not because it is technically impossible, but because:
Figma currently offers the most efficient workflow for modern web design, combining variables, components, auto-layout, prototyping, and team collaboration in a single platform.
Lio Toolbox, the official plugin that implements and automates the framework, only exists inside Figma.
The system philosophy values speed, iteration, scalability and cross-role communication. All strengths where Figma leads the market today.
What Lio is
The Lio Method is a structured approach to starting, organizing and scaling web design projects using a minimal but expandable system of variables, rules and decision patterns, instead of deep and rigid token specialization.
It is based on real world constraints, especially in contexts where:
The brand is not fully defined
The project will evolve over time
Design teams must ship fast
Decisions need to be shared with developers
Components are not yet needed or stable
Lio does not design for you and does not replace your creativity, it just removes friction and gives you the structure so you can design with purpose and clarity.
What Lio is not
Lio is not:
A UI component library
A visual style kit
A marketing template pack
A replacement for design criteria
A generic token dictionary
A rigid or product-oriented system
The Lio Method Vs Lio Toolbox
The Lio Method = the conceptual system (philosophy + rules + structure)
Lio Toolbox = the tool that automates, applies and configures it
The framework can exist theoretically on its own, but its purpose is only fully achieved through Lio Toolbox, because it automates:
File setup
Token system structure
Layout and spacing logic
Documentation foundation
Lio Toolbox is exclusively designed to work with this framework, not as a universal plugin.
Versioning
The framework uses semantic versioning:
Every update prioritizes clarity, efficiency, and team communication.