Style Guide

2 #Colors Colors

2.1 #Colors.Background Background

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

Example

Headline 1

Text
Link

Button

Button

Button

Headline 1

Text
Link

Button

Button

Button

Headline 1

Text
Link

Button

Button

Button

Headline 1

Text
Link

Button

Button

Button

Headline 1

Text
Link

Button

Button

Button

Headline 1

Text
Link

Button

Button

Button

Headline 1

Text
Link

Button

Button

Button
Markup 
<div class="kssColorBoxes">
  <div class="kssColorBox bg--white">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
    <a href="#" class="button button--action">Button</a>
  </div>
  <div class="kssColorBox bg--black">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
    <a href="#" class="button button--action">Button</a>
  </div>
  <div class="kssColorBox bg--gray-base">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
    <a href="#" class="button button--action">Button</a>
  </div>
  <div class="kssColorBox bg--light-gray">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
    <a href="#" class="button button--action">Button</a>
  </div>
  <div class="kssColorBox bg--primary">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
    <a href="#" class="button button--action">Button</a>
  </div>
  <div class="kssColorBox bg--secondary">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
    <a href="#" class="button button--action">Button</a>
  </div>
  <div class="kssColorBox bg--action">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
    <a href="#" class="button button--action">Button</a>
  </div>
</div>
Source: build/doc/doc.css, line 2783

2.2 #Colors.Border Border

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

Example

Headline 1

Text
Link

Headline 1

Text
Link

Headline 1

Text
Link

Headline 1

Text
Link

Headline 1

Text
Link

Headline 1

Text
Link

Headline 1

Text
Link
Markup 
<div class="kssColorBoxes">
  <div class="kssColorBox border--white">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--black">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--gray-base">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--light-gray">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--primary">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--secondary">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--action">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
</div>
Source: build/doc/doc.css, line 2848

2.3 #Colors.Font Font

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

Examples
Default styling
Text
.color--white
White
Text
.color--gray-base
Gray Base
Text
.color--middle-gray
Middle Gray
Text
.color--dark-gray
Dark Gray
Text
.color--light-gray
Light Gray
Text
.color--primary
Primary
Text
.color--secondary
Secondary
Text
.color--action
Action
Text
.color--danger
Danger
Text
.color--warning
Warning
Text
.color--success
Success
Text
Markup 
<span class="[modifier class]">Text</span>
Source: build/doc/doc.css, line 2892