Design Specification

Colors

Codium's color choices are designed to look pleasing together while maintaining a 7:1 contrast ratio and being accomodating to a different neurotypes

Arabicum

The sea weed species Codium Arabicum is blue-green species of sea weed that grows in the indian and pacific oceans. The color Arabicum is a relaxing blue/green, it can be useed to show that comfort is here. It contains a dark and a light variety which produce a 7:1 contrast on either the light or dark versions of kahakai (respectively).

Arabicum Dark #146151 Arabicum Light #41b69c

Asta

Astaxanthin is a chemical released when allege becomes stressed, in contradictory way, it is used often in medicinal solutions. Asta is a color that allerts the user that something is wrong, but shows them a path to repairing it.

Asta Dark #870f0d Asta Light #E49f8b

Kahakai

Kahakai is a hawian word for beach. Used for background colors, Codium's Kahakai is a relaxing place where you can rest your content on.

Kahakai Dark #131820 Kahakai Light #e2e4df

Hydrate

Water is the basis for all life on earth. Similarly the web cannot exist without links. They are what make pages work and flow from one place to another. Hydrate is used for hyperlinks, buttons, and other things that make the web feel alive.

Hydrate Dark #024f62 Hydrate Light #2dc2d9

Typography

One of the visual inspirations for Codium was the Cedar Design System The Stewart font, was utilized as it was also designed accessability first. Stewart is used in Codium primarily for headers.

For the content body Baloo Tammudu 2, from Google Fonts was used. It has a smooth curve style font that makes it readable at smaller sizes. This makes it ideal for a content body font.

Spacing

Codium has spacing requirements relative to the font size of a container. These will work out to pixel values but in general all codium components adhere to a simple rule about padding and margins: they should be done relative to font size.

Margins

Codium mostly anticipates a vertical flow, to this end, most elements don't have a side margin. Top margins will have a constant setting of 3rem. Root font size is defined above in Typography.

Margin Sizing

Top Bottom Left Right
3rem 3rem 0 0

Padding

Codium's padding follows two different rules. While the content page will have 3rem all around. Headers, footers, and other main elements will have 5rem on the sides and 1rem above and below.

Top Bottom Left Right
Page Content 3rem 3rem 3rem 3rem
Headers and Footers 1rem 1rem 5rem 5rem