This rune is part of @refrakt-md/design. Install with npm install @refrakt-md/design and add "@refrakt-md/design" to the plugins array in your refrakt.config.json.

Palette

Displays a grid of color swatches. List items are parsed as name: #value pairs. Use ## headings to create groups. Comma-separated values render as a neutral scale strip.

Basic usage

A simple color palette grid.

{% palette title="Brand Colors" %}
- Blue: #2563EB
- Indigo: #4F46E5
- Purple: #7C3AED
- Pink: #EC4899
- Red: #EF4444
- Orange: #F97316
{% /palette %}

<section data-rune="palette" data-rune-fields="{&quot;title&quot;:&quot;Brand Colors&quot;,&quot;showContrast&quot;:&quot;false&quot;,&quot;showA11y&quot;:&quot;false&quot;,&quot;columns&quot;:&quot;&quot;}">
  <h3 data-name="title">Brand Colors</h3>
  <div data-name="group">
    <div data-name="grid" style="--rf-palette-cols: 3">
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #2563EB"></div>
        <span data-name="swatch-name">Blue</span>
        <span data-name="swatch-value">#2563EB</span>
      </div>
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #4F46E5"></div>
        <span data-name="swatch-name">Indigo</span>
        <span data-name="swatch-value">#4F46E5</span>
      </div>
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #7C3AED"></div>
        <span data-name="swatch-name">Purple</span>
        <span data-name="swatch-value">#7C3AED</span>
      </div>
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #EC4899"></div>
        <span data-name="swatch-name">Pink</span>
        <span data-name="swatch-value">#EC4899</span>
      </div>
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #EF4444"></div>
        <span data-name="swatch-name">Red</span>
        <span data-name="swatch-value">#EF4444</span>
      </div>
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #F97316"></div>
        <span data-name="swatch-name">Orange</span>
        <span data-name="swatch-value">#F97316</span>
      </div>
    </div>
  </div>
</section>

Brand Colors

Blue#2563EB

Indigo#4F46E5

Purple#7C3AED

Pink#EC4899

Red#EF4444

Orange#F97316

<section class="rf-palette rf-palette--Brand Colors rf-palette--false rf-palette--false" data-title="Brand Colors" data-show-contrast="false" data-show-a11y="false" data-columns="" data-elevation="flat" data-rune="palette" data-density="full">
  <h3 data-name="title" class="rf-palette__title" data-section="title">Brand Colors</h3>
  <div data-name="group" class="rf-palette__group">
    <div data-name="grid" style="--rf-palette-cols: 3" class="rf-palette__grid">
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #2563EB" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Blue</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#2563EB</span>
      </div>
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #4F46E5" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Indigo</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#4F46E5</span>
      </div>
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #7C3AED" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Purple</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#7C3AED</span>
      </div>
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #EC4899" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Pink</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#EC4899</span>
      </div>
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #EF4444" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Red</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#EF4444</span>
      </div>
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #F97316" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Orange</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#F97316</span>
      </div>
    </div>
  </div>
</section>

Grouped palette

Use ## headings to organize colors into groups.

{% palette title="Design System" %}
## Primary
- Blue: #2563EB
- Indigo: #4F46E5

## Semantic
- Success: #10B981
- Warning: #F59E0B
- Danger: #EF4444
{% /palette %}

<section data-rune="palette" data-rune-fields="{&quot;title&quot;:&quot;Design System&quot;,&quot;showContrast&quot;:&quot;false&quot;,&quot;showA11y&quot;:&quot;false&quot;,&quot;columns&quot;:&quot;&quot;}">
  <h3 data-name="title">Design System</h3>
  <div data-name="group">
    <h4 data-name="group-title">Primary</h4>
    <div data-name="grid" style="--rf-palette-cols: 2">
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #2563EB"></div>
        <span data-name="swatch-name">Blue</span>
        <span data-name="swatch-value">#2563EB</span>
      </div>
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #4F46E5"></div>
        <span data-name="swatch-name">Indigo</span>
        <span data-name="swatch-value">#4F46E5</span>
      </div>
    </div>
  </div>
  <div data-name="group">
    <h4 data-name="group-title">Semantic</h4>
    <div data-name="grid" style="--rf-palette-cols: 3">
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #10B981"></div>
        <span data-name="swatch-name">Success</span>
        <span data-name="swatch-value">#10B981</span>
      </div>
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #F59E0B"></div>
        <span data-name="swatch-name">Warning</span>
        <span data-name="swatch-value">#F59E0B</span>
      </div>
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #EF4444"></div>
        <span data-name="swatch-name">Danger</span>
        <span data-name="swatch-value">#EF4444</span>
      </div>
    </div>
  </div>
</section>

Design System

Primary

Blue#2563EB

Indigo#4F46E5

Semantic

Success#10B981

Warning#F59E0B

Danger#EF4444

<section class="rf-palette rf-palette--Design System rf-palette--false rf-palette--false" data-title="Design System" data-show-contrast="false" data-show-a11y="false" data-columns="" data-elevation="flat" data-rune="palette" data-density="full">
  <h3 data-name="title" class="rf-palette__title" data-section="title">Design System</h3>
  <div data-name="group" class="rf-palette__group">
    <h4 data-name="group-title" class="rf-palette__group-title">Primary</h4>
    <div data-name="grid" style="--rf-palette-cols: 2" class="rf-palette__grid">
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #2563EB" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Blue</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#2563EB</span>
      </div>
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #4F46E5" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Indigo</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#4F46E5</span>
      </div>
    </div>
  </div>
  <div data-name="group" class="rf-palette__group">
    <h4 data-name="group-title" class="rf-palette__group-title">Semantic</h4>
    <div data-name="grid" style="--rf-palette-cols: 3" class="rf-palette__grid">
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #10B981" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Success</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#10B981</span>
      </div>
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #F59E0B" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Warning</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#F59E0B</span>
      </div>
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #EF4444" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Danger</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#EF4444</span>
      </div>
    </div>
  </div>
</section>

Neutral scale

Comma-separated values render as a horizontal gradient strip.

{% palette title="Gray Scale" %}
- Gray: #F9FAFB, #F3F4F6, #E5E7EB, #D1D5DB, #9CA3AF, #6B7280, #4B5563, #374151, #1F2937, #111827
{% /palette %}

<section data-rune="palette" data-rune-fields="{&quot;title&quot;:&quot;Gray Scale&quot;,&quot;showContrast&quot;:&quot;false&quot;,&quot;showA11y&quot;:&quot;false&quot;,&quot;columns&quot;:&quot;&quot;}">
  <h3 data-name="title">Gray Scale</h3>
  <div data-name="group">
    <div data-name="scale">
      <div data-name="scale-stop" style="background-color: #F9FAFB; color: #000">#F9FAFB</div>
      <div data-name="scale-stop" style="background-color: #F3F4F6; color: #000">#F3F4F6</div>
      <div data-name="scale-stop" style="background-color: #E5E7EB; color: #000">#E5E7EB</div>
      <div data-name="scale-stop" style="background-color: #D1D5DB; color: #000">#D1D5DB</div>
      <div data-name="scale-stop" style="background-color: #9CA3AF; color: #000">#9CA3AF</div>
      <div data-name="scale-stop" style="background-color: #6B7280; color: #fff">#6B7280</div>
      <div data-name="scale-stop" style="background-color: #4B5563; color: #fff">#4B5563</div>
      <div data-name="scale-stop" style="background-color: #374151; color: #fff">#374151</div>
      <div data-name="scale-stop" style="background-color: #1F2937; color: #fff">#1F2937</div>
      <div data-name="scale-stop" style="background-color: #111827; color: #fff">#111827</div>
    </div>
    <span data-name="swatch-name">Gray</span>
  </div>
</section>

Gray Scale

#F9FAFB

#F3F4F6

#E5E7EB

#D1D5DB

#9CA3AF

#6B7280

#4B5563

#374151

#1F2937

#111827

Gray

<section class="rf-palette rf-palette--Gray Scale rf-palette--false rf-palette--false" data-title="Gray Scale" data-show-contrast="false" data-show-a11y="false" data-columns="" data-elevation="flat" data-rune="palette" data-density="full">
  <h3 data-name="title" class="rf-palette__title" data-section="title">Gray Scale</h3>
  <div data-name="group" class="rf-palette__group">
    <div data-name="scale" class="rf-palette__scale">
      <div data-name="scale-stop" style="background-color: #F9FAFB; color: #000" class="rf-palette__scale-stop">#F9FAFB</div>
      <div data-name="scale-stop" style="background-color: #F3F4F6; color: #000" class="rf-palette__scale-stop">#F3F4F6</div>
      <div data-name="scale-stop" style="background-color: #E5E7EB; color: #000" class="rf-palette__scale-stop">#E5E7EB</div>
      <div data-name="scale-stop" style="background-color: #D1D5DB; color: #000" class="rf-palette__scale-stop">#D1D5DB</div>
      <div data-name="scale-stop" style="background-color: #9CA3AF; color: #000" class="rf-palette__scale-stop">#9CA3AF</div>
      <div data-name="scale-stop" style="background-color: #6B7280; color: #fff" class="rf-palette__scale-stop">#6B7280</div>
      <div data-name="scale-stop" style="background-color: #4B5563; color: #fff" class="rf-palette__scale-stop">#4B5563</div>
      <div data-name="scale-stop" style="background-color: #374151; color: #fff" class="rf-palette__scale-stop">#374151</div>
      <div data-name="scale-stop" style="background-color: #1F2937; color: #fff" class="rf-palette__scale-stop">#1F2937</div>
      <div data-name="scale-stop" style="background-color: #111827; color: #fff" class="rf-palette__scale-stop">#111827</div>
    </div>
    <span data-name="swatch-name" class="rf-palette__swatch-name">Gray</span>
  </div>
</section>

Contrast and accessibility

Enable showContrast and showA11y to display WCAG contrast ratios and AA/AAA compliance.

{% palette title="Accessible Colors" showContrast="true" showA11y="true" %}
- Navy: #1E3A5F
- Teal: #0D9488
- Coral: #FB7185
- Amber: #F59E0B
{% /palette %}

<section data-rune="palette" data-rune-fields="{&quot;title&quot;:&quot;Accessible Colors&quot;,&quot;showContrast&quot;:&quot;true&quot;,&quot;showA11y&quot;:&quot;true&quot;,&quot;columns&quot;:&quot;&quot;}">
  <h3 data-name="title">Accessible Colors</h3>
  <div data-name="group">
    <div data-name="grid" style="--rf-palette-cols: 3">
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #1E3A5F"></div>
        <span data-name="swatch-name">Navy</span>
        <span data-name="swatch-value">#1E3A5F</span>
        <span data-name="swatch-contrast">W: 11.5 · B: 1.8</span>
        <span data-name="swatch-a11y">
          <span data-name="swatch-a11y--pass">AA ✓</span>
          <span data-name="swatch-a11y--pass">AAA ✓</span>
        </span>
      </div>
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #0D9488"></div>
        <span data-name="swatch-name">Teal</span>
        <span data-name="swatch-value">#0D9488</span>
        <span data-name="swatch-contrast">W: 3.7 · B: 5.6</span>
        <span data-name="swatch-a11y">
          <span data-name="swatch-a11y--fail">AA ✗</span>
          <span data-name="swatch-a11y--fail">AAA ✗</span>
        </span>
      </div>
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #FB7185"></div>
        <span data-name="swatch-name">Coral</span>
        <span data-name="swatch-value">#FB7185</span>
        <span data-name="swatch-contrast">W: 2.7 · B: 7.8</span>
        <span data-name="swatch-a11y">
          <span data-name="swatch-a11y--fail">AA ✗</span>
          <span data-name="swatch-a11y--fail">AAA ✗</span>
        </span>
      </div>
      <div data-name="swatch">
        <div data-name="swatch-color" style="background-color: #F59E0B"></div>
        <span data-name="swatch-name">Amber</span>
        <span data-name="swatch-value">#F59E0B</span>
        <span data-name="swatch-contrast">W: 2.1 · B: 9.8</span>
        <span data-name="swatch-a11y">
          <span data-name="swatch-a11y--fail">AA ✗</span>
          <span data-name="swatch-a11y--fail">AAA ✗</span>
        </span>
      </div>
    </div>
  </div>
</section>

Accessible Colors

Navy#1E3A5FW: 11.5 · B: 1.8

Teal#0D9488W: 3.7 · B: 5.6

Coral#FB7185W: 2.7 · B: 7.8

Amber#F59E0BW: 2.1 · B: 9.8

<section class="rf-palette rf-palette--Accessible Colors rf-palette--true rf-palette--true" data-title="Accessible Colors" data-show-contrast="true" data-show-a11y="true" data-columns="" data-elevation="flat" data-rune="palette" data-density="full">
  <h3 data-name="title" class="rf-palette__title" data-section="title">Accessible Colors</h3>
  <div data-name="group" class="rf-palette__group">
    <div data-name="grid" style="--rf-palette-cols: 3" class="rf-palette__grid">
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #1E3A5F" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Navy</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#1E3A5F</span>
        <span data-name="swatch-contrast" class="rf-palette__swatch-contrast">W: 11.5 · B: 1.8</span>
        <span data-name="swatch-a11y" class="rf-palette__swatch-a11y">
          <span data-name="swatch-a11y--pass" class="rf-palette__swatch-a11y--pass">AA ✓</span>
          <span data-name="swatch-a11y--pass" class="rf-palette__swatch-a11y--pass">AAA ✓</span>
        </span>
      </div>
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #0D9488" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Teal</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#0D9488</span>
        <span data-name="swatch-contrast" class="rf-palette__swatch-contrast">W: 3.7 · B: 5.6</span>
        <span data-name="swatch-a11y" class="rf-palette__swatch-a11y">
          <span data-name="swatch-a11y--fail" class="rf-palette__swatch-a11y--fail">AA ✗</span>
          <span data-name="swatch-a11y--fail" class="rf-palette__swatch-a11y--fail">AAA ✗</span>
        </span>
      </div>
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #FB7185" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Coral</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#FB7185</span>
        <span data-name="swatch-contrast" class="rf-palette__swatch-contrast">W: 2.7 · B: 7.8</span>
        <span data-name="swatch-a11y" class="rf-palette__swatch-a11y">
          <span data-name="swatch-a11y--fail" class="rf-palette__swatch-a11y--fail">AA ✗</span>
          <span data-name="swatch-a11y--fail" class="rf-palette__swatch-a11y--fail">AAA ✗</span>
        </span>
      </div>
      <div data-name="swatch" class="rf-palette__swatch">
        <div data-name="swatch-color" style="background-color: #F59E0B" class="rf-palette__swatch-color"></div>
        <span data-name="swatch-name" class="rf-palette__swatch-name">Amber</span>
        <span data-name="swatch-value" class="rf-palette__swatch-value">#F59E0B</span>
        <span data-name="swatch-contrast" class="rf-palette__swatch-contrast">W: 2.1 · B: 9.8</span>
        <span data-name="swatch-a11y" class="rf-palette__swatch-a11y">
          <span data-name="swatch-a11y--fail" class="rf-palette__swatch-a11y--fail">AA ✗</span>
          <span data-name="swatch-a11y--fail" class="rf-palette__swatch-a11y--fail">AAA ✗</span>
        </span>
      </div>
    </div>
  </div>
</section>

Attributes

Attribute	Type	Required	Description
`title`	`string`	—	Heading displayed above the palette section.
`showContrast`	`boolean`	—	Enable/disable WCAG contrast ratio values against white and black.
`showA11y`	`boolean`	—	Enable/disable AA/AAA accessibility compliance badges per swatch.
`columns`	`number`	—	Number of swatch columns in the grid; auto-calculated from count when omitted.

Universal attributes

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

Attribute	Type	Required	Description
`bg`	`string`	—	Background preset applied to this block
`bg-from`	`string`	—	Gradient start colour — a semantic token name (→ var(--rf-color-*))
`bg-gradient`	`"to-t" \| "to-b" \| "to-l" \| "to-r" \| "to-tr" \| "to-br" \| "to-bl" \| "to-tl"`	—	Gradient direction (bounded named set)
`bg-gradient-type`	`"linear" \| "radial" \| "conic"`	—	Gradient type
`bg-to`	`string`	—	Gradient end colour — a semantic token name
`bg-via`	`string`	—	Optional middle gradient stop — a semantic token name
`scrim`	`"top" \| "bottom" \| "left" \| "right" \| "none"`	—	Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
`scrim-blur`	`"none" \| "sm" \| "md" \| "lg"`	—	Frost scrim blur amount
`scrim-strength`	`"sm" \| "md" \| "lg"`	—	Gradient scrim strength
`scrim-tone`	`"dark" \| "light"`	—	Whether the scrim darkens (for light text) or lightens (for dark text)
`scrim-type`	`"gradient" \| "frost"`	—	Scrim treatment: gradient (default) or frost (backdrop blur)

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`elevation`	`"sunken" \| "flush" \| "flat" \| "raised" \| "floating" \| "overlay" \| "none" \| "sm" \| "md" \| "lg"`	—	Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases

Internal padding override.

Attribute	Type	Required	Description
`inset`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Inner padding of this block

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

Attribute	Type	Required	Description
`reveal`	`"none" \| "fade" \| "slide" \| "scale" \| "blur"`	—	Scroll-reveal entrance character (none\|fade\|slide\|scale\|blur); the theme owns the choreography
`stagger`	`boolean`	—	Cascade this block's items in as it reveals (no-op on single-child runes)

Header emphasis (SPEC-107). Scales a rune's page-section header; the skin maps it to a type register by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`prominence`	`"quiet" \| "normal" \| "prominent" \| "display"`	—	Section-header emphasis (only on page-section-header family runes)

Block-level rhythm override.

Attribute	Type	Required	Description
`spacing`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Vertical spacing above and below this block

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

Attribute	Type	Required	Description
`substrate`	`"dots" \| "grid" \| "lines" \| "cross" \| "checker" \| "none"`	—	Generated surface pattern
`substrate-fill`	`"inherit" \| "inset"`	—	Surface fill the pattern sits on (full colour stays with tint)
`substrate-opacity`	`"sm" \| "md" \| "lg"`	—	Pattern ink strength
`substrate-size`	`"sm" \| "md" \| "lg"`	—	Pattern cell size
`substrate-target`	`"self" \| "media"`	—	Which surface the pattern fills (overrides the rune/theme default)

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

Attribute	Type	Required	Description
`tint`	`string`	—	Color tint preset applied to this block
`tint-mode`	`"auto" \| "dark" \| "light"`	—	Whether the tint adapts to auto, dark, or light mode

The track a block rune occupies.

Attribute	Type	Required	Description
`width`	`"compact" \| "narrow" \| "content" \| "wide" \| "full"`	—	Maximum width constraint for this block

Not available	Why
dropcap, reading	this rune declares no prose body
frame	this rune declares neither a `frameTarget` nor a media section

Docs

Runes

Themes

Extend

Project

Essentials

Content

Registry

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan