---
title: "Styleguide"
canonical_url: "https://fossa.com/design-system/styleguide/"
markdown_url: "https://fossa.com/design-system/styleguide.md"
content_type: "educational"
language: "en"
date_published: "2025-03-15"
date_modified: "2025-03-15"
author: "FOSSA"
organization: "FOSSA"
---

# Styleguide

c-title-1
    c-title-1
    c-title-1

    c-title-2
    c-title-2
    c-title-2

    c-title-3
    c-title-3
    c-title-3

    c-title-4
    c-title-4
    c-title-4

    c-title-5
    c-title-5
    c-title-5

    c-title-6
    c-title-6
    c-title-6

    c-title-7
    c-title-7
    c-title-7

  c-text-xl
  c-text-md
  c-text-sm
  c-text-sm
  c-text-sm italic
  c-text-xs
  c-uppercase

  <ul role="list" class="c-list">
    <li class="c-list_item">List item</li>
    <li class="c-list_item">List item</li>
    <li class="c-list_item">List item</li>
    <li class="c-list_item">List item</li>
  </ul>

  <a href="#" class="c-primary-button w-inline-block">
    Primary Button
  </a>
  <a href="#" class="c-secondary-button w-inline-block">
    Secondary Button
  </a>
  <a href="#" class="c-outline-button w-inline-block">
    Outline Button
  </a>

    <a href="#" class="c-outline-button cc-light w-inline-block">
      Outline Button Light
    </a>

  <a data-w-id="49046895-7378-eca2-ffa2-f6d73f9270f7" href="#" class="c-arrow-link w-inline-block">
    Arrow Link<img src="../images/arrow-right-green.svg" loading="lazy" alt="" class="c-arrow-link_img" />
  </a>

    <a data-w-id="640b4cd6-ebeb-2ff0-7f2c-892d1db460b4" href="#" class="c-arrow-link cc-white w-inline-block">
      Arrow Link<img src="../images/arrow-right-white.svg" loading="lazy" alt="" class="c-arrow-link_img" />
    </a>

  <a href="#" class="c-arrow-link cc-blue w-inline-block">
    Arrow Link<img src="../images/arrow-right-blue.svg" loading="lazy" alt="" class="c-arrow-link_img" />
  </a>

  <a href="#" class="c-primary-button cc-small w-inline-block">
    Primary Button
  </a>
  <a href="#" class="c-secondary-button cc-small w-inline-block">
    Secondary Button
  </a>
  <a href="#" class="c-outline-button cc-small w-inline-block">
    Outline Button
  </a>

    <a href="#" class="c-outline-button cc-light cc-small w-inline-block">
      Outline Button Light
    </a>

## Source

Canonical page: https://fossa.com/design-system/styleguide/