The Element team provides ongoing updates on the UI/UX design work being done at Hydrogen.
Welcome to the first official update from the Element team!
Element is an open-source UI kit to help visualize digital financial products. After months of design work, we are very excited about the recent release of Element v1! To all the designers out there: let us explain what Element is and what we have been working on.
Hydrogen is the first and lightest element in the periodic table, making it a fundamental building block of matter across the universe. We created Element with a similar idea in mind — a flexible, modular set of components that can be combined to create UI for digital financial products. The Element library contains small design pieces that can coalesce to make customized products and interfaces, as well as some examples of how those components can come together.
Within Element, you’ll find color palettes, icons, and various core UI components. The UI kit also contains components more specific to financial services, such as Stock Screeners and Investment Profiles. Dashboards with holistic views of projected account growth, investment goals, financial wellness scores, budgets, and net worth provide designers with options for displaying aggregated financial information in clear and simple ways.
Samples of client on-boarding design — arguably the most important part of a digital financial platform — are included as well, spanning things like risk questionnaires, investment portfolio surveys, and life insurance signups.
To get started with Element, simply visit our GitHub. Make sure to update Sketch to the newest version before downloading. We also recommend downloading the Google font Muli, as it is included in the library. To get the most out of Element, review the color palette found in the Components section as well as the Text Styles we use.
Happy designing, and stay tuned for the next update!
