diff --git a/web/src/App.svelte b/web/src/App.svelte
index 137b8ae..12e16c9 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -5,7 +5,7 @@
     import MapC from "src/lib/MapC.svelte";
     import InitialErrorScreen from "src/lib/InitialErrorScreen.svelte";
     import LoadingScreen from "src/lib/LoadingScreen.svelte";
-    import { type LayerName } from "src/constants";
+    import { type LayerName } from "src/types";
     import {
         allScenarios,
         scenarioName,
diff --git a/web/src/constants.ts b/web/src/constants.ts
deleted file mode 100644
index 9cbc0c2..0000000
--- a/web/src/constants.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-/* Output indicators */
-
-export type IndicatorName = "air_quality" | "house_price" | "job_accessibility" | "greenspace_accessibility";
-
-export type Indicator = { short: string, less: string, more: string, less_diff: string, more_diff: string, colormap: string, colormapReversed: boolean };
-
-export const allIndicators: Map<IndicatorName, Indicator> = new Map([
-    ["air_quality", {
-        "short": "Air pollution",
-        "less": "cleaner",
-        "more": "more polluted",
-        "less_diff": "improved",
-        "more_diff": "worsened",
-        "colormap": "magma",
-        "colormapReversed": false,
-    }],
-    ["house_price", {
-        "short": "House prices",
-        "less": "cheaper",
-        "more": "more expensive",
-        "less_diff": "decreased",
-        "more_diff": "increased",
-        "colormap": "viridis",
-        "colormapReversed": false,
-    }],
-    ["job_accessibility", {
-        "short": "Job accessibility",
-        "less": "lower",
-        "more": "higher",
-        "less_diff": "decreased",
-        "more_diff": "increased",
-        "colormap": "plasma",
-        "colormapReversed": false,
-    }],
-    ["greenspace_accessibility", {
-        "short": "Greenspace accessibility",
-        "less": "lower",
-        "more": "higher",
-        "less_diff": "decreased",
-        "more_diff": "increased",
-        "colormap": "chlorophyll",
-        "colormapReversed": true,
-    }],
-]);
-
-
-/* Model inputs (land use) */
-
-export type InputName = "signature_type";
-
-export type Input = { short: string };
-
-export const allInputs: Map<InputName, Input> = new Map([
-    ["signature_type", { "short": "Spatial signatures" }]
-]);
-
-/* A generic type, handling all inputs and outputs which can be visualised as a
- * map layer */
-
-export type LayerName = InputName | IndicatorName;
-
-export type Layer = { short: string };
-
-export const allLayers: Map<LayerName, Layer> = new Map(
-    [...allInputs.entries(), ...allIndicators.entries()]
-);
-
-/* Scenarios */
-// Most of this code was shifted to scenarios.ts.
-
-export type OA = string;
-
-// Range to scale all indicator values to
-export const GLOBALMIN = 0;
-export const GLOBALMAX = 100;
-
-// Macro variables. Ideally, these would just be `Input`s, but we don't actually
-// plot most of these yet (only signature types), so these have to be given a
-// new type.
-export type MacroVar = "signature_type" | "use" | "greenspace" | "job_types";
-
-
-// Scenarios
-
-export type ScenarioMetadata = {
-    name: string,           // unique identifier
-    short: string,          // short description (for dropdown box)
-    long: string,           // long description (title in UI)
-    description: string,    // full text description
-};
-export type ScenarioChanges = Map<string, Map<MacroVar, number | null>>;
-export type ScenarioValues = Map<string, Map<LayerName, number>>;
-
-export type Scenario = {
-    metadata: ScenarioMetadata,   // as described above
-    changes: ScenarioChanges,     // inputs changed relative to baseline
-    values: ScenarioValues        // values of all indicators and inputs
-};
-
-// Corresponding JSON types
-export type ChangesObject = { [oa: string]: { [mv in MacroVar]: number } }
-export type ValuesObject = { [oa: string]: { [ln in LayerName]: number } }
-export type MetadataObject = { name: string, short: string, long: string, description: string }
-export type ScenarioObject = { metadata: MetadataObject, changes: ChangesObject, values: ValuesObject }
-
-export type ScaleFactorMap = Map<LayerName, { min: number, max: number }>;
-
-export const signatures = [
-    { name: "Wild countryside", color: "#d7ded1" },
-    { name: "Countryside agriculture", color: "#f2e6c7" },
-    { name: "Urban buffer", color: "#c2d0d9" },
-    { name: "Warehouse/Park land", color: "#c3abaf" },
-    { name: "Open sprawl", color: "#d7a59f" },
-    { name: "Disconnected suburbia", color: "#f0d17d" },
-    { name: "Accessible suburbia", color: "#8fa37e" },
-    { name: "Connected residential neighbourhoods", color: "#94666e" },
-    { name: "Dense residential neighbourhoods", color: "#678ea6" },
-    { name: "Gridded residential quarters", color: "#e4cbc8" },
-    { name: "Dense urban neighbourhoods", color: "#efc758" },
-    { name: "Local urbanity", color: "#3b6e8c" },
-    { name: "Regional urbanity", color: "#ab888e" },
-    { name: "Metropolitan urbanity", color: "#bc5b4f" },
-    { name: "Concentrated urbanity", color: "#333432" },
-    { name: "Hyper concentrated urbanity", color: "#a7b799" },
-];
diff --git a/web/src/data/config.ts b/web/src/data/config.ts
index 9aa77e9..ae23347 100644
--- a/web/src/data/config.ts
+++ b/web/src/data/config.ts
@@ -1,4 +1,32 @@
-import type { ScenarioObject } from "src/constants";
+import type { ScenarioObject, IndicatorName, Indicator,
+    InputName, Input, LayerName, Layer
+} from "src/types";
+
+/* --------------------------------- */
+/* GEOGRAPHY                         */
+/* --------------------------------- */
+
+// This must be a FeatureCollection GeoJSON that covers the area of interest.
+// Here, we use a .json extension so that TypeScript can properly import it.
+import geography from "src/data/geography.json";
+
+// Each feature in the GeoJSON file must contain a property that gives a unique
+// identifier for each feature. The value of the identifier must be a string.
+const featureIdentifier = "OA11CD";
+
+// Initial latitude of the map
+const initialLatitude = 54.94;
+// Initial longitude of the map
+const initialLongitude = -1.59;
+// Initial zoom level of the map
+const initialZoom = 10.05;
+
+/* --------------------------------- */
+/* SCENARIOS                         */
+/* --------------------------------- */
+
+// These are JSON files containing the spatial signature and indicator values
+// for each scenario.
 import baseline from "src/data/scenarios/baseline.json";
 import scenario1 from "src/data/scenarios/scenario1.json";
 import scenario2 from "src/data/scenarios/scenario2.json";
@@ -8,37 +36,152 @@ import scenario5 from "src/data/scenarios/scenario5.json";
 import scenario6 from "src/data/scenarios/scenario6.json";
 import scenario7 from "src/data/scenarios/scenario7.json";
 
+// One of the scenarios is used as the 'reference', against which values are
+// scaled.
+const referenceScenarioFile = baseline;
+
+// Range to scale all indicator values between (for the baseline).
+const scale = {
+    min: 0,
+    max: 100,
+}
+
+// List all the other scenarios here.
+const otherScenarioFiles = [
+    scenario1,
+    scenario1,
+    scenario2,
+    scenario3,
+    scenario4,
+    scenario5,
+    scenario6,
+    scenario7
+]
+
+/* --------------------------------- */
+/* INDICATORS                        */
+/* --------------------------------- */
+
+const allIndicators: Map<IndicatorName, Indicator> = new Map([
+    // The IndicatorName here must match with the name of the indicator given in
+    // the JSON file.
+    ["air_quality", {
+        // This is an actual prose name of the indicator used in the UI.
+        "short": "Air pollution",
+        // 'less' and 'more' are used in the charts to describe what smaller and
+        // larger values mean respectively.
+        "less": "cleaner",
+        "more": "more polluted",
+        // 'less_diff' and 'more_diff' are used in charts that compare two
+        // scenarios. 'less_diff' should describe what happens for areas where
+        // the value of the indicator decreases, and vice versa for 'more_diff'.
+        "less_diff": "improved",
+        "more_diff": "worsened",
+        // The name of the colormap to use for this indicator, and whether to
+        // reverse it. A list of available names can be found at
+        // https://www.npmjs.com/package/colormap.
+        "colormap": "magma",
+        "colormapReversed": false,
+    }],
+    ["house_price", {
+        "short": "House prices",
+        "less": "cheaper",
+        "more": "more expensive",
+        "less_diff": "decreased",
+        "more_diff": "increased",
+        "colormap": "viridis",
+        "colormapReversed": false,
+    }],
+    ["job_accessibility", {
+        "short": "Job accessibility",
+        "less": "lower",
+        "more": "higher",
+        "less_diff": "decreased",
+        "more_diff": "increased",
+        "colormap": "plasma",
+        "colormapReversed": false,
+    }],
+    ["greenspace_accessibility", {
+        "short": "Greenspace accessibility",
+        "less": "lower",
+        "more": "higher",
+        "less_diff": "decreased",
+        "more_diff": "increased",
+        "colormap": "chlorophyll",
+        "colormapReversed": true,
+    }],
+]);
+
+/* --------------------------------- */
+/* SPATIAL SIGNATURES                */
+/* --------------------------------- */
+
+// This probably does not need to be changed. Note that the order of the
+// signatures is important: signatures are stored as integers in the JSON files
+// and this list is indexed using those integers to get the correct signature.
+const signatures = [
+    { name: "Wild countryside", color: "#d7ded1" },
+    { name: "Countryside agriculture", color: "#f2e6c7" },
+    { name: "Urban buffer", color: "#c2d0d9" },
+    { name: "Warehouse/Park land", color: "#c3abaf" },
+    { name: "Open sprawl", color: "#d7a59f" },
+    { name: "Disconnected suburbia", color: "#f0d17d" },
+    { name: "Accessible suburbia", color: "#8fa37e" },
+    { name: "Connected residential neighbourhoods", color: "#94666e" },
+    { name: "Dense residential neighbourhoods", color: "#678ea6" },
+    { name: "Gridded residential quarters", color: "#e4cbc8" },
+    { name: "Dense urban neighbourhoods", color: "#efc758" },
+    { name: "Local urbanity", color: "#3b6e8c" },
+    { name: "Regional urbanity", color: "#ab888e" },
+    { name: "Metropolitan urbanity", color: "#bc5b4f" },
+    { name: "Concentrated urbanity", color: "#333432" },
+    { name: "Hyper concentrated urbanity", color: "#a7b799" },
+];
+
+/* --------------------------------- */
+/* Everything after this does not    */
+/* need to be modified.              */
+/* --------------------------------- */
+
+const allInputs: Map<InputName, Input> = new Map([
+    ["signature_type", { "short": "Spatial signatures" }]
+]);
+
+const allLayers: Map<LayerName, Layer> = new Map(
+    [...allInputs.entries(), ...allIndicators.entries()]
+);
+
 interface Config {
+    geography: GeoJSON.FeatureCollection;
     featureIdentifier: string;
     initialLatitude: number;
     initialLongitude: number;
     initialZoom: number;
     referenceScenarioFile: ScenarioObject;
     otherScenarioFiles: ScenarioObject[];
+    signatures: { name: string, color: string }[];
+    allIndicators: Map<IndicatorName, Indicator>;
+    allInputs: Map<InputName, Input>;
+    allLayers: Map<LayerName, Layer>;
+    scale: {
+        min: number;
+        max: number;
+    };
 }
 
 const config: Config = {
-    // GeoJSON key which gives a unique identifier for each feature. The value
-    // of the identifier must be a string.
-    featureIdentifier: "OA11CD",
-    // Initial latitude of the map
-    initialLatitude: 54.94,
-    // Initial longitude of the map
-    initialLongitude: -1.59,
-    // Initial zoom level of the map
-    initialZoom: 10.05,
-    // Imported JSON object of reference scenario to scale values against
-    referenceScenarioFile: baseline,
-    // Imported JSON objects for all other scenarios
-    otherScenarioFiles: [
-        scenario1,
-        scenario2,
-        scenario3,
-        scenario4,
-        scenario5,
-        scenario6,
-        scenario7
-    ]
+    initialLatitude: initialLatitude,
+    initialLongitude: initialLongitude,
+    initialZoom: initialZoom,
+    geography: geography as GeoJSON.FeatureCollection,
+    featureIdentifier: featureIdentifier,
+    referenceScenarioFile: referenceScenarioFile,
+    otherScenarioFiles: otherScenarioFiles,
+    signatures: signatures,
+    allIndicators: allIndicators,
+    allInputs: allInputs,
+    allLayers: allLayers,
+    scale: scale,
 };
 
 export default config;
diff --git a/web/src/initialise.ts b/web/src/initialise.ts
index 6629111..90e2f90 100644
--- a/web/src/initialise.ts
+++ b/web/src/initialise.ts
@@ -1,8 +1,7 @@
 import {
     type Scenario,
     type ScaleFactorMap,
-    allLayers,
-} from "src/constants";
+} from "src/types";
 import { fromScenarioObject } from "src/utils/scenarios";
 import config from "src/data/config";
 
@@ -32,7 +31,7 @@ export function setupAreaNames(referenceScenario: Scenario): Set<string> {
 export function setupScaleFactors(referenceScenarioUnscaled: Scenario): ScaleFactorMap {
     // Calculate current minimum and maximum values
     const scaleFactors: ScaleFactorMap = new Map();
-    for (const layerName of allLayers.keys()) {
+    for (const layerName of config.allLayers.keys()) {
         const allValues = [];
         for (const oaValues of referenceScenarioUnscaled.values.values()) {
             allValues.push(oaValues.get(layerName));
diff --git a/web/src/lib/MapC.svelte b/web/src/lib/MapC.svelte
index 14fe626..ffa178c 100644
--- a/web/src/lib/MapC.svelte
+++ b/web/src/lib/MapC.svelte
@@ -8,7 +8,7 @@
         getInputDiffBoundaries,
     } from "src/utils/geojson";
     import { makePopup } from "src/utils/hover";
-    import { allLayers, type LayerName } from "src/constants";
+    import { type LayerName } from "src/types";
     import {
         allScenarios,
         scenarioName,
@@ -267,7 +267,7 @@
         // The way around it is to use fill-opacity (which is not data-driven)
         // for four different layers. The only real drawback is (in principle)
         // performance, but I haven't really noticed any issues so far.
-        for (const layerName of allLayers.keys()) {
+        for (const layerName of config.allLayers.keys()) {
             const mapLayerId = `${layerName}-layer`;
             map.addLayer({
                 id: mapLayerId,
@@ -337,7 +337,7 @@
         // Fade in the layers that we want, after a small delay to allow for
         // loading.
         setTimeout(function () {
-            for (const layerName of allLayers.keys()) {
+            for (const layerName of config.allLayers.keys()) {
                 const mapLayerId = `${layerName}-layer`;
                 map.setPaintProperty(
                     mapLayerId,
@@ -366,7 +366,7 @@
     // as the opacity slider.
     export function updateLayers() {
         if (map) {
-            for (const layerName of allLayers.keys()) {
+            for (const layerName of config.allLayers.keys()) {
                 map.setPaintProperty(`${layerName}-layer`, "fill-color", [
                     "get",
                     $compareScenarioName === null
diff --git a/web/src/lib/RightSidebar.svelte b/web/src/lib/RightSidebar.svelte
index 1a8f175..bf1711e 100644
--- a/web/src/lib/RightSidebar.svelte
+++ b/web/src/lib/RightSidebar.svelte
@@ -5,8 +5,8 @@
     import Collapsible from "src/lib/reusable/Collapsible.svelte";
     import {
         type LayerName,
-        allIndicators,
-    } from "src/constants";
+    } from "src/types";
+    import config from "src/data/config";
 
     export let activeLayer: LayerName;
     export let opacity: number;
@@ -33,7 +33,7 @@
             />
         </Collapsible>
 
-        {#each [...allIndicators.entries()] as [indiName, indi]}
+        {#each [...config.allIndicators.entries()] as [indiName, indi]}
             <Collapsible title={indi.short} collapsed={activeLayer !== "signature_type" && indiName !== activeLayer}>
                 <Chart
                     indicatorName={indiName}
diff --git a/web/src/lib/leftSidebar/Choose.svelte b/web/src/lib/leftSidebar/Choose.svelte
index 186aa0b..420aa56 100644
--- a/web/src/lib/leftSidebar/Choose.svelte
+++ b/web/src/lib/leftSidebar/Choose.svelte
@@ -7,7 +7,7 @@
     import { createEventDispatcher } from "svelte";
     import { fly, slide } from "svelte/transition";
 
-    import { type Scenario } from "src/constants";
+    import { type Scenario } from "src/types";
     import Export from "./Export.svelte";
     import {
         allScenarios,
diff --git a/web/src/lib/leftSidebar/Create.svelte b/web/src/lib/leftSidebar/Create.svelte
index 55059b7..8ec3ac7 100644
--- a/web/src/lib/leftSidebar/Create.svelte
+++ b/web/src/lib/leftSidebar/Create.svelte
@@ -9,7 +9,7 @@
         type ScenarioChanges,
         type ScenarioObject,
         type Scenario,
-    } from "src/constants";
+    } from "src/types";
     import { toChangesObject, fromScenarioObject } from "src/utils/scenarios";
     import {
         allScenarios,
diff --git a/web/src/lib/leftSidebar/create/ModifyOutputAreas.svelte b/web/src/lib/leftSidebar/create/ModifyOutputAreas.svelte
index f2378cb..99ee41b 100644
--- a/web/src/lib/leftSidebar/create/ModifyOutputAreas.svelte
+++ b/web/src/lib/leftSidebar/create/ModifyOutputAreas.svelte
@@ -10,10 +10,10 @@
         clickedOAs,
     } from "src/stores";
     import {
-        signatures,
         type MacroVar,
         type ScenarioChanges,
-    } from "src/constants";
+    } from "src/types";
+    import config from "src/data/config";
 
     // The actual changes
     export let changes: ScenarioChanges;
@@ -281,7 +281,7 @@
                 bind:value={sig}
                 on:change={updateOAChanges}
             >
-                {#each [...signatures.entries()] as [signatureId, signature]}
+                {#each [...config.signatures.entries()] as [signatureId, signature]}
                     <option value={signatureId}
                         >{signatureId}: {signature.name}</option
                     >
@@ -289,7 +289,7 @@
             </select>
         {:else}
             <select id="sig-dropdown" value={baselineSig} disabled>
-                {#each [...signatures.entries()] as [signatureId, signature]}
+                {#each [...config.signatures.entries()] as [signatureId, signature]}
                     <option value={signatureId}
                         >{signatureId}: {signature.name}</option
                     >
diff --git a/web/src/lib/rightSidebar/Chart.svelte b/web/src/lib/rightSidebar/Chart.svelte
index 8dad6c3..209d4c6 100644
--- a/web/src/lib/rightSidebar/Chart.svelte
+++ b/web/src/lib/rightSidebar/Chart.svelte
@@ -3,9 +3,8 @@
     import {
         type IndicatorName,
         type Indicator,
-        allIndicators,
         type Scenario,
-    } from "src/constants";
+    } from "src/types";
     import {
         type ChartDataset,
         type ChartData,
@@ -15,6 +14,7 @@
     import { onMount, onDestroy } from "svelte";
     export let indicatorName: IndicatorName;
     import { allScenarios, scenarioName, compareScenarioName} from "src/stores";
+    import config from "src/data/config";
 
     // Number of bars to use in the chart
     const nbars = 11;
@@ -157,7 +157,7 @@
     });
     onDestroy(destroyChart);
 
-    let indi: Indicator = allIndicators.get(indicatorName);
+    let indi: Indicator = config.allIndicators.get(indicatorName);
     let values: number[];
     let cmpValues: number[];
     let changes: number[];
diff --git a/web/src/lib/rightSidebar/LayerSelector.svelte b/web/src/lib/rightSidebar/LayerSelector.svelte
index 57ee063..abae7f4 100644
--- a/web/src/lib/rightSidebar/LayerSelector.svelte
+++ b/web/src/lib/rightSidebar/LayerSelector.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { type LayerName, allInputs, allIndicators } from "src/constants";
+    import { type LayerName } from "src/types";
+    import config from "src/data/config";
     import Tooltip from "src/lib/reusable/Tooltip.svelte";
     import showWelcomeIcon from "src/assets/show-welcome.svg";
     import { createEventDispatcher } from "svelte";
@@ -19,7 +20,7 @@
 
 <div id="indicators">
     <div class="category-first">Land use</div>
-    {#each [...allInputs.entries()] as [inputName, input]}
+    {#each [...config.allInputs.entries()] as [inputName, input]}
         <label id={inputName + "-label"}
             ><input
                 bind:group={activeLayer}
@@ -51,7 +52,7 @@
     {/each}
 
     <div class="category-second">Indicators</div>
-    {#each [...allIndicators.entries()] as [indiName, indi]}
+    {#each [...config.allIndicators.entries()] as [indiName, indi]}
         <label id={indiName + "-label"}
             ><input
                 bind:group={activeLayer}
diff --git a/web/src/lib/rightSidebar/chart.ts b/web/src/lib/rightSidebar/chart.ts
index 870b1f7..6c34349 100644
--- a/web/src/lib/rightSidebar/chart.ts
+++ b/web/src/lib/rightSidebar/chart.ts
@@ -1,10 +1,6 @@
-import {
-    type IndicatorName,
-    GLOBALMIN,
-    GLOBALMAX,
-} from "src/constants";
+import { type IndicatorName, type Scenario } from "src/types";
 import { makeColormap } from "src/utils/colors";
-import { type Scenario } from "src/constants";
+import config from "src/data/config";
 
 // Get all values for a given indicator in a given scenario.
 export function getValues(indicator: IndicatorName, scenario: Scenario): number[] {
@@ -118,7 +114,7 @@ function makeChartDataOneScenario(
     // Plot one dataset only (current indicator, current scenario)
     const colors: string[] = makeColormap(indicator, nbars);
     const rawValues: number[] = getValues(indicator, scenario);
-    const bins = bin(rawValues, GLOBALMIN, GLOBALMAX, nbars);
+    const bins = bin(rawValues, config.scale.min, config.scale.max, nbars);
     const mean = getMean(rawValues);
 
     return {
@@ -146,7 +142,7 @@ function makeChartDataOneScenario(
             },
         ],
         labels: bins.centres,
-        tickStepSize: calculateTickStepSize(GLOBALMAX, GLOBALMIN),
+        tickStepSize: calculateTickStepSize(config.scale.max, config.scale.min),
     };
 }
 
@@ -160,8 +156,8 @@ function makeChartDataTwoScenarios(
     const colors: string[] = makeColormap(indicator, nbars);
     const rawValues: number[] = getValues(indicator, scenario);
     const cmpRawValues: number[] = getValues(indicator, compareScenario);
-    const bins = bin(rawValues, GLOBALMIN, GLOBALMAX, nbars);
-    const cmpBins = bin(cmpRawValues, GLOBALMIN, GLOBALMAX, nbars);
+    const bins = bin(rawValues, config.scale.min, config.scale.max, nbars);
+    const cmpBins = bin(cmpRawValues, config.scale.min, config.scale.max, nbars);
     const mean = getMean(rawValues);
     const cmpMean = getMean(cmpRawValues);
 
@@ -217,7 +213,7 @@ function makeChartDataTwoScenarios(
             },
         ],
         labels: bins.centres,
-        tickStepSize: calculateTickStepSize(GLOBALMAX, GLOBALMIN),
+        tickStepSize: calculateTickStepSize(config.scale.max, config.scale.min),
     };
 }
 
diff --git a/web/src/stores.ts b/web/src/stores.ts
index 9a66b7f..89b7fcb 100644
--- a/web/src/stores.ts
+++ b/web/src/stores.ts
@@ -1,6 +1,6 @@
 import { writable, type Writable } from 'svelte/store';
 
-import { type Scenario, type LayerName } from 'src/constants';
+import { type Scenario, type LayerName } from 'src/types';
 
 // Create stores, but don't initialise their values yet; this will be done at
 // the top of App.svelte.
diff --git a/web/src/types.ts b/web/src/types.ts
new file mode 100644
index 0000000..48c9736
--- /dev/null
+++ b/web/src/types.ts
@@ -0,0 +1,53 @@
+/* Output indicators */
+
+export type IndicatorName = "air_quality" | "house_price" | "job_accessibility" | "greenspace_accessibility";
+
+export type Indicator = { short: string, less: string, more: string, less_diff: string, more_diff: string, colormap: string, colormapReversed: boolean };
+
+/* Model inputs (land use) */
+
+export type InputName = "signature_type";
+
+export type Input = { short: string };
+
+/* A generic type, handling all inputs and outputs which can be visualised as a
+ * map layer */
+
+export type LayerName = InputName | IndicatorName;
+
+export type Layer = { short: string };
+
+/* Scenarios */
+// Most of this code was shifted to scenarios.ts.
+
+export type OA = string;
+
+// Macro variables. Ideally, these would just be `Input`s, but we don't actually
+// plot most of these yet (only signature types), so these have to be given a
+// new type.
+export type MacroVar = "signature_type" | "use" | "greenspace" | "job_types";
+
+// Scenarios
+
+export type ScenarioMetadata = {
+    name: string,           // unique identifier
+    short: string,          // short description (for dropdown box)
+    long: string,           // long description (title in UI)
+    description: string,    // full text description
+};
+export type ScenarioChanges = Map<string, Map<MacroVar, number | null>>;
+export type ScenarioValues = Map<string, Map<LayerName, number>>;
+
+export type Scenario = {
+    metadata: ScenarioMetadata,   // as described above
+    changes: ScenarioChanges,     // inputs changed relative to baseline
+    values: ScenarioValues        // values of all indicators and inputs
+};
+
+// Corresponding JSON types
+export type ChangesObject = { [oa: string]: { [mv in MacroVar]: number } }
+export type ValuesObject = { [oa: string]: { [ln in LayerName]: number } }
+export type MetadataObject = { name: string, short: string, long: string, description: string }
+export type ScenarioObject = { metadata: MetadataObject, changes: ChangesObject, values: ValuesObject }
+
+export type ScaleFactorMap = Map<LayerName, { min: number, max: number }>;
diff --git a/web/src/utils/colors.ts b/web/src/utils/colors.ts
index 548c7c7..60bd266 100644
--- a/web/src/utils/colors.ts
+++ b/web/src/utils/colors.ts
@@ -1,5 +1,6 @@
 import colormap from "colormap";
-import { allIndicators, type IndicatorName, signatures, type LayerName, GLOBALMIN, GLOBALMAX } from "src/constants";
+import { type IndicatorName, type LayerName, } from "src/types";
+import config from "src/data/config";
 
 export function makeColormap(indicator: IndicatorName | "diff", n: number) {
     if (indicator === "diff") {
@@ -11,7 +12,7 @@ export function makeColormap(indicator: IndicatorName | "diff", n: number) {
         });
     }
     else {
-        const indi = allIndicators.get(indicator);
+        const indi = config.allIndicators.get(indicator);
         const cmap = colormap({
             colormap: indi.colormap,
             nshades: n,
@@ -48,11 +49,11 @@ export function getColor(layerName: LayerName, value: number) {
 
     if (layerName === "signature_type") {
         // Categorical variable
-        return signatures[value].color;
+        return config.signatures[value].color;
     }
     else {
         // Continuous variables, use the respective colormaps
-        return getColorFromMap(colormaps[layerName], value, GLOBALMIN, GLOBALMAX);
+        return getColorFromMap(colormaps[layerName], value, config.scale.min, config.scale.max);
     }
 }
 
@@ -74,7 +75,7 @@ export function getDiffColor(layerName: LayerName, value: number, cmpValue: numb
     if (layerName === "signature_type") {
         // Categorical variable. If it's the same, we don't show anything. If
         // it's different, we show the color of the main scenario.
-        return value === cmpValue ? "rgba(0, 0, 0, 0.1)" : signatures[value].color;
+        return value === cmpValue ? "rgba(0, 0, 0, 0.1)" : config.signatures[value].color;
     }
     else {
         // Continuous variables, use 'diff' colormap
diff --git a/web/src/utils/geojson.ts b/web/src/utils/geojson.ts
index d67ba33..b2be4de 100644
--- a/web/src/utils/geojson.ts
+++ b/web/src/utils/geojson.ts
@@ -1,7 +1,6 @@
-import geography from "src/data/geography.json";
 import maplibregl from "maplibre-gl";
 import union from "@turf/union";
-import { allLayers, type LayerName, type ScenarioChanges, type Scenario } from "src/constants";
+import { type LayerName, type ScenarioChanges, type Scenario } from "src/types";
 import { getColor, getDiffColor } from "src/utils/colors";
 import config from "src/data/config";
 
@@ -28,7 +27,7 @@ export function makeCombinedGeoJSON(
     // the min and max values for the 'diff' colormap.
     const maxDiffExtents: Map<LayerName, number> = new Map();
     if (compareScenario !== null) {
-        for (const layerName of allLayers.keys()) {
+        for (const layerName of config.allLayers.keys()) {
             const diffs: number[] = [];
             for (const oa of scenario.values.keys()) {
                 diffs.push(scenario.values.get(oa).get(layerName) - compareScenario.values.get(oa).get(layerName));
@@ -38,7 +37,7 @@ export function makeCombinedGeoJSON(
         }
     }
 
-    const newGeography = JSON.parse(JSON.stringify(geography));
+    const newGeography = JSON.parse(JSON.stringify(config.geography));
     // Merge geography with indicators
     newGeography.features = newGeography.features.map(function(feature) {
         const oaName = feature.properties[config.featureIdentifier];
@@ -46,7 +45,7 @@ export function makeCombinedGeoJSON(
         if (oaValues === undefined) {
             throw new Error(`${oaName} not found in values!`);
         }
-        for (const layerName of allLayers.keys()) {
+        for (const layerName of config.allLayers.keys()) {
             const value = oaValues.get(layerName);
             feature.properties[layerName] = value;
             feature.properties[`${layerName}-color`] = getColor(layerName, value);
@@ -56,7 +55,7 @@ export function makeCombinedGeoJSON(
             if (cOaValues === undefined) {
                 throw new Error(`Output area ${oaName} not found in compare values; this should not happen`);
             }
-            for (const layerName of allLayers.keys()) {
+            for (const layerName of config.allLayers.keys()) {
                 const value = oaValues.get(layerName);
                 const cmpValue = cOaValues.get(layerName);
                 feature.properties[`${layerName}-cmp`] = cmpValue;
@@ -178,8 +177,8 @@ export function getInputDiffBoundaries(
     // Extract these OAs from the base geography
     const boundary = {
         "type": "FeatureCollection",
-        "crs": geography.crs,
-        "features": geography.features.filter(
+        "crs": config.geography.crs,
+        "features": config.geography.features.filter(
             feature => differentOAs.has(feature.properties[config.featureIdentifier])
         ),
     } as GeoJSON.FeatureCollection;
diff --git a/web/src/utils/hover.ts b/web/src/utils/hover.ts
index 5b99f40..ed7fb2d 100644
--- a/web/src/utils/hover.ts
+++ b/web/src/utils/hover.ts
@@ -1,12 +1,10 @@
 import { getGeometryBounds } from "src/utils/geojson";
 import maplibregl from "maplibre-gl";
 import {
-    allIndicators,
     type Indicator,
     type IndicatorName,
     type LayerName,
-    signatures,
-} from "src/constants";
+} from "src/types";
 import { unscale } from "src/utils/scenarios";
 import config from "src/data/config";
 
@@ -25,14 +23,14 @@ function makeHoverHtml(feat: GeoJSON.Feature,
     // Generate the HTML showing the signature type
     function makeSig(): string {
         const sig: number = feat.properties["signature_type"];
-        const sigName: string = signatures[sig].name;
-        const sigColor: string = signatures[sig].color;
+        const sigName: string = config.signatures[sig].name;
+        const sigColor: string = config.signatures[sig].color;
         if (compareScenarioName === null) {
             return activeFactor === "signature_type"
                 ? `<span class="oa-grid-item strong">${makeColoredBlock(sigColor)}&nbsp;${sigName}</span>`
                 : `<span class="oa-grid-item strong">${sigName}</span>`;
         } else {
-            const cmpSig = signatures[feat.properties["signature_type-cmp"]].name;
+            const cmpSig = config.signatures[feat.properties["signature_type-cmp"]].name;
             if (sigName === cmpSig) {
                 return activeFactor === "signature_type"
                     ? `<span class="oa-grid-item strong">${makeColoredBlock(sigColor)}&nbsp;${sigName}</span>`
@@ -82,7 +80,7 @@ function makeHoverHtml(feat: GeoJSON.Feature,
         `<div class="hover-grid">`,
         `<span class="oa-grid-item oa-name">${feat.properties[config.featureIdentifier]}</span>`,
         makeSig(),
-        ...[...allIndicators.entries()].map(([name, indi]) => makeIndi(name, indi)),
+        ...[...config.allIndicators.entries()].map(([name, indi]) => makeIndi(name, indi)),
         `</div>`,
     ].join("");
 }
diff --git a/web/src/utils/scenarios.ts b/web/src/utils/scenarios.ts
index 5a19826..495244a 100644
--- a/web/src/utils/scenarios.ts
+++ b/web/src/utils/scenarios.ts
@@ -3,8 +3,8 @@ import {
     type ScenarioChanges, type ScenarioValues, type Scenario,
     type ChangesObject, type ValuesObject, type ScenarioObject,
     type ScaleFactorMap,
-    GLOBALMIN, GLOBALMAX
-} from "src/constants";
+} from "src/types";
+import config from "src/data/config";
 
 export function rescale(
     layerName: LayerName,
@@ -21,7 +21,7 @@ export function rescale(
         } else {
             const min = scaleFactors.get(layerName).min;
             const max = scaleFactors.get(layerName).max;
-            return GLOBALMIN + (GLOBALMAX - GLOBALMIN) * (unscaledVal - min) / (max - min);
+            return config.scale.min + (config.scale.max - config.scale.min) * (unscaledVal - min) / (max - min);
         }
     }
 }
@@ -41,7 +41,7 @@ export function unscale(
         } else {
             const min = scaleFactors.get(layerName).min;
             const max = scaleFactors.get(layerName).max;
-            return min + (max - min) * (scaledVal - GLOBALMIN) / (GLOBALMAX - GLOBALMIN);
+            return min + (max - min) * (scaledVal - config.scale.min) / (config.scale.max - config.scale.min);
         }
     }
 }