The Lio Method

A practical system for web designers who need structure without bureaucracy. Organize decisions, automate the repetitive stuff, and keep documentation clear.

Made by Fede Luna, refined through real projects at Refokus Agency.

Methodology Supported by Real Tooling

The method is supported by Lio Toolbox, a Figma plugin that automates setup, generates documentation, and keeps everything organized so you can focus on designing, not maintaining systems.

Why Lio Works

Design systems for web projects fail when built on assumptions. Lio does the opposite: it captures the decisions you've already made, and structures them only when patterns prove useful.

Built for web design workflows

Real constraints, real deadlines, real projects

Built for web design workflows

Real constraints, real deadlines, real projects

Built for web design workflows

Real constraints, real deadlines, real projects

No over-engineering

Structure grows with evidence, not assumptions

No over-engineering

Structure grows with evidence, not assumptions

No over-engineering

Structure grows with evidence, not assumptions

Removes mechanical work

Setup and docs handled automatically

Removes mechanical work

Setup and docs handled automatically

Removes mechanical work

Setup and docs handled automatically

Inspired by Material Design

Proven principles, adapted for web

Inspired by Material Design

Proven principles, adapted for web

Inspired by Material Design

Proven principles, adapted for web

Battle tested at Refokus

Used daily in production projects

Battle tested at Refokus

Used daily in production projects

Battle tested at Refokus

Used daily in production projects

Scales with your project

Start minimal, grow as needed

Scales with your project

Start minimal, grow as needed

Scales with your project

Start minimal, grow as needed

Quick Demo

Popular Articles