> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Styles

> The `styles` section of a Nextedy POWERSHEET sheet configuration defines named style definitions that control the visual appearance of cells and headers.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## Style Definition

| Property                        | Type          | Default | Description                                                                                                         |
| ------------------------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| `styles`                        | object        | `{}`    | Top-level section containing named style definitions. Each key is a style name referenced by formatters or headers. |
| `styles.<name>.backgroundColor` | string        | None    | Background color using a color token name (e.g., `grey100`, `red200`) or a predefined style name                    |
| `styles.<name>.color`           | string        | None    | Text color using a color token name (e.g., `grey700`, `purple700`)                                                  |
| `styles.<name>.fontWeight`      | number/string | None    | Font weight value (e.g., `600` for semi-bold)                                                                       |
| `styles.<name>.textDecoration`  | string        | None    | Text decoration (e.g., `line-through`)                                                                              |

## Predefined Styles

Powersheet includes 20 built-in styles available without any custom definition. Custom styles defined in the `styles` section are merged on top of these defaults.

### Status Styles

| Style Name    | Text Color | Background Color | Other                          |
| ------------- | ---------- | ---------------- | ------------------------------ |
| `none`        | none       | none             |                                |
| `boldTitle`   |            |                  | `fontWeight: 600`              |
| `unsupported` | `grey800`  | `grey200`        | `textDecoration: line-through` |
| `readOnly`    |            |                  | Read-only cell indicator       |

### Neutral Styles

| Style Name | Text Color | Background Color |
| ---------- | ---------- | ---------------- |
| `darkgrey` | `grey700`  | `grey200`        |
| `grey`     | `grey700`  | `grey100`        |

### Color Styles

| Style Name    | Text Color  | Background Color |
| ------------- | ----------- | ---------------- |
| `darkred`     | `red700`    | `red200`         |
| `red`         | `red700`    | `red100`         |
| `darkorange`  | `orange700` | `orange200`      |
| `orange`      | `orange700` | `orange100`      |
| `darkgreen`   | `green700`  | `green200`       |
| `green`       | `green700`  | `green100`       |
| `lightgreen`  | `green700`  | `primaryalt100`  |
| `darkblue`    | `blue700`   | `blue200`        |
| `blue`        | `blue700`   | `blue100`        |
| `lightblue`   | `blue700`   | `teal100`        |
| `darkteal`    | `teal700`   | `teal200`        |
| `teal`        | `teal700`   | `teal100`        |
| `darkpurple`  | `purple700` | `purple200`      |
| `purple`      | `purple700` | `purple100`      |
| `lightpurple` | `purple700` | `primary100`     |

## Style Resolution Flow

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/-WiVljKlDztH36bB/powersheet/diagrams/reference/sheet-config/styles/diagram-1.svg?fit=max&auto=format&n=-WiVljKlDztH36bB&q=85&s=dfd0168e3b0a8a492d840ad470c64554" alt="diagram" style={{ width: "520px", maxWidth: "100%" }} width="520" height="200" data-path="powersheet/diagrams/reference/sheet-config/styles/diagram-1.svg" />
</Frame>

## Defining Custom Styles

```yaml theme={null}
styles:
  readOnlyStyle:
    backgroundColor: 'grey100'
  warningHeader:
    backgroundColor: 'orange200'
    color: 'orange700'
  criticalCell:
    backgroundColor: 'red100'
    color: 'red700'
    fontWeight: 600
```

## Using Styles with Formatters

Styles are applied to cells via the `formatters` section. A formatter references a style name and applies it when an expression evaluates to `true`.

```yaml theme={null}
formatters:
  readonly:
    - expression: 'true'
      style: readOnlyStyle

styles:
  readOnlyStyle:
    backgroundColor: 'grey100'

columns:
  outlineNumber:
    title: "#"
    width: 80
    formatter: readonly
    isReadOnly: true
```

## Using Styles with Headers

Styles are applied to column headers via the `header.style` property on a column, or to column group headers via `groupStyle` and `headerStyle` on a column group.

```yaml theme={null}
columns:
  description:
    title: Foreseeable Sequence of Events
    width: 140
    header:
      style: lightpurple

columnGroups:
  epic:
    groupName: Epics
    groupStyle: darkgreen
    headerStyle: green
    collapseTo: title
```

See [Column Groups](/powersheet/reference/sheet-config/column-groups) for full group styling reference.

## Color Token Reference

Styles use **color tokens** as shorthand for hex color values. Each color family has variants from `100` (lightest) to `700` (darkest).

### Purple

| Token       | Value     |
| ----------- | --------- |
| `purple100` | `#eae6ff` |
| `purple200` | `#c0b6f2` |
| `purple300` | `#998dd9` |
| `purple400` | `#8777d9` |
| `purple500` | `#6554c0` |
| `purple600` | `#5243aa` |
| `purple700` | `#403294` |

### Blue

| Token     | Value     |
| --------- | --------- |
| `blue100` | `#deebff` |
| `blue200` | `#b3d4ff` |
| `blue300` | `#4c9aff` |
| `blue400` | `#2684ff` |
| `blue500` | `#0065ff` |
| `blue600` | `#0052cc` |
| `blue700` | `#064198` |

### Teal

| Token     | Value     |
| --------- | --------- |
| `teal100` | `#e6fcff` |
| `teal200` | `#c1f7ff` |
| `teal300` | `#79e2f2` |
| `teal400` | `#00c7e6` |
| `teal500` | `#00b8d9` |
| `teal600` | `#00a3bf` |
| `teal700` | `#006686` |

### Green

| Token      | Value     |
| ---------- | --------- |
| `green100` | `#edfae1` |
| `green200` | `#c9eea4` |
| `green300` | `#abe86f` |
| `green400` | `#8dce4c` |
| `green500` | `#6aa82b` |
| `green600` | `#3d7900` |
| `green700` | `#2e5b00` |

### Orange

| Token       | Value     |
| ----------- | --------- |
| `orange100` | `#fffae6` |
| `orange200` | `#ffeeb4` |
| `orange300` | `#ffe380` |
| `orange400` | `#ffc400` |
| `orange500` | `#ffab00` |
| `orange600` | `#ff991f` |
| `orange700` | `#a94700` |

### Red

| Token    | Value     |
| -------- | --------- |
| `red100` | `#ffebe6` |
| `red200` | `#ffbdad` |
| `red300` | `#ff8f73` |
| `red400` | `#ff7452` |
| `red500` | `#ff5630` |
| `red600` | `#de350b` |
| `red700` | `#970900` |

### Grey

| Token     | Value     |
| --------- | --------- |
| `grey100` | `#f9f9f9` |
| `grey150` | `#f1f1f1` |
| `grey200` | `#e8e8e8` |
| `grey300` | `#e0e0e0` |
| `grey400` | `#ccd0db` |
| `grey500` | `#838dad` |
| `grey600` | `#666e89` |
| `grey650` | `#666e89` |
| `grey700` | `#162858` |

<Tip title="Style Naming Convention">
  Use descriptive style names that reflect purpose rather than appearance: `readOnlyStyle`, `criticalCell`, `warningHeader` rather than `greyBackground` or `redText`. This makes configurations easier to maintain when color schemes change.
</Tip>

## Complete YAML Example

```yaml theme={null}
columns:
  outlineNumber:
    title: "#"
    width: 80
    formatter: readonly
    isReadOnly: true
  title:
    title: Title
    width: 200
    hasFocus: true
    columnGroup: requirements
  description:
    title: Description
    width: 140
    header:
      style: lightpurple

columnGroups:
  requirements:
    groupName: Requirements
    groupStyle: darkblue
    headerStyle: blue
    collapseTo: title

formatters:
  readonly:
    - expression: 'true'
      style: readOnlyStyle
  criticalHighlight:
    - expression: 'true'
      style: criticalCell

styles:
  readOnlyStyle:
    backgroundColor: 'grey100'
  criticalCell:
    backgroundColor: 'red100'
    color: 'red700'
    fontWeight: 600
```

## Applying Styles to Headers

Header styles are applied through the `header.style` property on individual columns and the `groupStyle` / `headerStyle` properties on [column groups](/powersheet/reference/sheet-config/column-groups).

### Column Header Style

| Property                     | Type   | Default | Description                                                                                                                                      |
| ---------------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `columns.<key>.header`       | object | None    | Header styling configuration for the column                                                                                                      |
| `columns.<key>.header.style` | string | None    | Name of a predefined or custom style to apply to the column header. Must reference a style name from the `styles` section or a predefined style. |

```yaml theme={null}
columns:
  description:
    title: Foreseeable Sequence of Events
    width: 140
    header:
      style: lightpurple
```

### Reusing Header Styles with YAML Anchors

YAML anchors reduce repetition when multiple columns share the same header style:

```yaml theme={null}
columns:
  systemRequirements.systemRequirement.title:
    title: System Requirement
    header: &blueHeader
      style: blue
  systemRequirements.systemRequirement.severity:
    title: Severity
    header: *blueHeader
```

### Column Group Header Style

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/KGc-UcQNrDeK-NiS/powersheet/images/48001273155/1.png?fit=max&auto=format&n=KGc-UcQNrDeK-NiS&q=85&s=c8f47940a41dee774514d128a5d0ad80" alt="How to Apply a Style to a Column Header Group (figure 1)" style={{ maxWidth: "720px", width: "100%" }} width="1178" height="174" data-path="powersheet/images/48001273155/1.png" />
</Frame>

Column groups apply styles to the group header bar and optionally to all column headers within the group.

| Property                        | Type   | Default | Description                                                                                                                                       |
| ------------------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `columnGroups.<id>.groupStyle`  | string | None    | Style applied to the column group header background. References a predefined or custom style name. If not specified, white is used.               |
| `columnGroups.<id>.headerStyle` | string | None    | Style applied to all column headers within the group. Can be overridden by `header.style` on individual columns. If not specified, white is used. |

```yaml theme={null}
columnGroups:
  epic:
    groupName: Epics
    groupStyle: darkgreen
    headerStyle: green
    collapseTo: title
```

### Header Style Resolution

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/-WiVljKlDztH36bB/powersheet/diagrams/reference/sheet-config/styles/diagram-2.svg?fit=max&auto=format&n=-WiVljKlDztH36bB&q=85&s=30c1188036af48af6e77ecbe2e93092a" alt="diagram" style={{ width: "520px", maxWidth: "100%" }} width="560" height="170" data-path="powersheet/diagrams/reference/sheet-config/styles/diagram-2.svg" />
</Frame>

**Priority order:**

1. `columns.<key>.header.style` -- applied if defined (highest priority)
2. `columnGroups.<id>.headerStyle` -- applied if column belongs to a group and no `header.style` is set
3. Default white -- applied if neither is defined

### Custom Header Styles

Define custom styles in the `styles` section and reference them from header configurations:

```yaml theme={null}
styles:
  warningHeader:
    backgroundColor: 'orange200'
    color: 'orange700'

columns:
  outlineNumber:
    title: "#"
    width: 80
    header:
      style: warningHeader
```

## Related Pages

* [Formatters](/powersheet/reference/sheet-config/formatters) -- conditional styling rules that reference styles
* [Column Groups](/powersheet/reference/sheet-config/column-groups) -- `groupStyle` and `headerStyle` properties
* [Columns](/powersheet/reference/sheet-config/columns) -- `formatter` and `header` column settings

***

<LastReviewed date="2026-07-02" />