This project focuses on the development of a redesign Design System aimed at ensuring visual consistency, design efficiency, and product scalability. The system defines clear identity guidelines, reusable components, and usage rules that facilitate collaboration between design and development, optimizing workflows and maintaining a consistent user experience across all touchpoints.
Comparing the original log-in screen to the redesigned version — what was broken, and how each issue was resolved.
Before
The first version of the log-in screen had several usability issues that slowed users down and made the flow feel unfinished.
After
The redesign addresses each of the issues above, making the log-in experience faster, friendlier, and better adapted to the full screen.
The typefaces chosen for this project are the native fonts of each operating system: SF for iOS and Roboto for Android.
01
Title
Title
18Bold24
Subtitle
16Bold24
Subtitle
16Regular24
02
Body
Body
14Bold20
Body
14S/Bold20
Body
14Medium20
Body
14Regular20
03
Captions
Captions
12Bold16
Captions
12S/Bold16
Captions
12Medium16
Captions
12Regular16
04
Helper
Helper
10Bold12
Helper
10S/Bold12
Helper
10Medium12
Helper
10Regular12
By applying scale values, we can assign clearer and more descriptive names that indicate the semantic purpose of each color. These variables are directly mapped from primitive values, allowing the reuse of these foundations and enabling a scalable, multi-referential structure that makes it easy to adjust values as new needs arise.
Hex
Primitive color
Semantic color
Component
surface
surface/white
color/white
#FFFFFF
surface/black
color/black
#000000
border
border/border
color/gray/200
#E5E7EB
border/black
color/gray/400
#9CA3AF
background
background/lighter
color/gray/50
#F9FAFB
background/disable
color/gray/200
#E5E7EB
background/primary
color/gray/400
#9CA3AF
background/fg-muted
color/gray/700
#374151
background/fg
color/gray/950
#030712
text color
text color/white
color/white
#FFFFFF
text color/light
color/gray/100
#F3F4F6
text color/disable
color/gray/400
#9CA3AF
text color/fg-muted
color/gray/700
#374151
text color/fg
color/gray/950
#030712
info
info/lighter
color/blue/50
#EFF6FF
info/light
color/blue/100
#DBEAFE
info/default
color/blue/500
#2563EB
info/darker
color/blue/700
#1D4ED8
success
success/lighter
color/green/50
#F0FDF4
success/light
color/green/100
#DCFCE7
success/default
color/green/500
#22C55E
success/darker
color/green/700
#15803D
error
error/lighter
color/red/50
#FEF2F2
error/light
color/red/100
#FEE2E2
error/default
color/red/500
#EF4444
warning
warning/lighter
color/orange/50
#FFFBEB
warning/light
color/orange/100
#FEF3C7
warning/default
color/orange/500
#F97316
primary
primary/lighter
color/b-blue/50
#E1EAF6
primary/light
color/b-blue/100
#C6D7EE
primary/default
color/b-blue/500
#044DA2
primary/dark
color/b-blue/600
#033A7C
primary/darker
color/b-blue/800
#001E45
A library of reusable, accessible components built on top of the design tokens — buttons, inputs, selection controls, and feedback patterns all share the same foundations.
Primary actions across solid, soft, and ghost variants — try hovering or pressing each one to see the interaction states.
↳ Hover or press a button · Tab to reveal the focus halo
Compact actions for navigation and toolbars, sized to a consistent touch target across states.
A single text field that handles every state — try clicking and typing in the live default below to see focus and filled states.
Support text
↳ Click and type · Tab to reveal the focus halo
Multi-select control across default, active, and disabled states.
↳ Click a label to toggle · Tab to focus
Single-select control across default, active, and disabled states.
↳ Click a label to switch · Tab to focus
Non-blocking feedback for system events — paired with the semantic state colors (success, info, warning, error).
A 38-icon set with consistent stroke weight and grid, covering navigation, content, and system actions.
The high wireframes were developed as a key phase of the project, focused on defining the information architecture and user flows before moving into visual design. Using a functional, user-centered approach, content hierarchy, interaction patterns, and core components were validated early on to ensure alignment between business goals and real user needs.
This process enabled informed decision-making from the outset, streamlined iterations with stakeholders, and established a solid foundation for the subsequent design system and final user interface.
Continue exploring
