1 colors Colors and Fonts

Documentation for colors and fonts.

Source: styles.scss, line 8

1.1 colors.colors Colors

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Use the color() function to add colors to CSS properties. To learn more, read the Chroma documentation.

Example

branding

The site's main colors. Can be used to define colors in other color schemes.

color(red) uses the color: #e92a39 This color is inherited by: link, link-visited, button-bg, progress-bar
color(red-dark) uses the color: #c61826 This color is inherited by: link-active
color(maroon) uses the color: #6d140e
color(maroon-dark) uses the color: #59100a
color(green) uses the color: #0eb992
color(green-dark) uses the color: #009d79
color(black) uses the color: #222 This color is inherited by: text, button-secondary
color(grey-dark) uses the color: #2a2a2a This color is inherited by: progress-bar-border, skip-link-bg
color(grey-light) uses the color: #d6d6d6 This color is inherited by: border, button-disabled, progress-bar-bg
color(grey-extra-light) uses the color: #f3f3f3
color(white) uses the color: #fff This color is inherited by: text-bg, body-bg, button, button-secondary-bg, skip-link

functional

Colors used by functional parts of the design.

color(text) uses the color: #222 (black) This color is inherited by: button-secondary
color(text-bg) uses the color: #fff (white) This color is inherited by: body-bg
color(link) uses the color: #e92a39 (red)
color(link-visited) uses the color: #e92a39 (red)
color(link-active) uses the color: #c61826 (red-dark)
color(border) uses the color: #d6d6d6 (grey-light)
color(body-bg) uses the color: #fff (text-bg)
color(button) uses the color: #fff (white)
color(button-bg) uses the color: #e92a39 (red)
color(button-disabled) uses the color: #d6d6d6 (grey-light)
color(button-secondary) uses the color: #222 (text)
color(button-secondary-bg) uses the color: #fff (white)
color(footer-fat-bg) uses the color: #292929
color(mark-bg) uses the color: yellow
color(progress-bar) uses the color: #e92a39 (red)
color(progress-bar-bg) uses the color: #d6d6d6 (grey-light)
color(progress-bar-border) uses the color: #2a2a2a (grey-dark)
color(skip-link) uses the color: #fff (white)
color(skip-link-bg) uses the color: #2a2a2a (grey-dark)
Source: init/_colors.scss, line 3

1.2 colors.fonts Fonts

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The website uses the Roboto font.

Example

The Roboto font

Light: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Light Italic: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Regular: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Regular Italic: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Medium: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Medium Italic: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Bold: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Bold Italic: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Markup 
<h1>The Roboto font</h1>
<p class="font-light">Light: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.</p>
<p class="font-light-italic">Light Italic: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.</p>
<p class="font-regular">Regular: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.</p>
<p class="font-regular-italic">Regular Italic: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.</p>
<p class="font-medium">Medium: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.</p>
<p class="font-medium-italic">Medium Italic: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.</p>
<p class="font-bold">Bold: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.</p>
<p class="font-bold-italic">Bold Italic: Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.</p>
Source: style-guide/fonts.scss, line 1