diff --git a/sites/fast-website/package.json b/sites/fast-website/package.json
index 578adce5f02..b47f5733117 100644
--- a/sites/fast-website/package.json
+++ b/sites/fast-website/package.json
@@ -15,6 +15,7 @@
     "html-webpack-plugin": "^4.3.0",
     "mini-css-extract-plugin": "^0.9.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "prettier": "2.0.2",
     "terser-webpack-plugin": "^3.0.1",
     "ts-loader": "^7.0.2",
     "typescript": "^3.8.3",
@@ -24,7 +25,9 @@
   },
   "scripts": {
     "start": "webpack-dev-server --config=./webpack.dev.js --history-api-fallback --progress",
-    "build": "webpack --config=./webpack.prod.js"
+    "build": "webpack --config=./webpack.prod.js",
+    "prettier": "prettier --config ../../.prettierrc --write \"**/*.ts\"",
+    "prettier:diff": "prettier --config ../../.prettierrc \"**/*.ts\" --list-different"
   },
   "repository": {
     "type": "git",
diff --git a/sites/fast-website/src/app/components/color-swatch/color-swatch.styles.ts b/sites/fast-website/src/app/components/color-swatch/color-swatch.styles.ts
new file mode 100644
index 00000000000..5e34e7b2cc3
--- /dev/null
+++ b/sites/fast-website/src/app/components/color-swatch/color-swatch.styles.ts
@@ -0,0 +1,146 @@
+import { css } from "@microsoft/fast-element";
+import {
+    display,
+    heightNumber,
+    neutralFillInputHoverBehavior,
+    neutralFillInputRestBehavior,
+    neutralOutlineHoverBehavior,
+    neutralOutlineRestBehavior,
+    forcedColorsStylesheetBehavior,
+    SystemColors,
+    focusVisible,
+    disabledCursor,
+} from "@microsoft/fast-components";
+import { neutralForegroundRestBehavior } from "@microsoft/fast-components";
+
+export const ColorSwatchStyles = css`
+${display("inline-flex")} :host {
+    --input-size: calc((${heightNumber} / 2) + var(--design-unit));
+    align-items: center;
+    outline: none;
+    margin: calc(var(--design-unit) * 1px) 0;
+    ${
+        /*
+         * Chromium likes to select label text or the default slot when
+         * the radio button is clicked. Maybe there is a better solution here?
+         */ ""
+    } user-select: none;
+    position: relative;
+    flex-direction: row;
+    transition: all 0.2s ease-in-out;
+}
+
+.control {
+    position: relative;
+    width: calc(var(--input-size) * 1px);
+    height: calc(var(--input-size) * 1px);
+    box-sizing: border-box;
+    border-radius: calc(var(--corner-radius) * 1px);
+    border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
+    outline: none;
+    cursor: pointer;
+}
+
+.label__hidden {
+    display: none;
+}
+
+.label {
+    font-family: var(--body-font);
+    color: var(--neutral-foreground-rest);
+    ${
+        /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast-dna/issues/2766 */ ""
+    } padding-inline-start: calc(var(--design-unit) * 2px + 2px);
+    margin-inline-end: calc(var(--design-unit) * 2px + 2px);
+    cursor: pointer;
+    ${
+        /* Font size is temporary - replace when adaptive typography is figured out */ ""
+    } font-size: calc(1rem + (var(--density) * 2px));
+}
+
+.checked-indicator {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
+    background: var(--neutral-foreground-rest);
+    fill: var(--neutral-foreground-rest);
+    opacity: 0;
+    pointer-events: none;
+}
+
+.control:hover {
+    border-color: var(--neutral-outline-hover);
+}
+
+:host(:${focusVisible}) .control {
+    box-shadow: 0 0 0 1px var(--neutral-focus) inset;
+    border-color: var(--neutral-focus);
+}
+
+:host(.disabled) .label,
+:host(.readonly) .label,
+:host(.readonly) .control,
+:host(.disabled) .control {
+    cursor: ${disabledCursor};
+}
+
+:host(.checked) .checked-indicator {
+    opacity: 1;
+}
+
+:host(.disabled) {
+    opacity: var(--disabled-opacity);
+}
+`.withBehaviors(
+    neutralFillInputHoverBehavior,
+    neutralFillInputRestBehavior,
+    neutralForegroundRestBehavior,
+    neutralOutlineHoverBehavior,
+    neutralOutlineRestBehavior,
+    forcedColorsStylesheetBehavior(
+        css`
+        .control, .control:hover, .control:active {
+            forced-color-adjust: none;
+            border-color: ${SystemColors.FieldText};
+            background: ${SystemColors.Field};
+        }
+        :host(:${focusVisible}) .control {
+            border-color: ${SystemColors.Highlight};
+        }
+        :host(.checked) .control:hover, .control:active {
+            border-color: ${SystemColors.Highlight};
+            background: ${SystemColors.Highlight};
+        }
+        :host(.checked) .checked-indicator {
+            background: ${SystemColors.Highlight};
+            fill: ${SystemColors.Highlight};
+        }
+        :host(.checked) .control:hover .checked-indicator {
+            background: ${SystemColors.HighlightText};
+            fill: ${SystemColors.HighlightText};
+        }
+        :host(.disabled) {
+            forced-color-adjust: none;
+            opacity: 1;
+        }
+        :host(.disabled) .label {
+            color: ${SystemColors.GrayText};
+        }
+        :host(.disabled) .control,
+        :host(.checked.disabled) .control:hover, .control:active {
+            background: ${SystemColors.Field};
+            border-color: ${SystemColors.GrayText};
+        }
+        :host(.disabled) .checked-indicator,
+        :host(.checked.disabled) .control:hover .checked-indicator {
+            fill: ${SystemColors.GrayText};
+            background: ${SystemColors.GrayText};
+        }
+    `
+    )
+);
diff --git a/sites/fast-website/src/app/components/color-swatch/color-swatch.template.ts b/sites/fast-website/src/app/components/color-swatch/color-swatch.template.ts
new file mode 100644
index 00000000000..f54067a5777
--- /dev/null
+++ b/sites/fast-website/src/app/components/color-swatch/color-swatch.template.ts
@@ -0,0 +1,31 @@
+import { html, when, slotted } from "@microsoft/fast-element";
+import { ColorSwatch } from "./color-swatch";
+
+export const ColorSwatchTemplate = html<ColorSwatch>`
+    <template
+        role="radio"
+        class="${x => (x.checked ? "checked" : "")} ${x =>
+            x.readOnly ? "readonly" : ""}"
+        aria-checked="${x => x.checked}"
+        aria-required="${x => x.required}"
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
+        @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+    >
+        <div part="control" class="control" style="background: ${x => x.backgroundColor}">
+            <slot name="checked-indicator">
+                <div part="checked-indicator" class="checked-indicator"></div>
+            </slot>
+        </div>
+        <label
+            part="label"
+            class="${x =>
+                x.defaultSlottedNodes && x.defaultSlottedNodes.length
+                    ? "label"
+                    : "label label__hidden"}"
+        >
+            <slot ${slotted("defaultSlottedNodes")}></slot>
+        </label>
+    </template>
+`;
diff --git a/sites/fast-website/src/app/components/color-swatch/color-swatch.ts b/sites/fast-website/src/app/components/color-swatch/color-swatch.ts
new file mode 100644
index 00000000000..b6b0e17adc0
--- /dev/null
+++ b/sites/fast-website/src/app/components/color-swatch/color-swatch.ts
@@ -0,0 +1,10 @@
+import { attr, observable } from "@microsoft/fast-element";
+import { FASTRadio } from "@microsoft/fast-components";
+
+export class ColorSwatch extends FASTRadio {
+    @attr({ attribute: "background-color" })
+    public backgroundColor: string = "#F33378";
+
+    @observable
+    public defaultSlottedNodes: Node[];
+}
diff --git a/sites/fast-website/src/app/components/color-swatch/index.ts b/sites/fast-website/src/app/components/color-swatch/index.ts
new file mode 100644
index 00000000000..adbadc44140
--- /dev/null
+++ b/sites/fast-website/src/app/components/color-swatch/index.ts
@@ -0,0 +1,14 @@
+import { customElement } from "@microsoft/fast-element";
+import { ColorSwatch } from "./color-swatch";
+import { ColorSwatchTemplate as template } from "./color-swatch.template";
+import { ColorSwatchStyles as styles } from "./color-swatch.styles";
+
+@customElement({
+    name: "site-color-swatch",
+    template,
+    styles,
+})
+export class SiteColorSwatch extends ColorSwatch {}
+export * from "./color-swatch.template";
+export * from "./color-swatch.styles";
+export * from "./color-swatch";
diff --git a/sites/fast-website/src/app/components/content-placement/content-placement.template.ts b/sites/fast-website/src/app/components/content-placement/content-placement.template.ts
index f3b7bd5323d..49e35e6ca01 100644
--- a/sites/fast-website/src/app/components/content-placement/content-placement.template.ts
+++ b/sites/fast-website/src/app/components/content-placement/content-placement.template.ts
@@ -2,12 +2,7 @@ import { html, when } from "@microsoft/fast-element";
 import { ContentPlacement } from "./content-placement";
 
 export const ContentPlacementTemplate = html<ContentPlacement>`<fast-card>
-    <div 
-        class=${x =>
-            x.divider
-                ? ""
-                : "contentPlacement_icon"}
-    >
+    <div class=${x => (x.divider ? "" : "contentPlacement_icon")}>
         <slot name="icon"></slot>
     </div>
     <slot></slot>
diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
index 8522a5e9f6d..c2a08689c7f 100644
--- a/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
+++ b/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
@@ -37,6 +37,7 @@ export const FastFrameStyles = css`
         grid-gap: 40px;
         grid-template-columns: 1fr 1fr;
         padding: 40px;
+        background: var(--background-color);
     }
 
     .image-container {
@@ -52,6 +53,7 @@ export const FastFrameStyles = css`
         flex-direction: column;
         padding: 20px;
         text-align: start;
+        color: var(--neutral-foreground-rest);
     }
 
     .badge {
@@ -59,12 +61,24 @@ export const FastFrameStyles = css`
         margin: 20px;
     }
 
+    .preview-controls {
+        display: grid;
+        grid-auto-rows: max-content;
+        grid-gap: 20px;
+    }
+
     .control-container {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 20px;
     }
 
+    .control-container-2 {
+        display: grid;
+        grid-template-columns: auto auto 1fr;
+        grid-gap: 20px;
+    }
+
     .control-container p {
         margin-inline-start: calc(var(--design-unit) * 2px + 2px);
     }
@@ -78,6 +92,7 @@ export const FastFrameStyles = css`
         display: grid;
         grid-template-columns: auto 1fr;
         text-align: start;
+        color: var(--neutral-foreground-rest);
     }
 
     .checkbox {
@@ -99,7 +114,6 @@ export const FastFrameStyles = css`
 
     .sample-control {
         display: flex;
-        background: var(--background-color);
         align-items: center;
         width: 100%;
     }
@@ -123,6 +137,14 @@ export const FastFrameStyles = css`
         --badge-fill-primary: var(--accent-fill-rest);
         --badge-color-primary: var(--neutral-foreground-rest);
     }
+
+    fast-slider {
+        min-width: unset;
+    }
+
+    fast-button {
+        display: contents;
+    }
 `.withBehaviors(
     accentFillRestBehavior,
     accentForegroundCutRestBehavior,
diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
index a08eb7e2133..507ea5247e5 100644
--- a/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
+++ b/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
@@ -1,5 +1,6 @@
-import { html } from "@microsoft/fast-element";
+import { html, repeat } from "@microsoft/fast-element";
 import { FastFrame } from "./fast-frame";
+import { StandardLuminance } from "@microsoft/fast-components-styles-msft";
 
 export const FastFrameTemplate = html<FastFrame>`
     <template>
@@ -66,7 +67,10 @@ export const FastFrameTemplate = html<FastFrame>`
                     </svg>
                 </fast-tab>
                 <fast-tab-panel id="TabPanelOne">
-                    Tab one content. This is for testing.
+                <fast-switch @change="${(x, c) =>
+                    x.themeChange(c.event as MouseEvent)} checked="${x => x.darkMode}">
+                    Dark Mode
+                </fast-switch>
                 </fast-tab-panel>
                 <fast-tab-panel id="TabPanelTwo">
                     <div class="content">
@@ -76,7 +80,32 @@ export const FastFrameTemplate = html<FastFrame>`
                             Ultrices nibh nunc vestibulum fames. At lacus nunc lacus eget
                             neque.
                         </p>
-                        Color Pickers go here.
+                        <fast-radio-group name="background color" @change="${(x, c) =>
+                            x.backgroundChangeHandler(c.event as MouseEvent)}>
+                            <label slot="label">Background color</label>
+                            ${repeat(
+                                x => x.backgroundPalette,
+                                html<string>`
+                                    <site-color-swatch
+                                        value="${x => x}"
+                                        background-color="${x => x}"
+                                    ></site-color-swatch>
+                                `
+                            )}
+                        </fast-radio-group>
+                        <fast-radio-group name="accent color" @change="${(x, c) =>
+                            x.accentChangeHandler(c.event as MouseEvent)}>
+                            <label slot="label">Accent color</label>
+                            ${repeat(
+                                x => x.accentPalette,
+                                html<string>`
+                                    <site-color-swatch
+                                        value="${x => x}"
+                                        background-color="${x => x}"
+                                    ></site-color-swatch>
+                                `
+                            )}
+                        </fast-radio-group>
                     </div>
                 </fast-tab-panel>
                 <fast-tab-panel id="TabPanelThree">
@@ -89,14 +118,18 @@ export const FastFrameTemplate = html<FastFrame>`
             <website-design-system-provider
                 use-defaults
                 class="preview"
-                background-color="#424242"
-                accent-base-color="#F33378"
+                base-layer-luminance="${x =>
+                    x.darkMode
+                        ? StandardLuminance.DarkMode
+                        : StandardLuminance.LightMode}"
+                background-color="${x => x.backgroundColor}"
+                accent-base-color="${x => x.accentColor}"
             >
                 <fast-card>
                     <div class="image-container">
-                        <fast-badge fill="primary" color="primary" class="badge"
-                            >Badge</fast-badge
-                        >
+                        <fast-badge fill="primary" color="primary" class="badge">
+                            Badge
+                        </fast-badge>
                     </div>
                     <div class="text-container">
                         <h3>Card Options</h3>
@@ -142,8 +175,15 @@ export const FastFrameTemplate = html<FastFrame>`
                         </div>
                     </div>
                 </fast-card>
-                <div>
+                <div class="preview-controls">
                     <fast-progress></fast-progress>
+                    <fast-menu>
+                        <fast-menu-item role="menuitem">Menu item 1</fast-menu-item>
+                        <fast-menu-item role="menuitem">Menu item 2</fast-menu-item>
+                        <fast-menu-item role="menuitem">Menu item 3</fast-menu-item>
+                        <hr/>
+                        <fast-menu-item role="menuitem">Menu item 4</fast-menu-item>
+                    </fast-menu>
                     <div class="control-container">
                         <div class="control-container-column">
                             <fast-radio>Radio 1</fast-radio>
@@ -156,12 +196,18 @@ export const FastFrameTemplate = html<FastFrame>`
                             <p class="checkbox-label">Checkbox</p>
                         </div>
                     </div>
+                    <fast-text-field placeholder="Text field"></fast-text-field>
+                    <div class="control-container-2">
+                        <fast-flipper aria-hidden="false"></fast-flipper>
+                        <fast-flipper disabled></fast-flipper>
+                        <fast-slider></fast-slider>
+                    </div>
                     <div class="control-container">
                         <fast-button appearance="accent">
                             Button
                             <svg
                                 class="icon-cut"
-                                slot="end"
+                                slot="start"
                                 width="11"
                                 height="15"
                                 viewBox="0 0 11 15"
@@ -177,7 +223,7 @@ export const FastFrameTemplate = html<FastFrame>`
                             Button
                             <svg
                                 class="icon"
-                                slot="end"
+                                slot="start"
                                 width="14"
                                 height="16"
                                 viewBox="0 0 14 16"
diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.ts
index ec493518a48..c575d47f9b8 100644
--- a/sites/fast-website/src/app/components/fast-frame/fast-frame.ts
+++ b/sites/fast-website/src/app/components/fast-frame/fast-frame.ts
@@ -1,3 +1,69 @@
-import { FASTElement } from "@microsoft/fast-element";
+import { FASTElement, attr, observable } from "@microsoft/fast-element";
+import { FASTRadio } from "@microsoft/fast-components";
+import { SiteColorSwatch } from "../color-swatch";
 
-export class FastFrame extends FASTElement {}
+export class FastFrame extends FASTElement {
+    @attr({ attribute: "accent-color" })
+    public accentColor: string = "#F33378";
+
+    @attr({ attribute: "background-color" })
+    public backgroundColor: string = "#1F1F1F";
+
+    @attr
+    public darkMode: boolean = true;
+
+    @observable
+    public backgroundPalette: string[] = [
+        "#1F1F1F",
+        "#2B2B2B",
+        "#333333",
+        "#3B3B3B",
+        "#424242",
+    ];
+
+    @observable
+    public accentPalette: string[] = [
+        "#F33378",
+        "#F34733",
+        "#10A7B5",
+        "#109B82",
+        "#E1A054",
+    ];
+
+    private darkPallette: string[] = this.backgroundPalette;
+
+    private lastSelectedIndex: number = 0;
+
+    public accentChangeHandler = (e: any): void => {
+        const element: HTMLInputElement = e.target;
+        if (element.checked) {
+            this.accentColor = e.target.value;
+        }
+    };
+
+    public backgroundChangeHandler = (e: any): void => {
+        const element: HTMLInputElement = e.target;
+        if (element.checked) {
+            this.backgroundColor = e.target.value;
+            this.lastSelectedIndex = Array.from(this.backgroundPalette).indexOf(
+                e.target.value
+            );
+        }
+    };
+
+    public themeChange = (e: any): void => {
+        this.darkMode = !this.darkMode;
+        if (!this.darkMode) {
+            this.backgroundPalette = [
+                "#FFFFFF",
+                "#F0F0F0",
+                "#DEDEDE",
+                "#D6D6D6",
+                "#C4C4C4",
+            ];
+        } else {
+            this.backgroundPalette = this.darkPallette;
+        }
+        this.backgroundColor = this.backgroundPalette[this.lastSelectedIndex];
+    };
+}
diff --git a/sites/fast-website/src/app/components/index.ts b/sites/fast-website/src/app/components/index.ts
index ac489e8b3de..3a16f559033 100644
--- a/sites/fast-website/src/app/components/index.ts
+++ b/sites/fast-website/src/app/components/index.ts
@@ -1,4 +1,5 @@
 export { WebsiteDesignSystemProvider } from "./design-system-provider";
+export { SiteColorSwatch } from "./color-swatch";
 export { SiteSectionHeader } from "./section-header";
 export { FastFrame } from "./fast-frame";
 export { SiteNavigation } from "./navigation";
diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html
index 6fe6ad1f06d..def70397dec 100644
--- a/sites/fast-website/src/public/index.html
+++ b/sites/fast-website/src/public/index.html
@@ -8,7 +8,7 @@
   <body>
     <website-design-system-provider id="body-provider" class="body-provider"
       use-defaults
-      background-color="#242424"
+      background-color="#1F1F1F"
       accent-base-color="#F33378"
     >
       <div class="wrapper">