Create Colour System for Component Library - UI

[kangina-tech]

Overview

Colours make a component library. It is imparrative to have a scale for them.

Background

This project is heavily reliant on the Atomic Design process. As explained by the HfLA Design System Guide for Designers, it is the simplest way to go through all the possible steps that are required for this component part.

As a point of start for this stickersheet, it is best to create the colour system based off of Hack for LA colours and let the other teams adjust them according to their needs.

Action Items

Creating a small stickersheet for the colour system.

• Primary
• Secondary
• Success and Error
• Greyscale

Note: Be sure to use colours that are up to standard with Accessibility Guidelines.

Resources/Instructions

Internship Project
Civic Tech Jobs
HfLA Website

[liz-zheng]

3/30/2023

First iteration

Research:
https://docs.google.com/spreadsheets/d/1kur5juC6XsgRsjlKKFjgRAKBQ5M3dFh-3m66v45tWOc/edit#gid=0

[liz-zheng]

4/4/2023

Updated template:
-specify background colors
-add temporary color placeholders to show how palette can be expanded
-added a note at the bottom letting designers know that colors are modifiable, primary colors can be changed for light and dark
-fixed alignment

Template given to other civic project designers

What the template can look like AFTER modifying (removing unneeded boxes, and the note)