Design System

While I didn't have to create all these elements for the site, I find that it's always good to be prepared.

Color Theory

When it comes to color pallette of this site, I chose to go with colors that also represented additional meaning. Below you find a list of colors, hex values, and why they are used.

Typography

Choosing the fonts for the site and how the headers would work was probably the hardest part of this design. I needed a font that wasn't used in most professional designs and fit my personality. I ended up going with Niramit for the default body font and Limelight for highlighted text like headers and callouts.

This is featured text. Using the header font for this type of paragraph introduction, I was able to call attention to the first thought on the home page without causing an accessibility issue by using a header.

Header 01

Used for the page title.
Cthulhu shrugged and dreamed of days of wanton genocide. Dreams come true all the time, just not for the dreamers. One moment, there was forty-two.

Header 02

Used as major sections on a page.
Cthulhu shrugged and dreamed of days of wanton genocide. Dreams come true all the time, just not for the dreamers. One moment, there was forty-two.

Header 03

Used in between major sections of the page to break up concepts.
Cthulhu shrugged and dreamed of days of wanton genocide. Dreams come true all the time, just not for the dreamers. One moment, there was forty-two.

Header 04

Regular header.
Cthulhu shrugged and dreamed of days of wanton genocide. Dreams come true all the time, just not for the dreamers. One moment, there was forty-two.

Header 05

Regular header.
Cthulhu shrugged and dreamed of days of wanton genocide. Dreams come true all the time, just not for the dreamers. One moment, there was forty-two.

Header 06

Regular header.
Cthulhu shrugged and dreamed of days of wanton genocide. Dreams come true all the time, just not for the dreamers. One moment, there was forty-two.

Links

There are multiple types of links on this site used for navigation. Header navigation helps the user navigate across the site while content links help navigate on the page, on the site, or out of the site.

Header navigation

Default header

Default site navigation at the top of the page. White was chosen to stand out more against the background color since this navigation element is outside the main container.

1. a header link
2. hover
3. active
4. focus
5. focus-visible

Active Page header

Style used for the site navigation to indicate what page or hierarchy you are currently in. The active page will also have an icon visible next to it for users who don't see the colors as well.

1. current page header link
2. hover
3. active
4. focus
5. focus-visible

Breadcrumbs

A breadcrumb container makes it easier for a user to know they are on a subpage of one of the three parent pages in the site. It also allows for easier navigation back up to the site.

Body links

Links that you would find in normal body content. This link style is also used in the above breadcrumbs navigation.

• a normal body link
• hover
• active
• focus
• focus-visible

Call to Action Button Links

Links that need more attention called to them. They will reside on their own line and either be centered or left aligned depending on context.

• CTA Button
• Hover
• Active
• Focus
• Focus-visible

Buttons

While I didn't need to create buttons for this site, I did need a submit button for the form below and felt this was a good opportunity to design one.

• Default button
• Hover
• Active
• Focus
• Focus-visible

Containers

Table of Contents (TOC)

TOC containers are found to the right of the content area in desktop view or at the top of the page in mobile view. These links allow the user to jump down to a particular section of the current page. In desktop view, the TOC will scroll down the page with you. Click the TOC to toggle the container open and click the Back to Top text to go to the top of the page.

Quote Callout

For main parent pages, I used a callout container like below for quotes that are related to the page they are on.

Tables

This responsive table will resize and restyle itself at smaller screen resolutions so individual rows are easier to read. Normal tables would squish until text is too difficult to read.

Forms