This rune is part of @refrakt-md/design. Install with npm install @refrakt-md/design and add "@refrakt-md/design" to the packages 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">
  <meta content="Brand Colors" data-field="title">
  <meta content="false" data-field="show-contrast">
  <meta content="false" data-field="show-a11y">
  <meta content="" data-field="columns">
  <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-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">
  <meta content="Design System" data-field="title">
  <meta content="false" data-field="show-contrast">
  <meta content="false" data-field="show-a11y">
  <meta content="" data-field="columns">
  <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-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">
  <meta content="Gray Scale" data-field="title">
  <meta content="false" data-field="show-contrast">
  <meta content="false" data-field="show-a11y">
  <meta content="" data-field="columns">
  <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-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">
  <meta content="Accessible Colors" data-field="title">
  <meta content="true" data-field="show-contrast">
  <meta content="true" data-field="show-a11y">
  <meta content="" data-field="columns">
  <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-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	Default	Description
`title`	`string`	—	Palette heading
`showContrast`	`boolean`	`false`	Show contrast ratios against white and black
`showA11y`	`boolean`	`false`	Show WCAG AA/AAA pass/fail badges
`columns`	`number`	auto	Number of grid columns (auto-detected if omitted)

Common attributes

All block runes share these attributes for layout and theming.

Attribute	Type	Default	Description
`width`	`string`	`content`	Page grid width: `content`, `wide`, or `full`
`spacing`	`string`	—	Vertical spacing: `flush`, `tight`, `default`, `loose`, or `breathe`
`inset`	`string`	—	Horizontal padding: `flush`, `tight`, `default`, `loose`, or `breathe`
`tint`	`string`	—	Named colour tint from theme configuration
`tint-mode`	`string`	`auto`	Colour scheme override: `auto`, `dark`, or `light`
`bg`	`string`	—	Named background preset from theme configuration

Rune Catalog

Content

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan