diff --git a/.gitignore b/.gitignore
index 6d0d9e33..39406e43 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,6 +50,7 @@ coverage
 .worktrees
 # CocoIndex Code (ccc)
 /.cocoindex_code/
+/.continue/
 
 .superpowers
 .playwright-mcp
diff --git a/apps/hct-color-picker/package.json b/apps/hct-color-picker/package.json
index 26ad3865..58c9f222 100644
--- a/apps/hct-color-picker/package.json
+++ b/apps/hct-color-picker/package.json
@@ -14,6 +14,7 @@
     "build:plugin": "esbuild --bundle --minify --sourcemap --target=es2015 --format=esm --legal-comments=none --outfile=dist/code.js plugin-src/code.ts",
     "build": "concurrently \"vite build\" \"yarn build:plugin\"",
     "watch": "concurrently \"vite build --watch --mode development\" \"yarn build:plugin --watch\"",
+    "lint": "eslint ui-src plugin-src",
     "lint:css": "stylelint './**/*.{css,scss,ts}'"
   },
   "devDependencies": {
@@ -23,6 +24,7 @@
     "@mordech/web-components": "*",
     "concurrently": "^8.2.2",
     "esbuild": "0.19.11",
+    "eslint": "8.57.0",
     "lit-analyzer": "^2.0.2",
     "stylelint": "^16.1.0",
     "vite": "^5.0.10"
diff --git a/apps/hct-color-picker/plugin-src/.eslintrc.json b/apps/hct-color-picker/plugin-src/.eslintrc.json
index f2e33b8c..5697f0e1 100644
--- a/apps/hct-color-picker/plugin-src/.eslintrc.json
+++ b/apps/hct-color-picker/plugin-src/.eslintrc.json
@@ -2,6 +2,6 @@
   "extends": ["../.eslintrc.json"],
   "parserOptions": {
     "project": "./tsconfig.json",
-    "tsconfigRootDir": "./apps/hct-color-picker/plugin-src"
+    "tsconfigRootDir": "./plugin-src"
   }
 }
diff --git a/apps/hct-color-picker/plugin-src/code.ts b/apps/hct-color-picker/plugin-src/code.ts
index f8e16fc9..047f754c 100644
--- a/apps/hct-color-picker/plugin-src/code.ts
+++ b/apps/hct-color-picker/plugin-src/code.ts
@@ -13,12 +13,12 @@ import {
   updateSelection,
 } from './utils';
 
-figma.showUI(__html__, { width: 340, height: 560 });
+figma.showUI(__html__, { width: 300, height: 564 });
 figma.currentPage.selection = [];
 
 const uiSizes: Record<string, [number, number]> = {
-  small: [340, 568],
-  medium: [340, 618],
+  small: [300, 564],
+  medium: [300, 600],
 };
 
 initPaints();
diff --git a/apps/hct-color-picker/plugin-src/utils/createPaintStyle.ts b/apps/hct-color-picker/plugin-src/utils/createPaintStyle.ts
index bf1854bd..12006fd8 100644
--- a/apps/hct-color-picker/plugin-src/utils/createPaintStyle.ts
+++ b/apps/hct-color-picker/plugin-src/utils/createPaintStyle.ts
@@ -1,4 +1,5 @@
 import {
+  alphaFromArgb,
   blueFromArgb,
   greenFromArgb,
   Hct,
@@ -8,6 +9,8 @@ import {
 import { applyPaint } from './applyPaint';
 
 export function createPaintStyle(argb: number) {
+  const opacity = alphaFromArgb(argb) / 255;
+
   const color: RGB = {
     r: redFromArgb(argb) / 255,
     g: greenFromArgb(argb) / 255,
@@ -15,8 +18,12 @@ export function createPaintStyle(argb: number) {
   };
 
   const hct = Hct.fromInt(argb);
+  const alphaPercent = Math.round(opacity * 100);
 
-  const name = `hct(${hct.hue.toFixed()}, ${hct.chroma.toFixed()}, ${hct.tone.toFixed()})`;
+  const name =
+    alphaPercent < 100
+      ? `hct(${hct.hue.toFixed()}, ${hct.chroma.toFixed()}, ${hct.tone.toFixed()}, ${alphaPercent}%)`
+      : `hct(${hct.hue.toFixed()}, ${hct.chroma.toFixed()}, ${hct.tone.toFixed()})`;
 
   const paintStyle = figma.createPaintStyle();
   paintStyle.name = name;
@@ -24,6 +31,7 @@ export function createPaintStyle(argb: number) {
     {
       type: 'SOLID',
       color,
+      opacity,
     },
   ];
 
diff --git a/apps/hct-color-picker/plugin-src/utils/extractValidStyles.ts b/apps/hct-color-picker/plugin-src/utils/extractValidStyles.ts
index c0bf244e..c1dab951 100644
--- a/apps/hct-color-picker/plugin-src/utils/extractValidStyles.ts
+++ b/apps/hct-color-picker/plugin-src/utils/extractValidStyles.ts
@@ -1,26 +1,5 @@
 import type { UiPaintStyle } from '../../types';
 
-function isPaintStyle(paintStyle: PaintStyle | Variable) {
-  if ('paints' in paintStyle) {
-    const { paints } = paintStyle;
-
-    if (!paints.length) return false;
-    if (paints.length > 1) return false;
-    if (paints[0].type !== 'SOLID') return false;
-
-    return true;
-  }
-
-  return false;
-}
-
-function isColorVariable(paintStyle: PaintStyle | Variable) {
-  if ('resolvedType' in paintStyle) {
-    return paintStyle.resolvedType === 'COLOR' ? true : false;
-  }
-  return false;
-}
-
 function extractColor(
   paintStyle: PaintStyle | Variable,
 ): Variable | RGB | undefined {
@@ -42,10 +21,6 @@ function extractColor(
 export function extractValidStyles(
   paintStyles: (PaintStyle | Variable)[],
 ): UiPaintStyle[] | undefined {
-  paintStyles.filter((paintStyle) => {
-    isPaintStyle(paintStyle) || isColorVariable(paintStyle);
-  });
-
   if (!paintStyles.length) return;
   return paintStyles
     .map((paintStyle) => {
@@ -58,30 +33,38 @@ export function extractValidStyles(
         const { id, name } = paintStyle;
 
         return Object.entries(valuesByMode)
-          .map(([modeId, paint]) => {
-            if (!(typeof paint === 'object')) return;
-            if ('type' in paint) return;
-            if (!('r' in paint)) return;
+          .map(([modeId, value]) => {
+            if (!(typeof value === 'object')) return;
+            if ('type' in value) return;
+            if (!('r' in value)) return;
 
-            const { r, g, b } = paint as RGB;
+            const { r, g, b } = value as RGB;
+            const rawAlpha =
+              'a' in value ? Math.round((value as RGBA).a * 100) : 100;
+            const alpha = Number.isFinite(rawAlpha) ? rawAlpha : 100;
 
             return {
-              id: id,
+              id,
               modeId,
-              name: name,
+              name,
               color: {
                 r: r * 255,
                 g: g * 255,
                 b: b * 255,
               },
+              alpha,
             } satisfies UiPaintStyle;
           })
           .filter((paintStyle) => paintStyle !== undefined) as UiPaintStyle[];
       }
 
       const { id, name } = paintStyle;
-
       const { r, g, b } = paint;
+      const paintOpacity =
+        'paints' in paintStyle
+          ? (paintStyle.paints[0] as SolidPaint).opacity ?? 1
+          : 1;
+      const alpha = Math.round(paintOpacity * 100);
 
       return {
         id,
@@ -91,6 +74,7 @@ export function extractValidStyles(
           g: g * 255,
           b: b * 255,
         },
+        alpha,
       } satisfies UiPaintStyle;
     })
     .flat()
diff --git a/apps/hct-color-picker/plugin-src/utils/updatePaint.ts b/apps/hct-color-picker/plugin-src/utils/updatePaint.ts
index 636da481..bbb3ed89 100644
--- a/apps/hct-color-picker/plugin-src/utils/updatePaint.ts
+++ b/apps/hct-color-picker/plugin-src/utils/updatePaint.ts
@@ -1,4 +1,5 @@
 import {
+  alphaFromArgb,
   blueFromArgb,
   greenFromArgb,
   redFromArgb,
@@ -12,6 +13,8 @@ export async function updatePaint(
   paintStyle: UiPaintStyle | undefined,
   argb: number,
 ) {
+  const opacity = alphaFromArgb(argb) / 255;
+
   const solidPaint: SolidPaint = {
     type: 'SOLID',
     color: {
@@ -19,6 +22,7 @@ export async function updatePaint(
       g: greenFromArgb(argb) / 255,
       b: blueFromArgb(argb) / 255,
     },
+    opacity,
   };
 
   if (!paintStyle) return applyPaint(solidPaint);
@@ -40,7 +44,10 @@ export async function updatePaint(
     const mode = paintStyle.modeId;
     if (!mode) return;
 
-    paint.setValueForMode(mode, solidPaint.color);
+    paint.setValueForMode(mode, {
+      ...solidPaint.color,
+      a: opacity,
+    });
   }
 
   if (paintStyle.variableAlias) return;
diff --git a/apps/hct-color-picker/plugin-src/utils/updateSelection.ts b/apps/hct-color-picker/plugin-src/utils/updateSelection.ts
index f9ffdaf0..5b538ef4 100644
--- a/apps/hct-color-picker/plugin-src/utils/updateSelection.ts
+++ b/apps/hct-color-picker/plugin-src/utils/updateSelection.ts
@@ -78,8 +78,14 @@ export async function updateSelection() {
     const selectionFillsId = selection.fillStyleId.toString();
 
     const { id } = variableObject || { id: selectionFillsId };
+    const { modeId, variableAlias, variableValue } = variableObject || {};
 
-    const { modeId, variableAlias } = variableObject || {};
+    // For variable fills: read alpha from the variable's RGBA value
+    // For paint style / direct fills: read alpha from the paint's opacity field
+    const alpha =
+      variableValue && typeof variableValue === 'object' && 'a' in variableValue
+        ? Math.round((variableValue as RGBA).a * 100)
+        : Math.round((fills[0].opacity ?? 1) * 100);
 
     return postMessage({
       type: 'selection',
@@ -88,6 +94,7 @@ export async function updateSelection() {
         modeId,
         color,
         variableAlias,
+        alpha,
       },
     });
   }
diff --git a/apps/hct-color-picker/types/index.d.ts b/apps/hct-color-picker/types/index.d.ts
index 71eb7236..2ff0406d 100644
--- a/apps/hct-color-picker/types/index.d.ts
+++ b/apps/hct-color-picker/types/index.d.ts
@@ -10,6 +10,7 @@ type HctObject = {
   hue: number;
   chroma: number;
   tone: number;
+  alpha: number;
 };
 
 export interface UiPaintStyle {
@@ -18,6 +19,7 @@ export interface UiPaintStyle {
   variableAlias?: boolean;
   name: string;
   color: RGB;
+  alpha: number;
 }
 
 export type SaveColor = {
@@ -56,6 +58,7 @@ export type Selection = {
     color?: RGB;
     modeId?: string;
     variableAlias?: boolean;
+    alpha: number;
   };
 };
 
diff --git a/apps/hct-color-picker/ui-src/components/color-preview/color-preview.scss b/apps/hct-color-picker/ui-src/components/color-preview/color-preview.scss
index 209003a7..8c26c08f 100644
--- a/apps/hct-color-picker/ui-src/components/color-preview/color-preview.scss
+++ b/apps/hct-color-picker/ui-src/components/color-preview/color-preview.scss
@@ -1,15 +1,24 @@
 .color-input-container {
+  --mrd-swatch-size: 5rem;
+
+  height: var(--mrd-swatch-size);
   z-index: 1;
-  margin: -2px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
   display: flex;
   position: relative;
   flex-direction: column;
+  border-radius: var(--mrd-border-radius-100);
+  border: 1px solid var(--mrd-color-outline);
+  background: var(--mrd-alpha-background);
 
   & mrd-button {
     position: absolute;
-    inset-block-end: 0.7rem;
-    inset-inline-end: 0.6rem;
+    inset-block-end: calc(var(--mrd-space-200) + var(--mrd-space-50));
+    inset-inline-end: var(--mrd-space-200);
     opacity: 0.9;
+    z-index: 2;
   }
 }
 
@@ -19,9 +28,11 @@ mrd-button.save-detach-button {
   }
 
   &::part(button) {
-    padding: 0.5rem;
+    padding: 0.35rem;
   }
 
+  --mrd-icon-size: 1rem;
+
   &::part(slot) {
     visibility: hidden;
     width: 0;
@@ -36,7 +47,7 @@ mrd-button.save-detach-button {
     &::part(slot) {
       visibility: visible;
       width: auto;
-      padding-inline: 0.25rem;
+      padding-inline: var(--mrd-space-100);
       overflow: hidden;
       white-space: nowrap;
       transform: translate(0);
@@ -52,17 +63,16 @@ mrd-button.save-detach-button {
 }
 
 .color-input {
-  --mrd-swatch-size: 7rem;
+  appearance: none;
+  width: 102%;
 
   @mixin color-swatch {
     border-color: var(--mrd-color-outline);
     border-width: 1px;
-    border-radius: 0.5rem;
+    border-radius: var(--mrd-border-radius-200);
     height: var(--mrd-swatch-size);
   }
 
-  appearance: none;
-
   &::-webkit-color-swatch {
     @include color-swatch;
   }
@@ -81,16 +91,16 @@ mrd-button.save-detach-button {
 
 .info-container {
   display: inline-flex;
-  gap: 2rem;
+  gap: var(--mrd-space-400);
   justify-content: space-between;
   align-items: center;
-  padding-block-end: 0.5rem;
+  padding-block-end: var(--mrd-space-200);
 }
 
 .color-container {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: var(--mrd-space-100);
 }
 
 .selected-style-span {
diff --git a/apps/hct-color-picker/ui-src/components/color-preview/color-preview.ts b/apps/hct-color-picker/ui-src/components/color-preview/color-preview.ts
index 286546f0..c9ebe373 100644
--- a/apps/hct-color-picker/ui-src/components/color-preview/color-preview.ts
+++ b/apps/hct-color-picker/ui-src/components/color-preview/color-preview.ts
@@ -1,4 +1,4 @@
-import { argbFromHex } from '@material/material-color-utilities';
+import { alphaFromArgb } from '@material/material-color-utilities';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -16,12 +16,17 @@ import './color-preview.scss';
 @customElement('color-preview')
 export class ColorPreview extends LitElement {
   @property({ type: String }) hex = '#000000';
+  @property({ type: Number }) argb = 0;
   @property({ type: Object }) selectedColor?: UiPaintStyle;
 
+  get displayHex() {
+    const alpha = alphaFromArgb(this.argb);
+    if (alpha === 255) return this.hex;
+    return this.hex + alpha.toString(16).padStart(2, '0');
+  }
+
   get selectedColorType() {
-    return this.selectedColor && this.selectedColor?.modeId
-      ? 'variable'
-      : 'style';
+    return this.selectedColor?.modeId ? 'variable' : 'style';
   }
 
   render() {
@@ -38,14 +43,15 @@ export class ColorPreview extends LitElement {
             type="color"
             id="mrd_color-selected_color"
             name="Selected Color"
-            class=${'color-input'}
+            class="color-input"
+            style="opacity: ${alphaFromArgb(this.argb) / 255}"
             .value=${this.hex}
           />
 
           <mrd-button
             variant="inverted"
             aria-label=${this.selectedColor
-              ? 'Detach ${this.selectedColorType}'
+              ? `Detach ${this.selectedColorType}`
               : 'Add to styles'}
             class=${classMap(addStyleButtonClasses)}
             @click=${this.selectedColor
@@ -54,7 +60,7 @@ export class ColorPreview extends LitElement {
           >
             ${this.selectedColor
               ? html`${detachIcon} Detach ${this.selectedColorType}`
-              : html`${saveIcon} Save style`}
+              : html`${saveIcon} ${'Save style'}`}
           </mrd-button>
         </div>
 
@@ -71,8 +77,8 @@ export class ColorPreview extends LitElement {
               `
             : html` <strong> Custom color </strong> `}
 
-          <copy-button data-event="Copy hex" data-prop-value=${this.hex}>
-            ${this.hex.toUpperCase()}
+          <copy-button data-event="Copy hex" data-prop-value=${this.displayHex}>
+            ${this.displayHex.toUpperCase()}
           </copy-button>
         </div>
       </div>
@@ -83,7 +89,7 @@ export class ColorPreview extends LitElement {
     postMessage({
       type: 'create-paint-style',
       data: {
-        argb: argbFromHex(this.hex),
+        argb: this.argb,
       },
     });
   }
diff --git a/apps/hct-color-picker/ui-src/components/hct-controller/hct-controller.scss b/apps/hct-color-picker/ui-src/components/hct-controller/hct-controller.scss
index 2138b8b1..94795842 100644
--- a/apps/hct-color-picker/ui-src/components/hct-controller/hct-controller.scss
+++ b/apps/hct-color-picker/ui-src/components/hct-controller/hct-controller.scss
@@ -1,13 +1,13 @@
 @mixin thumb {
   appearance: none;
-  width: 1rem;
+  width: var(--mrd-space-400);
   background-color: unset;
   border: none;
 }
 
 mrd-range::part(slot-container) {
   border: 1px solid var(--mrd-color-outline);
-  height: 2rem;
+  height: var(--mrd-space-600);
   background: var(
     --mrd-range-preview-background,
     var(--mrd-color-background-surface)
@@ -36,7 +36,7 @@ mrd-range::part(slot-container) {
 .slider-container {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--mrd-space-200);
 }
 
 .input-title-container {
@@ -47,10 +47,10 @@ mrd-range::part(slot-container) {
 
 input[type='number'] {
   overflow: hidden;
-  padding: 0.5rem;
-  width: 4.5rem;
+  padding: var(--mrd-space-100) var(--mrd-space-200);
+  width: 4rem;
   border: 1px solid var(--mrd-color-outline);
-  border-radius: 0.25rem;
+  border-radius: var(--mrd-border-radius-100);
   color: var(--mrd-color-background-on-base);
 
   &:hover,
diff --git a/apps/hct-color-picker/ui-src/index.ts b/apps/hct-color-picker/ui-src/index.ts
index 5fdbe6f2..097b795d 100644
--- a/apps/hct-color-picker/ui-src/index.ts
+++ b/apps/hct-color-picker/ui-src/index.ts
@@ -19,7 +19,6 @@ import './components/hct-controller';
 import type { PluginMessage, UiPaintStyle } from '../types';
 
 import { postMessage } from './utils/postMessage';
-import type { SelectedColor } from './types';
 
 import './styles.scss';
 
@@ -29,7 +28,8 @@ export class MyApp extends LitElement {
   @state() chroma = 50;
   @state() tone = 50;
   @state() paints?: UiPaintStyle[];
-  @state() selectedColor?: SelectedColor;
+  @state() selectedColor?: UiPaintStyle;
+  @state() alpha = 100;
   @state() shiftKey = false;
 
   render() {
@@ -38,6 +38,7 @@ export class MyApp extends LitElement {
         <color-preview
           @input=${this.handleInput}
           .hex=${this.hex}
+          .argb=${this.argb}
           .selectedColor=${this.selectedColor}
         >
         </color-preview>
@@ -77,6 +78,17 @@ export class MyApp extends LitElement {
             @input=${this.handleInput}
           >
           </hct-controller>
+
+          <hct-controller
+            id="mrd_controller-alpha"
+            .name=${'Alpha'}
+            .value=${this.alpha}
+            .min=${0}
+            .max=${100}
+            .sliderGradient=${this.alphaGradient}
+            @input=${this.handleInput}
+          >
+          </hct-controller>
         </div>
 
         ${this.paints?.length
@@ -86,42 +98,46 @@ export class MyApp extends LitElement {
                 title="Color styles"
               >
                 <div class="paints-container" role="listbox">
-                  ${repeat(this.paints, ({ id, name, color, modeId }) => {
-                    const swatchId = id + (modeId ? modeId : '');
-                    const selectionId =
-                      this.selectedColor?.id +
-                      (this.selectedColor?.modeId
-                        ? this.selectedColor?.modeId
-                        : '');
-                    const isSelected = swatchId === selectionId;
-
-                    return html`
-                      <mrd-paint-swatch
-                        data-event="Click swatch"
-                        data-prop-type=${id === this.selectedColor?.id
-                          ? 'Select style'
-                          : 'Deselect style'}
-                        data-prop-color=${Color(color).hex()}
-                        role="option"
-                        aria-selected=${isSelected}
-                        @click=${() =>
-                          isSelected
-                            ? (this.selectedColor = undefined)
-                            : (this.selectedColor = {
-                                id,
-                                name,
-                                color,
-                                modeId,
-                              })}
-                        .id=${swatchId}
-                        .name=${name}
-                        .color=${Color(color).hex()}
-                        .active=${isSelected}
-                        data-prop-is-Variable=${!!modeId || nothing}
-                      >
-                      </mrd-paint-swatch>
-                    `;
-                  })}
+                  ${repeat(
+                    this.paints,
+                    ({ id, name, color, modeId, alpha }) => {
+                      const swatchId = id + (modeId ?? '');
+                      const selectionId =
+                        (this.selectedColor?.id ?? '') +
+                        (this.selectedColor?.modeId ?? '');
+                      const isSelected = swatchId === selectionId;
+
+                      return html`
+                        <mrd-paint-swatch
+                          data-event="Click swatch"
+                          data-prop-type=${id === this.selectedColor?.id
+                            ? 'Select style'
+                            : 'Deselect style'}
+                          data-prop-color=${Color(color).hex()}
+                          role="option"
+                          aria-selected=${isSelected}
+                          @click=${() =>
+                            isSelected
+                              ? (this.selectedColor = undefined)
+                              : (this.selectedColor = {
+                                  id,
+                                  name,
+                                  color,
+                                  modeId,
+                                  alpha,
+                                })}
+                          .id=${swatchId}
+                          .name=${name}
+                          .color=${`rgba(${color.r}, ${color.g}, ${color.b}, ${
+                            alpha / 100
+                          })`}
+                          .active=${isSelected}
+                          data-prop-is-Variable=${!!modeId || nothing}
+                        >
+                        </mrd-paint-swatch>
+                      `;
+                    },
+                  )}
                 </div>
               </details-section>
             `
@@ -149,7 +165,9 @@ export class MyApp extends LitElement {
   }
 
   get argb() {
-    return Hct.from(this.hue, this.chroma, this.tone).toInt();
+    const base = Hct.from(this.hue, this.chroma, this.tone).toInt();
+    const a = Math.round(this.alpha * 2.55); // 0–100 → 0–255
+    return ((a << 24) | (base & 0x00ffffff)) >>> 0;
   }
 
   get hex() {
@@ -166,6 +184,7 @@ export class MyApp extends LitElement {
       this.hue = hct.hue;
       this.chroma = hct.chroma;
       this.tone = hct.tone;
+      this.alpha = this.selectedColor.alpha;
 
       this.updateStyle();
       this.saveColor();
@@ -230,6 +249,24 @@ export class MyApp extends LitElement {
     };
   }
 
+  get alphaGradient() {
+    const stops = Array.from({ length: 101 }, (_, i) => {
+      const a = Math.round(i * 2.55)
+        .toString(16)
+        .padStart(2, '0');
+      return `${this.hex}${a}`;
+    });
+
+    return {
+      '--mrd-range-preview-background': [
+        `linear-gradient(to right, ${stops.join(',')})`,
+        'var(--mrd-alpha-background)',
+      ].join(', '),
+      '--mrd-range-color': stops.slice(0, this.alpha + 1).join(','),
+      '--mrd-thumb-color': this.hex,
+    };
+  }
+
   handleInput(e: Event) {
     const input = e.target as HTMLInputElement;
     const value = parseInt(input.value) || 0;
@@ -247,6 +284,10 @@ export class MyApp extends LitElement {
         this.tone = value;
         break;
 
+      case 'alpha':
+        this.alpha = value;
+        break;
+
       case 'selected_color': {
         const { hue, chroma, tone } = Hct.fromInt(argbFromHex(input.value));
         this.hue = hue;
@@ -282,11 +323,7 @@ export class MyApp extends LitElement {
     };
 
     this.onmousedown = (e) => {
-      if (e.shiftKey) {
-        this.shiftKey = true;
-      } else {
-        this.shiftKey = false;
-      }
+      this.shiftKey = e.shiftKey;
     };
 
     this.addEventListener('input', () => {
@@ -319,8 +356,7 @@ export class MyApp extends LitElement {
         case 'selection': {
           const { selection } = msg;
 
-          if (!selection) break;
-          if (!selection.color) break;
+          if (!selection?.color) break;
 
           const selectedPaint = this.paints?.find((paint) =>
             paint.modeId
@@ -342,6 +378,7 @@ export class MyApp extends LitElement {
             this.hue = hue;
             this.chroma = chroma;
             this.tone = tone;
+            this.alpha = selection.alpha;
             this.saveColor();
           }
 
@@ -355,6 +392,7 @@ export class MyApp extends LitElement {
             this.hue = color.hue;
             this.chroma = color.chroma;
             this.tone = color.tone;
+            this.alpha = color.alpha ?? 100;
           }
           break;
 
@@ -373,7 +411,12 @@ export class MyApp extends LitElement {
   private saveColor() {
     postMessage({
       type: 'save-color',
-      data: { hue: this.hue, chroma: this.chroma, tone: this.tone },
+      data: {
+        hue: this.hue,
+        chroma: this.chroma,
+        tone: this.tone,
+        alpha: this.alpha,
+      },
     });
   }
 
diff --git a/apps/hct-color-picker/ui-src/styles.scss b/apps/hct-color-picker/ui-src/styles.scss
index ba56b0b8..53350d5e 100644
--- a/apps/hct-color-picker/ui-src/styles.scss
+++ b/apps/hct-color-picker/ui-src/styles.scss
@@ -25,10 +25,16 @@ strong {
 }
 
 my-app {
+  --mrd-alpha-background: repeating-conic-gradient(
+      var(--mrd-color-background-surface) 0% 25%,
+      var(--mrd-color-background-surface-variant) 0% 50%
+    )
+    0 0 / 10px 10px;
+
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  padding-block-start: 1rem;
+  padding-block-start: var(--mrd-space-200);
   background-color: var(--mrd-color-background-base);
   color: var(--mrd-color-background-on-base);
   margin: auto;
@@ -40,7 +46,7 @@ my-app {
 
 main,
 header {
-  padding-inline: 1rem;
+  padding-inline: var(--mrd-space-400);
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -51,19 +57,16 @@ header {
   box-shadow: 0 2px 2rem 0.75rem var(--mrd-color-background-base);
   overflow: visible;
   z-index: 1;
-  gap: 1rem;
+  gap: var(--mrd-space-400);
 }
 
 main {
-  padding-block-start: 1.5rem;
+  padding-block-start: var(--mrd-space-400);
   flex: 1;
   overflow: auto;
-  gap: 2rem;
+  gap: var(--mrd-space-600);
   scrollbar-width: thin;
-}
-
-main::-webkit-scrollbar {
-  width: 0;
+  scrollbar-color: var(--mrd-color-outline) var(--mrd-color-background-base);
 }
 
 .header-container {
@@ -72,33 +75,33 @@ main::-webkit-scrollbar {
 }
 
 .paints-container {
-  margin-block-start: 1rem;
+  margin-block-start: var(--mrd-space-400);
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
-  gap: 0.75rem;
+  gap: var(--mrd-space-300);
   align-items: center;
 }
 
 .controller-container {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--mrd-space-300);
 }
 
 footer {
   margin-block-start: auto;
   border-top: 1px solid var(--mrd-color-outline);
   display: flex;
-  margin-inline: -0.5rem;
-  padding-block: 0.5rem;
+  margin-inline: calc(-1 * var(--mrd-space-200));
+  padding-block: var(--mrd-space-200);
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
+  gap: var(--mrd-space-200);
   font-size: var(--mrd-font-size-0);
 
   a {
     position: relative;
-    padding: 0.25rem 0.5rem;
+    padding: var(--mrd-space-100) var(--mrd-space-200);
     color: var(--mrd-color-primary-base);
     text-decoration: none;
 
@@ -110,13 +113,13 @@ footer {
       width: 100%;
       opacity: 0;
       background-color: var(--mrd-color-background-on-base);
-      border-radius: 0.5rem;
+      border-radius: var(--mrd-border-radius-200);
       transition: opacity var(--mrd-transition-default);
     }
 
     &:focus-visible {
       outline: var(--mrd-color-primary-base) solid 2px;
-      border-radius: 0.5rem;
+      border-radius: var(--mrd-border-radius-200);
       outline-offset: 4px;
       transition: all var(--mrd-transition-bounce);
     }
diff --git a/apps/hct-color-picker/ui-src/types.ts b/apps/hct-color-picker/ui-src/types.ts
index 749e4975..3158373d 100644
--- a/apps/hct-color-picker/ui-src/types.ts
+++ b/apps/hct-color-picker/ui-src/types.ts
@@ -1,5 +1,3 @@
-import { UiPaintStyle } from '../types';
-
 export type HctKeys = 'hue' | 'chroma' | 'tone';
 
 export interface Color {
@@ -8,5 +6,3 @@ export interface Color {
 }
 
 export type Paints = Record<string, Color>;
-
-export type SelectedColor = UiPaintStyle & { variableAlias?: boolean };
diff --git a/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Default.png b/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Default.png
index a3650893..41d1141e 100644
Binary files a/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Default.png and b/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Default.png differ
diff --git a/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Hex_With_Alpha.png b/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Hex_With_Alpha.png
new file mode 100644
index 00000000..41d1141e
Binary files /dev/null and b/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Hex_With_Alpha.png differ
diff --git a/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Pink_With_Alpha.png b/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Pink_With_Alpha.png
new file mode 100644
index 00000000..41d1141e
Binary files /dev/null and b/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Pink_With_Alpha.png differ
diff --git a/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Rgba_Alpha.png b/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Rgba_Alpha.png
new file mode 100644
index 00000000..41d1141e
Binary files /dev/null and b/packages/web-components/.loki/reference/chrome_iphone7_Atoms_mrd_paint_swatch_Rgba_Alpha.png differ
diff --git a/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Default.png b/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Default.png
index 188299a0..0c672ba5 100644
Binary files a/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Default.png and b/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Default.png differ
diff --git a/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Hex_With_Alpha.png b/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Hex_With_Alpha.png
new file mode 100644
index 00000000..0c672ba5
Binary files /dev/null and b/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Hex_With_Alpha.png differ
diff --git a/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Pink_With_Alpha.png b/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Pink_With_Alpha.png
new file mode 100644
index 00000000..0c672ba5
Binary files /dev/null and b/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Pink_With_Alpha.png differ
diff --git a/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Rgba_Alpha.png b/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Rgba_Alpha.png
new file mode 100644
index 00000000..0c672ba5
Binary files /dev/null and b/packages/web-components/.loki/reference/chrome_laptop_Atoms_mrd_paint_swatch_Rgba_Alpha.png differ
diff --git a/packages/web-components/src/lib/components/mrd-paint-swatch/paint-swatch.styles.scss b/packages/web-components/src/lib/components/mrd-paint-swatch/paint-swatch.styles.scss
index b65f23e7..d6451f66 100644
--- a/packages/web-components/src/lib/components/mrd-paint-swatch/paint-swatch.styles.scss
+++ b/packages/web-components/src/lib/components/mrd-paint-swatch/paint-swatch.styles.scss
@@ -1,7 +1,17 @@
 .swatch {
   height: var(--mrd-paint-swatch-size, 3rem);
   width: var(--mrd-paint-swatch-size, 3rem);
-  background-color: currentcolor;
+  background:
+    linear-gradient(
+      -135deg,
+      var(--mrd-swatch-color) 45%,
+      rgb(from var(--mrd-swatch-color) r g b / 100%) 45%
+    ),
+    repeating-conic-gradient(
+        var(--mrd-color-background-surface) 0% 25%,
+        var(--mrd-color-background-surface-variant) 0% 50%
+      )
+      0 0 / 10px 10px;
   border-width: 1px;
   border-style: solid;
   border-color: var(--mrd-color-background-surface);
diff --git a/packages/web-components/src/lib/components/mrd-paint-swatch/paint-swatch.ts b/packages/web-components/src/lib/components/mrd-paint-swatch/paint-swatch.ts
index eb163979..01434e9b 100644
--- a/packages/web-components/src/lib/components/mrd-paint-swatch/paint-swatch.ts
+++ b/packages/web-components/src/lib/components/mrd-paint-swatch/paint-swatch.ts
@@ -1,5 +1,6 @@
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import focusableBase from '../../styles/focusable.styles.scss?lit';
 
@@ -20,7 +21,7 @@ export class MrdPainSwatchElement extends LitElement {
       class="swatch"
       @click=${() => (this.active = !this.active)}
       data-active=${this.active}
-      style="color: ${this.color}"
+      style=${styleMap({ '--mrd-swatch-color': this.color })}
     ></button>`;
   }
 }
diff --git a/packages/web-components/src/lib/components/mrd-paint-swatch/stories/paint-swatch.stories.ts b/packages/web-components/src/lib/components/mrd-paint-swatch/stories/paint-swatch.stories.ts
index a36f59a5..11910eaa 100644
--- a/packages/web-components/src/lib/components/mrd-paint-swatch/stories/paint-swatch.stories.ts
+++ b/packages/web-components/src/lib/components/mrd-paint-swatch/stories/paint-swatch.stories.ts
@@ -20,7 +20,52 @@ export const Default = ({ color, name, active }: MrdPainSwatchElement) => html`
 `;
 
 Default.args = {
-  color: 'pink',
-  name: 'black',
+  color: 'rgba(255, 192, 203, 1)',
+  name: 'opaque pink',
+  active: false,
+};
+
+export const PinkWithAlpha = ({
+  color,
+  name,
+  active,
+}: MrdPainSwatchElement) => html`
+  <mrd-paint-swatch .color=${color} .name=${name} .active=${active}>
+  </mrd-paint-swatch>
+`;
+
+PinkWithAlpha.args = {
+  color: 'rgba(255, 192, 203, 0.4)',
+  name: 'pink 40%',
+  active: false,
+};
+
+export const HexWithAlpha = ({
+  color,
+  name,
+  active,
+}: MrdPainSwatchElement) => html`
+  <mrd-paint-swatch .color=${color} .name=${name} .active=${active}>
+  </mrd-paint-swatch>
+`;
+
+HexWithAlpha.args = {
+  color: '#FF80C066',
+  name: 'hex alpha',
+  active: false,
+};
+
+export const RgbaAlpha = ({
+  color,
+  name,
+  active,
+}: MrdPainSwatchElement) => html`
+  <mrd-paint-swatch .color=${color} .name=${name} .active=${active}>
+  </mrd-paint-swatch>
+`;
+
+RgbaAlpha.args = {
+  color: 'rgba(100, 0, 255, 0.6)',
+  name: 'purple 60%',
   active: false,
 };
diff --git a/yarn.lock b/yarn.lock
index 45e22733..cb01b0fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19245,6 +19245,7 @@ __metadata:
     color: "npm:^4.2.3"
     concurrently: "npm:^8.2.2"
     esbuild: "npm:0.19.11"
+    eslint: "npm:8.57.0"
     lit: "npm:^3.1.0"
     lit-analyzer: "npm:^2.0.2"
     stylelint: "npm:^16.1.0"