Certify Design System

Welcome to the certify.SBA.gov design system. Here you will find guidance on components used in the certify.SBV.gov application. These components are built with the U.S. Web Design Standards. The design system was heavily influenced by design.cms.gov

The design system is created to be used simultaneously with legacy systems. For instance, you may still use components and features that are built with the U.S. Web Design Standards and existing Certify components. The goal is to get all defined platform components into the design system. Once those items are properly incorporated, their legacy versions may be removed as well as any corresponding code. This is expected to happen gradually.

View on GitHub

Naming conventions

The certify.SBA.gov design system uses a strict naming convention. This helps identify what is part of the design system, what role it plays, and what it pertains to.

sba- u- item--modifier
BEM syntax

Every part of the design system must be name-spaced with sba-, prefixed with its role, and a BEM syntax convention.

Prefix Description
l- Indicates layout, generally for building the grid.
c- Indicates a component. Components are built specific to the needs of certify.SBA.gov
u- Indicates a utility. Utilities pertain to CSS properties.
js- Hooks into javascript functionality. MUST NOT be used as CSS selector.

These prefixes can sometimes be followed by a "breakpoint prefix".

About using the design system

The design system provides a large amount of flexibility for prototype and development for production. At the moment, the design system is constructed in Jekyll, but will eventually be packaged as a gem and a node module.


At the moment, and while the core is still undergoing an initial buildout, the design system is to centrally owned. Please tag any GitHub issues with jaredcunha-usds.