TN8 Style Guide for Developers


Color

Color for Interactive Elements

Buttons

Each set of colors below is used to create a gradient for each style of push button.

    • #0074cc
    • #0044cc
    • #07891F
    • #006b34
    • #ffffff
    • #e6e6e6
    • #ffffff
    • #e6e6e6

Links

  • up

    • #005a9e
  • over

    • #005580

Scrollbars

    • #f2f2f2
    • #424242

Color for Graphic Elements

Text

Text is dark gray in most cases. Black is never used. For a subtle effect, the light gray can be used. In special cases, text can be reversed on a dark background. Header style 1 uses a gray blue, and is reserved for page titles.

    • #333333
    • #666666
    • #ffffff
    • #40657a

Backgrounds and Support Graphics

    • #666666
    • #f1f1f1
    • #049cdb
    • #40657a
    • #f4cb3e
    • #81c575

Error Messages

More information on styling error messages to be included below.

    • #f2dede
    • #eed3d7
    • #333333
    • #b94a48

Other Messages

Old message colors, in process of phasing out:

    • #bce8f1
    • #d9edf7
    • #306F8F

New message colors, more guidance on styling to be included below:

    • #40657a
    • #ffffff

Choosing Color for Accessibility

    • #049cdb

    • As this color has insufficient contrast on either the TN8 dark gray or white, it should only be used decoratively.





UI Elements

Buttons and Links

Primary Action Button

Most TN8 push buttons use the large styling.

Default Button

Some rules should be defined around when to use the large versus regular size of this button style.



Inverse Button

The inverse styling is used when more attention should be drawn to action, but it is not a primary action.



Success Button

The original bootstrap style for a success button is overwritten in TN8 for accessibility reasons.

Close Button

Link





Tabs

Coming soon...



Modals

Fixed Modals

Fixed Modals are used to display alert, error, and warning messages from TN8 over the main content. A transparent backing of 30% black appears under the window.



Draggable Modals

Draggable modals can be moved around within TN8. No transparent overlay appears behind them.






Graphic Elements

Error Messages

Error messages should include a message phrased with the user in mind. Message numbers are always included.
MSG 0000