Color

Color blocks make design tokens copyable and inspectable.

Compact variant

Use Color.Item when porting Mintlify-style MDX. The compound alias maps to Plandalf’s swatch component.

blue-500 #3B82F6 Copy blue-600 #2563EB Copy blue-700 #1D4ED8 Copy blue-800 #1E40AF Copy

<Color variant="compact">
  <Color.Item name="blue-500" value="#3B82F6" />
  <Color.Item name="blue-600" value="#2563EB" />
  <Color.Item name="blue-700" value="#1D4ED8" />
  <Color.Item name="blue-800" value="#1E40AF" />
</Color>

Table variant

Use Color.Row to group related colors in a table-style palette.

Primary

primary-500 #3B82F6 Copy primary-600 #2563EB Copy primary-700 #1D4ED8 Copy

Secondary

secondary-500 #8B5CF6 Copy secondary-600 #7C3AED Copy

<Color variant="table">
  <Color.Row title="Primary">
    <Color.Item name="primary-500" value="#3B82F6" />
    <Color.Item name="primary-600" value="#2563EB" />
    <Color.Item name="primary-700" value="#1D4ED8" />
  </Color.Row>
  <Color.Row title="Secondary">
    <Color.Item name="secondary-500" value="#8B5CF6" />
    <Color.Item name="secondary-600" value="#7C3AED" />
  </Color.Row>
</Color>

Color formats

The component supports CSS color formats such as hex, rgb, rgba, hsl, and oklch.

hex #FF5733 Copy rgb rgb(51, 255, 87) Copy rgba rgba(51, 87, 255, 0.7) Copy hsl hsl(180, 70%, 55%) Copy oklch oklch(70% 0.2 145) Copy

Theme-aware colors

Pass { light, dark } when a token has light and dark mode values.

bg-primary #FFFFFF / #000000 Copy bg-secondary #F9FAFB / #0A0A0A Copy text-primary #111827 / #F9FAFB Copy

<Color variant="compact">
  <Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />
  <Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />
  <Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
</Color>

Plandalf palette example

Plandalf docs palette

Primary teal #0f766e Copy Aqua surface #ecfeff Copy Charcoal #171717 Copy Theme pair #ffffff / #0a0f0e Copy

<Color title="Plandalf docs palette">
  <ColorItem name="Primary teal" value="#0f766e" />
  <ColorItem name="Aqua surface" value="#ecfeff" />
  <ColorItem name="Charcoal" value="#171717" />
  <ColorItem name="Theme pair" value={{ light: "#ffffff", dark: "#0a0f0e" }} />
</Color>

Palette groups

Use a palette group when a page documents a family of tokens. Keep the group title specific so the color values are searchable.

Offer surfaces

Surface #ffffff Copy Soft aqua #edf7f5 Copy Border #d6e8e5 Copy Text #171717 Copy

Status tones

Success #047857 Copy Warning #b45309 Copy Critical #b91c1c Copy Info #0f766e Copy

<Color title="Offer surfaces">
  <ColorItem name="Surface" value="#ffffff" />
  <ColorItem name="Soft aqua" value="#edf7f5" />
  <ColorItem name="Border" value="#d6e8e5" />
  <ColorItem name="Text" value="#171717" />
</Color>

Theme-aware pairs

Pass { light, dark } when the token has a light and dark value. The swatch splits into two halves and copies both values.

Theme-aware tokens

Canvas #f8fffd / #08110f Copy Panel #ffffff / #101918 Copy Muted text #737373 / #a3a3a3 Copy Accent #0f766e / #5eead4 Copy

<Color title="Theme-aware tokens">
  <ColorItem name="Canvas" value={{ light: "#f8fffd", dark: "#08110f" }} />
  <ColorItem name="Accent" value={{ light: "#0f766e", dark: "#5eead4" }} />
</Color>

Single swatches

You can render Color itself as an item when you only need one value inside another component or example.

<Color name="Primary action" value="#0f766e" />
<Color name="Glass border" value={{ light: "#d6e8e5", dark: "#29413f" }} />

Authoring rules

Color usage

Use exact valueshex or token value

Show the value a reader can copy into code. Avoid vague labels such as “teal-ish” or “brand blue”.

Group by jobpalette section

Group values by surface, status, theme pair, or component state rather than dumping every token into one long list.

Prefer real Plandalf tokensproduct truth

Use Plandalf’s cool glass palette for docs examples. Do not introduce unrelated decorative palettes in docs.

Properties

Color

Color.Row

Color.Item

Plandalf extensions

Related