---
layout: docs
title: Fill
description: null
---

| Class                | Description                              |
| -------------------- | ---------------------------------------- |
| `fill-current-color` | Applies `fill: currentColor;` to element |
| `fill-inherit`       | Applies `fill: inherit;` to element      |

## Colors

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-white" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-black" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="fill-white" ... />
<circle class="fill-black" ... />
```

## Shades

### Light

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-light" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-light-50" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-light-100" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-light-200" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-light-300" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-light-400" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-light-500" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-light-600" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-light-700" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-light-800" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-light-900" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="fill-light" ... />
<circle class="fill-light-50" ... />
<circle class="fill-light-100" ... />
<circle class="fill-light-200" ... />
<circle class="fill-light-300" ... />
<circle class="fill-light-400" ... />
<circle class="fill-light-500" ... />
<circle class="fill-light-600" ... />
<circle class="fill-light-700" ... />
<circle class="fill-light-800" ... />
<circle class="fill-light-900" ... />
```

### Grey

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-grey" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-grey-50" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-grey-100" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-grey-200" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-grey-300" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-grey-400" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-grey-500" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-grey-600" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-grey-700" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-grey-800" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-grey-900" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="fill-grey" ... />
<circle class="fill-grey-50" ... />
<circle class="fill-grey-100" ... />
<circle class="fill-grey-200" ... />
<circle class="fill-grey-300" ... />
<circle class="fill-grey-400" ... />
<circle class="fill-grey-500" ... />
<circle class="fill-grey-600" ... />
<circle class="fill-grey-700" ... />
<circle class="fill-grey-800" ... />
<circle class="fill-grey-900" ... />
```

### Dark

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-dark" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-dark-50" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-dark-100" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-dark-200" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-dark-300" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-dark-400" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-dark-500" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-dark-600" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-dark-700" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-dark-800" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-dark-900" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="fill-dark" ... />
<circle class="fill-dark-50" ... />
<circle class="fill-dark-100" ... />
<circle class="fill-dark-200" ... />
<circle class="fill-dark-300" ... />
<circle class="fill-dark-400" ... />
<circle class="fill-dark-500" ... />
<circle class="fill-dark-600" ... />
<circle class="fill-dark-700" ... />
<circle class="fill-dark-800" ... />
<circle class="fill-dark-900" ... />
```

## Palettes

### Primary

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-primary" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-primary-50" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-primary-100" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-primary-200" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-primary-300" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-primary-400" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-primary-500" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-primary-600" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-primary-700" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-primary-800" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-primary-900" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="fill-primary" ... />
<circle class="fill-primary-50" ... />
<circle class="fill-primary-100" ... />
<circle class="fill-primary-200" ... />
<circle class="fill-primary-300" ... />
<circle class="fill-primary-400" ... />
<circle class="fill-primary-500" ... />
<circle class="fill-primary-600" ... />
<circle class="fill-primary-700" ... />
<circle class="fill-primary-800" ... />
<circle class="fill-primary-900" ... />
```

### Secondary

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-secondary" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-secondary-50" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-secondary-100" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-secondary-200" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-secondary-300" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-secondary-400" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-secondary-500" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-secondary-600" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-secondary-700" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-secondary-800" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-secondary-900" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="fill-secondary" ... />
<circle class="fill-secondary-50" ... />
<circle class="fill-secondary-100" ... />
<circle class="fill-secondary-200" ... />
<circle class="fill-secondary-300" ... />
<circle class="fill-secondary-400" ... />
<circle class="fill-secondary-500" ... />
<circle class="fill-secondary-600" ... />
<circle class="fill-secondary-700" ... />
<circle class="fill-secondary-800" ... />
<circle class="fill-secondary-900" ... />
```

### Tertiary

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-tertiary" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-tertiary-50" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-tertiary-100" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-tertiary-200" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-tertiary-300" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-tertiary-400" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-tertiary-500" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-tertiary-600" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-tertiary-700" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-tertiary-800" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-tertiary-900" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="fill-tertiary" ... />
<circle class="fill-tertiary-50" ... />
<circle class="fill-tertiary-100" ... />
<circle class="fill-tertiary-200" ... />
<circle class="fill-tertiary-300" ... />
<circle class="fill-tertiary-400" ... />
<circle class="fill-tertiary-500" ... />
<circle class="fill-tertiary-600" ... />
<circle class="fill-tertiary-700" ... />
<circle class="fill-tertiary-800" ... />
<circle class="fill-tertiary-900" ... />
```

## Indicators

### Error

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-error" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-error-50" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-error-100" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-error-200" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-error-300" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-error-400" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-error-500" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-error-600" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-error-700" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-error-800" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-error-900" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="fill-error" ... />
<circle class="fill-error-50" ... />
<circle class="fill-error-100" ... />
<circle class="fill-error-200" ... />
<circle class="fill-error-300" ... />
<circle class="fill-error-400" ... />
<circle class="fill-error-500" ... />
<circle class="fill-error-600" ... />
<circle class="fill-error-700" ... />
<circle class="fill-error-800" ... />
<circle class="fill-error-900" ... />
```

### Warning

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-warning" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-warning-50" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-warning-100" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-warning-200" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-warning-300" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-warning-400" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-warning-500" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-warning-600" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-warning-700" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-warning-800" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-warning-900" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="fill-warning" ... />
<circle class="fill-warning-50" ... />
<circle class="fill-warning-100" ... />
<circle class="fill-warning-200" ... />
<circle class="fill-warning-300" ... />
<circle class="fill-warning-400" ... />
<circle class="fill-warning-500" ... />
<circle class="fill-warning-600" ... />
<circle class="fill-warning-700" ... />
<circle class="fill-warning-800" ... />
<circle class="fill-warning-900" ... />
```

### Success

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-success" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-success-50" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-success-100" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-success-200" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-success-300" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-success-400" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-success-500" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-success-600" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-success-700" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-success-800" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-success-900" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="fill-success" ... />
<circle class="fill-success-50" ... />
<circle class="fill-success-100" ... />
<circle class="fill-success-200" ... />
<circle class="fill-success-300" ... />
<circle class="fill-success-400" ... />
<circle class="fill-success-500" ... />
<circle class="fill-success-600" ... />
<circle class="fill-success-700" ... />
<circle class="fill-success-800" ... />
<circle class="fill-success-900" ... />
```

### Info

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-info" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-info-50" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-info-100" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-info-200" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-info-300" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-info-400" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-info-500" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-info-600" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-info-700" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-info-800" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="fill-info-900" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="fill-info" ... />
<circle class="fill-info-50" ... />
<circle class="fill-info-100" ... />
<circle class="fill-info-200" ... />
<circle class="fill-info-300" ... />
<circle class="fill-info-400" ... />
<circle class="fill-info-500" ... />
<circle class="fill-info-600" ... />
<circle class="fill-info-700" ... />
<circle class="fill-info-800" ... />
<circle class="fill-info-900" ... />
```
