Sluice Design System
A frontend platform built around a reusable Angular component library, documentation and visual customisation capabilities.
Six views that explain the product
These are dedicated screenshot slots for your real Sluice images.
Landing page
Introduce Sluice and explain the product.
Technical blog
Show the engineering thinking behind apparently simple UI.
Component library
Show the available components and customisation options.
Documentation
Show how developers discover and use components.
Manage colours
Show brand theming and colour management.
Visual component customisation
Preview styles and customise components from a dedicated panel.
Technologies & engineering areas
Angular · React · TypeScript · Architecture · Design Systems · Web & Mobile
Gym application
The application demonstrates the practical value of the design system: the designer could focus on UX and product flows in Figma rather than preparing the visual specification of every individual component. The developer installed the Sluice package and used the ready components directly.
UX-first design + ready-to-use frontend components
Without a component system, a designer and developer spend significant time repeatedly defining and implementing the visual behaviour of standard UI elements.
With Sluice, the design system already provided the component styles and reusable implementation. The designer could concentrate on the UX, while the developer assembled the product from existing components.
This made the implementation approximately 5× faster than the regular implementation workflow in this project.
UX flows in Figma
Components already exist
Developer installs package
Application is assembled faster
Six views of the product
Replace these slots with your six real application screenshots.
Application overview
Strong first screen showing the finished product.
Core user flow
Main product journey.
Management / data
Several reusable components working together.
Forms / interaction
Inputs and interaction patterns.
Responsive experience
Show responsive behaviour if available.
Final product view
Finish with the strongest screen.