Overview
- The problem
- The portal needs a consistent interaction model while supporting different brand identities, color themes, content, and account states.
- My contribution
- I redesigned the Client Portal design-system library alongside the product experience, including foundations, branded themes, components, and portal patterns.
- The outcome
- A Figma library with primitive and semantic collections, brand/theme modes, reusable components, and shared navigation and state-card patterns.
Problem
The source library connects primitive and semantic collections to four brand/theme examples, configurable components, and instances within the portal.
My Role
- Company / product context
- Saphyte · Client Portal design-system redesign
- Users
- Saphyte designers and engineers working on branded client portals and their reusable UI patterns.
- My role & scope
- I redesigned the Client Portal design-system library alongside the product experience, including foundations, branded themes, components, and portal patterns.
- Evidence available
- Original library exports and public documentation. The source Figma library remains private.
Process
I compared the same Button family across InstantFunding and VoltFunded in light and dark modes, then extended the model through configurable inputs and complete portal compositions.
Separate brand values from semantic roles
I organized the foundation into Primitive and Semantic collections. The semantic collection includes InstantFunding and VoltFunded in both dark and light modes, alongside an additional product mode. Components can refer to a role instead of carrying an individual brand value directly.
The primary Button binds its fill to background/bg-brand-soft and its label to text/text-brand-primary. Each role resolves to the relevant brand primitive, allowing the same component to adapt across modes.
Source alias for background/bg-brand-soft| Semantic mode | Primitive reference |
|---|
| InstantFunding · Dark | Colors/Brand/InstantFunding/950 |
|---|
| InstantFunding · Light | Colors/Brand/InstantFunding/50 |
|---|
| VoltFunded · Dark | Colors/Brand/VoltFunded/960 |
|---|
| VoltFunded · Light | Colors/Cyan/50 |
|---|
The source Button uses this semantic role for its fill. The alias chooses the theme value.
I used Tailwind palette foundations and Inter typography styles as the basis for the redesigned library.
Key Decisions
Brand expression must change without duplicating the interaction model. Semantic roles sit between Tailwind-derived color foundations and components. Configurable properties support reuse, but require naming rules and guidance to avoid invalid combinations.
Key design decisions
Express brand through semantic modes
Shared roles resolve to different primitive values across brand and color-theme combinations, allowing the component family to retain its purpose as its appearance changes.
Compare the original themesExpose states and optional content
Component properties cover sizes, interaction states, icons, labels, helpers, and detail regions. Reuse therefore includes behavior and content configuration.
Inspect the component modelBuild patterns for complete tasks
Navigation, top-level state cards, and steppers connect smaller components to account context and multi-step workflows.
See the product connection
Final Solution
The library combines semantic themes, size and state variants, configurable inputs, navigation, state cards, and steppers. The original exports and product connections below show the model in use in design files.
Component behavior is part of the model
The Button model combines Primary, Secondary, and Text variants with Default, Hover, Disabled, and OnClicked states and Small, Medium, and Large sizes. Text, icon presence, and icon choice are configurable properties.
The Input family carries labels, helper text, left/right icons, character-count content, and optional lower sections alongside its size and state. The documented input states include Default, Hover, Active, Filled, and Disable.
The source input family exposes content options and interaction states.A reusable pattern still needs guidance about when to use it. The current library has several empty component descriptions; usage guidance and accessibility behavior are continuing documentation work, rather than something inferred from the existence of variants.
Patterns connect the system to the portal
The Sidebar Nav composes the portal’s grouped destinations and supports logo swapping. Its navigation items expose default, hover, and selected states together with labels, icons, and optional counters.
State cards provide configurable titles, values, indicators, increment labels, and detail regions. The horizontal stepper composes steps with Default, Current, and Finished states, connecting its small parts to the staged tasks found in the product designs.
The Client Portal dashboard contains remote library instances, including Sidebar Nav and its supporting elements. This source evidence connects the system to product composition; the product case study shows the surrounding account, performance, verification, and payout workflows.
Outcomes
I delivered the shared library and connected it to the redesigned portal through reusable component instances.
Evidence & limitations
This case documents the design-system redesign. The palette includes Tailwind-derived color foundations. Library inventory and source examples do not establish adoption, production-code parity, or measured handoff savings.
Several source component descriptions are empty, so variants alone do not provide complete usage or accessibility guidance.
What I would validate next
- Contrast and focus behavior across every supported theme.
- Component naming, descriptions, and valid property combinations.
- Keyboard and assistive-technology behavior in the implementation.
- Instance use, detachment, and divergence across portal designs.
- The effort required to add a brand or evolve a shared pattern.
Learnings
- What worked in the design
- Semantic roles let branded examples share a consistent component model.
- What I would change next
- Complete component descriptions, test valid property combinations, and verify contrast, keyboard behavior, and code parity in each theme.
Delivery and system maintenance
The system redesign establishes shared foundations and patterns for branded portal work. The most consequential relationship is between semantic roles, configurable components, and the contexts in which they are used.
- Brand and color theme are explicit modes, rather than separate component inventories.
- Reusable components expose the states and content options needed by the portal.
- Larger patterns connect component choices to account context and workflow progression.
- Library maintenance should include an explicit review of implementation parity and adoption.
