Colors
Here are all the colors used throughout the site. All colors have corresponding classes for setting foreground and background colors.
| Hex Code | RGB Value | Foreground Class | Background Class | |
|---|---|---|---|---|
| #20D28D | RGB(34, 140, 172) | seafoam | seafoam-bk | |
| #228CAC | RGB(32, 210, 141) | blueberry | blueberry-bk | |
| #FFCC00 | RGB(255, 204, 0) | bumblebee | bumblebee-bk | |
| #F97938 | RGB(249, 121, 56) | papaya | papaya-bk | |
| #2E2E2E | RGB(46, 46, 46) | slate | slate-bk | |
| #6A6A6A | RGB(106, 106, 106) | charcoal | charcoal-bk | |
| #CACACA | RGB(202, 202, 202) | frost | frost-bk | |
| #F0F0F0 | RGB(240, 240, 240) | cloud | cloud-bk |
Typography
The primary fonts we use are GT Eesti Medium and GT Eesti Regular
The <b> tag automatically converts the font to GT Eesti Medium. This font should always be used for bold text
The <em> tag will highlight the text in the primary accent color.
H1 Heading |
32pt | This heading is primarily used for emphasis on money or other very important items on the screen. Should be used sparingly on any given page |
H2 Heading |
28pt | This heading is used for the page title or panel title. If a page has multiple visible panels throughout the page, use h3 instead. For solitary panels with a lot of content, use h2. |
H3 Heading |
24pt | This heading is used for subtitles in a panel. They serve to divide a panel up into segments. You can also use h3 as the panel title if there are multiple panels in a page, and these panels don't have the need for subtitles. |
H4 Heading |
21pt | This heading is used primarily for emphasis on money or other important items in a panel segment |
H5 Heading |
18pt | This heading can be used as a direct subheading for h1 and h2 headings. |
H6 Heading |
16pt | This heading is used for generic labels or subheadings throughout a panel. Anything that is not body text or can be seen as a lower importance heading should be put in an h6 heading |
Paragrah |
14pt | This is paragraph text sizing, which is used for longer generic blocks of text, sidebar links, etc. |
Subtext |
12pt | Subtext text is defined by div or paragraph text with the class "subtext". It should be used mostly for things like graph axis values or other text that the user will not need to focus on or read unless they're looking for it directly. |
Forms
When possible, any input or button elements should be contained within a form element. Most forms will have an informative section which dynamically changes based on which input is currently in focus in the form.
The convention should be that each input is parented by a div or other element, has an id, and has a single sibling that is the placeholder label. For example, all inputs should follow the below format:
<div class="form-input">
<input id="name" type="text" class="" >
<label for="name">Your Name<label>
</div>
Below there is an overview on how each individual input element should look like, followed by how full forms should be rendered
| Class(es) | Inline Attrs | |
|---|---|---|
|
|
txt-input-single | |
|
Error
|
txt-input-single error | |
|
|
txt-input-first
txt-input
txt-input-last
|
|
|
|
form-input textarea > txt-input-single | rows="5" |
|
|
form-select > select-item | readonly="true" |
|
|
form-select > select-item third | readonly="true" |
Below is a complete form. This form can either be placed in a panel or in a modal window. As you focus on the various items in the form, the description on the right side updates. Remember to specify type="button" for any buttons used in select lists in form elements