Styles
Common visual styles across applicable to all components.
Colors
Our color palette uses accents of bright colors backed by an overall neutral tone.
Dark mode
Sizing
Utility class for sizing of elements.
Visual states
Visual states are supported across a variety of components and provide a consistent way to indicate an elements status.
Typography
Soracom Design System uses Aeonik, Source Sans, Source Han Sans and Source Code fonts throughout.
Aeonik
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.
Guidelines
Grammar
To ensure consistency across all written content, the following rules should be followed.
Scripts
These reference scripts demonstrate additional functionality required to enhance SDS
Terminology
To ensure consistency across a common set of terminology should be used across all Soracom resources.
Web components
Guidelines on using SDS with html web components
Images
Icons
Logos
Containers
Containers are components used to organize and group element components.
App
A layout component for web apps
Cols
A generic container for column layout
Controls
A control is a generic container that contains a set of page controls such as buttons and selects.
Dialog
Field
A field is a generic container that contains a label, input and text.
Group
A visual container grouping a set of elements. Can be used with fieldset/legend.
Modal
Rows
A generic container for row layout
Elements
Elements are the individual components used to build user interfaces.
Autocomplete
A container for an input and menu used as an autocomplete/type-ahead for the input.
Banner
Breadcrumb
Buttons
Card
Chart
Reference Chart.js configurations
Checkbox
Codeblock
Datatable
Details
Displays tabular label/value pairs of text content
Disclosure
Disclosure is for displaying an inline panel in which information is visible only when the component is toggled into an 'open' state.
Header
Heading
Heading is a general component for styling heading content
Icon
Icon is for embedding an icon inside html content
Input
List
Menu
Menu displays a list of menu items
Menubutton
Menubutton is for dynamically displaying navigation menus
Notice
Notice is for displaying an inline panel with text and an optional icon.
Progress Steps
Radio
Range
Richtip
Scale
Select
Switch
Tabs
Displays a tab bar style list of menu items and contents
Tag
Text
Text is a general component for styling text content.
Texttip
Video
UX Patterns
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
Copy
Implementing a 'Copy code' element
Datetime Panel
A combined datetime panel for selecting and filtering dates/times
Deleting or removing content
Implementing delete or remove
Required fields
Marking required fields in forms
Web Components
SDS Web Components
Plan
DS Plan component for showing Soracom SIM plans