Announcing the AWS Amplify CLI toolchain. Click here to read more.

A beautiful component library connected to the cloud

Colors

UI Colors

UI Color for AWS amplify are derived from a primary and secondary color pallette. Most primary actions are wrapped in Orange. Dark backgrounds and darker treatments will typically receive the Squid Ink color treatment.

Primary Colors Orange Squid Ink Dark Gray Light Gray Secondary Colors Deep Squid Ink Dark Blue Ember Blaze

Extended Library

The extended library colors are derived from the primary palette. Color derivatives should be used where appropriate and work well for button highlights, mouseover and color transitions.

Orange Orange

Squid Ink Squid Ink

Blue Blue

Greys Greys

Purple & Blue Purple & Blue

Typography

Primary Typefaces

AWS Amplify components primarily deploy the Amazon Ember typeface with some support from standard Helvetica Neue. In general, all typographical treatments should be limited within these options to maintain consistency across user interface. On some smaller treatments, Helvetica may be more appropriate then Ember for visual acuity and readbility and when operating system and browser compatibility are a deep concern.

Font Family Amazon Ember Bold Amazon Ember Regular Amazon Ember Light Helvetica Neue

Type Sizing

In general typographic treatment and heirarchy should follow the lead below for how to display headers and body type. The proposed font catalogue below is limited to just 5 options to reduce page load and enforce patterns.

HEADING 1 Amazon Ember 50px • 500w • 60px height https://aws.amazon.com/ec2/

Where every something, being blent together turns to a wild of nothing.

HEADING 2 Amazon Ember 42px • 300w • 53px height https://developer.amazon.com/apps-and-games https://developer.amazon.com/alexa

Where every something, being blent together turns to a wild of nothing.

HEADING 4 Amazon Ember 28px • 300w • 35px height https://developer.amazon.com/alexa

Where every something, being blent together turns to a wild of nothing.

HEADING 5 Amazon Ember 21px • 400w • 32px height https://developer.amazon.com/apps-and-games https://developer.amazon.com/alexa

Where every something, being blent together turns to a wild of nothing.

BODY & PARAGRAPH Amazon Ember 16px • 300w • 24px height https://developer.amazon.com/apps-and-games https://developer.amazon.com/alexa

And when the vespers within us begin to toll, not to mark frivolous increments of time but to signify permanent footprints in the bold ascent that is self-exploration, not to command followers to a temple for blind worship of others but to summon ourselves to uncover, understand and unleash those divinest of powers within us . . . when those bells begin to rumble and chime, ladies and gentlemen, we will hear a symphony whose beauty conjures Beethoven. -Bob Dylan

AWS Components

User Authentication

The authentication component utilizes the styles outlined in the styleguide to provide a minimal styled experience out of the box.

New User Account New User Account Recover User Account Recover User Account Recover User Account

Sign Into Existing Account Sign into Existing Account Confirm Signup Confirm Signup

User Authentication: TOTP

2-factor authentication can be enabled for customers. Users are given the option to add additional account security. Some light instruction should be included to guide the customer through the necessary steps.

Setup TOTP Setup TOTP

User Authentication Mobile Framing

On mobile and small screens the components should expand to fill the majority of available screen space within one and two column layouts for major inputs.

New User Account New User Account

Reset Password Reset Password

New User Account New User Account

Statusbar Treatment Statusbar Treatment On color and dark backgrounds the status should display as white assets Statusbar Treatment On very light and white backgrounds the statusbar should display as dark gray assets