A scalable design system that brings consistency, speed, and clarity to product teams.
120+ Components
Unified visual language across all products.
80+ Variables
Speeds up design & development.
Auto Layout / Fully responsive
Speeds up design & development.
Overview
Electric Design System is a comprehensive system created to standardise UI components, styles, and patterns specifically for mobile apps. It empowers teams to build beautiful, accessible, and consistent products faster.
Colors
Primary
600
500
400
300
Semantic
Success
Warning
Error
Info
Neutral
Typography
Aa Inter
Heading 01
48 / Bold
Heading 02
32 / Semibold
Heading 03
24 / Semibold
Body Large
16 / Regular
Body Default
14 / Regular
Caption / Small
12 / Regular
Buttons
Primary
Button
Secondary
Button
Tertiary
Button
States
Default
Hover
Pressed
Disabled
Input Field
Default
Focused
Disabled
Components
Dropdown
Select an option
Toggle
Checkbox
Label text
Label text
Radio Button
Option one
Option two
Chip
Label
Tag
New
Active
The language it speaks
⚡Purple captures raw power and electrical energy, drawing inspiration from the intense forces of a lightning strike.
Role: Establishes a bold, commanding presence as the dominant anchor of the palette.
💡 Yellow sparks instant brightness and optimism, mirroring the brilliant glow of an illuminated lightbulb and the vivid flash of electric currents
Role: Serves as a high-visibility accent to highlight critical details, drive engagement, and energize the design.
Global control
Semantic tokens
Always in sync
Use of the Design System in Savergy app
"Here's the simple truth: you can't innovate on products without first innovating the way you build them"
-Alex Schleifer, Former VP of Design at Airbnb”"