Skip to content

Soracom

Design System
Home Design System

Soracom Design System

The Soracom Design System (SDS) allows us to build coherent and distinctive interfaces, while adhering to CSS best practices and conventions.

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

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

Color variables

For developing new components or extending SDS components, colors are available as css variables.

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.

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

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

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

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

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

UX Patterns

UX Patterns are reference examples of solutions to common design or usability issues.

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