A man with a neatly trimmed beard and short hair, wearing round, brown glasses and a black turtleneck sweater. He is standing outdoors next to a tall, dark-colored pole, with a blurred green leafy background. The man has a calm and confident expression, with his arms crossed lightly in front of him. He is also wearing a thin silver necklace.

Mateus Villain

Product designer, writer and coffee geek

I was born and still live in the city of Criciúma, in Santa Catarina, together with my wife, my dog Amora, and my cat Figma. I've been working with product design since 2016, and I'm currently a senior at Locaweb, responsible for the KingHost dashboard and app, as well as the design system.

Stack

Playlists

Tools

Setup
Gadgets
Coffee

Motherboard ASRock B450M Steel Legend DDR4
Power Supply ATX Gamemax GP400A 400 Real 80Plus
Processor AMD Ryzen 5 3600, 6-Core, 12-Threads, 3.6
Graphics Card Asus GeForce GTX 1650 Dual, 4 , GDDR5
SSD 1 Kingston NV2, M.2 2280 PCIe, NVMe, Read 3500 MB/s, Write 2100
SSD Kingston A400, 240 , SATA, Read 500 , Write 350
HD Seagate Barracuda 1 Sata III 6
Memory Corsair Vengeance LPX, 16 (1×16), 2400MHz, DDR4, CL16
Memory Corsair Vengeance LPX, 8 (2×8), 2666MHz, DDR4, C16
2x Monitor LG 25 UltraWide Full HD 25UM58
Mechanical Keyboard EPOMAKER x AULA F75
Mouse Logitech G502 X Lightspeed
Sony 6000
Webcam Logitech Brio 4K Pro
Microphone HyperX QuadCast 2
Desk Geniodesk Basic

Apple iPhone 15 128
Apple iPhone 8 128
Samsung Galaxy Z Fold4 256
Samsung Galaxy S20 FE 128
Samsung Galaxy Watch4 Classic
Samsung Galaxy Buds 2
Powerbank 2000

Cafeteira Espresso Oster Xpert Perfect Brew
Balança digital de café com timer, modelo C319
Porta filtro duplo, 58
Tamper Compactador de plástico Oster, 58
Anel de dosagem, 58
Distribuidor de café, 58
Puck screen de alumínio, 58
Coffee scoop, 30
Filtro V60, acrílico
Filtro Melitta 103, plástico

Illustration of a user interface with a dashboard layout, including sidebar navigation, content cards, floating modals, and highlighted buttons in purple.

Let's UI

Let’s UI is a complete, open-source multibranding design system, created to make interfaces fully fluid.

                    
                                {
                            
                                  "brand": {
                            
                                    "spacing": {
                            
                                      "2xs": {
                            
                                        "min": {
                            
                                          "value": "0.125rem",
                            
                                          "type": "spacing"
                            
                                        },

Cursor selecting a rectangle shape in Figma design software.

How to use auto layout

Learn to use auto layout and become more proficient with Figma.

30 minutes

New update available

A new version of the system is ready to be installed. Restart to apply the improvements.

                    
                                display
                            
                                title
                            
                                subtitle
                            
                                block-title
                            
                                subheadline
                            
                                overtitle