4 files changed, 36 insertions, 0 deletions
diff --git a/ui/app.css b/ui/app.css
index 34a74b7..714c9f7 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -9,6 +9,7 @@
 @import url('styles/messages.css');
 @import url('styles/textarea.css');
 @import url('styles/forms.css');
+@import url('styles/swatches.css');
 @import url('styles/invites.css');
 
 body {
diff --git a/ui/routes/(swatch)/.swatch/+page.js b/ui/routes/(swatch)/.swatch/+page.js
new file mode 100644
index 0000000..d3c3250
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/+page.js
@@ -0,0 +1 @@
+export const trailingSlash = 'always';
diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
new file mode 100644
index 0000000..8d03c8d
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -0,0 +1,10 @@
+<h1>swatches</h1>
+
+<p>
+  Swatches are "live, but disconnected" elements of the application, designed specifically to
+  support live editing and iteration.
+</p>
+
+<h2>components</h2>
+
+<ul></ul>
diff --git a/ui/styles/swatches.css b/ui/styles/swatches.css
new file mode 100644
index 0000000..f2a9f99
--- /dev/null
+++ b/ui/styles/swatches.css
@@ -0,0 +1,24 @@
+.component-preview {
+  border: 1px solid grey;
+  margin: 1rem 2rem;
+}
+
+.component-properties {
+  margin: 1rem 2rem;
+}
+
+.component-properties textarea {
+  width: 100%;
+  height: 10em;
+}
+
+.component-properties textarea.html {
+  font-family: FiraCode, monospace;
+}
+
+.component-properties .suggestion {
+  font-size: 80%;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  margin-bottom: 0.5em;
+}