Design System

Overview

US AI Design system was born from our US AI Software Factory. Built by our designers and developers, our design system represents clear thinking and clean design that gives a foundational guide to our product suite.

Our Design Philosophy focuses on applying solutions to solve business problems that create a simple intuitive experience that changes our customers' daily lives. We use our design system's components and patterns as the building blocks to simplify user workflows and reimagine products.

Open Sans

Usage: Headlines, Subtitles, Body & Caption

Font size units and scale

  • REM
  • PX
  • 3.813
  • 61
  • 4 REM Font

  • 3
  • 48
  • H1 Header

  • 2.375
  • 38
  • H2 Header
  • 1.938
  • 31
  • H3 Header
  • 1.563
  • 25
  • H4 Header
  • 1.25
  • 20
  • H5 Header
  • 1
  • 16
  • H6 Header
  • 1
  • 16
  • Body
  • 0.875
  • 14
  • Body
  • 0.875
  • 14
  • Button
  • 0.875
  • 14
  • Caption
  • 0.75
  • 12
  • OVERLINE
  • 0.75
  • 12
  • Subtitle
  • 0.625
  • 10
  • Subtitle

Accordions

An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.

Configuration

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. Integer in felis sed leo vestibulum venenatis. Suspendisse quis arcu sem. Aenean feugiat ex eu vestibulum vestibulum. Morbi a eleifend magna. Nam metus lacus, porttitor eu mauris a, blandit ultrices nibh. Mauris sit amet magna non ligula vestibulum eleifend. Nulla varius volutpat turpis sed lacinia. Nam eget mi in purus lobortis eleifend. Sed nec ante dictum sem condimentum ullamcorper quis venenatis nisi. Proin vitae facilisis nisi, ac posuere leo.

State

Anatomy

Accordions

Button

It allows users to take action

Configuration
Primary
Secondary
Tertiary
Button

Type

State

Anatomy

Button

Cards

It allows users to take action

Type

State

Anatomy

Cards

Chips

It is used to represent an input action

Configuration
CHIPSclose
CHIPS

Type

Anatomy

Chips

Date Picker

It allows users to select a date or a range of dates

Type

State

Anatomy

Date Picker

File Upload

It allows users to upload one or more files

Configuration
sample

Type

State

Anatomy

File Upload

Loading Indicator

Type

Anatomy

Loading Indicator

Selection Controls

It allows user to select preferred options

Configuration
Option #1

Type

State

Anatomy

Selection Controls

Snackbars

It is used to notify users about the processes

Configuration
Your selection has been saved
Your selection did not save

Type

Anatomy

Snackbars

Step Indicator

It allows user to see the phase they are on in the process

Type

Anatomy

Step Indicator

Table

It is used to display contents in organized way

Title #2 Title #4
Title #1Title #2Title #3Title #4
Title #5Title #6Title #7Title #8

Anatomy

Table

Text Fields

It allows user to see the phase they are on in the process

Configuration

Type

State

Anatomy

Text Fields

Tooltips

It is used to display informative text when users hover over, focus on, or tap an element.

Configuration
Tooltip information #1
Tooltip information #2

Type

Anatomy

Tooltips