---
url: /docs/foundations/data-visualization/tokens/line.md
---
# Line (dataviz)

The dataviz `line` colors are used for lines and points. For design guidelines, see [Color Guidelines > Lines & Points](/foundations/data-visualization/color/lines-points/)

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

## Naming pattern for line colors

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

## Primary Line (dataviz)

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

## Secondary Line (dataviz)

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

## Category Line (dataviz)

### Category1: Indigo

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

### Category2: Yellow

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

### Category3: Pink

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

### Category4: Green

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

### Category5: Orange

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

### Category6: Teal

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

### Category7: Blue

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

### Category8: Gray

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

## Evaluation Line (dataviz)

### Negative: Red

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

### Neutral: Gray

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

### Positive: Green

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

### Warning: Yellow

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