Case studies
/
Electric Design System
Design System
Electric Design System.
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
200
100
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
Placeholder text
Focused
Placeholder text
Disabled
Placeholder text
Components
Dropdown
Select an option
Toggle
Checkbox
Label text
Label text
Radio Button
Option one
Option two
Chip
Label
Tag
New
Active
Spacing
4
8
12
16
24
32
48
64
Elevation
Level 0
Level 1
Level 2
Level 3
Level 4
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.
🌱 Green channels the essence of nature, symbolizing clean sustainability and renewable energy technologies like solar and wind power
Role: Introduces a refreshing balance that represents growth, eco-friendly innovation, and future-forward harmony.
💡 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.
Built on
Variables
Centralised. Consistent. Connected across entire design.
Global control
Update once, apply everywhere
Semantic tokens
Meaningful names, easy to scale
Always in sync
Consistent in every component
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”"