<StyleguideExample @title="primary">
  <section class="color-row">
    <ColorExample @color="primary-very-low" />
    <ColorExample @color="primary-low" />
    <ColorExample @color="primary-low-mid" />
  </section>
  <section class="color-row">
    <ColorExample @color="primary-medium" />
    <ColorExample @color="primary-high" />
    <ColorExample @color="primary" />
  </section>
</StyleguideExample>

<StyleguideExample @title="primary-100">
  <section class="color-row">
    <ColorExample @color="primary-50" />
    <ColorExample @color="primary-100" />
    <ColorExample @color="primary-200" />
    <ColorExample @color="primary-300" />
    <ColorExample @color="primary-400" />
    <ColorExample @color="primary-500" />
  </section>
  <section class="color-row">
    <ColorExample @color="primary-600" />
    <ColorExample @color="primary-700" />
    <ColorExample @color="primary-800" />
    <ColorExample @color="primary-900" />
    <ColorExample @color="primary" />
  </section>
</StyleguideExample>

<StyleguideExample @title="secondary">
  <section class="color-row">
    <ColorExample @color="secondary-low" />
    <ColorExample @color="secondary-medium" />
    <ColorExample @color="secondary-high" />
    <ColorExample @color="secondary" />
  </section>
</StyleguideExample>

<StyleguideExample @title="tertiary">
  <section class="color-row">
    <ColorExample @color="tertiary-low" />
    <ColorExample @color="tertiary-medium" />
    <ColorExample @color="tertiary-high" />
    <ColorExample @color="tertiary" />
  </section>
</StyleguideExample>

<StyleguideExample @title="tertiary-100">
  <section class="color-row">
    <ColorExample @color="tertiary-50" />
    <ColorExample @color="tertiary-100" />
    <ColorExample @color="tertiary-200" />
    <ColorExample @color="tertiary-300" />
    <ColorExample @color="tertiary-400" />
    <ColorExample @color="tertiary-500" />
  </section>
  <section class="color-row">
    <ColorExample @color="tertiary-600" />
    <ColorExample @color="tertiary-700" />
    <ColorExample @color="tertiary-800" />
    <ColorExample @color="tertiary-900" />
    <ColorExample @color="tertiary" />
  </section>
</StyleguideExample>

<StyleguideExample @title="quaternary">
  <section class="color-row">
    <ColorExample @color="quaternary-low" />
    <ColorExample @color="quaternary" />
  </section>
</StyleguideExample>

<StyleguideExample @title="highlight">
  <section class="color-row">
    <ColorExample @color="highlight-low" />
    <ColorExample @color="highlight-medium" />
    <ColorExample @color="highlight" />
    <ColorExample @color="highlight-high" />
  </section>
</StyleguideExample>

<StyleguideExample @title="danger">
  <section class="color-row">
    <ColorExample @color="danger-low" />
    <ColorExample @color="danger-low-mid" />
    <ColorExample @color="danger-medium" />
    <ColorExample @color="danger" />
  </section>
</StyleguideExample>

<StyleguideExample @title="success">
  <section class="color-row">
    <ColorExample @color="success-low" />
    <ColorExample @color="success-medium" />
    <ColorExample @color="success" />
  </section>
</StyleguideExample>

<StyleguideExample @title="love">
  <section class="color-row">
    <ColorExample @color="love-low" />
    <ColorExample @color="love" />
  </section>
</StyleguideExample>

<StyleguideExample @title="header_primary">
  <section class="color-row">
    <ColorExample @color="header_background" />
  </section>
  <section class="color-row">
    <ColorExample @color="header_primary" />
    <ColorExample @color="header_primary-very-high" />
    <ColorExample @color="header_primary-high" />
  </section>
  <section class="color-row">
    <ColorExample @color="header_primary-medium" />
    <ColorExample @color="header_primary-low-mid" />
    <ColorExample @color="header_primary-low" />
  </section>
</StyleguideExample>