![](https://framerusercontent.com/images/3lkmrKCgDGyPykTHTWlyQtOu1E.png)
The Digi Design Language
Digi Design Language is a set of components and principles to maintain the experience when using Digi's Products.
Design Team
![](https://framerusercontent.com/images/dKOKitj71uBlSNyF3ZqKlZScBwU.png)
The Concept
Imagine you have a “Lego” brick. From one lego combined with another, you can make a wall. From that wall, we combine with other walls, we can build a house. Basically, we can build up anything with lego bricks such as car, trucks, castles, etc.
This is what Design Language or Design System is. With the correct foundation and combining smaller components we can create a product with unified language.
![](https://framerusercontent.com/images/ETxGhp2qY4TurPKgnAbD0rvBntE.png)
The Atomic Design
![](https://framerusercontent.com/images/TQCFg001E2uJEUUcR9Nim8U4.png)
![](https://framerusercontent.com/images/3s1lLpXLZDXROKnmd3AIeiAioOk.png)
Inspiration from Atomic Design by Brad Frost
Atomic design is a methodology for creating design systems. There are five distinct levels in atomic design: Atoms, Molecules, Organisms, Templates, Pages
What is Digi Design Language
Digi Design Language (DDL) is a set of principle use to maintain the experience using Digi’s product.
![](https://framerusercontent.com/images/QujAMKcJ8q4OPK6Kj3I9SuHhVuo.png)
Problem Statement
The problem with our products are inconsistent design. Each products has their own components such as buttons, tabs, etc. Other than that, the foundation are not aligned with each products. This create low brand trust and not unified branding and design language for our organization.
![](https://framerusercontent.com/images/AvBbQ1qRAG7fCwaajStj0jyHnzM.png)
The Benefits
![](https://framerusercontent.com/images/jFS7quBKQOncH6o3LxSYjh0CkDg.png)
Work Process
![](https://framerusercontent.com/images/uJ8DyOQ1qdAbdsds11P2P7kjhIg.png?scale-down-to=4096)
Designs
![](https://framerusercontent.com/images/VTyH6MpkUH4xpJ4CRTFIrYVnUaM.png)
![](https://framerusercontent.com/images/VN8rpTwiXTiCqQNYfdFIvmOKeDk.png)
![](https://framerusercontent.com/images/4NXeybiFjIDhCJDPGxfPntsv1aA.png)
![](https://framerusercontent.com/images/xX2IbTYM7Z8UzqT7oJy6OFXChe8.png)
![](https://framerusercontent.com/images/pwODODAGYnWXt1QJYOxYGAGCd2g.png)
![](https://framerusercontent.com/images/c7TwAk5YjLTCG1X2aVJgX26inak.png)
![](https://framerusercontent.com/images/7H329d3uDcRkvmRg5GadlStsUoE.png)
![](https://framerusercontent.com/images/NoSkcalTAEbnyIMthTFLKQ.png)
Key Learnings
![](https://framerusercontent.com/images/ZE5CKusC07w8zeVCfZbAlOohu5I.png)
![](https://framerusercontent.com/images/3lkmrKCgDGyPykTHTWlyQtOu1E.png)
The Digi Design Language
Digi Design Language is a set of components and principles to maintain the experience when using Digi's Products.
Design Team
![](https://framerusercontent.com/images/dKOKitj71uBlSNyF3ZqKlZScBwU.png)
The Concept
Imagine you have a “Lego” brick. From one lego combined with another, you can make a wall. From that wall, we combine with other walls, we can build a house. Basically, we can build up anything with lego bricks such as car, trucks, castles, etc.
This is what Design Language or Design System is. With the correct foundation and combining smaller components we can create a product with unified language.
![](https://framerusercontent.com/images/ETxGhp2qY4TurPKgnAbD0rvBntE.png)
The Atomic Design
![](https://framerusercontent.com/images/TQCFg001E2uJEUUcR9Nim8U4.png)
![](https://framerusercontent.com/images/3s1lLpXLZDXROKnmd3AIeiAioOk.png)
Inspiration from Atomic Design by Brad Frost
Atomic design is a methodology for creating design systems. There are five distinct levels in atomic design: Atoms, Molecules, Organisms, Templates, Pages
What is Digi Design Language
Digi Design Language (DDL) is a set of principle use to maintain the experience using Digi’s product.
![](https://framerusercontent.com/images/QujAMKcJ8q4OPK6Kj3I9SuHhVuo.png)
Problem Statement
The problem with our products are inconsistent design. Each products has their own components such as buttons, tabs, etc. Other than that, the foundation are not aligned with each products. This create low brand trust and not unified branding and design language for our organization.
![](https://framerusercontent.com/images/AvBbQ1qRAG7fCwaajStj0jyHnzM.png)
The Benefits
![](https://framerusercontent.com/images/jFS7quBKQOncH6o3LxSYjh0CkDg.png)
Work Process
![](https://framerusercontent.com/images/uJ8DyOQ1qdAbdsds11P2P7kjhIg.png?scale-down-to=4096)
Designs
![](https://framerusercontent.com/images/VTyH6MpkUH4xpJ4CRTFIrYVnUaM.png)
![](https://framerusercontent.com/images/VN8rpTwiXTiCqQNYfdFIvmOKeDk.png)
![](https://framerusercontent.com/images/4NXeybiFjIDhCJDPGxfPntsv1aA.png)
![](https://framerusercontent.com/images/xX2IbTYM7Z8UzqT7oJy6OFXChe8.png)
![](https://framerusercontent.com/images/pwODODAGYnWXt1QJYOxYGAGCd2g.png)
![](https://framerusercontent.com/images/c7TwAk5YjLTCG1X2aVJgX26inak.png)
![](https://framerusercontent.com/images/7H329d3uDcRkvmRg5GadlStsUoE.png)
![](https://framerusercontent.com/images/NoSkcalTAEbnyIMthTFLKQ.png)
Key Learnings
![](https://framerusercontent.com/images/ZE5CKusC07w8zeVCfZbAlOohu5I.png)
![](https://framerusercontent.com/images/3lkmrKCgDGyPykTHTWlyQtOu1E.png)
The Digi Design Language
Digi Design Language is a set of components and principles to maintain the experience when using Digi's Products.
Design Team
![](https://framerusercontent.com/images/dKOKitj71uBlSNyF3ZqKlZScBwU.png)
The Concept
Imagine you have a “Lego” brick. From one lego combined with another, you can make a wall. From that wall, we combine with other walls, we can build a house. Basically, we can build up anything with lego bricks such as car, trucks, castles, etc.
This is what Design Language or Design System is. With the correct foundation and combining smaller components we can create a product with unified language.
![](https://framerusercontent.com/images/ETxGhp2qY4TurPKgnAbD0rvBntE.png)
The Atomic Design
![](https://framerusercontent.com/images/TQCFg001E2uJEUUcR9Nim8U4.png)
![](https://framerusercontent.com/images/3s1lLpXLZDXROKnmd3AIeiAioOk.png)
Inspiration from Atomic Design by Brad Frost
Atomic design is a methodology for creating design systems. There are five distinct levels in atomic design: Atoms, Molecules, Organisms, Templates, Pages
What is Digi Design Language
Digi Design Language (DDL) is a set of principle use to maintain the experience using Digi’s product.
![](https://framerusercontent.com/images/QujAMKcJ8q4OPK6Kj3I9SuHhVuo.png)
Problem Statement
The problem with our products are inconsistent design. Each products has their own components such as buttons, tabs, etc. Other than that, the foundation are not aligned with each products. This create low brand trust and not unified branding and design language for our organization.
![](https://framerusercontent.com/images/AvBbQ1qRAG7fCwaajStj0jyHnzM.png)
The Benefits
![](https://framerusercontent.com/images/jFS7quBKQOncH6o3LxSYjh0CkDg.png)
Work Process
![](https://framerusercontent.com/images/uJ8DyOQ1qdAbdsds11P2P7kjhIg.png?scale-down-to=4096)
Designs
![](https://framerusercontent.com/images/VTyH6MpkUH4xpJ4CRTFIrYVnUaM.png)
![](https://framerusercontent.com/images/VN8rpTwiXTiCqQNYfdFIvmOKeDk.png)
![](https://framerusercontent.com/images/4NXeybiFjIDhCJDPGxfPntsv1aA.png)
![](https://framerusercontent.com/images/xX2IbTYM7Z8UzqT7oJy6OFXChe8.png)
![](https://framerusercontent.com/images/pwODODAGYnWXt1QJYOxYGAGCd2g.png)
![](https://framerusercontent.com/images/c7TwAk5YjLTCG1X2aVJgX26inak.png)
![](https://framerusercontent.com/images/7H329d3uDcRkvmRg5GadlStsUoE.png)
![](https://framerusercontent.com/images/NoSkcalTAEbnyIMthTFLKQ.png)
Key Learnings
![](https://framerusercontent.com/images/ZE5CKusC07w8zeVCfZbAlOohu5I.png)
Digi Design Language
July 2021
Websites
Web