---
title: Theming
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
layout: page-outline
---

<p class="index-summary">A theme is a collection of pre-defined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.</p>

<div class="index-grid">
  <a href="/docs/theming/color">
    <wa-card with-header>
      <div slot="header">
        {% include "svgs/theming/color.njk" %}
      </div>
      <span class="page-name">Color</span>
    </wa-card>
  </a>
  <a href="/docs/theming/typography">
    <wa-card with-header>
      <div slot="header">
        {% include "svgs/theming/typography.njk" %}
      </div>
      <span class="page-name">Typography</span>
    </wa-card>
  </a>
  <a href="/docs/theming/space">
    <wa-card with-header>
      <div slot="header">
        {% include "svgs/theming/space.njk" %}
      </div>
      <span class="page-name">Space</span>
    </wa-card>
  </a>
  <a href="/docs/theming/borders">
    <wa-card with-header>
      <div slot="header">
        {% include "svgs/theming/borders.njk" %}
      </div>
      <span class="page-name">Borders</span>
    </wa-card>
  </a>
  <a href="/docs/theming/focus">
    <wa-card with-header>
      <div slot="header">
        {% include "svgs/theming/focus.njk" %}
      </div>
      <span class="page-name">Focus</span>
    </wa-card>
  </a>
  <a href="/docs/theming/shadows">
    <wa-card with-header>
      <div slot="header">
        {% include "svgs/theming/shadows.njk" %}
      </div>
      <span class="page-name">Shadows</span>
    </wa-card>
  </a>
  <a href="/docs/theming/transitions">
    <wa-card with-header>
      <div slot="header">
        {% include "svgs/theming/transitions.njk" %}
      </div>
      <span class="page-name">Transitions</span>
    </wa-card>
  </a>
  <a href="/docs/theming/component-groups">
    <wa-card with-header>
      <div slot="header">
        {% include "svgs/theming/component-groups.njk" %}
      </div>
      <span class="page-name">Component Groups</span>
    </wa-card>
  </a>
</div>