Web app ui
/Sunpower
design System
for ADVANCED DESIGN
SEC.
/OVERVIEW
Introduction
WHAT is ADVANCED DESIGN
The Advanced Design Tool is a specialized software developed to help design panel layout for homeowners.
Primary user
The primary users is SunPower's internal design team –Maxfit. They are trained specialists using multiple softwares like (Speed, Aurora, AutoCAD…)to create panel layouts manually on given customer addresses.
Needs
Strong contrast for critical information while maintaining a clean interface
Subtle yet recognizable visual patterns that reduce cognitive load during rapid workflows
Minimal UI obstruction of the working area
Design Challenges
As the 0 to 1 project, the challenge I was facing were:
Building a complete visual foundation from scratch with limited resources and a small team, requiring solutions that are both sophisticated and manageable.
Maintaining visual consistency and usability as components transition between 2D and 3D modes while preserving clarity and recognition.
Creating a lean yet scalable system that can grow with future features while being easy to maintain by a small design team
SEC.
/solution
SYSTEMATIC APPROACH
How might we create a focused design system that works seamlessly across design modes while being easy to maintain and scale with a small team?
Systematic Growth
Strategic Minimalism
Mode-Aware Visuals
SEC.
/Design
ATOMS
Atoms (Base Elements) Fundamental building blocks of our spatial interface: colors, typography, basic shapes, icons, and primitive inputs - designed to work seamlessly across all modes.
Colors
Primary colors - Blue is the primary color, used mainly in primary actions, text links and primary buttons.
Other colors
Using for highlights, fonts , status and differentiate design modes
Typography
Open Sans - is a versatile, highly readable sans-serif typeface optimized for digital interfaces, making it a solid choice for clean and functional UI designs.
Spaces
Using 8pt grid
SEC.
/Design
Molecules
Molecules (Simple Component Combinations) Essential UI combinations serving specific functions: measurement controls, manipulation handles, and property panels - creating clear patterns for common actions.
SEC.
/Design
Organisms
Organisms (Complex Component Assemblies) Larger interface elements handling complex spatial interactions: toolbars, coordinate systems, and view controls - supporting advanced functionality while maintaining visual harmony.
