diff --git a/_includes/css/just-the-docs.scss.liquid b/_includes/css/just-the-docs.scss.liquid
index da0f40847bd8fd0f836813b81286a983c1300f94..3e24c02aaca642c9b5e718742d9bc6f076c66417 100644
--- a/_includes/css/just-the-docs.scss.liquid
+++ b/_includes/css/just-the-docs.scss.liquid
@@ -2,6 +2,7 @@
 $logo: "{{ site.logo | relative_url }}";
 {% endif %}
 @import "./support/support";
+@import "./custom/setup";
 @import "./color_schemes/light";
 @import "./color_schemes/{{ include.color_scheme }}";
 @import "./modules";
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index d5c801e6154a5f4765c8efd5c97edf04a7ac41c5..ac8445a7ef84b7bfa307889572b0259d981d40e4 100644
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -1,4 +1 @@
-$pink-000: #f77ef1;
-$pink-100: #f967f1;
-$pink-200: #e94ee1;
-$pink-300: #dd2cd4;
+// custom SCSS (or CSS) goes here
diff --git a/_sass/custom/setup.scss b/_sass/custom/setup.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c3b0a942352f84fa906c523768d02fd748f2c4a7
--- /dev/null
+++ b/_sass/custom/setup.scss
@@ -0,0 +1 @@
+// custom setup code goes here
diff --git a/docs/configuration.md b/docs/configuration.md
index b03806f094d20a164fa35aee50ddd62766e3b147..239cde998551ec809869be71c175934a870e0939 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -185,7 +185,7 @@ A paragraph...
 [^dark]:
     If you use the `dark` color scheme, this callout uses `$red-300` for the background, and `$red-000` for the title.
 
-The colors `grey-lt`, `grey-dk`, `purple`, `blue`, `green`, `yellow`, and `red` are predefined; to use a custom color, you need to define its `000` and `300` levels in your SCSS files. For example, to use `pink`, add the following to your `_sass/custom/custom.scss` file:
+The colors `grey-lt`, `grey-dk`, `purple`, `blue`, `green`, `yellow`, and `red` are predefined; to use a custom color, you need to define its `000` and `300` levels in your SCSS files. For example, to use `pink`, add the following to your `_sass/custom/setup.scss` file:
 
 ```scss
 $pink-000: #f77ef1;
diff --git a/docs/customization.md b/docs/customization.md
index 57fc99767977e103fa39a029fc2a9d4935c975c1..d1a37ed673ffba0545e1fef9ade17133fc195435 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -111,9 +111,29 @@ This allows you to switch the scheme via the following javascript.
 jtd.setTheme("foo")
 ```
 
+## Override and define new variables
+{: .d-inline-block }
+
+New (v0.4.0)
+{: .label .label-green }
+
+To define new SCSS variables, functions, or override existing theme variables, place SCSS code in `_sass/custom/setup.scss`. This should *not* be used for defining custom styles (see the next section).
+
+This is most commonly-used to define [custom callout colors]({% link docs/configuration.md %}#callouts). For example,
+
+```scss
+// _sass/custom/setup.scss
+$pink-000: #f77ef1;
+$pink-100: #f967f1;
+$pink-200: #e94ee1;
+$pink-300: #dd2cd4;
+```
+
+In particular: this file is imported *after* the theme's variables and functions are defined, but *before* any CSS classes are emitted.
+
 ## Override and completely custom styles
 
-For styles that aren't defined as variables, you may want to modify specific CSS classes.
+For styles that aren't defined as SCSS variables, you may want to modify specific CSS classes.
 Additionally, you may want to add completely custom CSS specific to your content.
 To do this, put your styles in the file `_sass/custom/custom.scss`.
 This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.