Home

Case Study

Design System

About

Building a brand and design system that works across devices and platforms

Abhishek Shankar

Master's Project MS-HCI @ Georgia Tech

Dec 2023

My Roles

UX Design

Brand Design

Design System Building

Building this whole website

Building a brand and design system that works across devices and platforms

Abhishek Shankar

Master's Project MS-HCI @ Georgia Tech

Dec 2023

My Roles

UX Design

Brand Design

Design System Building

Building this whole website

Building a brand and design system that works across devices and platforms

Abhishek Shankar

Master's Project MS-HCI @ Georgia Tech

Dec 2023

My Roles

UX Design

Brand Design

Design System Building

Building this whole website

Design System Overview

Click on the links to jump to the specific section

Introduction

Brand Principles

Logo

Color

Typography

Components

Design Tokens

Overview

Click on a link to navigate to the specific section

Introduction

Brand Principles

Logo

Color

Typography

Components

Design Tokens

Introduction

Welcome to the Moovi Design System. This page serves as the hub for the Moovi brand and design guides. You will find the principles of Moovi's design and the assets and tokens used to create shared experiences across platforms for Moovi.

Moovi Design Principles

Moovi's design is built on a few core principles of how I want people and the software to interact together. As a product, Moovi aims to provide value that extends beyond its features to the very experiences it enables. Moovi's design framework is powered by ideas that empower users with knowledge, center their experience, and infuse each interaction with a sense of wonder.

Provide knowledge to empower users

Focused on being user centric

Provide an element of awe and magic

Wordmark

The Moovi wordmark is a distinctive typographic logo encapsulating the brand's identity. Its distinctive feature is the infinite 'o' ligature, symbolizing continuity, connection, and the infinite possibilities present within Moovi.

The Moovi Wordmark

The infinite o ligature

Wordmark Uses

The Moovi wordmark takes various forms based on the placement and usage within applications. The wordmark has three states: a solid mark, a gradient mark, and a mark with a byline. The marks are filled either dark or light depending on the background to ensure contrast and visibility.

Primary Wordmark

The primary wordmark will be used when the lockup size exceeds 256 x 256 pixels.

LIGHT BACKGROUND

DARK BACKGROUND

GRADIENT BACKGROUND

Do not use the wordmark with multiple colors or fully closed in a gradient fill

Gradient Wordmark

The gradient wordmark is used as an alternative to the primary mark when needed to emphasize elements of the Moovi brand.

LIGHT BACKGROUND

DARK BACKGROUND

Wordmark with Byline

The wordmark with a byline can be used to showcase other properties that belong to the Moovi brand but are not part of the main assistant. The solid and gradient wordmarks can be used with the byline wordmark.

LIGHT BACKGROUND

DARK BACKGROUND

The byline text content should not be longer than the Moovi wordmark

Infinity Ligature

The infinity ligature will be used in situations smaller than 256 x 256 pixels. This is the preferred use case for favicons, icons, and app store images.

Gradient Ligature

LIGHT BACKGROUND

DARK BACKGROUND

Solid Ligature

LIGHT BACKGROUND

DARK BACKGROUND

GRADIENT BACKGROUND

Color

Moovi's color system is built to be user-centric and provide a sense of personality to Moovi's application. To achieve these goals, the color system has two distinct sets of colors.

Usability Colors

The usability colors are a set of colors strictly aimed at interface usage. These colors are chosen to keep contrast ratios high and accessible for all users. The usability colors operate in two modes: light and dark.

For more information on what elements use what colors and additional states, view Color Tokens in the Design Tokens section.

Light Mode

LIGHT
#FFFFFF

DARK
#1E1E1E

BACKGROUND
#F6F6F6

Dark Mode

LIGHT
#1E1E1E

DARK
#FFFFFF

BACKGROUND
#070707

Personality Colors

Personality colors compliment the usability colors to add a sense of flair and awe to Moovi's interface. These colors are used in tandem wit the usability colors to highlight certain elements present in the interface.

SAGE GREEN
#84A59D

SUNSET CORAL
#FF9770

GLACIER BLUE
#A2D2FF

MOUNTAIN LILAC
#B8C0FF

DESERT GOLD
#F6BD60

Gradients

The personality colors can be combined to create soft, flowing gradients. These gradients are used in elements or sections that emphasize the actions performed by Moovi to showcase the personality behind the application. There are three gradients that can be made by combining the colors listed below.

Tertiary Colors

Tertiary colors are used for feedback-specific actions or to blend into the background without high emphasis.

SUCCESS
#FFFFFF

WARNING
#1E1E1E

ERROR
#F6F6F6

ACCENT GREY
#A4A4A4

Typography

Typography is an essential part of the Moovi system. In order to convey its personality, Moovi employs two sans serifs with unique characteristics to add to its aura. An additional monospace typeface is used in ceratin situations.

Typefaces

ES Rebond Grotesque

HEADINGS AND CAPTIONS

Roobert Pro

BODY AND INTERFACE

Martian Mono

CODE BLOCKS

Welcome to the Moovi Experience

Explain the concept

of easing in motion design

.card {

width: 375px;

padding: 20px;

background-color: #1E1E1E;

}

Typescale

A typescale is a set of predetermined font sizes that are used to ensure consistency in the typography of a design. This scale helps to create a visual hierarchy, making it clear to the reader which pieces of text are headlines, subheadings, body text, and captions.

Heading 1

69 px / 117%

ES Rebond Grotesk

Heading 2

44 px / 125%

ES Rebond Grotesk

Heading 3

35 px / 133%

ES Rebond Grotesk

Heading 4

48 px / 120%

Roobert Pro

Heading 5

23 px / 140%

Roobert Pro

Body

18 px / 150%

Roobert Pro

Caption

14 px / 143%

Roobert Pro

Interface Components

The Moovi interface is made up of many different smaller elements. The underlying principle behind these elements is that they comprise smaller building blocks from the elements showcased in the system. Combining the right colors, typography, and shapes allows an interface component to communicate a certain action to the user.

Chat Components

Lorem ipsum dolor sit amet consectetur. Ut ultricies porttitor lectus consectetur fames. Nulla vivamus id libero sed nunc sed.

USER QUERY BUBBLE

Lorem ipsum dolor sit amet consectetur. Ut ultricies porttitor lectus consectetur fames. Nulla vivamus id libero sed nunc sed. Ultricies at quisque senectus mattis id donec. Malesuada mattis nec vivamus etiam tempus gravida proin. Est sed augue ornare justo pellentesque. Mauris elementum consectetur rhoncus ornare faucibus ullamcorper faucibus risus. Habitasse leo donec massa etiam consequat vel.

SYSTEM RESPONSE BUBBLE

html

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam ipsum gravida rutrum proin ut et penatibus. Natoque.

</p>

<p class="accept-text">I accept</p>

</div>

<button class="proceed-button">Proceed button>

</div>

CODE BLOCK

INLINE CITATION

Source Citation

CITATION TAG

Explain the concept

of easing in motion design

STARTER PROMPT BUBBLE

Explain the concept

of easing in motion design

Break down the steps

to implement a parallax effect

Explain how motion

can enhance accessibility in design

STARTER PROMPT GROUP

Lorem ipsum dolor sit amet consectetur.

USER INPUT FIELD

Button Components

ICON BUTTON

Create New Chat

ACTION BUTTON

TEXT BUTTON

Design Tokens

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. They help to maintain a scalable and consistent visual system for UI development. Tokens can represent anything from color to spacing to duration of animations. As a platform is prototyped with CSS styling, these tokens are constructed as CSS variables, allowing for a consistent style by referencing these variables instead of hard-coded values. This ensures that design and development are tightly coupled and any changes to these values can be made universally and efficiently.

Color Tokens

Color tokens are integral to a design system, encapsulating color values as reusable properties. Within CSS, these color tokens are defined as variables, making it easy to theme a product and switch between light and dark modes.

--color-{type}-{importance}-{color}-{interaction}

The color tokens are named semantically to ensure that they are human-readable. When a designer or developer comes across a token, they should be able to pinpoint its usage and purpose. The structure above is a means for the token to be clear in its purpose.

Light Mode

Dark Mode

--color-bg-primary

#F6F6F6

--color-bg-primary-hover

#CCCCCC

--color-bg-secondary

#A4A4A4

--color-bg-tertiary

#FFFFFF

--color-bg-disabled

#DBDBDB

--color-bg-tertiary-green

#84A59D

--color-bg-tertiary-coral

#FF9770

--color-bg-tertiary-gold

#F6BD60

--color-bg-tertiary-blue

#A2D2FF

--color-bg-tertiary-lilac

#B7C0FF

--color-bg-success

#4EA46B

--color-bg-warning

#FFB339

--color-bg-error

#E12D2D

--color-text-primary

#1E1E1E

--color-text-secondary

#A4A4A4

--color-text-disabled

#F8F8F8

--color-text-success

#4EA46B

--color-text-warning

#FFB339

--color-text-error

#E12D2D

--color-icon-primary-green

#84A59D

--color-icon-primary-coral

#FF9770

--color-icon-primary-gold

#F6BD60

--color-icon-primary-blue

#A2D2FF

--color-icon-primary-lilac

#B7C0FF

--color-icon-secondary

#1E1E1E

--color-icon-tertiary

#FFFFFF

--color-icon-disabled

#F8F8F8

--color-icon-success

#4EA46B

--color-icon-warning

#FFB339

--color-icon-error

#E12D2D

--color-border-primary

#A4A4A4

--color-border-secondary

#1E1E1E

Number Tokens

These tokens are used to specify pixel values for spacing and border radius.

Spacing Tokens

--spacing-{size}

--spacing-xs

8 px

--spacing-s

16 px

--spacing-m

24 px

--spacing-l

32 px

--spacing-xl

48 px

--spacing-xxl

64 px

Border Radius Tokens

--border-radius-{size}

--border-radius-s

16 px

--border-radius-m

24 px

--border-radius-l

32 px

--border-radius-xl

64 px