storyteller.io CSS Styleguide

Color

CSS Globals

2.1

Color Palette

Color should never be hardcoded, always define variables here before applying color to elements. Use color sparingly so as to effectively convey meaning.

Modifiers  
$storyteller-color

Primary brand color

$desaturated-storyteller-color

Desaturated brand color, useful for toning

$gray

Toned base gray for UI

$white

Slightly toned offwhite

$body-color

Page background color

$application-color

Background color for application layouts

$document-color

Background color for document layouts

$form-color

Background color for form layouts

$menu-color

Background color for menu layouts

$knockout-color

Reset browser default background color

$rule-color

Color for horizontal rules in documents

$get-color

Color coding for GET requests

$update-color

Color coding for UPDATE requests

$post-color

Color coding for POST requests

$success-color

Color coding to indicate an successful action

$new-color

Color coding to indicate a new change or addition

$notice-color

Color coding to indicate an advisory notice

$warning-color

Color coding to indicate a warning

$error-color

Color coding to indicate an error

$header-color

Background color for header layout block

$navigation-color

Background color for navigation layout block

Background color for banner layout block

$heading-color

Background/foreground for document heading text

$text-color

Reset browser default text color

$link-color

Generic link color

$code-comment

Prism syntax highlighting theme color

$code-punctuation

Prism syntax highlighting theme color

$code-color

Prism syntax highlighting theme color

$code-tag

Prism syntax highlighting theme color

$code-string

Prism syntax highlighting theme color

$code-url

Prism syntax highlighting theme color

$blank-slate-color

Background color for blank slate blocks

$control-color

Base color for UI controls, including reset browser defaults

$control-label-color

Color for form labels

$button-color

Color for normal buttons

$modal-color

Background color and toning for modal windows

$nav-current-color

Background/foreground to indicate current nav selection

$panel-color

Background color and toning for inline panel blocks

$panel-border-color

Color for borders within panel blocks, especially tabular data

$placeholder-color

Color for “placeholders” within text inputs

$popover-color

Background color and toning for popover blocks

2.2

Color Coding