n4p371c0

April 01, 2023

My Website Design System

Drawing of a person thinking

Hello everyone! This is the Design System page I built for this Codecademy project. I took a few sections of an style guide I had from an old brand project I made a few years ago. Click around, enjoy, and let me know what you think :)

Colors

Primary Colors

Heavenly White

HEX: #FFFFFF

RGB: (255, 255, 255)

Blacker Than Black

HEX: #000000

RGB: (0, 0, 0)

Supervillanos Blue

HEX: #0000C4

RGB: (0, 0, 196)

Secondary Colors

Banana Yellow

HEX: #FED502

RGB: (254, 213, 2)

Old Ferrari Red

HEX: #CC0000

RGB: (204, 0, 0)

Dizzy Hulk Green

HEX: #019329

RGB: (1, 147, 41)

Typography

Headlines and Titles

Exo

- Bold 800, 5vw

This is an on-brand main headline.

Exo

- Bold 800, 4vw

This is a good-looking secondary header.

Exo

- Semi Bold 700, 2vw

This is a less striking, but still very important headline. Like the next title.

Paragraphs and Regular Text

Open Sans

- Normal 300, 1.22vw

The Open Sans font family is our go-to element for any written communication. It works to maintain consistency, and provide clarity to our message thanks to its neutral, yet friendly appearance, and its excellent legibility.

Open Sans

- Normal 400, 1.22vw

We use it in all forms of text, headlines, sub-headlines, and interactions between our brand and the user. Of course, with some guidelines that help us provide that clarity and consistency that we mentioned before being the most important: grammar — please, write well.

Buttons

Action Buttons

Support Buttons