Engineering Specification 04: Design System

Summary

This document aims to provide insights into the design system used by the application to follow the requirement “Have the same design language for the entire platform” specified by the course material.

Design Philosophy

The application is designed to be mobile-first, but still responsive and work well on desktop, with proper considerations for those who are visually-impaired or hearing-impaired using ARIA and A11y standards.

All pages should be vetted for accessibility issues.

Color Palette

Due to the nature of the application and the name of the application, it is decided that the color “Cherry Red” would be the accent color of the application, spread out across multiple hues and saturations to fit the perception level of the user.

Claret (from weight 50 to 950)
Watermelon (from weight 50 to 950)
Pink (from weight 50 to 950)
Seashell (from weight 50 to 950)

Typography

I want to use a rounded and adorable font for the application, while still keeping the brand identity.

This application does have some plans to support bilingual between English and Japanese, therefore:

Fredoka Variable for English Text
Playwrite USA for English Emphasis
Hachi Maru Pop for Japanese Emphasis
M PLUS Rounded for Japanese Text