Luca Del Puppo - Senior Software Engineer

The recipe for a universal Design System

Big Thanks to

Luca Del Puppo

  • Senior Software Engineer
  • Javascript enthusiast
  • Typescript lover
  • “Youtuber”
  • “Writer”

Love sport: running, hiking

Love animals


  • What is a design system?
  • Benefits of having an effective Design system
  • How to create a Design System?
  • Technical challenges
  • Who can help developers?
  • Conclusion

What is a Design System?

Material Design Image
Carbon Design Image

Are they the best

Design Systems for you?

A Design System is

a set of interconnected patterns

and  shared practices

coherently organized to serve the purpose of a digital product.


Design System





Design principles


Params & Rules

Shared language




colors palette







(pattern library)

What Design System is not

  • styleguide
  • pattern-library
  • job for Designer
  • UX
  • checklist

When and where is it crucial?

  • Scale-up Business (💰 & 👥)
    • reduce costs
    • errors & frictions
    • increase the quality
  • Strong brand
  • UI is value

Benefits of having

an effective

Design system

  • Promotes consistency

  • Reduced building time

  • Reduced design and development debt

  • Allows room for innovation

  • Contributes to strong, memorable brands

How to create a Design System

What is needed?

  • Business Model
  • Personas o Proto-Personas
  • User Journey
  • User Interface

What is in charge of you?

  • Principles
  • Governance
  • Design Patterns
  • Patter Library


  • Between 3 and 5
  • Authentic & Genuine
  • Handy & Applicable
  • Clears
  • Easy to remember


  • Which is the team?
  • Which are the tools?
  • How do you make the results visible?
  • What are the meets?

Design Patterns

a Design Pattern is

a general repeatable solution to a commonly occurring problem in software design

Design Patterns - Types

  • Functional
    Tangible block of the user interface
  • Perceptive
    The aesthetic essence of our element

Design Patterns - Tools

  • Paper
  • Figma
  • Invision
  • Sketch
  • Adobe
  • .....

How to define Design Patterns

  • Interface inventory (

  • Inductive process from UI+User Journey to Pattern (design driven)

  • Periodically and after designing (well) the interface

    frontenders, designers, copywriters (4/8p)

  • Outcome = draft of the standard patterns

  • Process > Result

Pattern Library

Pattern Library is

a tool to document and share

Design Patterns

Pattern Library - Best practices

  • MUST HAVE a Structure (sorted, hierarchical, by functionality..)
    As the team is used to think
  • MUST HAVE minimal info (name, scope, example, variants) 

Pattern Library - Anti Patterns

  • It exists, but it's unused
  • It's used just by a part of the team

Pattern Library - Tools

Technical challenges


  • Available for every possible framework
  • Performance
  • Prevent css override

The perfect solution

doesn't exist

The perfect solution exists only

for your case

we can think about


we can think about

Web Components

we can think about

Why Lit?


A library with 3 simple properties

  • Simple
    • Building on top of Web Components standards
    • ready to productivity
    • designed with web platform evolution in mind
  • Fast
    • 5kb
    • no need to rebuild a virtual tree and diff it with the DOM
  • WebComponents
    • Every Lit component is a native web component

Build one

runs with every framework

Because the standard WEB

is forever

We hope 😅

The Carbon Example

Design system by IBM

They are moving to Lit




  • In charge of all of you
  • Must help you
  • Must be shared
  • Must be your language
  • Must be your identity
  • Should survive at the javascript frameworks

Which is the secret ingredient?

The secret ingredient is


Homeworks 📚

The Book

Design Systems
by Alla Kholmatova

Design Tokens

Lit & WebComponents

Luca Del Puppo


Luca Del Puppo