Saturation and lightness was flipped on the spritebuilder. Fixed.

app/lib/sprites/SpriteBuilder.coffee

@@ -141,8 +141,8 @@ module.exports = class SpriteBuilder
     return unless shapes.length
     colors = @initColorMap(shapes)
     @adjustHuesForColorMap(colors, config.hue)
-    @adjustValueForColorMap(colors, 1, config.lightness)
-    @adjustValueForColorMap(colors, 2, config.saturation)
+    @adjustValueForColorMap(colors, 1, config.saturation)
+    @adjustValueForColorMap(colors, 2, config.lightness)
     @applyColorMap(shapes, colors)
     
   initColorMap: (shapes) ->

app/templates/account/settings.jade

@@ -57,7 +57,7 @@ block content
               a(href="http://en.gravatar.com/profiles/edit/?noclose#your-images", target="_blank", data-i18n="account_settings.gravatar_add_more_photos") Add more photos to your Gravatar account to access them here.
       
       #wizard-pane.tab-pane
-        #wizard-settings-tab-view
+        #wizard-settings-view
 
       #password-pane.tab-pane
         p

app/templates/modal/wizard_settings.jade

@@ -4,19 +4,12 @@ block modal-header-content
   h3(data-i18n="wizard_settings.title") Wizard Settings
 
 block modal-body-content
-  h4(data-i18n="wizard_settings.customize_avatar") Customize Your Avatar
-  
-  canvas(width="120px", height="150px")
-  .settings
-    .form-vertical.form
-      .form-group
-        label.control-label(for="name")
-          | Name
-          button.btn.btn-mini.btn-primary#random-name Random
-        input#wizard-settings-name(name="name", type="text", value="#{me.get('name')||''}")
-      .form-group
-        label.control-label(for="wizardColor1") Hat Color
-        .selector#wizard-settings-color-1
+  div.wizard-name-line.form-group
+    label.control-label(for="name")
+      | Name
+    input#wizard-settings-name(name="name", type="text", value="#{me.get('name')||''}")
+
+  #wizard-settings-view
 
 block modal-footer-content
-  button.btn.btn-primary.btn-large#wizard-settings-done(type="button", data-dismiss="modal", aria-hidden="true") Done
+  button.btn.btn-primary.btn-large#wizard-settings-done(type="button") Done

app/views/account/settings_view.coffee

@@ -4,7 +4,7 @@ template = require 'templates/account/settings'
 forms = require('lib/forms')
 User = require('models/User')
 
-WizardSettingsTabView = require './wizard_settings_tab_view'
+WizardSettingsView = require './wizard_settings_view'
 
 module.exports = class SettingsView extends View
   id: 'account-settings-view'
@@ -46,9 +46,9 @@ module.exports = class SettingsView extends View
 
     @chooseTab(location.hash.replace('#',''))
     @updateWizardColor()
-    wizardSettingsTabView = new WizardSettingsTabView()
-    wizardSettingsTabView.on 'change', @save, @
-    @insertSubView wizardSettingsTabView
+    WizardSettingsView = new WizardSettingsView()
+    WizardSettingsView.on 'change', @save, @
+    @insertSubView WizardSettingsView
 
   chooseTab: (category) ->
     id = "##{category}-pane"

app/views/account/wizard_settings_view.coffee

@@ -1,11 +1,11 @@
 RootView = require 'views/kinds/RootView'
-template = require 'templates/account/wizard_settings_tab'
+template = require 'templates/account/wizard_settings'
 {me} = require('lib/auth')
 ThangType = require 'models/ThangType'
 SpriteBuilder = require 'lib/sprites/SpriteBuilder'
 
-module.exports = class WizardSettingsTabView extends RootView
-  id: 'wizard-settings-tab-view'
+module.exports = class WizardSettingsView extends RootView
+  id: 'wizard-settings-view'
   template: template
 
   events:
@@ -107,3 +107,4 @@ module.exports = class WizardSettingsTabView extends RootView
 
   destroy: ->
     @stage?.removeAllEventListeners()
+    super()

app/views/modal/wizard_settings_modal.coffee

@@ -2,6 +2,8 @@ View = require 'views/kinds/ModalView'
 template = require 'templates/modal/wizard_settings'
 WizardSprite = require 'lib/surface/WizardSprite'
 ThangType = require 'models/ThangType'
+{me} = require 'lib/auth'
+forms = require('lib/forms')
 
 module.exports = class WizardSettingsView extends View
   id: "wizard-settings-modal"
@@ -10,71 +12,37 @@ module.exports = class WizardSettingsView extends View
 
   events:
     'change #wizard-settings-name': 'onNameChange'
-    'click #random-name': 'onRandomNameClick'
-    'click #wizard-settings-done': 'saveSettings'
-
-  render: ->
-    me.set('name', @randomName())  if not me.get('name')
-    super()
-
-  onRandomNameClick: =>
-    $('#wizard-settings-name').val(@randomName())
-    @saveSettings()
-
-  randomName: ->
-    return NameGenerator.getName(7, 9)
+    'click #wizard-settings-done': 'onWizardSettingsDone'
 
   afterRender: ->
-    super()
-    @colorSlider = $( "#wizard-settings-color-1", @$el).slider({ animate: "fast" })
-    @colorSlider.slider('value', me.get('wizardColor1')*100)
-    @colorSlider.on('slide',@onSliderChange)
-    @colorSlider.on('slidechange',@onSliderChange)
-    @stage = new createjs.Stage($('canvas', @$el)[0])
-    @saveChanges = _.debounce(@saveChanges, 1000)
+    WizardSettingsView = require 'views/account/wizard_settings_view'
+    view = new WizardSettingsView()
+    @insertSubView view
 
-    wizOriginal = "52a00d55cf1818f2be00000b"
-    url = "/db/thang_type/#{wizOriginal}/version"
-    @wizardType = new ThangType()
-    @wizardType.url = -> url
-    @wizardType.fetch()
-    @wizardType.once 'sync', @initCanvas
-
-  initCanvas: =>
-    spriteOptions = thangID: "Config Wizard", resolutionFactor: 3
-    @wizardSprite = new WizardSprite @wizardType, spriteOptions
-    @wizardSprite.setColorHue(me.get('wizardColor1'))
-    @wizardDisplayObject = @wizardSprite.displayObject
-    @wizardDisplayObject.x = 10
-    @wizardDisplayObject.y = 15
-    @wizardDisplayObject.scaleX = @wizardDisplayObject.scaleY = 3.0
-    @stage.addChild(@wizardDisplayObject)
-    @updateSpriteColor()
-    @stage.update()
-
-  onSliderChange: =>
-    @updateSpriteColor()
-    @saveSettings()
-
-  getColorHue: ->
-    @colorSlider.slider('value') / 100
-
-  updateSpriteColor: ->
-    colorHue = @getColorHue()
-    @wizardSprite.setColorHue(colorHue)
-    @stage.update()
-
-  onNameChange: =>
-    @saveSettings()
-
-  saveSettings: ->
+  onNameChange: ->
     me.set('name', $('#wizard-settings-name').val())
-    me.set('wizardColor1', @getColorHue())
-    @saveChanges()
 
-  saveChanges: ->
-    me.save()
+  onWizardSettingsDone: ->
+    console.log 'saving changes'
+    forms.clearFormAlerts(@$el)
+    res = me.validate()
+    if res?
+      forms.applyErrorsToForm(@$el, res)
+      return
 
-  destroy: ->
-    @wizardSprite?.destroy()
-    super()
+    res = me.save()
+    return unless res
+    save = $('#save-button', @$el).text($.i18n.t('common.saving', defaultValue: 'Saving...'))
+    .addClass('btn-info').show().removeClass('btn-danger')
+
+    res.error =>
+      errors = JSON.parse(res.responseText)
+      console.log 'resulting error!', errors
+      forms.applyErrorsToForm(@$el, errors)
+      @disableModalInProgress(@$el)
+    res.success (model, response, options) ->
+      console.log 'resulting success!'
+#      @hide()
+
+    @enableModalInProgress(@$el)
+    me.save()