EQUIPMENT
From editorial series to cinematic brand films, every project here tells a visual story shaped by emotion, aesthetic, and direction.
From editorial series to cinematic brand films, every project here tells a visual story shaped by emotion, aesthetic, and direction.
Case Study
A design system should follow real product patterns, not precede them
Building an exhaustive design system before a product has enough real screens and patterns to learn from tends to produce a system full of speculative components that never get used as designed, because the actual product ends up needing something slightly different once real complexity emerges. Our approach generally starts from the product’s existing or near term screens and extracts genuine, recurring patterns into a system, rather than designing a system in the abstract first.
Starting with foundational tokens before components
The first layer of any design system is foundational, color, typography, spacing, radius values, defined once and referenced everywhere rather than hardcoded per component. Getting this foundational layer right early makes every component built afterward inherently more consistent, since components are assembled from the same shared foundation rather than each component defining its own version of similar values.
Prioritizing components by actual usage frequency
Rather than trying to build every conceivable component upfront, we prioritize building out the components used most frequently across the product first, buttons, form inputs, cards, since these deliver the largest consistency improvement for the effort invested. Rarely used, highly specific components can be added later as genuine need arises, rather than speculatively built in advance.
Designing components with real content, not lorem ipsum
Components designed and tested only with placeholder text often break when real content, longer names, missing data, edge case values, gets loaded in. Testing every component against genuinely realistic content variations during the design phase catches these problems before they become expensive fixes once the system is already in production use across many screens.
A representative example of how this plays out
A B2B analytics client had grown their product to over forty screens with no formal design system, resulting in five slightly different button styles and inconsistent spacing throughout. Rather than pausing all product work for months to build a comprehensive system, we extracted the most frequently repeated patterns first, established foundational tokens, and rolled the new components out screen by screen as existing features were touched, reaching consistency across the core product within a few months without stalling ongoing feature development.
Frequently asked questions
At what product stage should a design system be introduced?
Once a product has enough real screens to reveal genuine recurring patterns, often somewhere between ten and twenty screens, a design system starts to deliver clear value rather than being purely speculative.
Does a design system need to be built in code, or can it stay in design tools only?
A truly effective design system eventually needs to exist in both design tools and code, kept in sync, since a system that only lives in design files tends to drift from what actually ships in the product over time.
Can an existing inconsistent product be migrated to a new design system gradually?
Yes, a gradual, screen by screen migration as features are naturally touched is generally more practical than a single large scale rewrite, especially for a product that cannot pause feature development entirely.
See examples of this kind of product design work in our portfolio
More questions about working with Belgana Studios
What product design services does Belgana Studios offer?
Belgana Studios offers UX audits, UI design, onboarding design, design systems, and full product design support for teams building or refining a digital product.
What does the Belgana Studios process look like for a product design project?
Most product design engagements start with research and an audit of existing flows, move into structured design work, and close with documentation the team can build from.
Does Belgana Studios only work with early stage startups?
No, Belgana Studios works with early stage founders shaping a product for the first time as well as scaling teams improving an existing product experience.
How do I start a product design project with Belgana Studios?
Reach out through the contact page to schedule an initial conversation about your product design or UX needs.
A design system should follow real product patterns, not precede them
Building an exhaustive design system before a product has enough real screens and patterns to learn from tends to produce a system full of speculative components that never get used as designed, because the actual product ends up needing something slightly different once real complexity emerges. Our approach generally starts from the product’s existing or near term screens and extracts genuine, recurring patterns into a system, rather than designing a system in the abstract first.
Starting with foundational tokens before components
The first layer of any design system is foundational, color, typography, spacing, radius values, defined once and referenced everywhere rather than hardcoded per component. Getting this foundational layer right early makes every component built afterward inherently more consistent, since components are assembled from the same shared foundation rather than each component defining its own version of similar values.
Prioritizing components by actual usage frequency
Rather than trying to build every conceivable component upfront, we prioritize building out the components used most frequently across the product first, buttons, form inputs, cards, since these deliver the largest consistency improvement for the effort invested. Rarely used, highly specific components can be added later as genuine need arises, rather than speculatively built in advance.
Designing components with real content, not lorem ipsum
Components designed and tested only with placeholder text often break when real content, longer names, missing data, edge case values, gets loaded in. Testing every component against genuinely realistic content variations during the design phase catches these problems before they become expensive fixes once the system is already in production use across many screens.
A representative example of how this plays out
A B2B analytics client had grown their product to over forty screens with no formal design system, resulting in five slightly different button styles and inconsistent spacing throughout. Rather than pausing all product work for months to build a comprehensive system, we extracted the most frequently repeated patterns first, established foundational tokens, and rolled the new components out screen by screen as existing features were touched, reaching consistency across the core product within a few months without stalling ongoing feature development.
Frequently asked questions
At what product stage should a design system be introduced?
Once a product has enough real screens to reveal genuine recurring patterns, often somewhere between ten and twenty screens, a design system starts to deliver clear value rather than being purely speculative.
Does a design system need to be built in code, or can it stay in design tools only?
A truly effective design system eventually needs to exist in both design tools and code, kept in sync, since a system that only lives in design files tends to drift from what actually ships in the product over time.
Can an existing inconsistent product be migrated to a new design system gradually?
Yes, a gradual, screen by screen migration as features are naturally touched is generally more practical than a single large scale rewrite, especially for a product that cannot pause feature development entirely.
See examples of this kind of product design work in our portfolio
More questions about working with Belgana Studios
What product design services does Belgana Studios offer?
Belgana Studios offers UX audits, UI design, onboarding design, design systems, and full product design support for teams building or refining a digital product.
What does the Belgana Studios process look like for a product design project?
Most product design engagements start with research and an audit of existing flows, move into structured design work, and close with documentation the team can build from.
Does Belgana Studios only work with early stage startups?
No, Belgana Studios works with early stage founders shaping a product for the first time as well as scaling teams improving an existing product experience.
How do I start a product design project with Belgana Studios?
Reach out through the contact page to schedule an initial conversation about your product design or UX needs.
(Explore Blogs)
