# Soracom Design System > Soracom Design incorporates the Soracom Brand Guidelines for consistent communication of the Soracom brand, and Soracom Design System for building coherent and distinctive interfaces. ## Design System - [Changelog](/design-system/changelog.md): Changelog - [Containers](/design-system/containers.md): Containers are components used to organize and group element components. - [Elements](/design-system/elements.md): Elements are the individual components used to build user interfaces. - [Guidelines](/design-system/guidelines.md): Guidelines - [Images](/design-system/images.md): Images - [Styles](/design-system/styles.md): Common visual styles across applicable to all components. - [Typography](/design-system/typography.md): Soracom Design System uses Aeonik, Source Sans, Source Han Sans and Source Code fonts throughout. - [UX Patterns](/design-system/ux-patterns.md): UX Patterns are reference examples of solutions to common design or usability issues. - [Web Components](/design-system/web-components.md): SDS Web Components ### Styles - [Colors](/design-system/styles/colors.md): Our color palette uses accents of bright colors backed by an overall neutral tone. - [Dark mode](/design-system/styles/dark-mode.md) - [Gradients](/design-system/styles/gradients.md): Pre-defined gradient backgrounds for banners and other surfaces. - [Sizing](/design-system/styles/sizing.md): Utility class for sizing of elements. - [Visual states](/design-system/styles/visual-states.md): Visual states are supported across a variety of components and provide a consistent way to indicate an elements status. ### Typography - [Aeonik](/design-system/typography/aeonik.md): 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](/design-system/typography/source-han-sans.md): 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](/design-system/guidelines/grammar.md): To ensure consistency across all written content, the following rules should be followed. - [Scripts](/design-system/guidelines/scripts.md): These reference scripts demonstrate additional functionality required to enhance SDS - [Terminology](/design-system/guidelines/terminology.md): To ensure consistency across a common set of terminology should be used across all Soracom resources. - [Web components](/design-system/guidelines/web-components.md): Guidelines on using SDS with html web components ### Images - [Icons](/design-system/images/icons.md) - [Logos](/design-system/images/logos.md) ### Containers - [App](/design-system/containers/app.md): A layout component for web apps - [Cols](/design-system/containers/cols.md): A generic container for column layout - [Controls](/design-system/containers/controls.md): A control is a generic container that contains a set of page controls such as buttons and selects. - [Dialog](/design-system/containers/dialog.md) - [Field](/design-system/containers/field.md): A field is a generic container that contains a label, input and text. - [Group](/design-system/containers/group.md): A visual container grouping a set of elements. Can be used with fieldset/legend. - [Modal](/design-system/containers/modal.md) - [Rows](/design-system/containers/rows.md): A generic container for row layout ### Elements - [Autocomplete](/design-system/elements/autocomplete.md): A container for an input and menu used as an autocomplete/type-ahead for the input. - [Banner](/design-system/elements/banner.md) - [Breadcrumb](/design-system/elements/breadcrumb.md) - [Buttons](/design-system/elements/buttons.md) - [Card](/design-system/elements/card.md) - [Chart](/design-system/elements/chart.md): Reference Chart.js configurations - [Checkbox](/design-system/elements/checkbox.md) - [Codeblock](/design-system/elements/codeblock.md) - [Datatable](/design-system/elements/datatable.md) - [Details](/design-system/elements/details.md): Displays tabular label/value pairs of text content - [Disclosure](/design-system/elements/disclosure.md): Disclosure is for displaying an inline panel in which information is visible only when the component is toggled into an 'open' state. - [Header](/design-system/elements/header.md) - [Heading](/design-system/elements/heading.md): Heading is a general component for styling heading content - [Icon](/design-system/elements/icon.md): Icon is for embedding an icon inside html content - [Input](/design-system/elements/input.md) - [List](/design-system/elements/list.md) - [Menu](/design-system/elements/menu.md): Menu displays a list of menu items - [Menubutton](/design-system/elements/menubutton.md): Menubutton is for dynamically displaying navigation menus - [Notice](/design-system/elements/notice.md): Notice is for displaying an inline panel with text and an optional icon. - [Progress Steps](/design-system/elements/progress-steps.md) - [Radio](/design-system/elements/radio.md) - [Range](/design-system/elements/range.md) - [Richtip](/design-system/elements/richtip.md) - [Scale](/design-system/elements/scale.md) - [Select](/design-system/elements/select.md) - [Switch](/design-system/elements/switch.md) - [Tabs](/design-system/elements/tabs.md): Displays a tab bar style list of menu items and contents - [Tag](/design-system/elements/tag.md) - [Text](/design-system/elements/text.md): Text is a general component for styling text content. - [Texttip](/design-system/elements/texttip.md) - [Video](/design-system/elements/video.md) ### UX Patterns - [Copy](/design-system/ux-patterns/copy.md): Implementing a 'Copy code' element - [Datetime Panel](/design-system/ux-patterns/datetime-panel.md): A combined datetime panel for selecting and filtering dates/times - [Delete content](/design-system/ux-patterns/delete-content.md): Consistent implementation of deleting content - [Delete or Remove terminology](/design-system/ux-patterns/delete-or-remove.md): How to ensure consistent and predictable use of the term 'Delete' and 'Remove' - [Repeatable editable rows](/design-system/ux-patterns/repeatable-editable-rows.md): Implementing adding/deleting of repeatable editable rows in a form - [Required fields](/design-system/ux-patterns/required-fields.md): Marking required fields in forms ### Web Components - [Plan](/design-system/web-components/plan.md): DS Plan component for showing Soracom SIM plans - [Required](/design-system/web-components/required.md): DS Required component for marking required form fields - [Tooltip](/design-system/web-components/tooltip.md): DS Tooltip web component for accessible rich and plain text tooltips ## Brand - [Logo](/brand/logo.md): Our logo is the most important representation of our brand so it's important that it's treated correctly. - [Colors](/brand/colors.md): Our primary color palette comes from our logo, so is clearly recognizable as 'Soracom'. These colors are complimented by our secondary color palette. - [Imagery](/brand/imagery.md) - [Brand Assets](/brand/brand-assets.md): Our patterns and graphics are a key part of our brand, they visually represent our brand ethos and help communicate key messaging. - [Shadients](/brand/shadients.md): Our shadients are used primarily as backgrounds - [Communication](/brand/communication.md): Messaging is an important part of Soracom's identity. To make sure we speak on-brand we follow the communication guidelines outlined below. - [Application](/brand/application.md): Visuals to show how we apply our brand to different media. - [Social media](/brand/social-media.md): To ensure our brand is consistent across all our social accounts it’s important to use the correct imagery ## Blog - [What's new February 20, 2026](/blog/2026-02-20.md): New polygon, branch and merge icons, and updated radio and checkbox documentation. - [What's new February 27, 2026](/blog/2026-02-27.md): New email icons added to the icon set and expanded ds-tabs documentation. - [What's new March 7, 2026](/blog/2026-03-07.md): New web component documentation for tooltip and plan components. - [What's new March 20, 2026](/blog/2026-03-20.md): Progress steps improvements with interactive range control examples. - [What's new April 10, 2026](/blog/2026-04-10.md): SDS 3.22.0 release with notice flow-down indicator, tooltip position fixes, and numerous bug fixes. - [What's new April 16, 2026](/blog/2026-04-16.md): This update covers editable code examples, LLM-friendly markdown support, and the return of the blog. - [What's new September 01, 2023](/blog/2023-09-01.md): This overdue article includes recent updates for sizing classes, web components, reorganised file structure, and required field guidelines - [What's new July 20, 2022](/blog/2022-07-20.md): This update includes dashboard, charts, dark mode, new loading and message states and new switch features - [What's new May 30, 2022](/blog/2022-05-30.md): This update includes a complete reorganization of icons and numerous bug fixes. - [What's new April 1, 2022](/blog/2022-04-01.md): This update focuses on CDN updates, bug fixes, narrow screen support and adding automated screenshot support for visual testing of components. - [What's new March 18, 2022](/blog/2022-03-18.md): This update focuses on refining and expanding SDS components in preparation for the release of a new header and menus in the user-console. - [A roundup of recent icon updates](/blog/2026-new-icons.md): A complete overview of the 58 new icons added to the Soracom Design System over the last 6 months.