ColorwayFoundation
Available here are all colors that can be used in the Transcriptic webapp. There are three categories, each with a description of how colors within that category should be used. This document will maintain parity with _colorway.scss in the webapp repo.
Brand Colors
Transcriptic specific content and assets, such as help info, protocols, accounts, headers and text.
Transcriptic Gray
Transcriptic Gold
Transcriptic Black
Transcriptic Carbon
Gray Scale
Structural elements such as backgrounds, dropshadows, and borders . Lighter grays should be used for backgrounds and darker grays for accents. These colors should not be used for text.
UI Colors
UI elements that need to catch the users eye and draw strict contrast with the surrounding UI. Orange, red and green colors should be used only to indicate status. Orange indicates that attention is necessary, but not necessarily in a negative sense. Red indicates error or that an issue needs to be addressed immediately. Green indicates success. Blues and purples are used to draw attention without a positive or negative connotation.
Yellow
Orange
Red
Purple
Blue
Teal
Green
Transparency Scale
At times, transparency may be needed for elements that overlay others. Transparency should only be used for overlaying other elements, never for "dimming" the color of an existing element. If a darker or lighter color is needed, use the appropriate color from the Colorway. For instances when transparency is needed, make use of the following Transparency Scale and its associated transparency function.
Transparency SASS Function
tx-transparentize($color, $transparency)
: Creates a transparent color of the provided $color
value and $transparency
key.
.selector {
background-color: tx-transparentize($tx-black, light-overlay);
}
Use the full
or none
transparency values for transitions.
.selector {
background-color: tx-transparentize($dark-gray, none);
transition: background-color 0.2s;
&:hover {
background-color: tx-transparentize($dark-gray, dark-overlay);
}
}