diff --git a/website/src/components/ThemeSelector.tsx b/website/src/components/ThemeSelector.tsx
index 4eee1ad8d2..5611f70fdd 100644
--- a/website/src/components/ThemeSelector.tsx
+++ b/website/src/components/ThemeSelector.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react'
 import styled, { useTheme } from 'styled-components'
 import { useSetTheme } from '../theming/SwitchableThemeProvider'
-import { Switch } from './controls/Switch'
+import { Switch } from './controls/ui'
 
 const ThemeSelector = () => {
     const theme = useTheme()
diff --git a/website/src/components/controls/ControlsGroup.tsx b/website/src/components/controls/ControlsGroup.tsx
index 5c5bf11caf..6ef5e7d3b4 100644
--- a/website/src/components/controls/ControlsGroup.tsx
+++ b/website/src/components/controls/ControlsGroup.tsx
@@ -1,31 +1,39 @@
 import React, { memo, useCallback } from 'react'
 import get from 'lodash/get'
 import snakeCase from 'lodash/snakeCase'
-import { ArrayControl } from './ArrayControl'
-import { ObjectControl } from './ObjectControl'
-import { SwitchControl } from './SwitchControl'
-import { SwitchableRangeControl } from './SwitchableRangeControl'
-import { ColorsControl } from './ColorsControl'
-import { QuantizeColorsControl } from './QuantizeColorsControl'
-import { ColorPickerControl } from './ColorPickerControl'
-import { TextControl } from './TextControl'
-import { RadioControl } from './RadioControl'
-import { RangeControl } from './RangeControl'
-import { ChoicesControl } from './ChoicesControl'
-import { BoxAnchorControl } from './BoxAnchorControl'
-import { MarginControl } from './MarginControl'
-import { OpacityControl } from './OpacityControl'
-import { LineWidthControl } from './LineWidthControl'
-import { MotionConfigControl } from './MotionConfigControl'
-import { NumberArrayControl } from './NumberArrayControl'
-import { AngleControl } from './AngleControl'
-import { OrdinalColorsControl } from './OrdinalColorsControl'
-import { InheritedColorControl } from './InheritedColorControl'
-import { BlendModeControl } from './BlendModeControl'
-import PropertyDocumentation from './PropertyDocumentation'
-import { ValueFormatControl } from './ValueFormatControl'
-import { AnnotationsControl } from './AnnotationsControl'
 import { ChartProperty, Flavor } from '../../types'
+import { ControlContext } from './types'
+import {
+    ArrayControl,
+    ObjectControl,
+    SwitchControl,
+    SwitchableRangeControl,
+    TextControl,
+    RadioControl,
+    RangeControl,
+    ChoicesControl,
+    NumberArrayControl,
+    PropertyDocumentation,
+} from './generics'
+import {
+    BoxAnchorControl,
+    MarginControl,
+    LineWidthControl,
+    MotionConfigControl,
+    AngleControl,
+    ValueFormatControl,
+    AnnotationsControl,
+} from './specialized'
+import {
+    BlendModeControl,
+    ContinuousColorsControl,
+    ColorPickerControl,
+    ColorsControl,
+    OrdinalColorsControl,
+    OpacityControl,
+    InheritedColorControl,
+    QuantizeColorsControl,
+} from './colors'
 
 export const shouldRenderProperty = (property: ChartProperty, currentSettings: any) => {
     if (typeof property.when !== 'function') return true
@@ -39,7 +47,7 @@ interface ControlSwitcherProps {
     currentFlavor: Flavor
     settings: any
     onChange: any
-    context: any
+    context?: ControlContext
 }
 
 const ControlSwitcher = memo(
@@ -88,6 +96,7 @@ const ControlSwitcher = memo(
                     property={property}
                     flavors={flavors}
                     currentFlavor={currentFlavor}
+                    context={context}
                 />
             )
         }
@@ -175,6 +184,7 @@ const ControlSwitcher = memo(
                         flavors={flavors}
                         currentFlavor={currentFlavor}
                         value={value}
+                        context={context}
                         onChange={handleChange}
                     />
                 )
@@ -417,6 +427,20 @@ const ControlSwitcher = memo(
                     />
                 )
 
+            case 'continuous_colors':
+                return (
+                    <ContinuousColorsControl
+                        id={id}
+                        property={property}
+                        flavors={flavors}
+                        currentFlavor={currentFlavor}
+                        config={controlConfig}
+                        value={value}
+                        context={context}
+                        onChange={handleChange}
+                    />
+                )
+
             default:
                 throw new Error(
                     `invalid control type: ${controlConfig!.type} for property: ${property.name}`
@@ -432,7 +456,7 @@ interface ControlsGroupProps {
     controls: ChartProperty[]
     settings: any
     onChange: any
-    context?: any
+    context?: ControlContext
 }
 
 export const ControlsGroup = ({
@@ -445,9 +469,9 @@ export const ControlsGroup = ({
     context,
 }: ControlsGroupProps) => (
     <>
-        {controls.map(control => (
+        {controls.map((control, index) => (
             <ControlSwitcher
-                key={control.name}
+                key={`${control.name}.${index}`}
                 groupName={name}
                 flavors={flavors}
                 currentFlavor={currentFlavor}
diff --git a/website/src/components/controls/BlendModeControl.tsx b/website/src/components/controls/colors/BlendModeControl.tsx
similarity index 61%
rename from website/src/components/controls/BlendModeControl.tsx
rename to website/src/components/controls/colors/BlendModeControl.tsx
index 1af46c38df..e9dd292179 100644
--- a/website/src/components/controls/BlendModeControl.tsx
+++ b/website/src/components/controls/colors/BlendModeControl.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 // @ts-ignore
-import { blendModes } from '@nivo/core'
-import { ChoicesControl } from './ChoicesControl'
-import { BlendModeControlConfig } from './types'
-import { ChartProperty, Flavor } from '../../types'
+import { blendModes, CssMixBlendMode } from '@nivo/core'
+import { ChartProperty, Flavor } from '../../../types'
+import { BlendModeControlConfig, ControlContext } from '../types'
+import { ChoicesControl } from '../generics'
 
 const choices = blendModes.map((mode: string) => ({
     label: mode,
@@ -16,9 +16,9 @@ interface BlendModeControlProps {
     flavors: Flavor[]
     currentFlavor: Flavor
     config: BlendModeControlConfig
-    value: string
-    onChange: (value: string) => void
-    context?: any
+    value: CssMixBlendMode
+    onChange: (blendMode: CssMixBlendMode) => void
+    context?: ControlContext
 }
 
 export const BlendModeControl = ({ config, ...props }: BlendModeControlProps) => (
diff --git a/website/src/components/controls/ColorPickerControl.tsx b/website/src/components/controls/colors/ColorPickerControl.tsx
similarity index 83%
rename from website/src/components/controls/ColorPickerControl.tsx
rename to website/src/components/controls/colors/ColorPickerControl.tsx
index da2ceaa203..abba078399 100644
--- a/website/src/components/controls/ColorPickerControl.tsx
+++ b/website/src/components/controls/colors/ColorPickerControl.tsx
@@ -1,9 +1,7 @@
 import React, { useCallback } from 'react'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import { Flavor } from '../../types'
-import { ColorPickerControlConfig } from './types'
+import { Flavor } from '../../../types'
+import { ColorPickerControlConfig, ControlContext } from '../types'
+import { Control, PropertyHeader, Help } from '../ui'
 
 interface ColorPickerControlProps {
     id: string
@@ -13,7 +11,7 @@ interface ColorPickerControlProps {
     config: ColorPickerControlConfig
     value: string
     onChange: (value: string) => void
-    context: any
+    context?: ControlContext
 }
 
 export const ColorPickerControl = ({
diff --git a/website/src/components/controls/ColorsControl.tsx b/website/src/components/controls/colors/ColorsControl.tsx
similarity index 89%
rename from website/src/components/controls/ColorsControl.tsx
rename to website/src/components/controls/colors/ColorsControl.tsx
index 3953f3f074..7ad4c76fc1 100644
--- a/website/src/components/controls/ColorsControl.tsx
+++ b/website/src/components/controls/colors/ColorsControl.tsx
@@ -8,13 +8,10 @@ import {
 } from '@nivo/colors'
 // @ts-ignore
 import { components } from 'react-select'
+import { ChartProperty, Flavor } from '../../../types'
+import { ColorsControlConfig, ControlContext } from '../types'
+import { Control, PropertyHeader, Help, Select } from '../ui'
 import { ColorsControlItem } from './ColorsControlItem'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import Select from './Select'
-import { ChartProperty, Flavor } from '../../types'
-import { ColorsControlConfig } from './types'
 
 const colors = colorSchemeIds.map(id => ({
     id,
@@ -46,7 +43,7 @@ interface ColorsControlProps {
     onChange: any
     value: string
     config: ColorsControlConfig
-    context?: any
+    context?: ControlContext
 }
 
 export const ColorsControl = ({
diff --git a/website/src/components/controls/ColorsControlItem.tsx b/website/src/components/controls/colors/ColorsControlItem.tsx
similarity index 97%
rename from website/src/components/controls/ColorsControlItem.tsx
rename to website/src/components/controls/colors/ColorsControlItem.tsx
index eaa002e0b9..296c8ab004 100644
--- a/website/src/components/controls/ColorsControlItem.tsx
+++ b/website/src/components/controls/colors/ColorsControlItem.tsx
@@ -19,7 +19,7 @@ const Name = styled.span`
     font-weight: 500;
     font-size: 0.8rem;
     margin-right: 14px;
-    width: 130px;
+    width: 160px;
 `
 
 const Sample = styled.div`
diff --git a/website/src/components/controls/colors/ContinuousColorsControl.tsx b/website/src/components/controls/colors/ContinuousColorsControl.tsx
new file mode 100644
index 0000000000..1955e120cc
--- /dev/null
+++ b/website/src/components/controls/colors/ContinuousColorsControl.tsx
@@ -0,0 +1,202 @@
+import React, { useCallback, useState, useMemo } from 'react'
+import { upperFirst } from 'lodash'
+import {
+    ContinuousColorScaleConfig,
+    sequentialColorSchemeIds,
+    ColorInterpolatorId,
+    divergingColorSchemeIds,
+    divergingColorScaleDefaults,
+    quantizeColorScaleDefaults,
+} from '@nivo/colors'
+import { ChartProperty, Flavor } from '../../../types'
+import { ContinuousColorsControlConfig, ControlContext, ObjectControlConfig } from '../types'
+import { ObjectControl } from '../generics'
+import { humanizeColorSchemeId } from './humanizeColorSchemeId'
+
+interface ContinuousColorsControlProps {
+    id: string
+    property: ChartProperty
+    flavors: Flavor[]
+    currentFlavor: Flavor
+    config: ContinuousColorsControlConfig
+    value: ContinuousColorScaleConfig
+    onChange: (config: ContinuousColorScaleConfig) => void
+    context?: ControlContext
+}
+
+const scaleTypes = ['sequential', 'diverging', 'quantize']
+const scaleTypeChoices = scaleTypes.map(type => ({
+    label: upperFirst(type),
+    value: type,
+}))
+
+const schemeChoices: {
+    label: string
+    value: ColorInterpolatorId
+}[] = []
+sequentialColorSchemeIds.forEach(schemeId => {
+    schemeChoices.push({
+        label: `Sequential: ${humanizeColorSchemeId(schemeId)}`,
+        value: schemeId,
+    })
+})
+divergingColorSchemeIds.forEach(schemeId => {
+    schemeChoices.push({
+        label: `Diverging: ${humanizeColorSchemeId(schemeId)}`,
+        value: schemeId,
+    })
+})
+
+const helpByType: Record<ContinuousColorScaleConfig['type'], string> = {
+    sequential: `
+    The sequential color scale maps colors linearly from min to max value.
+    It is intended to be used with a sequential color scheme, 
+    but also supports others.
+    `,
+    diverging: `
+    The diverging color scale maps colors from min to max value,
+    with a diverging point which can be configured via \`divergeAt\`.
+    It is intended to be used with a diverging color scheme, 
+    but also supports others.
+    `,
+    quantize: `
+    The quantize color scale maps colors from min to max value
+    to a discrete color range, dividing the domain into uniform segments.
+    You can either use a predefined color scheme or pass a
+    custom array of colors.
+    `,
+}
+
+export const ContinuousColorsControl = ({
+    id,
+    property,
+    flavors,
+    currentFlavor,
+    value,
+    onChange,
+    context,
+}: ContinuousColorsControlProps) => {
+    const [lastDivergeAtValue, setLastDivergeAtValue] = useState(
+        'divergeAt' in value ? value.divergeAt : divergingColorScaleDefaults.divergeAt
+    )
+    const [lastStepsValue, setLastStepsValue] = useState(
+        'steps' in value ? value.steps : quantizeColorScaleDefaults.steps
+    )
+
+    const objectProperty: Omit<ChartProperty, 'control'> & {
+        control: ObjectControlConfig
+    } = useMemo(() => {
+        return {
+            ...property,
+            control: {
+                type: 'object',
+                isOpenedByDefault: true,
+                props: [
+                    {
+                        key: 'type',
+                        type: `'sequential' | 'diverging' | 'quantize'`,
+                        required: true,
+                        help: helpByType[value.type],
+                        control: {
+                            type: 'choices',
+                            choices: scaleTypeChoices,
+                        },
+                    },
+                    {
+                        key: 'scheme',
+                        type: 'string',
+                        control: {
+                            type: 'choices',
+                            choices: schemeChoices,
+                        },
+                    },
+                    {
+                        key: 'minValue',
+                        type: 'number',
+                        help: 'If omitted, will use the min value from the data.',
+                    },
+                    {
+                        key: 'maxValue',
+                        type: 'number',
+                        help: 'If omitted, will use the max value from the data.',
+                    },
+                    {
+                        key: 'divergeAt',
+                        type: 'number',
+                        help: 'Define the divergence point between min & max values (0~1).',
+                        when: config => config.type === 'diverging',
+                        defaultValue: divergingColorScaleDefaults.divergeAt,
+                        control: {
+                            type: 'range',
+                            min: 0,
+                            max: 1,
+                            step: 0.05,
+                        },
+                    },
+                    {
+                        key: 'steps',
+                        type: 'number',
+                        help: `
+                        Customize the number of steps you want to use for a \`quantize\` scale
+                        unless you specify a custom array of colors, in which case the number of
+                        steps is equal to the number of colors you defined.
+                        `,
+                        when: config => config.type === 'quantize',
+                        defaultValue: quantizeColorScaleDefaults.steps,
+                        control: {
+                            type: 'range',
+                            min: 2,
+                            max: 16,
+                        },
+                    },
+                ],
+            },
+        }
+    }, [value.type, flavors])
+
+    const handleChange = useCallback(
+        ({ divergeAt, steps, ...genericProps }: any) => {
+            let fixedValue = genericProps
+
+            if (fixedValue.type === 'diverging') {
+                if (divergeAt === undefined) {
+                    fixedValue = {
+                        ...fixedValue,
+                        divergeAt: lastDivergeAtValue,
+                    }
+                } else {
+                    fixedValue = { ...fixedValue, divergeAt }
+                    setLastDivergeAtValue(divergeAt)
+                }
+            }
+
+            if (fixedValue.type === 'quantize') {
+                if (steps === undefined) {
+                    fixedValue = {
+                        ...fixedValue,
+                        steps: lastStepsValue,
+                    }
+                } else {
+                    fixedValue = { ...fixedValue, steps }
+                    setLastStepsValue(steps)
+                }
+            }
+
+            onChange(fixedValue)
+        },
+        [onChange, lastDivergeAtValue, setLastDivergeAtValue, lastStepsValue, setLastStepsValue]
+    )
+
+    return (
+        <ObjectControl
+            id={id}
+            property={objectProperty}
+            value={value}
+            flavors={flavors}
+            currentFlavor={currentFlavor}
+            config={objectProperty.control}
+            onChange={handleChange}
+            context={context}
+        />
+    )
+}
diff --git a/website/src/components/controls/InheritedColorControl.tsx b/website/src/components/controls/colors/InheritedColorControl.tsx
similarity index 95%
rename from website/src/components/controls/InheritedColorControl.tsx
rename to website/src/components/controls/colors/InheritedColorControl.tsx
index fb932336ed..b53196220e 100644
--- a/website/src/components/controls/InheritedColorControl.tsx
+++ b/website/src/components/controls/colors/InheritedColorControl.tsx
@@ -3,13 +3,10 @@ import isString from 'lodash/isString'
 import isPlainObject from 'lodash/isPlainObject'
 import styled from 'styled-components'
 import { InheritedColorConfig } from '@nivo/colors'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import Select from './Select'
-import InheritedColorModifierControl from './InheritedColorModifierControl'
-import { ChartProperty, Flavor } from '../../types'
-import { InheritedColorControlConfig } from './types'
+import { ChartProperty, Flavor } from '../../../types'
+import { ControlContext, InheritedColorControlConfig } from '../types'
+import { Control, PropertyHeader, Help, Select } from '../ui'
+import { InheritedColorModifierControl } from './InheritedColorModifierControl'
 
 const themeProperties = ['background', 'grid.line.stroke', 'labels.text.fill'].map(prop => ({
     label: prop,
@@ -26,7 +23,7 @@ interface InheritedColorControlProps {
     value: InheritedColorConfig<any>
     config: InheritedColorControlConfig
     onChange: (value: InheritedColorConfig<any>) => any
-    context?: any
+    context?: ControlContext
 }
 
 export const InheritedColorControl = ({
diff --git a/website/src/components/controls/InheritedColorModifierControl.tsx b/website/src/components/controls/colors/InheritedColorModifierControl.tsx
similarity index 74%
rename from website/src/components/controls/InheritedColorModifierControl.tsx
rename to website/src/components/controls/colors/InheritedColorModifierControl.tsx
index 8b828bacd9..d030cc661a 100644
--- a/website/src/components/controls/InheritedColorModifierControl.tsx
+++ b/website/src/components/controls/colors/InheritedColorModifierControl.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import Select from './Select'
-import { TextInput } from './TextInput'
+import { TextInput, Select } from '../ui'
 
 const modifierTypes = ['brighter', 'darker', 'opacity'].map(prop => ({
     label: prop,
@@ -9,19 +8,20 @@ const modifierTypes = ['brighter', 'darker', 'opacity'].map(prop => ({
 }))
 
 interface InheritedColorModifierControlProps {
-    /*
-    modifier: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-    */
+    modifier: any[]
+    onChange: (modifier: any[]) => void
 }
 
-const InheritedColorModifierControl = ({ modifier, onChange }) => {
+export const InheritedColorModifierControl = ({
+    modifier,
+    onChange,
+}: InheritedColorModifierControlProps) => {
     return (
         <Container>
             <Select
                 options={modifierTypes}
                 value={modifierTypes.find(prop => prop.value === modifier[0])}
-                onChange={value => onChange([value.value, modifier[1]])}
+                onChange={(value: any) => onChange([value.value, modifier[1]])}
             />
             <TextInput
                 value={modifier[1]}
@@ -40,8 +40,6 @@ const InheritedColorModifierControl = ({ modifier, onChange }) => {
     )
 }
 
-export default InheritedColorModifierControl
-
 const Container = styled.div`
     display: grid;
     grid-template-columns: 110px 40px auto;
diff --git a/website/src/components/controls/OpacityControl.tsx b/website/src/components/controls/colors/OpacityControl.tsx
similarity index 89%
rename from website/src/components/controls/OpacityControl.tsx
rename to website/src/components/controls/colors/OpacityControl.tsx
index 13fce4099c..0c24e1bbc1 100644
--- a/website/src/components/controls/OpacityControl.tsx
+++ b/website/src/components/controls/colors/OpacityControl.tsx
@@ -1,11 +1,8 @@
 import React, { useCallback } from 'react'
 import styled, { useTheme } from 'styled-components'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { TextInput } from './TextInput'
-import { Help } from './Help'
-import { Flavor, ChartProperty } from '../../types'
-import { OpacityControlConfig } from './types'
+import { Flavor, ChartProperty } from '../../../types'
+import { ControlContext, OpacityControlConfig } from '../types'
+import { Control, PropertyHeader, Help, TextInput } from '../ui'
 
 const size = 24
 
@@ -17,7 +14,7 @@ interface OpacityControlProps {
     config: OpacityControlConfig
     value: number
     onChange: (value: number) => void
-    context?: any
+    context?: ControlContext
 }
 
 export const OpacityControl = ({
diff --git a/website/src/components/controls/OrdinalColorsControl.tsx b/website/src/components/controls/colors/OrdinalColorsControl.tsx
similarity index 73%
rename from website/src/components/controls/OrdinalColorsControl.tsx
rename to website/src/components/controls/colors/OrdinalColorsControl.tsx
index 3b2f768718..f525f1c06c 100644
--- a/website/src/components/controls/OrdinalColorsControl.tsx
+++ b/website/src/components/controls/colors/OrdinalColorsControl.tsx
@@ -8,13 +8,11 @@ import {
 } from '@nivo/colors'
 // @ts-ignore
 import { components } from 'react-select'
+import { ChartProperty, Flavor } from '../../../types'
+import { ControlContext, OrdinalColorsControlConfig } from '../types'
+import { Control, PropertyHeader, Help, Select } from '../ui'
 import { ColorsControlItem } from './ColorsControlItem'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import Select from './Select'
-import { ChartProperty, Flavor } from '../../types'
-import { OrdinalColorsControlConfig } from './types'
+import { humanizeColorSchemeId } from './humanizeColorSchemeId'
 
 const options = colorSchemeIds.map(scheme => {
     let colors: string[] = []
@@ -27,27 +25,23 @@ const options = colorSchemeIds.map(scheme => {
     }
 
     return {
-        label: scheme,
+        label: humanizeColorSchemeId(scheme),
         value: scheme,
         colors,
     }
 })
 
-const SingleValue = (props: any) => {
-    return (
-        <components.SingleValue {...props}>
-            <ColorsControlItem id={props.data.label} colors={props.data.colors} />
-        </components.SingleValue>
-    )
-}
+const SingleValue = (props: any) => (
+    <components.SingleValue {...props}>
+        <ColorsControlItem id={props.data.label} colors={props.data.colors} />
+    </components.SingleValue>
+)
 
-const Option = (props: any) => {
-    return (
-        <components.Option {...props}>
-            <ColorsControlItem id={props.value} colors={props.data.colors} />
-        </components.Option>
-    )
-}
+const Option = (props: any) => (
+    <components.Option {...props}>
+        <ColorsControlItem id={props.label} colors={props.data.colors} />
+    </components.Option>
+)
 
 interface OrdinalColorsControlProps {
     id: string
@@ -57,7 +51,7 @@ interface OrdinalColorsControlProps {
     config: OrdinalColorsControlConfig
     value: { scheme: string }
     onChange: (value: { scheme: string }) => void
-    context?: any
+    context?: ControlContext
 }
 
 export const OrdinalColorsControl = ({
@@ -67,6 +61,7 @@ export const OrdinalColorsControl = ({
     currentFlavor,
     value,
     onChange,
+    context,
 }: OrdinalColorsControlProps) => {
     const selectedOption = options.find(o => o.value === value.scheme)
     const handleChange = useCallback(
@@ -84,7 +79,7 @@ export const OrdinalColorsControl = ({
             currentFlavor={currentFlavor}
             supportedFlavors={property.flavors}
         >
-            <PropertyHeader {...property} />
+            <PropertyHeader {...property} context={context} />
             <Select
                 options={options}
                 onChange={handleChange}
diff --git a/website/src/components/controls/QuantizeColorsControl.tsx b/website/src/components/controls/colors/QuantizeColorsControl.tsx
similarity index 87%
rename from website/src/components/controls/QuantizeColorsControl.tsx
rename to website/src/components/controls/colors/QuantizeColorsControl.tsx
index be83391667..27edafd0b6 100644
--- a/website/src/components/controls/QuantizeColorsControl.tsx
+++ b/website/src/components/controls/colors/QuantizeColorsControl.tsx
@@ -1,13 +1,10 @@
 import React, { useCallback } from 'react'
 // @ts-ignore
 import { quantizeColorScales } from '@nivo/core'
-import Select from './Select'
+import { ChartProperty, Flavor } from '../../../types'
+import { ControlContext, QuantizeColorsControlConfig } from '../types'
+import { Control, PropertyHeader, Help, Select } from '../ui'
 import { ColorsControlItem } from './ColorsControlItem'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import { ChartProperty, Flavor } from '../../types'
-import { QuantizeColorsControlConfig } from './types'
 
 const options = Object.keys(quantizeColorScales).map(id => ({
     id,
@@ -22,7 +19,7 @@ interface QuantizeColorsControlProps {
     config: QuantizeColorsControlConfig
     onChange: (value: string) => void
     value: string
-    context?: any
+    context?: ControlContext
 }
 
 const renderOption = (option: { value: string; colors: string[] }) => {
@@ -52,6 +49,7 @@ export const QuantizeColorsControl = ({
     currentFlavor,
     value,
     onChange,
+    context,
 }: QuantizeColorsControlProps) => {
     const handleColorsChange = useCallback(
         (value: { value: string }) => {
@@ -68,7 +66,7 @@ export const QuantizeColorsControl = ({
             currentFlavor={currentFlavor}
             supportedFlavors={property.flavors}
         >
-            <PropertyHeader {...property} />
+            <PropertyHeader {...property} context={context} />
             <Select
                 options={options.map(({ id, colors }) => ({
                     label: id,
diff --git a/website/src/components/controls/colors/humanizeColorSchemeId.ts b/website/src/components/controls/colors/humanizeColorSchemeId.ts
new file mode 100644
index 0000000000..8bc8ced93f
--- /dev/null
+++ b/website/src/components/controls/colors/humanizeColorSchemeId.ts
@@ -0,0 +1,8 @@
+import { startCase } from 'lodash'
+import { ColorSchemeId } from '@nivo/colors'
+
+export const humanizeColorSchemeId = (schemeId: ColorSchemeId) => {
+    const parts = schemeId.split('_').map(startCase)
+
+    return parts.join(' → ')
+}
diff --git a/website/src/components/controls/colors/index.ts b/website/src/components/controls/colors/index.ts
new file mode 100644
index 0000000000..d068975f6c
--- /dev/null
+++ b/website/src/components/controls/colors/index.ts
@@ -0,0 +1,8 @@
+export * from './BlendModeControl'
+export * from './ColorPickerControl'
+export * from './ColorsControl'
+export * from './ContinuousColorsControl'
+export * from './InheritedColorControl'
+export * from './OpacityControl'
+export * from './OrdinalColorsControl'
+export * from './QuantizeColorsControl'
diff --git a/website/src/components/controls/ArrayControl.tsx b/website/src/components/controls/generics/ArrayControl.tsx
similarity index 90%
rename from website/src/components/controls/ArrayControl.tsx
rename to website/src/components/controls/generics/ArrayControl.tsx
index c002d7209f..005c7c889b 100644
--- a/website/src/components/controls/ArrayControl.tsx
+++ b/website/src/components/controls/generics/ArrayControl.tsx
@@ -1,11 +1,9 @@
 import React, { memo, Fragment, useMemo, useState, useCallback, MouseEvent } from 'react'
 import styled from 'styled-components'
-import { PropertyHeader } from './PropertyHeader'
-import { ControlsGroup } from './ControlsGroup'
-import { Cell, Toggle } from './styled'
-import { Help } from './Help'
-import { Flavor, ChartProperty } from '../../types'
-import { ArrayControlConfig } from './types'
+import { Flavor, ChartProperty } from '../../../types'
+import { ArrayControlConfig, ControlContext } from '../types'
+import { PropertyHeader, Help, Cell, Toggle } from '../ui'
+import { ControlsGroup } from '../ControlsGroup'
 
 interface ArrayControlProps<Item> {
     id: string
@@ -15,7 +13,7 @@ interface ArrayControlProps<Item> {
     currentFlavor: Flavor
     config: ArrayControlConfig<Item>
     onChange: (value: Item[]) => void
-    context?: any
+    context?: ControlContext
 }
 
 function NonMemoizedArrayControl<Item = object>({
@@ -33,6 +31,7 @@ function NonMemoizedArrayControl<Item = object>({
         defaults = {} as Item,
         getItemTitle,
     },
+    context,
 }: ArrayControlProps<Item>) {
     const [activeItems, setActiveItems] = useState([0])
     const append = useCallback(() => {
@@ -82,10 +81,14 @@ function NonMemoizedArrayControl<Item = object>({
         [props]
     )
 
+    const newContext = {
+        path: [...(context ? context.path : ([] as string[])), (property.key || property.name)!],
+    }
+
     return (
         <>
             <Header>
-                <PropertyHeader {...property} />
+                <PropertyHeader {...property} context={context} />
                 <Help>{property.help}</Help>
                 {shouldCreate && <AddButton onClick={append}>{addLabel}</AddButton>}
             </Header>
@@ -110,6 +113,7 @@ function NonMemoizedArrayControl<Item = object>({
                             controls={subProps}
                             settings={item}
                             onChange={change(index)}
+                            context={{ path: [...newContext.path, `${index}`] }}
                         />
                     )}
                 </Fragment>
diff --git a/website/src/components/controls/ChoicesControl.tsx b/website/src/components/controls/generics/ChoicesControl.tsx
similarity index 78%
rename from website/src/components/controls/ChoicesControl.tsx
rename to website/src/components/controls/generics/ChoicesControl.tsx
index 93617fdc91..ad7600142f 100644
--- a/website/src/components/controls/ChoicesControl.tsx
+++ b/website/src/components/controls/generics/ChoicesControl.tsx
@@ -1,10 +1,7 @@
 import React, { memo, useCallback } from 'react'
-import { Control } from './Control'
-import Select from './Select'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import { Flavor } from '../../types'
-import { ChoicesControlConfig } from './types'
+import { Flavor } from '../../../types'
+import { ChoicesControlConfig, ControlContext } from '../types'
+import { Control, PropertyHeader, Help, Select } from '../ui'
 
 interface ChoicesControlProps {
     id: string
@@ -14,7 +11,7 @@ interface ChoicesControlProps {
     value: string | number | boolean
     onChange: (value: string | number | boolean) => void
     config: ChoicesControlConfig
-    context?: any
+    context?: ControlContext
 }
 
 export const ChoicesControl = memo(
@@ -26,6 +23,7 @@ export const ChoicesControl = memo(
         value: _value,
         config,
         onChange,
+        context,
     }: ChoicesControlProps) => {
         const handleUpdate = useCallback(value => onChange(value.value), [onChange])
         const value = config.choices.find(({ value: v }) => v === _value)
@@ -38,7 +36,7 @@ export const ChoicesControl = memo(
                 currentFlavor={currentFlavor}
                 supportedFlavors={property.flavors}
             >
-                <PropertyHeader id={id} {...property} />
+                <PropertyHeader id={id} {...property} context={context} />
                 <Select options={config.choices} value={value} onChange={handleUpdate} />
                 <Help>{property.help}</Help>
             </Control>
diff --git a/website/src/components/controls/NumberArrayControl.tsx b/website/src/components/controls/generics/NumberArrayControl.tsx
similarity index 89%
rename from website/src/components/controls/NumberArrayControl.tsx
rename to website/src/components/controls/generics/NumberArrayControl.tsx
index 603b162224..17ff19e438 100644
--- a/website/src/components/controls/NumberArrayControl.tsx
+++ b/website/src/components/controls/generics/NumberArrayControl.tsx
@@ -1,12 +1,8 @@
 import React, { ChangeEvent, Fragment, useCallback } from 'react'
 import styled from 'styled-components'
-import { ChartProperty, Flavor } from '../../types'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Label } from './Label'
-import { TextInput } from './TextInput'
-import { Help } from './Help'
-import { NumberArrayControlConfig } from './types'
+import { ChartProperty, Flavor } from '../../../types'
+import { ControlContext, NumberArrayControlConfig } from '../types'
+import { Control, PropertyHeader, Label, Help, TextInput } from '../ui'
 
 interface NumberArrayControlProps {
     id: string
@@ -16,7 +12,7 @@ interface NumberArrayControlProps {
     config: NumberArrayControlConfig
     value: number[]
     onChange: (value: number[]) => void
-    context?: any
+    context?: ControlContext
 }
 
 export const NumberArrayControl = ({
@@ -27,6 +23,7 @@ export const NumberArrayControl = ({
     config: { unit, items },
     value,
     onChange,
+    context,
 }: NumberArrayControlProps) => {
     const handleChange = useCallback(
         (index: number) => (event: ChangeEvent<HTMLInputElement>) => {
@@ -45,7 +42,7 @@ export const NumberArrayControl = ({
             currentFlavor={currentFlavor}
             supportedFlavors={property.flavors}
         >
-            <PropertyHeader {...property} />
+            <PropertyHeader {...property} context={context} />
             <Value>
                 <span>value</span>
                 <code>
diff --git a/website/src/components/controls/ObjectControl.tsx b/website/src/components/controls/generics/ObjectControl.tsx
similarity index 90%
rename from website/src/components/controls/ObjectControl.tsx
rename to website/src/components/controls/generics/ObjectControl.tsx
index 98429ad35f..5d1a553fab 100644
--- a/website/src/components/controls/ObjectControl.tsx
+++ b/website/src/components/controls/generics/ObjectControl.tsx
@@ -1,11 +1,9 @@
 import React, { memo, useMemo, useState, useCallback } from 'react'
 import styled from 'styled-components'
-import { ControlsGroup } from './ControlsGroup'
-import { PropertyHeader } from './PropertyHeader'
-import { Cell, Toggle } from './styled'
-import { Help } from './Help'
-import { ChartProperty, Flavor } from '../../types'
-import { ObjectControlConfig } from './types'
+import { ChartProperty, Flavor } from '../../../types'
+import { ObjectControlConfig, ControlContext } from '../types'
+import { PropertyHeader, Help, Cell, Toggle } from '../ui'
+import { ControlsGroup } from '../ControlsGroup'
 
 interface ObjectControlProps {
     id: string
@@ -16,7 +14,7 @@ interface ObjectControlProps {
     value: object
     isOpenedByDefault?: boolean
     config: ObjectControlConfig
-    context: any
+    context?: ControlContext
 }
 
 export const ObjectControl = memo(
diff --git a/website/src/components/controls/PropertyDocumentation.tsx b/website/src/components/controls/generics/PropertyDocumentation.tsx
similarity index 65%
rename from website/src/components/controls/PropertyDocumentation.tsx
rename to website/src/components/controls/generics/PropertyDocumentation.tsx
index ad566a72e1..3dc820f4a6 100644
--- a/website/src/components/controls/PropertyDocumentation.tsx
+++ b/website/src/components/controls/generics/PropertyDocumentation.tsx
@@ -1,21 +1,22 @@
 import React from 'react'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import { Flavor } from '../../types'
+import { Flavor } from '../../../types'
+import { ControlContext } from '../types'
+import { Control, PropertyHeader, Help } from '../ui'
 
 interface PropertyDocumentationProps {
     id: string
     property: any
     flavors: Flavor[]
     currentFlavor: Flavor
+    context?: ControlContext
 }
 
-const PropertyDocumentation = ({
+export const PropertyDocumentation = ({
     id,
     property,
     flavors,
     currentFlavor,
+    context,
 }: PropertyDocumentationProps) => {
     return (
         <Control
@@ -25,10 +26,8 @@ const PropertyDocumentation = ({
             currentFlavor={currentFlavor}
             supportedFlavors={property.flavors}
         >
-            <PropertyHeader {...property} />
+            <PropertyHeader {...property} context={context} />
             <Help>{property.help}</Help>
         </Control>
     )
 }
-
-export default PropertyDocumentation
diff --git a/website/src/components/controls/RadioControl.tsx b/website/src/components/controls/generics/RadioControl.tsx
similarity index 64%
rename from website/src/components/controls/RadioControl.tsx
rename to website/src/components/controls/generics/RadioControl.tsx
index a2dcfaf0c9..ef8bd1cccc 100644
--- a/website/src/components/controls/RadioControl.tsx
+++ b/website/src/components/controls/generics/RadioControl.tsx
@@ -1,10 +1,7 @@
 import React, { memo, useCallback } from 'react'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import { Radio } from './Radio'
-import { ChartProperty, Flavor } from '../../types'
-import { RadioControlConfig } from './types'
+import { ChartProperty, Flavor } from '../../../types'
+import { ControlContext, RadioControlConfig } from '../types'
+import { Control, PropertyHeader, Help, Radio } from '../ui'
 
 interface RadioControlProps {
     id: string
@@ -14,11 +11,20 @@ interface RadioControlProps {
     value: string
     config: RadioControlConfig
     onChange: (value: string) => void
-    context?: any
+    context?: ControlContext
 }
 
 export const RadioControl = memo(
-    ({ id, property, flavors, currentFlavor, config, value, onChange }: RadioControlProps) => {
+    ({
+        id,
+        property,
+        flavors,
+        currentFlavor,
+        config,
+        value,
+        onChange,
+        context,
+    }: RadioControlProps) => {
         const handleUpdate = useCallback(event => onChange(event.target.value), [onChange])
 
         return (
@@ -29,7 +35,7 @@ export const RadioControl = memo(
                 currentFlavor={currentFlavor}
                 supportedFlavors={property.flavors}
             >
-                <PropertyHeader {...property} />
+                <PropertyHeader {...property} context={context} />
                 <Radio options={config.choices} value={value} onChange={handleUpdate} />
                 <Help>{property.help}</Help>
             </Control>
diff --git a/website/src/components/controls/RangeControl.tsx b/website/src/components/controls/generics/RangeControl.tsx
similarity index 87%
rename from website/src/components/controls/RangeControl.tsx
rename to website/src/components/controls/generics/RangeControl.tsx
index bc344b2ab6..1b6f171127 100644
--- a/website/src/components/controls/RangeControl.tsx
+++ b/website/src/components/controls/generics/RangeControl.tsx
@@ -1,12 +1,9 @@
 import React, { memo, useCallback } from 'react'
 import styled from 'styled-components'
 import pick from 'lodash/pick'
-import { Control } from './Control'
-import { TextInput } from './TextInput'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import { Flavor } from '../../types'
-import { RangeControlConfig } from './types'
+import { Flavor } from '../../../types'
+import { ControlContext, RangeControlConfig } from '../types'
+import { Control, PropertyHeader, Help, TextInput } from '../ui'
 
 interface RangeControlProps {
     id: string
@@ -16,7 +13,7 @@ interface RangeControlProps {
     value: number
     onChange: (value: number) => void
     config: RangeControlConfig
-    context?: any
+    context?: ControlContext
 }
 
 export const RangeControl = memo(
diff --git a/website/src/components/controls/SwitchControl.tsx b/website/src/components/controls/generics/SwitchControl.tsx
similarity index 66%
rename from website/src/components/controls/SwitchControl.tsx
rename to website/src/components/controls/generics/SwitchControl.tsx
index ebda80b7d3..592a9562f0 100644
--- a/website/src/components/controls/SwitchControl.tsx
+++ b/website/src/components/controls/generics/SwitchControl.tsx
@@ -1,9 +1,7 @@
 import React, { memo } from 'react'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import { Switch } from './Switch'
-import { ChartProperty, Flavor } from '../../types'
+import { ChartProperty, Flavor } from '../../../types'
+import { Control, PropertyHeader, Help, Switch } from '../ui'
+import { ControlContext } from '../types'
 
 interface SwitchControlProps {
     id: string
@@ -12,10 +10,11 @@ interface SwitchControlProps {
     currentFlavor: Flavor
     value: boolean
     onChange: (value: boolean) => void
+    context?: ControlContext
 }
 
 export const SwitchControl = memo(
-    ({ id, property, flavors, currentFlavor, value, onChange }: SwitchControlProps) => {
+    ({ id, property, flavors, currentFlavor, value, onChange, context }: SwitchControlProps) => {
         return (
             <Control
                 id={id}
@@ -24,7 +23,7 @@ export const SwitchControl = memo(
                 currentFlavor={currentFlavor}
                 supportedFlavors={property.flavors}
             >
-                <PropertyHeader id={id} {...property} />
+                <PropertyHeader id={id} {...property} context={context} />
                 <Switch id={id} value={value} onChange={onChange} />
                 &nbsp;&nbsp;&nbsp;
                 <Help>{property.help}</Help>
diff --git a/website/src/components/controls/SwitchableRangeControl.tsx b/website/src/components/controls/generics/SwitchableRangeControl.tsx
similarity index 89%
rename from website/src/components/controls/SwitchableRangeControl.tsx
rename to website/src/components/controls/generics/SwitchableRangeControl.tsx
index eec7a7001b..5614c0dbd7 100644
--- a/website/src/components/controls/SwitchableRangeControl.tsx
+++ b/website/src/components/controls/generics/SwitchableRangeControl.tsx
@@ -1,13 +1,9 @@
 import React, { useCallback, useState, ChangeEvent } from 'react'
 import styled from 'styled-components'
 import pick from 'lodash/pick'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import { TextInput } from './TextInput'
-import { Switch } from './Switch'
-import { SwitchableRangeControlConfig } from './types'
-import { ChartProperty, Flavor } from '../../types'
+import { ControlContext, SwitchableRangeControlConfig } from '../types'
+import { ChartProperty, Flavor } from '../../../types'
+import { Control, PropertyHeader, Help, TextInput, Switch } from '../ui'
 
 const SwitchRow = styled.div`
     display: flex;
@@ -36,7 +32,7 @@ interface SwitchableRangeControlProps {
     currentFlavor: Flavor
     value: number | string
     onChange: (value: number | string) => void
-    context?: any
+    context?: ControlContext
 }
 
 export const SwitchableRangeControl = ({
@@ -47,6 +43,7 @@ export const SwitchableRangeControl = ({
     value,
     config,
     onChange,
+    context,
 }: SwitchableRangeControlProps) => {
     const [isSliderEnabled, setIsSliderEnabled] = useState(value !== config.disabledValue)
     const [sliderValue, setSliderValue] = useState(
@@ -82,7 +79,7 @@ export const SwitchableRangeControl = ({
             currentFlavor={currentFlavor}
             supportedFlavors={property.flavors}
         >
-            <PropertyHeader {...property} />
+            <PropertyHeader {...property} context={context} />
             <SwitchRow>
                 <Switch
                     id={`${id}.switch`}
diff --git a/website/src/components/controls/TextControl.tsx b/website/src/components/controls/generics/TextControl.tsx
similarity index 68%
rename from website/src/components/controls/TextControl.tsx
rename to website/src/components/controls/generics/TextControl.tsx
index 648d7ce34a..b3113e7857 100644
--- a/website/src/components/controls/TextControl.tsx
+++ b/website/src/components/controls/generics/TextControl.tsx
@@ -1,10 +1,7 @@
 import React, { memo, useCallback } from 'react'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { TextInput } from './TextInput'
-import { Help } from './Help'
-import { ChartProperty, Flavor } from '../../types'
-import { TextControlConfig } from './types'
+import { ChartProperty, Flavor } from '../../../types'
+import { ControlContext, TextControlConfig } from '../types'
+import { Control, PropertyHeader, Help, TextInput } from '../ui'
 
 interface TextControlProps {
     id: string
@@ -14,11 +11,20 @@ interface TextControlProps {
     value: string | number
     onChange: (value: string) => void
     config: TextControlConfig
-    context?: any
+    context?: ControlContext
 }
 
 export const TextControl = memo(
-    ({ id, property, flavors, currentFlavor, value, onChange, config = {} }: TextControlProps) => {
+    ({
+        id,
+        property,
+        flavors,
+        currentFlavor,
+        value,
+        onChange,
+        config,
+        context,
+    }: TextControlProps) => {
         const handleUpdate = useCallback(event => onChange(event.target.value), [onChange])
 
         return (
@@ -29,7 +35,7 @@ export const TextControl = memo(
                 currentFlavor={currentFlavor}
                 supportedFlavors={property.flavors}
             >
-                <PropertyHeader id={id} {...property} />
+                <PropertyHeader id={id} {...property} context={context} />
                 <TextInput
                     id={id}
                     type="text"
diff --git a/website/src/components/controls/generics/index.ts b/website/src/components/controls/generics/index.ts
new file mode 100644
index 0000000000..04c5292e5b
--- /dev/null
+++ b/website/src/components/controls/generics/index.ts
@@ -0,0 +1,10 @@
+export * from './ArrayControl'
+export * from './ChoicesControl'
+export * from './NumberArrayControl'
+export * from './ObjectControl'
+export * from './PropertyDocumentation'
+export * from './RadioControl'
+export * from './RangeControl'
+export * from './SwitchableRangeControl'
+export * from './SwitchControl'
+export * from './TextControl'
diff --git a/website/src/components/controls/AngleControl.tsx b/website/src/components/controls/specialized/AngleControl.tsx
similarity index 84%
rename from website/src/components/controls/AngleControl.tsx
rename to website/src/components/controls/specialized/AngleControl.tsx
index cc0bac5b09..f8b43576ab 100644
--- a/website/src/components/controls/AngleControl.tsx
+++ b/website/src/components/controls/specialized/AngleControl.tsx
@@ -1,11 +1,8 @@
 import React, { memo, useCallback } from 'react'
 import styled from 'styled-components'
-import { ChartProperty, Flavor } from '../../types'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { TextInput } from './TextInput'
-import { Help } from './Help'
-import { AngleControlConfig } from './types'
+import { ChartProperty, Flavor } from '../../../types'
+import { AngleControlConfig, ControlContext } from '../types'
+import { Control, PropertyHeader, Help, TextInput } from '../ui'
 
 const size = 36
 const center = size / 2
@@ -19,11 +16,20 @@ interface AngleControlProps {
     value: number
     config: AngleControlConfig
     onChange: (value: number) => void
-    context?: any
+    context?: ControlContext
 }
 
 export const AngleControl = memo(
-    ({ id, property, flavors, currentFlavor, value, config, onChange }: AngleControlProps) => {
+    ({
+        id,
+        property,
+        flavors,
+        currentFlavor,
+        value,
+        config,
+        onChange,
+        context,
+    }: AngleControlProps) => {
         const start = config.start || 0
         const min = config.min || 0
         const max = config.max || 360
@@ -43,7 +49,7 @@ export const AngleControl = memo(
                 currentFlavor={currentFlavor}
                 supportedFlavors={property.flavors}
             >
-                <PropertyHeader id={id} {...property} />
+                <PropertyHeader id={id} {...property} context={context} />
                 <Row>
                     <TextInput
                         id={id}
diff --git a/website/src/components/controls/AnnotationsControl.tsx b/website/src/components/controls/specialized/AnnotationsControl.tsx
similarity index 96%
rename from website/src/components/controls/AnnotationsControl.tsx
rename to website/src/components/controls/specialized/AnnotationsControl.tsx
index 35b48e5ee4..b5f4f64acd 100644
--- a/website/src/components/controls/AnnotationsControl.tsx
+++ b/website/src/components/controls/specialized/AnnotationsControl.tsx
@@ -1,9 +1,9 @@
 import React, { memo, useCallback, useMemo } from 'react'
 import omit from 'lodash/omit'
 import { AnnotationMatcher } from '@nivo/annotations'
-import { ChartProperty, Flavor } from '../../types'
-import { AnnotationsControlConfig, ArrayControlConfig } from './types'
-import { ArrayControl } from './ArrayControl'
+import { ChartProperty, Flavor } from '../../../types'
+import { AnnotationsControlConfig, ArrayControlConfig, ControlContext } from '../types'
+import { ArrayControl } from '../generics'
 
 const fixAnnotation = (annotation: AnnotationMatcher<any>): AnnotationMatcher<any> => {
     let adjusted: AnnotationMatcher<any> = annotation
@@ -29,7 +29,7 @@ interface AnnotationsControlProps {
     config: AnnotationsControlConfig
     value: AnnotationMatcher<any>[]
     onChange: (annotations: AnnotationMatcher<any>[]) => void
-    context?: any
+    context?: ControlContext
 }
 
 export const AnnotationsControl = memo(
@@ -41,6 +41,7 @@ export const AnnotationsControl = memo(
         value,
         config: { createDefaults },
         onChange,
+        context,
     }: AnnotationsControlProps) => {
         const arrayProperty: Omit<ChartProperty, 'control'> & {
             control: ArrayControlConfig<AnnotationMatcher<any>>
@@ -185,6 +186,7 @@ export const AnnotationsControl = memo(
                 currentFlavor={currentFlavor}
                 config={arrayProperty.control}
                 onChange={handleChange}
+                context={context}
             />
         )
     }
diff --git a/website/src/components/controls/BoxAnchorControl.tsx b/website/src/components/controls/specialized/BoxAnchorControl.tsx
similarity index 92%
rename from website/src/components/controls/BoxAnchorControl.tsx
rename to website/src/components/controls/specialized/BoxAnchorControl.tsx
index cd0682c313..0264e8b73f 100644
--- a/website/src/components/controls/BoxAnchorControl.tsx
+++ b/website/src/components/controls/specialized/BoxAnchorControl.tsx
@@ -1,10 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import { ChartProperty, Flavor } from '../../types'
-import { BoxAnchorControlConfig } from './types'
+import { ChartProperty, Flavor } from '../../../types'
+import { BoxAnchorControlConfig, ControlContext } from '../types'
+import { Control, PropertyHeader, Help } from '../ui'
 
 const boxWidth = 80
 const boxHeight = 50
@@ -68,7 +66,7 @@ interface BoxAnchorControlProps {
     value: string
     config: BoxAnchorControlConfig
     onChange: (value: string) => void
-    context?: any
+    context?: ControlContext
 }
 
 export const BoxAnchorControl = ({
@@ -78,6 +76,7 @@ export const BoxAnchorControl = ({
     currentFlavor,
     value,
     onChange,
+    context,
 }: BoxAnchorControlProps) => {
     return (
         <Control
@@ -87,7 +86,7 @@ export const BoxAnchorControl = ({
             currentFlavor={currentFlavor}
             supportedFlavors={property.flavors}
         >
-            <PropertyHeader {...property} />
+            <PropertyHeader {...property} context={context} />
             <Row>
                 <svg width={boxWidth + boxPadding * 2} height={boxHeight + boxPadding * 2}>
                     <g transform={`translate(${boxPadding},${boxPadding})`}>
diff --git a/website/src/components/controls/LineWidthControl.tsx b/website/src/components/controls/specialized/LineWidthControl.tsx
similarity index 89%
rename from website/src/components/controls/LineWidthControl.tsx
rename to website/src/components/controls/specialized/LineWidthControl.tsx
index ca18b18598..d729148a2e 100644
--- a/website/src/components/controls/LineWidthControl.tsx
+++ b/website/src/components/controls/specialized/LineWidthControl.tsx
@@ -1,11 +1,8 @@
 import React, { memo, useCallback } from 'react'
 import styled from 'styled-components'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { TextInput } from './TextInput'
-import { Help } from './Help'
-import { ChartProperty, Flavor } from '../../types'
-import { LineWidthControlConfig } from './types'
+import { ChartProperty, Flavor } from '../../../types'
+import { ControlContext, LineWidthControlConfig } from '../types'
+import { Control, PropertyHeader, Help, TextInput } from '../ui'
 
 const size = 24
 
@@ -17,7 +14,7 @@ interface LineWidthControlProps {
     config: LineWidthControlConfig
     value: number
     onChange: (value: number) => void
-    context?: any
+    context?: ControlContext
 }
 
 export const LineWidthControl = memo(
diff --git a/website/src/components/controls/MarginControl.tsx b/website/src/components/controls/specialized/MarginControl.tsx
similarity index 92%
rename from website/src/components/controls/MarginControl.tsx
rename to website/src/components/controls/specialized/MarginControl.tsx
index 5084f6eacb..c612d3d96a 100644
--- a/website/src/components/controls/MarginControl.tsx
+++ b/website/src/components/controls/specialized/MarginControl.tsx
@@ -1,12 +1,9 @@
 import React, { ChangeEvent, useCallback, useState } from 'react'
 import styled from 'styled-components'
 import { Box as BoxType } from '@nivo/core'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { TextInput } from './TextInput'
-import { Help } from './Help'
-import { ChartProperty, Flavor } from '../../types'
-import { MarginControlConfig } from './types'
+import { ChartProperty, Flavor } from '../../../types'
+import { ControlContext, MarginControlConfig } from '../types'
+import { Control, PropertyHeader, Help, TextInput } from '../ui'
 
 type Side = keyof BoxType
 
@@ -18,7 +15,7 @@ interface MarginControlProps {
     value: BoxType
     config: MarginControlConfig
     onChange: (value: BoxType) => void
-    context?: any
+    context?: ControlContext
 }
 
 export const MarginControl = ({
@@ -28,6 +25,7 @@ export const MarginControl = ({
     currentFlavor,
     value,
     onChange,
+    context,
 }: MarginControlProps) => {
     const [side, setSide] = useState<null | Side>(null)
 
@@ -54,7 +52,7 @@ export const MarginControl = ({
             currentFlavor={currentFlavor}
             supportedFlavors={property.flavors}
         >
-            <PropertyHeader {...property} />
+            <PropertyHeader {...property} context={context} />
             <Grid>
                 <Label htmlFor={`${id}-top`}>top</Label>
                 <TextInput
diff --git a/website/src/components/controls/MotionConfigControl.tsx b/website/src/components/controls/specialized/MotionConfigControl.tsx
similarity index 92%
rename from website/src/components/controls/MotionConfigControl.tsx
rename to website/src/components/controls/specialized/MotionConfigControl.tsx
index db47387ec1..b23d934667 100644
--- a/website/src/components/controls/MotionConfigControl.tsx
+++ b/website/src/components/controls/specialized/MotionConfigControl.tsx
@@ -2,14 +2,9 @@ import React, { ChangeEvent, memo, useCallback, useState } from 'react'
 import { config as springConfig } from '@react-spring/web'
 import { isString } from 'lodash'
 import styled from 'styled-components'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Radio } from './Radio'
-import Select from './Select'
-import { Switch } from './Switch'
-import { Help } from './Help'
-import { ChartProperty, Flavor } from '../../types'
-import { MotionConfigControlConfig } from './types'
+import { ChartProperty, Flavor } from '../../../types'
+import { ControlContext, MotionConfigControlConfig } from '../types'
+import { Control, PropertyHeader, Help, Radio, Select, Switch } from '../ui'
 
 const presetOptions = Object.keys(springConfig).map(presetId => ({
     value: presetId,
@@ -33,11 +28,19 @@ interface MotionConfigControlProps {
     config: MotionConfigControlConfig
     value: any
     onChange: (value: any) => void
-    context?: any
+    context?: ControlContext
 }
 
 export const MotionConfigControl = memo(
-    ({ id, property, flavors, currentFlavor, value, onChange }: MotionConfigControlProps) => {
+    ({
+        id,
+        property,
+        flavors,
+        currentFlavor,
+        value,
+        onChange,
+        context,
+    }: MotionConfigControlProps) => {
         const type = isString(value) ? 'preset' : 'custom'
         const [preset, setPreset] = useState(type === 'preset' ? value : 'default')
         const [customConfig, setCustomConfig] = useState(type === 'custom' ? value : defaultConfig)
@@ -109,7 +112,7 @@ export const MotionConfigControl = memo(
                 currentFlavor={currentFlavor}
                 supportedFlavors={property.flavors}
             >
-                <PropertyHeader id={id} {...property} />
+                <PropertyHeader id={id} {...property} context={context} />
                 <Row>
                     <Radio
                         options={[
diff --git a/website/src/components/controls/ValueFormatControl.tsx b/website/src/components/controls/specialized/ValueFormatControl.tsx
similarity index 95%
rename from website/src/components/controls/ValueFormatControl.tsx
rename to website/src/components/controls/specialized/ValueFormatControl.tsx
index 3ec4731f93..28ae76b3e1 100644
--- a/website/src/components/controls/ValueFormatControl.tsx
+++ b/website/src/components/controls/specialized/ValueFormatControl.tsx
@@ -3,15 +3,10 @@ import styled from 'styled-components'
 import { formatSpecifier as parseFormat, FormatSpecifier } from 'd3-format'
 // @ts-ignore
 import { components } from 'react-select'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { TextInput } from './TextInput'
-import { Switch } from './Switch'
-import Select from './Select'
-import { Help } from './Help'
 import { FaChevronUp, FaChevronDown } from 'react-icons/fa'
-import { ChartProperty, Flavor } from '../../types'
-import { ValueFormatControlConfig } from './types'
+import { ChartProperty, Flavor } from '../../../types'
+import { ControlContext, ValueFormatControlConfig } from '../types'
+import { Control, PropertyHeader, Help, TextInput, Switch, Select } from '../ui'
 
 const typeOptions = [
     {
@@ -167,11 +162,19 @@ interface ValueFormatControlProps {
     config: ValueFormatControlConfig
     value: { format: string; enabled: boolean }
     onChange: (value: { format: string; enabled: boolean }) => void
-    context?: any
+    context?: ControlContext
 }
 
 export const ValueFormatControl = memo(
-    ({ id, property, flavors, currentFlavor, value, onChange }: ValueFormatControlProps) => {
+    ({
+        id,
+        property,
+        flavors,
+        currentFlavor,
+        value,
+        onChange,
+        context,
+    }: ValueFormatControlProps) => {
         const [isEditing, setIsEditing] = useState(false)
         const formatSpecifier = useMemo(() => parseFormat(value.format), [value.format])
 
@@ -248,7 +251,7 @@ export const ValueFormatControl = memo(
                 currentFlavor={currentFlavor}
                 supportedFlavors={property.flavors}
             >
-                <PropertyHeader id={id} {...property} />
+                <PropertyHeader id={id} {...property} context={context} />
                 <MainControls>
                     <Switch value={value.enabled} id={`${id}-enable`} onChange={handleSwitch} />
                     <label
diff --git a/website/src/components/controls/specialized/index.ts b/website/src/components/controls/specialized/index.ts
new file mode 100644
index 0000000000..988a22e028
--- /dev/null
+++ b/website/src/components/controls/specialized/index.ts
@@ -0,0 +1,7 @@
+export * from './AngleControl'
+export * from './AnnotationsControl'
+export * from './BoxAnchorControl'
+export * from './LineWidthControl'
+export * from './MarginControl'
+export * from './MotionConfigControl'
+export * from './ValueFormatControl'
diff --git a/website/src/components/controls/types.ts b/website/src/components/controls/types.ts
index d1658ab425..64a6ac4b5f 100644
--- a/website/src/components/controls/types.ts
+++ b/website/src/components/controls/types.ts
@@ -140,6 +140,10 @@ export interface AnnotationsControlConfig {
     createDefaults: AnnotationMatcher<any>
 }
 
+export interface ContinuousColorsControlConfig {
+    type: 'continuous_colors'
+}
+
 export type ControlConfig =
     | SwitchControlAttrs
     | RangeControlConfig
@@ -164,3 +168,8 @@ export type ControlConfig =
     | TextControlConfig
     | ColorsControlConfig
     | AnnotationsControlConfig
+    | ContinuousColorsControlConfig
+
+export interface ControlContext {
+    path: string[]
+}
diff --git a/website/src/components/controls/Control.tsx b/website/src/components/controls/ui/Control.tsx
similarity index 95%
rename from website/src/components/controls/Control.tsx
rename to website/src/components/controls/ui/Control.tsx
index 04a7c33526..3e7e9e6976 100644
--- a/website/src/components/controls/Control.tsx
+++ b/website/src/components/controls/ui/Control.tsx
@@ -2,8 +2,8 @@ import React, { useState, useCallback, PropsWithChildren } from 'react'
 import intersection from 'lodash/intersection'
 import styled from 'styled-components'
 import { MdKeyboardArrowRight, MdKeyboardArrowDown } from 'react-icons/md'
-import { Flavor } from '../../types'
-import PropertyDescription from './PropertyDescription'
+import { Flavor } from '../../../types'
+import { PropertyDescription } from './PropertyDescription'
 import { PropertyFlavors } from './PropertyFlavors'
 import { Cell } from './styled'
 
diff --git a/website/src/components/controls/Help.tsx b/website/src/components/controls/ui/Help.tsx
similarity index 93%
rename from website/src/components/controls/Help.tsx
rename to website/src/components/controls/ui/Help.tsx
index 72c39ecf28..dc1465b6c4 100644
--- a/website/src/components/controls/Help.tsx
+++ b/website/src/components/controls/ui/Help.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import dedent from 'dedent-js'
-import { Markdown } from '../Markdown'
+import { Markdown } from '../../Markdown'
 
 interface HelpProps {
     children?: string | undefined
diff --git a/website/src/components/controls/Label.ts b/website/src/components/controls/ui/Label.ts
similarity index 100%
rename from website/src/components/controls/Label.ts
rename to website/src/components/controls/ui/Label.ts
diff --git a/website/src/components/controls/PropertyDescription.tsx b/website/src/components/controls/ui/PropertyDescription.tsx
similarity index 73%
rename from website/src/components/controls/PropertyDescription.tsx
rename to website/src/components/controls/ui/PropertyDescription.tsx
index d0c57dc03f..9394d8ec8c 100644
--- a/website/src/components/controls/PropertyDescription.tsx
+++ b/website/src/components/controls/ui/PropertyDescription.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import dedent from 'dedent-js'
-import { Markdown } from '../Markdown'
+import { Markdown } from '../../Markdown'
 
 const Description = styled.div`
     grid-column-start: 2;
@@ -17,12 +17,10 @@ interface PropertyDescriptionProps {
     description: string
 }
 
-const PropertyDescription = ({ description }: PropertyDescriptionProps) => {
+export const PropertyDescription = ({ description }: PropertyDescriptionProps) => {
     return (
         <Description>
             <Markdown source={dedent(description)} />
         </Description>
     )
 }
-
-export default PropertyDescription
diff --git a/website/src/components/controls/PropertyFlavors.tsx b/website/src/components/controls/ui/PropertyFlavors.tsx
similarity index 96%
rename from website/src/components/controls/PropertyFlavors.tsx
rename to website/src/components/controls/ui/PropertyFlavors.tsx
index a52228cb09..7d42d57595 100644
--- a/website/src/components/controls/PropertyFlavors.tsx
+++ b/website/src/components/controls/ui/PropertyFlavors.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 import styled from 'styled-components'
-import { Flavor as FlavorType } from '../../types'
+import { Flavor as FlavorType } from '../../../types'
 
 interface PropertyFlavorsProps {
     flavors: FlavorType[]
diff --git a/website/src/components/controls/PropertyHeader.tsx b/website/src/components/controls/ui/PropertyHeader.tsx
similarity index 96%
rename from website/src/components/controls/PropertyHeader.tsx
rename to website/src/components/controls/ui/PropertyHeader.tsx
index 5e478f7078..c27933441a 100644
--- a/website/src/components/controls/PropertyHeader.tsx
+++ b/website/src/components/controls/ui/PropertyHeader.tsx
@@ -6,7 +6,8 @@ import isNumber from 'lodash/isNumber'
 import isBoolean from 'lodash/isBoolean'
 import isFunction from 'lodash/isFunction'
 import styled from 'styled-components'
-import { ChartProperty } from '../../types'
+import { ChartProperty } from '../../../types'
+import { ControlContext } from '../types'
 
 const getDefaultValue = (value: any) => {
     if (isPlainObject(value)) {
@@ -37,7 +38,7 @@ const getDefaultValue = (value: any) => {
 type PropertyHeaderProps = ChartProperty & {
     id?: string
     name?: string
-    context?: any
+    context?: ControlContext
 }
 
 export const PropertyHeader = ({
diff --git a/website/src/components/controls/Radio.tsx b/website/src/components/controls/ui/Radio.tsx
similarity index 100%
rename from website/src/components/controls/Radio.tsx
rename to website/src/components/controls/ui/Radio.tsx
diff --git a/website/src/components/controls/Select.tsx b/website/src/components/controls/ui/Select.tsx
similarity index 97%
rename from website/src/components/controls/Select.tsx
rename to website/src/components/controls/ui/Select.tsx
index d5c5267f8b..af46fd5b14 100644
--- a/website/src/components/controls/Select.tsx
+++ b/website/src/components/controls/ui/Select.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import ReactSelect from 'react-select'
 import { useTheme } from 'styled-components'
 
-const Select = props => {
+export const Select = props => {
     const theme = useTheme()
 
     const styles = {
@@ -60,5 +60,3 @@ const Select = props => {
 
     return <ReactSelect styles={styles} {...props} />
 }
-
-export default Select
diff --git a/website/src/components/controls/Switch.tsx b/website/src/components/controls/ui/Switch.tsx
similarity index 100%
rename from website/src/components/controls/Switch.tsx
rename to website/src/components/controls/ui/Switch.tsx
diff --git a/website/src/components/controls/TextInput.tsx b/website/src/components/controls/ui/TextInput.tsx
similarity index 100%
rename from website/src/components/controls/TextInput.tsx
rename to website/src/components/controls/ui/TextInput.tsx
diff --git a/website/src/components/controls/ui/index.ts b/website/src/components/controls/ui/index.ts
new file mode 100644
index 0000000000..51f91a286e
--- /dev/null
+++ b/website/src/components/controls/ui/index.ts
@@ -0,0 +1,9 @@
+export * from './Control'
+export * from './Help'
+export * from './Label'
+export * from './PropertyHeader'
+export * from './Radio'
+export * from './Select'
+export * from './styled'
+export * from './Switch'
+export * from './TextInput'
diff --git a/website/src/components/controls/styled.tsx b/website/src/components/controls/ui/styled.tsx
similarity index 96%
rename from website/src/components/controls/styled.tsx
rename to website/src/components/controls/ui/styled.tsx
index c54917f547..534cd63059 100644
--- a/website/src/components/controls/styled.tsx
+++ b/website/src/components/controls/ui/styled.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { MdKeyboardArrowRight, MdKeyboardArrowDown } from 'react-icons/md'
-import media from '../../theming/mediaQueries'
+import media from '../../../theming/mediaQueries'
 
 export const ToggleWrapper = styled.div`
     position: absolute;