Common visual styles across applicable to all components.
Our color palette uses accents of bright colors backed by an overall neutral tone.
Utility class for sizing of elements.
Visual states are supported across a variety of components and provide a consistent way to indicate an elements status.
Soracom Design System uses Aeonik, Source Sans, Source Han Sans and Source Code fonts throughout.
Aeonik is our ESM primary brand font. It's been chosen for its modern, simple and technical qualities. We have a full range of weights and styles available.
Source Han Sans
Source Hans Sans JP is the primary SDS font and our secondary ESM brand font. It has been chosen for its Japanese language support, variable font weight and matching mono-space versions.
To ensure consistency across all written content, the following rules should be followed.
These reference scripts demonstrate additional functionality required to enhance SDS
To ensure consistency across a common set of terminology should be used across all Soracom resources.
Guidelines on using SDS with html web components
Containers are components used to organize and group element components.
A layout component for web apps
A generic container for column layout
A control is a generic container that contains a set of page controls such as buttons and selects.
A field is a generic container that contains a label, input and text.
A visual container grouping a set of elements. Can be used with fieldset/legend.
A generic container for row layout
Elements are the individual components used to build user interfaces.
A container for an input and menu used as an autocomplete/type-ahead for the input.
Reference Chart.js configurations
Displays tabular label/value pairs of text content
Disclosure is for displaying an inline panel in which information is visible only when the component is toggled into an 'open' state.
Heading is a general component for styling heading content
Icon is for embedding an icon inside html content
Menu displays a list of menu items
Menubutton is for dynamically displaying navigation menus
Notice is for displaying an inline panel with text and an optional icon.
Displays a tab bar style list of menu items and contents
Text is a general component for styling text content.
UX Patterns are reference examples of solutions to common design or usability issues.
Adding and deleting rows
Implementing adding/deleting editable rows in a form
Implementing a 'Copy code' element
A combined datetime panel for selecting and filtering dates/times
Deleting or removing content
Implementing delete or remove
Marking required fields in forms
SDS Web Components
DS Plan component for showing Soracom SIM plans