BFNA Design System

Colors 

<section>
    <div class="color-token bg--navy">
        <hgroup>
            <h6>HSL-</h6>
            <h6>HEX-</h6>
            <h6>Name-</h6>
        </hgroup>
    </div>
    <div class="color-token bg--red">
        <hgroup>
            <h6>HSL-</h6>
            <h6>HEX-</h6>
            <h6>Name-</h6>
        </hgroup>
    </div>
    <div class="color-token bg--yellow">
        <hgroup>
            <h6>HSL-</h6>
            <h6>HEX-</h6>
            <h6>Name-</h6>
        </hgroup>
    </div>
    <div class="color-token bg--purple">
        <hgroup>
            <h6>HSL-</h6>
            <h6>HEX-</h6>
            <h6>Name-</h6>
        </hgroup>
    </div>
    <div class="color-token bg--green">
        <hgroup>
            <h6>HSL-</h6>
            <h6>HEX-</h6>
            <h6>Name-</h6>
        </hgroup>
    </div>
</section>
 
<section>
  <div class="color-token bg--navy">
    <hgroup>
      <h6>HSL-</h6>
      <h6>HEX-</h6>
      <h6>Name-</h6>
    </hgroup>
  </div>
  <div class="color-token bg--red">
    <hgroup>
      <h6>HSL-</h6>
      <h6>HEX-</h6>
      <h6>Name-</h6>
    </hgroup>
  </div>
  <div class="color-token bg--yellow">
    <hgroup>
      <h6>HSL-</h6>
      <h6>HEX-</h6>
      <h6>Name-</h6>
    </hgroup>
  </div>
  <div class="color-token bg--purple">
    <hgroup>
      <h6>HSL-</h6>
      <h6>HEX-</h6>
      <h6>Name-</h6>
    </hgroup>
  </div>
  <div class="color-token bg--green">
    <hgroup>
      <h6>HSL-</h6>
      <h6>HEX-</h6>
      <h6>Name-</h6>
    </hgroup>
  </div>
</section>
 
/* No context defined for this component. */

There are no notes for this item.