SatelliteUI

Born from the critical need to resolve UI inconsistency and component redundancy, SatelliteUI serves as the Single Source of Truth for our entire product ecosystem. This project successfully established a modern, M3-based architectural foundation, ensuring that every future product is built faster, is fully accessible, and is perfectly on-brand.

Typography

The system's typeface foundation is the modern, highly readable Inter font, specifically optimized for digital UIs. This choice ensures optimal clarity and user focus, immediately aligning SatelliteUI with established best-in-class UX and accessibility standards across all core applications.
display-large
letter-spacing: 3.563rem
letter-spacing: 0
display-medium
font-size: 2.813rem
letter-spacing: 0
Display-small
font-size: 2.25rem
letter-spacing: 0
headline-large
font-size: 2rem
letter-spacing: 0
headline-medium
font-size: 1.75rem
letter-spacing: 0
headline-small
font-size: 1.5rem
letter-spacing: 0
title-large
font-size: 1.375rem
letter-spacing: 0
title-medium
font-size: 1rem
letter-spacing: 0.009rem
title-small
font-size: 0.875rem
letter-spacing: 0.006rem
body-large
font-size: 1rem
letter-spacing: 0.031rem
body-medium
font-size: 0.875rem
letter-spacing: 0.0016rem
body-small
font-size: 0.75rem
letter-spacing: 0.025rem
label-large
font-size: 0.875rem
letter-spacing: 0.006rem
label-medium
font-size: 0.75rem
letter-spacing: 0.031rem
label-small
font-size: 0.688 rem
letter-spacing: 0.031rem

Colors

By leveraging Material Design 3's Dynamic Color system, SatelliteUI automatically generates harmonious, high-contrast color palettes. This strategic decision guarantees seamless WCAG accessibility compliance from the start, while maintaining the flexibility to effortlessly integrate various brand and dark/light mode themes.
Seed colors
#003CFF
#958DA4
#B58392
#938F94
#948F99
Light themes
Default
M/Contrast
H/Contrast
Dark themes
Default
M/Contrast
H/Contrast

Buttons & Links

These core molecules are standardized, tested, and documented elements of the SatelliteUI library. Feel free to navigate them with your keyboard to test their accessibility.
button primarybutton secondary
button primary
button secondary
Text Link
Navigation Side Menu

Chips

These chips are designed to fit in the input fields.
Option 1
Option 2
Option 3
Option 4
Option 5

Input fields

Here you can see the input fields in all their states. As with the buttons, feel free to navigate through this molecules to test their keyboard accessibility.
Label*
This is a placeholder
Supporting text for the input field
Label*
This is the selected field while typing|
Supporting text for the input field
Label*
This is a wrong input
And this text telly you how to correct it
Label*
This is an input accessible via dropdown
Label
This is a dropdown with many options
Option 2

Toggles & Switches

Dialog

This is the heading of the dialog window
This is the text of the dialog window. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
other optionBEST OPTION

Demo on an actual product

The final stage of any Design System is deployment. This view illustrates how our foundational "atoms" and "molecules" translate into a complex, fully functional application. It confirms our ability to rapidly build and scale consistent, high-quality interfaces across our entire product suite.

What's next?

What you just saw is only the beginning: This project is a work in progress, and the next step would be to analyse the client's products and check if other components or bigger organisms need to be created and added to the system. The more complex items in the demo above also need to be added to the design system in Figma, with the proper variables, so that the developers can create code-based demos on Storybook or similar.