sketch spectacles

robb-j · robb-j · commit c6cef69ec58f · 2026-03-10T10:38:15.000Z
diff --git a/source/_layouts/base.njk b/source/_layouts/base.njk
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>⚗️ {{ title }} | Alembic</title>
+    <title>{{ emoji or "⚗️" }} {{ title }} | Alembic</title>
     <meta charset="utf8" />
     <meta name="viewport" content="width=device-width" />
     <link rel="stylesheet" href="{{ '/docs/docs.css' | url }} " />
diff --git a/source/_layouts/index.njk b/source/_layouts/index.njk
@@ -8,7 +8,7 @@ layout: base.njk
       {% include 'site-nav.njk' %}
     </header>
     <main class="docsLayout-main">
-      <h1>{{ title }}</h1>
+      <h1>{{ emoji }} {{ title }}</h1>
       
       <stack-layout space="var(--s3)">
         
diff --git a/source/development/index.md b/source/development/index.md
@@ -3,7 +3,7 @@ layout: index.njk
 title: Development
 eleventyNavigation:
   key: Dev
-  order: 5
+  order: 6
 ---
 
 Meta information about developing on Alembic itself
diff --git a/source/labcoat/index.md b/source/labcoat/index.md
@@ -1,9 +1,10 @@
 ---
 layout: index.njk
 title: Labcoat
+emoji: "🥼"
 eleventyNavigation:
   key: Labcoat
-  order: 4
+  order: 5
 ---
 
 > UNSTABLE
diff --git a/source/spectacles/index.md b/source/spectacles/index.md
@@ -0,0 +1,104 @@
+---
+layout: index.njk
+title: Spectacles
+emoji: 🥽
+eleventyNavigation:
+  key: Spectacles
+  order: 5
+---
+
+**🚧 This is just an idea being sketched out at the moment 🚧**
+
+Spectacles is an opinionated design system built on-top of Alembic.
+It tries to be a clean white-labelled system so that it can fit as many projects as possible.
+It builds on top of [Layouts](/layouts/) & [Forms](/forms/) 
+and adds:
+
+- A system of CSS design tokens
+- Custom HTML Elements
+- Guidelines
+- Icons
+- Best practises and patterns for using all of the above
+
+## Design Tokens
+
+Design tokens are a way to store variables so they can be used in different systems and contexts.
+Codifying them helps bring consistency to the overall design and creates more pleasing interfaces.
+
+<!--
+
+### Axioms
+
+These sit above tokens to generalise their use and make it easier to apply theming within elements
+
+- `--color-text`
+- `--color-background`
+- `--color-border`
+- `--color-focus`
+- `--measure`
+
+-->
+
+### Colour
+
+???
+
+### Spacing
+
+- `--space-0` - smallest spacing
+- `--space-1`
+- `--space-2`
+- `--space-3`
+- `--space-4`
+- `--space-5` — the default space
+- `--space-6`
+- `--space-7`
+- `--space-8`
+- `--space-9`
+- `--space-10` - largest spacing
+
+### Line height
+
+- `--line-height-body: 1.4`
+- `--line-height-heading: 1.1`
+
+### Font size
+
+Maybe generated from something like [typescale.com](https://typescale.com/)?
+
+- `--font-size-xxl`
+- `--font-size-xl`
+- `--font-size-l`
+- `--font-size`
+- `--font-size-s`
+- `--font-size-xs`
+- `--font-size-xxs`
+
+### Font family
+
+- `--font-family-body`
+- `--font-family-heading`
+- `--font-family-code`
+
+### Font weight
+
+- `--font-weight-body`
+- `--font-weight-heading`
+- `--font-weight-code`
+- `--font-weight-strong`
+
+### Border radius
+
+- `--border-radius-sharp`
+- `--border-radius-small`
+- `--border-radius`
+- `--border-radius-large`
+- `--border-radius-circle`
+- `--border-radius-pill`
+
+### Border thickness
+
+- `--border-width-thin`
+- `--border-width-thick`
+
+- ???
