---
url: /docs/foundations/data-visualization/tokens/text.md
---
# Text (dataviz)

The dataviz `text` colors are used for text representing data. For design guidelines, see [Color Guidelines > Text & Icons](/foundations/data-visualization/color/text-icons/).

::: details Visual overview
![Preview of Primary, Secondary, Category and Evaluation colors for light mode and dark mode](/foundations/dataviz/token-overview-text.png)
:::

## Naming pattern for text colors

| Method | Pattern | Example |
| ----- | ------ | ------ |
| Figma | `../Text/[semantic-color])` | `../Text/Primary` |
| CSS variable | `var(--w-dv-s-color-text-[semantic-color])` | `var(--w-dv-s-color-text-primary)` |
| HTML class | `dv-s-text-[semantic-color]` | `dv-s-text-primary` |
| SVG fill class | `dv-s-fill-text-[semantic-color]` | `dv-s-fill-text-primary` |
| SVG stroke class\* | `dv-s-stroke-text-[semantic-color]` | `dv-s-stroke-text-primary` |
| iOS | `text[semantic-color]` | `textPrimary` |

## Primary Text (dataviz)

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Primary` |  | `--w-dv-s-color-text-primary` | `dv-s-text-primary` | `dv-s-fill-text-primary` | `dv-s-stroke-text-primary` |
| `Text/Primary-highlight` |  | `--w-dv-s-color-text-primary-highlight` | `dv-s-text-primary-highlight` | `dv-s-fill-text-primary-highlight` | `dv-s-stroke-text-primary-highlight` |

## Secondary Text (dataviz)

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Secondary` |  | `--w-dv-s-color-text-secondary` | `dv-s-text-secondary` | `dv-s-fill-text-secondary` | `dv-s-stroke-text-secondary` |
| `Text/Secondary-highlight` |  | `--w-dv-s-color-text-secondary-highlight` | `dv-s-text-secondary-highlight` | `dv-s-fill-text-secondary-highlight` | `dv-s-stroke-text-secondary-highlight` |

## Category Text (dataviz)

### Category1: Indigo

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Category1` |  | `--w-dv-s-color-text-category1` | `dv-s-text-category1` | `dv-s-fill-text-category1` | `dv-s-stroke-text-category1` |
| `Text/Category1-highlight` |  | `--w-dv-s-color-text-category1-highlight` | `dv-s-text-category1-highlight` | `dv-s-fill-text-category1-highlight` | `dv-s-stroke-text-category1-highlight` |

### Category2: Yellow

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Category2` |  | `--w-dv-s-color-text-category2` | `dv-s-text-category2` | `dv-s-fill-text-category2` | `dv-s-stroke-text-category2` |
| `Text/Category2-highlight` |  | `--w-dv-s-color-text-category2-highlight` | `dv-s-text-category2-highlight` | `dv-s-fill-text-category2-highlight` | `dv-s-stroke-text-category2-highlight` |

### Category3: Pink

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Category3` |  | `--w-dv-s-color-text-category3` | `dv-s-text-category3` | `dv-s-fill-text-category3` | `dv-s-stroke-text-category3` |
| `Text/Category3-highlight` |  | `--w-dv-s-color-text-category3-highlight` | `dv-s-text-category3-highlight` | `dv-s-fill-text-category3-highlight` | `dv-s-stroke-text-category3-highlight` |

### Category4: Green

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Category4` |  | `--w-dv-s-color-text-category4` | `dv-s-text-category4` | `dv-s-fill-text-category4` | `dv-s-stroke-text-category4` |
| `Text/Category4-highlight` |  | `--w-dv-s-color-text-category4-highlight` | `dv-s-text-category4-highlight` | `dv-s-fill-text-category4-highlight` | `dv-s-stroke-text-category4-highlight` |

### Category5: Orange

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Category5` |  | `--w-dv-s-color-text-category5` | `dv-s-text-category5` | `dv-s-fill-text-category5` | `dv-s-stroke-text-category5` |
| `Text/Category5-highlight` |  | `--w-dv-s-color-text-category5-highlight` | `dv-s-text-category5-highlight` | `dv-s-fill-text-category5-highlight` | `dv-s-stroke-text-category5-highlight` |

### Category6: Teal

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Category6` |  | `--w-dv-s-color-text-category6` | `dv-s-text-category6` | `dv-s-fill-text-category6` | `dv-s-stroke-text-category6` |
| `Text/Category6-highlight` |  | `--w-dv-s-color-text-category6-highlight` | `dv-s-text-category6-highlight` | `dv-s-fill-text-category6-highlight` | `dv-s-stroke-text-category6-highlight` |

### Category7: Blue

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Category7` |  | `--w-dv-s-color-text-category7` | `dv-s-text-category7` | `dv-s-fill-text-category7` | `dv-s-stroke-text-category7` |
| `Text/Category7-highlight` |  | `--w-dv-s-color-text-category7-highlight` | `dv-s-text-category7-highlight` | `dv-s-fill-text-category7-highlight` | `dv-s-stroke-text-category7-highlight` |

### Category8: Gray

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Category8` |  | `--w-dv-s-color-text-category8` | `dv-s-text-category8` | `dv-s-fill-text-category8` | `dv-s-stroke-text-category8` |
| `Text/Category8-highlight` |  | `--w-dv-s-color-text-category8-highlight` | `dv-s-text-category8-highlight` | `dv-s-fill-text-category8-highlight` | `dv-s-stroke-text-category8-highlight` |

## Evaluation Text (dataviz)

### Negative: Red

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Negative` |  | `--w-dv-s-color-text-negative` | `dv-s-text-negative` | `dv-s-fill-text-negative` | `dv-s-stroke-text-negative` |
| `Text/Negative-highlight` |  | `--w-dv-s-color-text-negative-highlight` | `dv-s-text-negative-highlight` | `dv-s-fill-text-negative-highlight` | `dv-s-stroke-text-negative-highlight` |

### Neutral: Gray

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Neutral` |  | `--w-dv-s-color-text-neutral` | `dv-s-text-neutral` | `dv-s-fill-text-neutral` | `dv-s-stroke-text-neutral` |
| `Text/Neutral-highlight` |  | `--w-dv-s-color-text-neutral-highlight` | `dv-s-text-neutral-highlight` | `dv-s-fill-text-neutral-highlight` | `dv-s-stroke-text-neutral-highlight` |

### Positive: Green

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Positive` |  | `--w-dv-s-color-text-positive` | `dv-s-text-positive` | `dv-s-fill-text-positive` | `dv-s-stroke-text-positive` |
| `Text/Positive-highlight` |  | `--w-dv-s-color-text-positive-highlight` | `dv-s-text-positive-highlight` | `dv-s-fill-text-positive-highlight` | `dv-s-stroke-text-positive-highlight` |

### Warning: Yellow

| Figma | Color | CSS variable | HTML class | SVG Fill class| SVG Stroke class |
| ----- | :----: | ------------ | ---------- | ------------- | ---------------- |
| `Text/Warning` |  | `--w-dv-s-color-text-warning` | `dv-s-text-warning` | `dv-s-fill-text-warning` | `dv-s-stroke-text-warning` |
| `Text/Warning-highlight` |  | `--w-dv-s-color-text-warning-highlight` | `dv-s-text-warning-highlight` | `dv-s-fill-text-warning-highlight` | `dv-s-stroke-text-warning-highlight` |