BX Swiss Component Library

Color

Branding

$brand-color

This is the main brand color for BX Swiss. It should only be used for the logo and to indicate elements that trigger an action on the screen such as links and buttons.

$black

This complements the main brand color and is the main color for body copy. It is also the hover/active state color for links.

Shades

This are several color shades that can be used to add depth to the visual design. Beware of using gray text because it might not have sufficient contrast to be properly accessible for visually impaired users.

<h2>Brand colors</h2>

<div class="f-card">
    <div class="f-card__body">
        <div class="f-swatch" style="background-color: #b31a21"></div>
    </div>
    <div class="f-card__footer">
        $brand-color-1 <br>
        <strong>#b31a21</strong>
    </div>
</div>
<div class="f-card">
    <div class="f-card__body">
        <div class="f-swatch" style="background-color: #282828"></div>
    </div>
    <div class="f-card__footer">
        $black <br>
        <strong>#282828</strong>
    </div>
</div>
<h2>Shades</h2>

<div class="f-card">
    <div class="f-card__body">
        <div class="f-swatch" style="background-color: #fff"></div>
    </div>
    <div class="f-card__footer">
        $white <br>
        <strong>#fff</strong>
    </div>
</div>
<div class="f-card">
    <div class="f-card__body">
        <div class="f-swatch" style="background-color: #f6f6f6"></div>
    </div>
    <div class="f-card__footer">
        $gray-lighter <br>
        <strong>#f6f6f6</strong>
    </div>
</div>
<div class="f-card">
    <div class="f-card__body">
        <div class="f-swatch" style="background-color: #e2e2e2"></div>
    </div>
    <div class="f-card__footer">
        $gray-light <br>
        <strong>#e2e2e2</strong>
    </div>
</div>
<div class="f-card">
    <div class="f-card__body">
        <div class="f-swatch" style="background-color: #ccc"></div>
    </div>
    <div class="f-card__footer">
        $gray <br>
        <strong>#ccc</strong>
    </div>
</div>
<div class="f-card">
    <div class="f-card__body">
        <div class="f-swatch" style="background-color: #b9b9b9"></div>
    </div>
    <div class="f-card__footer">
        $gray-dark <br>
        <strong>#b9b9b9</strong>
    </div>
</div>
<div class="f-card">
    <div class="f-card__body">
        <div class="f-swatch" style="background-color: #999"></div>
    </div>
    <div class="f-card__footer">
        $gray-darker <br>
        <strong>#999</strong>
    </div>
</div>
<h2></h2>
 
{{#each this}}
	<h2>{{title}}</h2>

	{{#each colors}}
		<div class="f-card">
			<div class="f-card__body">
				<div class="f-swatch" style="background-color: {{hexValue}}"></div>
			</div>
			<div class="f-card__footer">
				{{name}} <br>
				<strong>{{hexValue}}</strong>
			</div>
		</div>
	{{/each}}
{{/each}}
 
[
  {
    "title": "Brand colors",
    "colors": [
      {
        "name": "$brand-color-1",
        "hexValue": "#b31a21"
      },
      {
        "name": "$black",
        "hexValue": "#282828"
      }
    ]
  },
  {
    "title": "Shades",
    "colors": [
      {
        "name": "$white",
        "hexValue": "#fff"
      },
      {
        "name": "$gray-lighter",
        "hexValue": "#f6f6f6"
      },
      {
        "name": "$gray-light",
        "hexValue": "#e2e2e2"
      },
      {
        "name": "$gray",
        "hexValue": "#ccc"
      },
      {
        "name": "$gray-dark",
        "hexValue": "#b9b9b9"
      },
      {
        "name": "$gray-darker",
        "hexValue": "#999"
      }
    ]
  }
]