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.

full
light-overlay
shadow
dark-overlay
none

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);
                            }
                        }