Semaphore (Skippering Design System)

Everything you might want to use to build a Skippering application.

Using this collection

You can use the right-hand navigation bar to view any of the components available within Semaphore. This is a living, breathing document; it will continue to evolve as Skippering evolves.

Structure

Semaphore uses a variation of atomic design with the following definitions:

Atoms are small, composable single-element structures that adhere to the Skippering styles. Generally, an atom is a wrapped version of a native HTML element (e.g. input becomes <Input>) or represents a single concept (e.g. a structural div becomes <Box>, <Flex>, and <Grid>)

Molecules are composed of several atoms or other molecules, and are designed for composability themselves. Most molecules are extremely flexible to suit a variety of general needs, though they may have slightly fewer configuration options than atoms.

Templates are structural elements that allow you to build up the way the page is laid out. Many templates build out an entire page structure, but others may be more targeted structural elements (e.g. the <Sidebar>). Templates follow the same principles as molecules: they are composed of atoms and molecules, and are designed to be general use.

Organisms are also composed of atoms and/or molecules, but they are intended for particular purposes & aren't generalized beyond that. Organisms are used for aspects of shared functionality, such as logging in or updating profile information.

Design System Principles

  1. Makes development easy. As with most design systems, Semaphore's guiding principle is to reduce the amount of time it takes to build powerful frontend experiences. We try to accomplish that with flexible elements that guarantee alignment with our visual identity.

  2. Composability first. Elements in Semaphore are designed to be combined. If a particular component doesn't quite suit your needs, chances are there's another that could wrap or embed the component you're using currently.

  3. Future Proof. Skippering is a living and breathing set of applications, and our design system should be too. By investing in shared tooling now, we make it easier down the line to adjust to new visual guidelines or fundamentals.

atoms
form
icons
molecules
organisms
shanty
templates
theme
Skippering
Semaphore © 2021 - 2022