Design System

Foundations

Accessibility

Designing and maintaining the established requirements by WCAG to support specific human needs. Actively pursue methods to meet the past, current, and potential future needs to improve human relationships with technology.

Responsive Design

Anticipate the potential use cases of the product, in this case website, that may be used for access. In this instance we designed with web as a priority with mobile responsiveness.

Heading

Color

#253237

#5C6B73

#0085FF

Primary Palette

The primary color palette of this site is composed of neutrals. For headings, paragraph text we use #253237, a dark (not quite black) grey, with a cool lighter shade of grey for when depth or toggle is needed. We use cooler variations of these neutrals throughout to instill calmness and keep the reader alert. For primary actions, buttons, text links and callouts we use #0085FF to create contrast.

#F36F5E

#FFAB00

#34A853

#153B50

Secondary Palette

The secondary color palette is composed of a few of our variety default colors we use to insert a pop of color here or there. Used for components like image backgrounds and call outs. The colors feel fun and familiar as they’re admittedly pretty ‘Googley’. But if you’re gonna steal, steal from the best.

Elevation

Elevation on this page is created by shadows and layering. Potential option to make the header a sticky element, all surfaces move in front of and behind each other based on layer hierarchy. Elevation can be added to buttons, cards, headers, and side scrolling tabs like below and in this system.

Shape

The default shape family is rounded to convey a sense of warmth, familiarity, and framing. Applied symmetrically at all corners at 30 pixels for cards, pills, and containers and 10 pixels for buttons. Optionally can be rounded on all but one corner remaining rsquare to infer sense of messaging. Search, text, and input boxes should be squared at the corners.

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.