Enterprise

Design System Components

Variables

Tokens

2023 — 2025

Solera Design System

Design SystemFlexible and responsive components

+100Components

+300Design Tokens

+3Themes

+2 yearsMission

Designers

Developers

How to organizeDesign System Components

Atomic Design

Management

Foundation

Tokens are foundational setups for components as a core base of colors, gaps, and fonts.

Atoms

Fundamental building blocks like buttons, input fields, and icons — the simplest elements in UI.

Molecules

Combinations of atoms form functional components such as form fields, and action buttons.

Organisms

Organisms are made up of molecules and are used to create complete user interfaces.

Layouts

Layouts provide a framework for laying out and arranging organisms on a page.

Pages

Pages represent the final, complete user interface layouts.

Components

Components categories guide designers in using components effectively, ensuring clarity, consistency, and purposeful application across products.

Buttons

Interactive elements that trigger actions or events, designed for clarity and accessiblity.

Cards

Containers used to group related information, providing structure and hierarch to content.

Inputs

Form input fields for users data entry, including text fields, dropdowns, and selection tools.

Data Display

Visual elements to represent data, such as charts, tables, or key metrics.

Popovers

Overlays that provide additional information or options without cluttering the interface.

Pickers

Tools for selecting specific inputs, such as dates, time range pickers.

Navigation

UI elements to guide users through the application, including menus, tabs, and breadcrumbs.

Structure layouts

Modular layout elements for structuring pages, ensuring consistency and flexibility in design.

Feedback

Components for delivering system messages, like alerts, confirmations, validation msgs, and prompts.

Rest type of components:

AccordionsBadgesBulletButton GroupsCamera UIDateTime PickersDotsDropButtonsCheckboxDropdownsInput FieldsInput SteppersRadiobuttonsTextareaListsIllustrationsLoadersNotificationsPaginationPopoversProgress barsRich Text EditorSlidersTabsTagsTooltipsToggle switchesWizard Steps

Typography

Typography is an important part of a design system that brings consistency across experiences and platforms.

Responsive & Adaptive

Desktop

Tablet

Mobile

Mobile platforms

IOS (SF Pro)Android (Roboto)

Roboto—Black

Weight 900, Size 72, Line height 88

Large Headline

Roboto—Bold

Weight 700, Size 64, Line height 72

Headline 1

Roboto—Black

Weight 700, Size 48, Line height 56

Headline 2

Roboto—Bold

Weight 700, Size 40, Line height 48

Headline 3

Roboto—Black

Weight 700, Size 32, Line height 40

Headline 4

Roboto—Black

Weight 700, Size 24, Line height 32

Headline 5

Roboto—Medium

Weight 700, Size 20, Line height 24

Headline 5

Gamechanger

Tokens taxonomy

Design system files flow through a design token solution into foundational styles and UI toolkits

Color Token and Aliases

Each component is prepared based on color tokens. Color Token is a semantic representation of the color that helps understand how or when the token should be used.

#1D7C4D
Global / Green / green0
Semantic / Positive / positive0
Content / Positive
Background / Positive
Border / Positive
Action / Success / Normal
Non-Contextual / Green / Default

Tokens Architecture

Color foundation flows from raw value to base token to semantic design token, then to a Figma variable, a token function and a CSS variable

GitHub

CI / CD

Automation

Design Token Automation

Figma Tokens sync to a GitHub repo, GitHub actions run Token Transformer and Style Dictionary, then Stencil components and Storybook docs publish to Storybook

Convert Figma global variables into design tokens using Style Dictionary, then render and compile them into CSS/SCSS files. Integrate these tokens into GitHub deployment workflows to enable seamless distribution. Automate the delivery of tokens from Figma to Storybook components, ensuring a one-click process for consistent and efficient design-to-development handoff.

Figma

Tokens Studio

Tokens Studio is a powerful tool that allows us to manage and maintain our token architecture, export it to Figma or vice versa, and sync the Figma global variables.