From 63cf31d7d82a1ae5aa8bd4a8abb7c72ef8989890 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 17 Jan 2024 00:00:42 -0800
Subject: [PATCH] Expand website with better proceduralism explanation and
 documentation

---
 website/content/_index.md                     | 33 +++++++++---
 website/content/about.md                      |  2 +-
 website/content/features.md                   | 20 +++----
 website/content/learn/interface/_index.md     |  4 +-
 .../content/learn/interface/document-panel.md | 54 +++++++------------
 .../introduction/features-and-limitations.md  | 53 +++++++++---------
 website/content/logo.md                       |  2 +-
 website/sass/base.scss                        |  3 +-
 website/sass/index.scss                       | 44 +++++++--------
 9 files changed, 113 insertions(+), 102 deletions(-)

diff --git a/website/content/_index.md b/website/content/_index.md
index 8b463408..047c6688 100644
--- a/website/content/_index.md
+++ b/website/content/_index.md
@@ -67,16 +67,19 @@ js = ["image-interaction.js", "video-embed.js"]
 <section id="screenshots" class="carousel window-size-1" data-carousel data-carousel-jostle-hint>
 	<div class="carousel-slide">
 		<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #1" data-carousel-image />
-		<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #2" data-carousel-image />
-		<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #3" data-carousel-image />
+		<img src="https://static.graphite.rs/content/index/gui-demo-procedural-string-lights.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #2" data-carousel-image />
+		<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #3" data-carousel-image />
+		<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #4" data-carousel-image />
 	</div>
 	<div class="carousel-slide torn left">
 		<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
+		<img src="https://static.graphite.rs/content/index/gui-demo-procedural-string-lights.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
 		<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
 		<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
 	</div>
 	<div class="carousel-slide torn right">
 		<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
+		<img src="https://static.graphite.rs/content/index/gui-demo-procedural-string-lights.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
 		<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
 		<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
 	</div>
@@ -91,6 +94,7 @@ js = ["image-interaction.js", "video-embed.js"]
 			<button class="dot active" data-carousel-dot></button>
 			<button class="dot" data-carousel-dot></button>
 			<button class="dot" data-carousel-dot></button>
+			<button class="dot" data-carousel-dot></button>
 			<button class="direction next" data-carousel-next>
 				<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
 					<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
@@ -100,7 +104,10 @@ js = ["image-interaction.js", "video-embed.js"]
 		</div>
 		<div class="screenshot-description">
 			<p class="active" data-carousel-description>
-				<em>Valley of Spires</em> — <a href="https://editor.graphite.rs/#demo/valley-of-spires">Open this artwork</a> to explore it yourself.
+				<em>Valley of Spires</em> — Vector art made with the Pen and Gradient tools. <a href="https://editor.graphite.rs/#demo/valley-of-spires">Open this artwork</a> to explore it yourself.
+			</p>
+			<p data-carousel-description>
+				<em>Procedural String Lights</em> — Partly made in the node graph (pictured) to auto-place light bulbs along the wire. <a href="https://editor.graphite.rs/#demo/procedural-string-lights">Open this artwork</a> to explore it yourself.
 			</p>
 			<p data-carousel-description>
 				Design mockup for the work-in-progress raster editing pipeline. Some of these raster-specific nodes are not implemented yet, but will be soon!
@@ -300,7 +307,7 @@ You'll receive your first newsletter email with the next major Graphite news.
 **Get started with Graphite by following along to a hands-on quickstart tutorial.**
 
 <div class="video-embed aspect-16x9">
-	<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/learn/introduction/tutorial-1-vector-art-quickstart-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
+	<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/index/tutorial-1-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
 </div>
 
 </div>
@@ -323,13 +330,27 @@ This new capability has just recently shown its potential. Now, expanding Graphi
 <section id="proceduralism-demo">
 <div class="section">
 
-Proceduralism lets you create sophisticated design elements that are easy to edit and reuse. The holiday string lights shown below are built from a simple group of nodes, allowing you to effortlessly reshape the wire and update the bulb appearance and spacing. <a href="https://editor.graphite.rs/#demo/procedural-string-lights">Click here to explore this demo</a> and try dragging the wire layer's points with the Path tool (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="vertical-align: bottom"><polygon fill="#aaa" points="5,0 5,17 10,12 17,12" /><path fill="#78bae5" d="M20.77,14.36c-0.35-0.42-0.98-0.48-1.41-0.13c-1.04,0.87-2.19,1.6-3.36,2.24V16h-6v2.9c-2.88,0.84-5.07,1.1-5.11,1.11c-0.55,0.06-0.94,0.56-0.88,1.11C4.06,21.62,4.5,22,5,22c0.04,0,0.07,0,0.11-0.01c0.17-0.02,2.18-0.26,4.89-1.01V22h6v-3.28c1.6-0.79,3.2-1.75,4.64-2.95C21.06,15.42,21.12,14.78,20.77,14.36z M14,20h-2v-2h2V20z" /></svg>).
+Proceduralism lets you create sophisticated design elements that are easy to edit and reuse. The holiday string lights shown below are built from a simple group of nodes, allowing you to effortlessly reshape the wire and update the bulb appearance and spacing. <a href="https://editor.graphite.rs/#demo/procedural-string-lights">Click here to explore this demo</a> and try dragging the wire layer's points with the Path tool (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="vertical-align: middle"><polygon fill="#aaa" points="5,0 5,17 10,12 17,12" /><path fill="#78bae5" d="M20.77,14.36c-0.35-0.42-0.98-0.48-1.41-0.13c-1.04,0.87-2.19,1.6-3.36,2.24V16h-6v2.9c-2.88,0.84-5.07,1.1-5.11,1.11c-0.55,0.06-0.94,0.56-0.88,1.11C4.06,21.62,4.5,22,5,22c0.04,0,0.07,0,0.11-0.01c0.17-0.02,2.18-0.26,4.89-1.01V22h6v-3.28c1.6-0.79,3.2-1.75,4.64-2.95C21.06,15.42,21.12,14.78,20.77,14.36z M14,20h-2v-2h2V20z" /></svg>).
 
 <div class="video-background">
 	<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
 		<source src="https://static.graphite.rs/content/blog/2024-01-01-looking-back-on-2023-and-what's-next/christmas-tree-lights.mp4" type="video/mp4" />
 	</video>
 </div>
+<div class="demo-artwork">
+	<a href="https://editor.graphite.rs/#demo/procedural-string-lights">
+		<img src="https://static.graphite.rs/content/index/procedural-string-lights-thumbnail.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Vector art of Procedural String Lights" />
+	</a>
+	<p>
+		<span class="balance-text">
+			<em>Procedural String Lights</em>
+		</span>
+		<br />
+		<span class="balance-text">
+			<a href="https://editor.graphite.rs/#demo/procedural-string-lights">Open this artwork</a> to explore it yourself.
+		</span>
+	</p>
+</div>
 
 </div>
 </section>
@@ -337,7 +358,7 @@ Proceduralism lets you create sophisticated design elements that are easy to edi
 <section id="proceduralism-features">
 <div class="section">
 
-Graphite's data-driven approach to graphic design affords unique capabilities (while in alpha, these remain a work in progress):
+Graphite's procedural, data-driven approach to graphic design affords unique capabilities (while in alpha, these remain a work in progress):
 
 <div class="informational-group features four-wide">
 	<div class="informational">
diff --git a/website/content/about.md b/website/content/about.md
index ff530940..0eb41d9e 100644
--- a/website/content/about.md
+++ b/website/content/about.md
@@ -35,7 +35,7 @@ The idea for Graphite began with a desire to create artwork and edit photos usin
 
 Graphite strives to unshackle the creativity of every budding artist and seasoned professional by building the best comprehensive art and design tool that's accessible to all.
 
-Mission success will come when Graphite is an industry standard. A cohesive product vision and prioritizing innovation over imitation will make that possible.
+Mission success will come when Graphite is an industry standard. A cohesive product vision and focus on innovation over imitation is the strategy that will make that possible.
 
 </div>
 <div class="section">
diff --git a/website/content/features.md b/website/content/features.md
index 65bddd43..94658601 100644
--- a/website/content/features.md
+++ b/website/content/features.md
@@ -10,7 +10,7 @@ css = ["features.css"]
 
 # Graphite features
 
-The current alpha version of Graphite provides tools for vector art and graphic design conforming to the ubiquitous SVG format. It also supports some experimental, rudimentary raster editing that is evolving with each release. All this is built around a central node graph that stores layer data and provides a basic—but continually improving—non-destructive editing and procedural design workflow which is unique for a vector editor. This page explains where the project is at and where it's heading next.
+The current alpha version of Graphite is a tool for vector art and graphic design. It also supports a limited, experimental raster editing toolset. All this is built around a central node graph that stores layer data and provides a basic—but continually improving—procedural design and non-destructive editing workflow which is a unique feature among vector editing software.
 
 </div>
 </section>
@@ -119,10 +119,14 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
 			<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
 			<span>New viewport overlays system</span>
 		</div>
-		<div class="informational ongoing" title="Development Ongoing">
+		<div class="informational complete" title="Development Complete">
 			<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
 			<span>Layer and grid snapping</span>
 		</div>
+		<div class="informational complete" title="Development Complete">
+			<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
+			<span>Imported SVG file editing</span>
+		</div>
 		<div class="informational ongoing" title="Development Ongoing">
 			<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
 		<span>Adaptive resolution raster rendering</span>
@@ -163,10 +167,6 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
 			<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
 			<span>Procedurally-defined vector data</span>
 		</div>
-		<div class="informational">
-			<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
-			<span>Imported SVG file editing</span>
-		</div>
 		<div class="informational">
 			<img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
 			<span>CAD-like constraint relationships</span>
@@ -195,6 +195,10 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
 			<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
 			<span>Code editor for custom nodes</span>
 		</div>
+		<div class="informational">
+			<img class="atlas" style="--atlas-index: 27" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
+			<span>Interactive graph auto-layout</span>
+		</div>
 		<div class="informational">
 			<img class="atlas" style="--atlas-index: 19" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
 			<span>Document history system</span>
@@ -223,10 +227,6 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
 			<img class="atlas" style="--atlas-index: 25" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
 			<span>Reconfigurable workspace panels</span>
 		</div>
-		<div class="informational">
-			<img class="atlas" style="--atlas-index: 27" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
-			<span>Interactive graph auto-layout</span>
-		</div>
 		<div class="informational">
 			<img class="atlas" style="--atlas-index: 28" src="https://static.graphite.rs/icons/icon-atlas-roadmap.png" alt="" />
 			<span>Automation and batch processing</span>
diff --git a/website/content/learn/interface/_index.md b/website/content/learn/interface/_index.md
index 2319cf2c..c0102879 100644
--- a/website/content/learn/interface/_index.md
+++ b/website/content/learn/interface/_index.md
@@ -43,7 +43,7 @@ On the right, the **window buttons** provide platform-specific controls for the
 
 The **workspace** is the editor's main content area. It houses the **panels** packed next to one another. The **gutter** lines between neighboring panels may be dragged to resize them.
 
-<p><img src="https://static.graphite.rs/content/learn/interface/workspace.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The workspace" /></p>
+<p><img src="https://static.graphite.rs/content/learn/interface/workspace__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The workspace" /></p>
 
 ### Panels
 
@@ -57,7 +57,7 @@ Beneath the panel tab bar, the **panel body** displays the content for its panel
 
 The bar running across the bottom of the editor is called the **status bar**.
 
-<p><img src="https://static.graphite.rs/content/learn/interface/status-bar.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Status bar" /></p>
+<p><img src="https://static.graphite.rs/content/learn/interface/status-bar__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Status bar" /></p>
 
 ### Input hints
 
diff --git a/website/content/learn/interface/document-panel.md b/website/content/learn/interface/document-panel.md
index 6493eb0b..473ea954 100644
--- a/website/content/learn/interface/document-panel.md
+++ b/website/content/learn/interface/document-panel.md
@@ -29,37 +29,37 @@ Only the default mode is currently implemented. Others will be added in the futu
 
 | | |
 |-|-|
-| <img src="https://static.graphite.rs/content/learn/interface/document-panel/editing-modes.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="The editing modes dropdown menu" /> | The default, **Design Mode**, is for directly editing the artwork.<br /><br />Once implemented, **Select Mode** will be where marquee selections are made to constrain the active tool's edits to a masked area of choice.<br /><br />Once implemented, **Guide Mode** will be for creating guides and constraint systems used for alignment and constraint-based layout. |
-
-
+| <img src="https://static.graphite.rs/content/learn/interface/document-panel/editing-modes__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="The editing modes dropdown menu" /> | The default, **Design Mode**, is for directly editing the artwork.<br /><br />Once implemented, **Select Mode** will be where marquee selections are made to constrain the active tool's edits to a masked area of choice.<br /><br />Once implemented, **Guide Mode** will be for creating guides and constraint systems used for alignment and constraint-based layout. |
 
 #### Tool options
 
 Provides controls for the active tool. These change with each tool, and are blank for some.
 
-<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/tool-options.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example of the tool options for the Select tool" /></p>
+<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/tool-options__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example of the tool options for the Select tool" /></p>
 
 Pictured above is the tool options for the Select tool. It provides options related to its selection behavior and offers useful action buttons for modifying the selected layers with alignment, flipping, and (not-yet-implemented) boolean operations.
 
-Each tool's options are described in the [Tools](../../tools) chapter.
+<!-- Each tool's options are described in the [Tools](../../tools) chapter. -->
+Each tool's options will be described in the upcoming tools chapter.
 
 #### Viewport options
 
 Shows options for how the viewport is displayed and interacted with.
 
-<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/viewport-options.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The viewport options" /></p>
+<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/viewport-options__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The viewport options" /></p>
 
 | | |
 |-|-|
-| Snapping | **Snapping is temporarily unavailable. When the feature is restored, it will behave as described below.**<br /><br />When checked (default), drawing and dragging points and layers means they will snap to the alignment points that are visualized as blue overlayed dots/lines located at points of geometric interest within other layers. When unchecked, the selection moves freely.<br /><br />Fine-grained options are available by clicking the overflow button to access its options popover menu:<br /><br /><img src="https://static.graphite.rs/content/learn/interface/document-panel/snapping-popover.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="Snapping options popover menu" /><ul><li>**Bounding Boxes** sets whether the *edges* and *centers* of the rectangle that encloses the bounds of each other layer is used for snapping.</li><li>**Points** sets whether the anchors and handles of vector paths are used for snapping.</li></ul> |
-| Grid | **Not yet implemented.** This is a placeholder for upcoming grid alignment and pixel-perfect snapping features. |
-| Overlays | When checked (default), overlays are shown. When unchecked, they are hidden. Overlays are the contextual visualizations that appear in blue atop the viewport when using tools. |
+| Overlays | When checked (default), overlays are shown. When unchecked, they are hidden. Overlays are the contextual visualizations (like bounding boxes and vector points) that appear atop the viewport when using tools. |
+| Snapping | When checked (default), drawing and dragging shapes and vector points means they will snap to other areas of geometric interest from other layers, like corners or anchor points. When unchecked, the selection moves freely.<br /><br />Fine-grained options are available by clicking the overflow button to access its options popover menu:<br /><br /><img src="https://static.graphite.rs/content/learn/interface/document-panel/snapping-popover__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="Snapping options popover menu" /><ul><li>**Bounding Boxes** sets whether the *edges* and *centers* of the rectangle that encloses the bounds of each other layer is used for snapping.</li><li>**Geometry** sets whether the anchors and handles of vector paths are used for snapping.</li></ul> |
+| Grid | When checked (off by default), grid lines are shown to which drawn and edited shapes are snapped to. The initial grid scale is 1 document unit, helping you draw pixel-perfect artwork.<ul><li>**Origin** is the position where the repeating grid pattern begins from.</li><li>**Type** sets whether the grid pattern is made of squares or triangles.<br /><br />**Rectangular** is a square pattern:<br /><br /><img src="https://static.graphite.rs/content/learn/interface/document-panel/grid-rectangular-popover.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="Snapping options popover menu" /><br /><ul><li>**Spacing** is the width and height of the square grid cells.</li></ul><br /><br />**Isometric** is a triangle pattern:<br /><br /><img src="https://static.graphite.rs/content/learn/interface/document-panel/grid-isometric-popover.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="Snapping options popover menu" /><br /><ul><li>**Y Spacing** is the height between vertical repetitions of the grid.</li><li>**Angles** is the slant of the upward and downward sloped grid lines.</li></ul></li></ul> |
 | View Mode | **Normal** (default): The artwork is rendered normally.<br /><br />**Outline**: The artwork is rendered as a wireframe.<br /><br />**Pixels**: **Not implemented yet.** The artwork is rendered as it would appear when exported as a bitmap image at 100% scale regardless of the viewport zoom level. |
 | Zoom In | Zooms the viewport in to the next whole increment. |
 | Zoom Out | Zooms the viewport out to the next whole increment. |
-| Zoom to 100% | Resets the viewport zoom to 100% which matches the canvas and viewport pixel scale 1:1. |
+| Reset Tilt and Zoom to 100% | Resets the viewport tilt to 0°. Resets the viewport zoom to 100% which matches the canvas and viewport pixel scale 1:1. |
 | Viewport Zoom | Indicates the current zoom level of the viewport and allows precise values to be chosen. |
 | Viewport Tilt | Hidden except when the viewport is tilted (use the *View* > *Tilt* menu action). Indicates the current tilt angle of the viewport and allows precise values to be chosen.
+| Node Graph | Toggles the visibility of the overlaid node graph. |
 
 ### Shelf
 
@@ -71,13 +71,7 @@ Located at the top of the shelf area, the **tool shelf** provides a selection of
 
 | | |
 |-|-|
-| <img src="https://static.graphite.rs/content/learn/interface/document-panel/tool-shelf.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="The tool shelf" /> | The tool shelf is split into three sections: the **general tools** (gray icons), **vector tools** (blue icons), and **raster tools** (orange icons).<br /><br />General tools are used for assorted editing tasks within the viewport.<br /><br />Vector tools are used for drawing and editing vector shapes, curves, and text.<br /><br />Raster tools are used for drawing and editing raster image content. The grayed out icons are placeholders for upcoming tools. |
-
-#### Graph view button
-
-Toggles the visibility of the overlaid **node graph**. It looks like this while closed:
-
-<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/graph-view-button-while-closed.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The graph view button while the graph is closed" /></p>
+| <img src="https://static.graphite.rs/content/learn/interface/document-panel/tool-shelf__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="The tool shelf" /> | The tool shelf is split into three sections: the **general tools** (gray icons), **vector tools** (blue icons), and **raster tools** (orange icons).<br /><br /><ul><li>**General tools** are used for assorted editing tasks within the viewport.</li><li>**Vector tools** are used for drawing and editing vector shapes, curves, and text.</li><li>**Raster tools** are used for drawing and editing raster image content. The grayed out icons are placeholders for upcoming tools.</li></ul> |
 
 #### Working colors
 
@@ -85,11 +79,11 @@ The **working colors** are the two colors used by the active tool.
 
 | | |
 |-|-|
-| <img src="https://static.graphite.rs/content/learn/interface/document-panel/working-colors.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The working colors" /> | The upper circle is the **primary color**. The lower circle is the **secondary color**.<br /><br />There are two buttons located underneath: **Swap** which reverses the current color choices, and **Reset** which resets the primary color to black and the secondary color to white. |
+| <img src="https://static.graphite.rs/content/learn/interface/document-panel/working-colors.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The working colors" /> | The upper circle is the **primary color**. The lower circle is the **secondary color**.<br /><br />There are two buttons located underneath: **Swap** which reverses the current color choices, and **Reset** which restores the primary color to black and the secondary color to white. |
 
 Various tools provide choices for using the primary and secondary colors as controls in the tool options. For example, many vector tools have **Fill** and **Stroke** options that use the current secondary and primary colors, respectively, as defaults:
 
-<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/tool-options-fill-stroke-colors.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The Fill and Stroke controls for a vector tool's options" /></p>
+<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/tool-options-fill-stroke-colors__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The Fill and Stroke controls for a vector tool's options" /></p>
 
 These options each allow choices of being driven by the primary working color, secondary working color, or a custom color set just for that tool.
 
@@ -99,13 +93,13 @@ The **table** contains the **viewport** bounded by rulers and scrollbars along i
 
 #### Rulers and scrollbars
 
-The **rulers**, located along the top and left edges within the table, display the size and location of the viewport's visible region in canvas coordinates.
+The **rulers**, located along the top and left edges within the table, display the size and location of the viewport's visible region in canvas coordinates. The rulers can be hidden with the *View* > *Rulers* toggleable menu option.
 
 The **scrollbars**, located along the bottom and right edges within the table, allow scrolling the artwork to show different parts of the canvas in the viewport.
 
 #### Viewport
 
-The **viewport** is the view into the canvas. It is where the artwork is displayed and interactively edited using the tools.
+The **viewport** is the view into the canvas. It is where the artwork is displayed and gets interactively edited using the tools.
 
 ## Overlaid node graph editing
 
@@ -123,27 +117,19 @@ Provides several controls for the graph and selected node or layer. The options
 
 #### Node/layer controls
 
-When a layer or node is selected, these buttons will show up on the right side of the top bar:
+When a layer or node is selected, these buttons will show up on the left side of the top bar:
 
 <p><img src="https://static.graphite.rs/content/learn/interface/document-panel/node-controls-buttons.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="The node/layer controls" /></p>
 
 | | |
 |-|-|
-| Make<span>&nbsp;</span>Hidden/<br />Make<span>&nbsp;</span>Visible | Toggles the visibility state of the layer or node. This is equivalent to the eye icon button next to each row in the Layers panel. If a node or layer is hidden, it gets bypassed in the data flow. <kbd>Ctrl</kbd><kbd>H</kbd> (macOS: <kbd>⌘</kbd><kbd>H</kbd>) is a shortcut that can be used in the graph or viewport to hide the selected. |
-| Preview/<br />End<span>&nbsp;</span>Preview | Temporarily moves the graph output away from the Output node and the graph output is instead provided by the previewed node. While previewing, the node is styled with a dashed, brighter border. Ending the preview returns responsibility back to the Output node. This is a handy feature for viewing part of a graph without needing to disconnect the actual Output node and manually restore it later. Clicking a node or layer while holding <kbd>Alt</kbd> is a shortcut for toggling its preview on or off. |
+| Make<span>&nbsp;</span>Hidden/<br />Make<span>&nbsp;</span>Visible | Toggles the visibility state of the layer or node. This is equivalent to the eye icon button displayed beside each layer. If a node or layer is hidden, it gets bypassed in the data flow. <kbd>Ctrl</kbd><kbd>H</kbd> (macOS: <kbd>⌘</kbd><kbd>H</kbd>) is a shortcut for this toggle that can be used from the graph or viewport. |
+| Preview/<br />End<span>&nbsp;</span>Preview | Temporarily moves the graph output away from the Output node and the graph output is instead provided by the previewed node. While previewing, the node is styled with a dashed, brighter border. Ending the preview returns responsibility back to the Output node. This is a handy feature for viewing part of a graph without needing to disconnect the actual Output node and manually restore it later. Clicking a node or layer in the graph while holding <kbd>Alt</kbd> is a shortcut for toggling its preview. |
 
 ### Shelf
 
-This narrow bar runs vertically down the left side of the Document panel beside the table where the graph is displayed.
-
-In the future, icons for the common categories of nodes will be listed down from the top allowing quick access and browsing. For now, this area is empty.
-
-#### Graph view button
-
-Toggles the visibility of the overlaid node graph. It looks like this while open:
-
-<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/graph-view-button-while-open.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The graph view button while the graph is open" /></p>
+This narrow bar, which is currently empty, runs vertically down the left side of the Document panel beside the graph area. In the future, icons for categories of nodes will be listed here, allowing quick access and browsing.
 
 #### Working colors
 
-[Same functionality](#working-colors) as when the graph overlay is closed.
+Same functionality as [explained for the viewport](#working-colors) (when the graph overlay is closed).
diff --git a/website/content/learn/introduction/features-and-limitations.md b/website/content/learn/introduction/features-and-limitations.md
index 5fadb4b2..f214b575 100644
--- a/website/content/learn/introduction/features-and-limitations.md
+++ b/website/content/learn/introduction/features-and-limitations.md
@@ -5,7 +5,7 @@ title = "Features and limitations"
 order = 1
 +++
 
-Please keep in mind that Graphite is alpha software, meaning it is actively changing and improving. Remember to save your work frequently because crashes are not unheard of.
+Please bear in mind that Graphite is alpha software, meaning it is actively changing and improving. Remember to save your work frequently because crashes are not unheard of.
 
 ## Current capabilities
 
@@ -23,52 +23,55 @@ Raster image editing is a growing capability that will develop over time into th
 
 A prototype Brush tool exists letting you draw simple doodles and sketches. However it is very limited in its capabilities and there are multiple bugs and performance issues with the feature. It can be used in a limited capacity, but don't expect to paint anything too impressive using raster brushes quite yet.
 
-The raster-based Imaginate feature enables you to synthesize artwork using generative AI based on text descriptions. With it, you can also nondestructively modify your vector art and imported images. You can inpaint (or outpaint) the content in a specific masked part of an image or use it to touch up quick-and-dirty compositions.
+The raster-based Imaginate feature enables you to synthesize artwork using generative AI based on text descriptions. With it, you can also nondestructively modify your vector art and imported images. You can inpaint (or outpaint) the content in a specific masked part of an image or use it to touch up quick-and-dirty compositions. This feature is temporarily out of comission but will be resurrected, and further improved upon, in early 2024.
 
 ### Procedural design
 
-Procedural content generation workflows let you describe *how* a creative decision becomes a visual outcome rather than doing it all yourself. For example, copying a shape 50 times around the inside of a circle would be a lot of work if done by hand but it's easy for the computer to do it. And if you decide you prefer 60 instead of 50 instances, or you want to change the copied shape, or you opt for a different circle radius, you can avoid doing even more manual work by editing the parameters instead of doing all the laborious changes yourself each time. You're able to build a *procedure* that the computer carries out on your behalf.
+A procedural content generation workflow lets you describe *how* a creative decision becomes a visual outcome rather than doing it all yourself. For example, copying a shape 25 times around the inside of a circle would be a lot of work if done by hand but it's easy for the computer to do it. And if you decide 10 instances may look better than 25, or you want to change the copied shape, or you opt for a different circle radius, it's easy to just update a numerical parameter. That saves you from laboriously placing every shape all over again. You're able to build a *procedure* that the computer carries out on your behalf.
 
-The aforementioned example takes the form of the *Circular Repeat* node:
+The aforementioned example takes the form of the <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" style="vertical-align: middle" alt="Circular Repeat" /> node which is represented as this box-shaped entity with colored *connectors* on either end. *Nodes* encode certain operations (or functions) in the procedure that generates your artwork. Once you've drawn some content, you can see the nodes which generate it by opening the *node graph* with the <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/node-graph-button.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" style="vertical-align: middle" alt="'Node Graph' button" /> button located to the top right of the viewport. This example may have a node setup which looks like this:
 
-<p><img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="Circular Repeat node" /></p>
+<p><img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/shape-fill-circular-repeat-layer.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Shape" /></p>
 
-Nodes are boxes that encode a certain operation (or function) in the procedure that generates your artwork. On the left, this node takes the input of your shape to be duplicated. On the right, the modified data (with the repeated shape) is the output. Links are wired from the outputs of nodes to the inputs of others, left to right, in the *node graph* which can be accessed by clicking this button located in the bottom left corner of the Graphite editor:
+Starting from the left, the <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/shape-node.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" style="vertical-align: middle" alt="Shape" /> node generates some geometry (in this case, drawn using the *Pen* tool). Next, the shape data feeds through the <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/fill-node.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" style="vertical-align: middle" alt="Fill" /> node to apply a blue color. At this point, the shape data looks like so:
 
-<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/graph-view-button-while-closed.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Open node graph button" /></p>
+<p><img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/blue-arch-shape.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="" /></p>
 
-The node's properties give additional controls over settings like *Angle Offset* (what angle to start at), *Radius* (how large the circle pattern should be), and *Count* (how many copies to make):
+Next, that is fed into the <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" style="vertical-align: middle" alt="Circular Repeat" /> node which has several *parameters* you can modify and get different output data based on your choices, like in these examples:
 
-<p><img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-parameters.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="Circular Repeat node parameters" /></p>
+<style class="table-1-style">
+.table-1-style + table td {
+	vertical-align: middle;
+	text-align: center;
+}
+</style>
 
+| | |
+|-|-|
+| <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-parameters-1.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="" /> | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-output-1.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="" /> |
+| <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-parameters-2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="" /> | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-output-2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="" /> |
+| <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-parameters-3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="" /> | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-output-3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="" /> |
+| <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-parameters-4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="" /> | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-output-4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width /= 2" alt="" /> |
 
-These parameters can also be exposed into the graph so they are driven by the calculated numerical outputs of other nodes instead of values you pick by hand.
+The node's properties offer controls over settings like *Angle Offset* (what angle to start at), *Radius* (distance from the center), and *Count* (how many copies to distribute). These parameters can also be exposed into the graph so they are driven by the calculated numerical outputs of other nodes instead of values you pick by hand.
 
 ## Status and limitations
 
 Please make yourself aware of these factors to better understand and work around the rough edges in today's Graphite editor.
 
-### Unstable document format
+### Evolving document format
 
-Artwork you save as a `.graphite` document file will eventually fail to open in future versions of the Graphite editor because of code changes. Since the implementations are in flux for many systems, file format stability isn't possible yet during this alpha stage of development. A redesigned file format with a `.gdd` (Graphite Design Document) extension will replace `.graphite` files and it will be built with backwards-compatability in mind.
+Saved documents will eventually fail to render in future versions of the Graphite editor because of code changes. Since node implementations and other systems are in flux, file format stability isn't possible yet during this alpha stage of development. If a file opens but there's a rendering error, you may need to open the node graph and replace outdated nodes by creating new ones near the site of an error. Later in the development roadmap, a redesigned file format with a `.gdd` (Graphite Design Document) extension will replace `.graphite` files and it will be built with seamless backwards-compatability in mind.
 
-Sometimes an error will appear when opening an outdated document. Other times, it may open but result in a crash or broken functionality when editing. With some technical know-how, it might be possible to manually edit the JSON serialization format, but this is not officially supported.
+### Limited raster capabilities
 
-<!-- To open an outdated file, [look here](https://github.com/GraphiteEditor/Graphite/deployments/activity_log?environment=graphite-editor+%28Production%29) for the previous version of the Graphite editor that was published before the date you saved the document. Click "View deployment" to open it. -->
+While you can import bitmap images, apply image effects in the node graph, and draw brush strokes, there is not much tooling yet to make the overall raster workflow that useful. Marquee selection is an upcoming feature in the first half of 2024 which will significantly improve the utility of raster editing in Graphite. Hardware accelerated rendering, to offload work from the CPU to GPU, is also planned for early 2024 which will drastically improve the performance.
 
-### No vector import
+### Performance bottlenecks
 
-While you can export your artwork as an SVG file for use elsewhere, there is not support yet for importing an SVG file to be edited.
+Graphite has several temporary performance bottlenecks that currently yield poor performance when working with raster content, complex vector artwork, and large procedural node graphs. Each of these limitations will be resolved by finishing the implementations of the incomplete systems that impose slowdowns in their current forms. For example, caching in the node graph isn't operational and GPU-accelerated rendering isn't enabled yet. This will be a central focus throughout 2024.
 
-### Unstable node graph interactions
-
-The node graph implementation was completed very recently. There are still a number of bugs and unexpected limitations that can arise. If the graph isn't updating, it may have become invalid. You can check if there are errors by opening the JavaScript console with the <kbd>F12</kbd> key, and if you see node graph evaluation errors, undo your changes to before the unsupported graph edit.
-
-### No snapping system
-
-Previous versions of Graphite had a mediocre snapping system for helping you draw with precise alignment between elements in your artwork. To accommodate implementing the node graph, this code had to be removed because it conflicted. An improved version of the feature will be [rebuilt](https://github.com/GraphiteEditor/Graphite/issues/1206) in the near future.
-
-### Limited Safari support
+### Best-effort Safari support
 
 Old versions of Safari lack the minimum web standards features Graphite requires to run. The latest version of the browser still won't run Graphite as well as Chrome and you may encounter extra bugs because we have limited resources to regularly test for Safari issues.
 
diff --git a/website/content/logo.md b/website/content/logo.md
index 5a4f2f30..c3b154f2 100644
--- a/website/content/logo.md
+++ b/website/content/logo.md
@@ -12,7 +12,7 @@ css = ["logo.css"]
 
 <article>
 
-Graphite's logo is represented by the end of a pencil protruding from a hexagon and drawing a sketch mark.
+Graphite's logo is represented by the end of a pencil, drawing a sketch mark, that is protruding from a hexagon.
 
 The pencil and its streak, composed of the substance graphite, signifies the software's name and its role as a drawing tool and versatile art medium.
 
diff --git a/website/sass/base.scss b/website/sass/base.scss
index 85b8fd4c..c221ad72 100644
--- a/website/sass/base.scss
+++ b/website/sass/base.scss
@@ -25,7 +25,7 @@
 	--font-size-heading-h2: 42px;
 	--font-size-subheading: 24px;
 	--font-size-body: 18px;
-	--font-size-article-h2: 30px;
+	--font-size-article-h2: 32px;
 	--font-size-article-h3: 24px;
 	--font-size-article-h4: 18px;
 
@@ -186,6 +186,7 @@ p ~ .image-comparison,
 p + .link,
 p + section,
 p + table,
+p + style + table,
 p ~ .video-background,
 p ~ .video-embed,
 .video-embed + p,
diff --git a/website/sass/index.scss b/website/sass/index.scss
index e49c3020..bf9905e7 100644
--- a/website/sass/index.scss
+++ b/website/sass/index.scss
@@ -297,28 +297,6 @@
 #vector-art {
 	.section {
 		align-items: center;
-
-		.demo-artwork {
-			display: flex;
-			align-items: center;
-			margin-top: 20px;
-
-			img {
-				width: 128px;
-				height: 128px;
-				border: 12px solid var(--color-walnut);
-				vertical-align: top;
-				flex: 0 0 auto;
-			}
-
-			p {
-				display: flex;
-				flex-direction: column;
-				max-width: 300px;
-				margin-left: 40px;
-				text-align: left;
-			}
-		}
 	}
 }
 // ▙ VECTOR ART ▟
@@ -408,3 +386,25 @@
 	}
 }
 // ▙ GET INVOLVED ▟
+
+.demo-artwork {
+	display: flex;
+	align-items: center;
+	margin-top: 20px;
+
+	img {
+		width: 128px;
+		height: 128px;
+		border: 12px solid var(--color-walnut);
+		vertical-align: top;
+		flex: 0 0 auto;
+	}
+
+	p {
+		display: flex;
+		flex-direction: column;
+		max-width: 300px;
+		margin-left: 40px;
+		text-align: left;
+	}
+}