Humanoid appearance refactor (#10882)

* initial commit
- species prototype modifications
- markings points as its own file
- shared humanoid component

* adds a tool to convert sprite accessories to markings (in go)

* removes a fmt call

* converts sprite accessory to markings

* adds hair and facial hair to marking categories

* multiple changes
- humanoid visualizer system
- markings modifications for visualizer
- modifications to shared humanoid component
- lays out a base for humanoid system

* hidden layers, ports some properties from appearance component, shrinks DefaultMarkings a little

* squishes the initialize event calls into one function

adds stuff to set species/skin color externally from a server message - currently laid out as if it a dirty call to a networked component, may be subject to change (server-side has not been implemented yet)

* makes the sprite pipeline more obvious

* apply all markings, hidden layer set replacement

* ensures that markings are cleared when the new set is applied

* starts refactoring markingsset (unfinished)

* more additions to the markingset api

* adds constructor logic to markingset

* adds a method to filter out markings in a set based on a given species

* fixes enumerators in markingset

* adds validator into MarkingSet, fixes ForwardMarkingEnumerator

* modifications to the humanoid visual system

* ensuredefault in markingset

* oop

* fixes up data keys, populates OnAppearanceChange in visualizer

* changes to humanoid component, markings

marking equality is now more strict, humanoidcomponent is now implemented for client as a child of sharedhumanoidcomponent

* markings are now applied the visualizer by diffing them

* base sprites are now applied to humanoids from humanoidvisualizer

* passes along base sprite settings to the marking application so that markings know to follow skin color/alpha or not (see: slimes)

* custom base layers on humanoids

* merges all data keys into one data class for humanoid visualizers

* setappearance in sharedhumanoidsystem, removes custombaselayercolors

* humanoidcomponent, system (empty) in server

* adds some basic public API functions to HumanoidSystem

* add marking, remove marking

* changes appearance MarkingsSet to a List<Marking>, adds listener for PlayerSpawnCompleteEvent in HumanoidSystem

* ensuredefaultmarkings, oninit for humanoids

* markingmanager API changes

* removes MarkingsSet

* LoadProfile, adjusts randomization in humanoid appearance to account for species

* base layer settings in humanoidsystem, eye color from profile

* rearranges files to centralize under Humanoid namespace

* more reorganization, deletes some stuff

gotta break stuff to make other things work, right?

goodbye SpriteAccessory...

* fixes a good chunk of server-side issues

still does not compile, yet

* singlemarkingpicker xaml layout

* singlemarkingpicker logic

* magic mirror window (varying pieces of it, mostly client-oriented)

* removes some imports, gives MagicMirror a BUI class (not filled in yet)

* populates magic mirror BUI functionality / window callbacks

* fixes up some errors in humanoidprofileeditor

* changes to SingleMarkingPicker

SingleMarkingPicker now accepts a List<Marking>, species, and total possible markings available in that marking category

* fixes up hair pickers on humanoid profile editor

* fixes the errors in markingpicker

* markingsystem is now gone

* fixes a bunch of build errors

* so that's why i did it like that

* namespace issues, adds robustxamlloader to singlemarkingpicker

* another robustxamlloader

* human, lizard sprites/points

* prototype fixes, deletion of old spriteaccessory

* component registration, fixes dwarf skin toning

no, 'ReptilianToned' does not exist

* removes component registration from abstract humanoid component

* visualizer data now cloneable

* serialize for visualizer key

* zero-count edge case

* missing semi-colon moment

* setspecies in humanoidsystem

* ensures that default markings, if empty, will cause ensuredefault to skip over that given category

* tryadd instead of add

* whoops

* diff and apply should properly apply markings now

* always ensure default, fixes double load for player spawning

* apply skin color now sets the skin color property in humanoidcomponent

* removes sprite from a few species prototypes

* sprite changes for specific base layers based on humanoid sex

* layer ordering fix, and a missing base layer should now disallow markings on that layer

* anymarking base layer, adds the right leg/foot for humans

* loading a profile will now clear all markings on that humanoid

* adds missing layers for humans

* separates species.yml into respective species prototype files

* ensures that if layer visibility was changed, all markings have to be reapplied

* server-side enforcement of hiding hair (and other head-related markings) when equipping things that hide hair

* slime fix, clothingsystem now dictates layer visibility server side

* sussy

* layer settings should now ensure a marking should match the skin tone

* whoops

* skincolor static class and functions in UI

* skin color validation in humanoidcharacterappearance

* markingpicker now shows only the markings for the selected category in used

* getter for slot in singlemarkingpicker now ensures slot is 0 if markings exists

* FilterSpecies no longer attempts to do removal while iterating

* expands for SingleMarkingPicker

* humanoid base dummy has blank layers now (and snout/tail/headside/headtop)

* fixes an issue with visualizer system if the marking count was different but the markings themselves were (somewhat) the same

* whoops

* adds edge case handlers for count differences in humanoid markings

* preview now loads profile instead of directly setting appearance

* moves marking set loading to update controls

* clones a marking set in markingpicker by using the deep clone constructor

* whoops (deep cloning a marking now copies the marking id)

* adds replace function for markingset

* points should now update after the markings are remove/added

* merging base layer sprites into a humanoid should now clear them before merging

* sets dirty range start to count only if the dirty range start was never set above 0

* fixes up some issues with singlemarkingpicker

* color selector sliders in single marking picker should now expand

* hair from hair pickers should now apply in profile loading (client-side)

* category in singlemarkingpicker now sets the private category variable

* slot selector should now populate

* single marking picker buttons now have text, also shows the category name over all user-clickable elements

* removes a comment

* removing hair slots now sets it to bald, defaults to zero used slots if current hair is bald on hair/facial hair

* random skin color, eye color

* populate colors now checks if the marking count is greater than zero in singlemarkingpicker

* hair/facial hair pickers now just get the first possible hair from the respective species list

* different approach to random skin color

* oh, that's why it wasn't working

* randomize everything now just updates every single control

* selecting a new marking in SingleMarkingPicker should attempt to copy over old colors, populate list now uses cache,

* markingmanager now uses OnlyWhitelisted to populate by category and species

* filterspecies now uses onlyWhitelist to filter markings based on whitelist or not

* oops

* ui fix for singlemarkingpicker, ensures that cache is not null if it is null when populatelist is called

* order of operations for the horizontal expand for add/remove

* hair pickers should now update when you add/remove the hair slot

* fixes variable naming error in character appearance

* loc string fix in singlemarkingpicker

* lizards, vox now have onlyWhitelist, vox restriction for hair/facialhairs

* having zero possible hairs should no longer cause an exception in randomization

* setting species should now update hair pickers

* ignore categories for marking picker

* and a clear as well for the category button

* places that functionality in its own function instead

* adds eye base sprite, vox now also have their own custom eye sprites

* loading a profile client-side should do FilterSpecies for markings now

* client-side load profile does filter species after adding in the hairs now

* magic mirror

* callbacks now call the callback instead of adding it on construct

* whoops

* in removemarking too

* adds missing synchronize calls

* comments out an updateinterface call in magic mirror

* magic mirror window title, minimum sizing

* fixes minsize, adds warning for players who try to set their hair for species that have no hair

* removes spaces in xaml

* namespace changes/organization

* whoopsie (merge conflicts)

* re-enables identity from humanoid component

* damagevisuals now uses the enum given to it instead of the layerstate given on that layer tied to the enum

* removes commas from json

* changes to visuals system so the change is consistent

* chest

* reptilian

* visualizer system now handles body sprite setting/coloration, similar to how characterappearance did it

not a big fan of this

* adds a check in applybasesprites

* adding/removing parts should now make them invisible on a humanoid

* body part removal/adding now enumerates over sublayers instead

* synchro now runs in bodycomponent startup

* parts instead of slots

* humanoidcompnent check

* switches from rsi to actualrsi

* removes all the body stuff (too slow)

* cleans up resolves from humanoid visualizer system

* merging sprites now checks if the base sprites have been modified or not (through things like species changes, or custom base sprite changes)

* not forgetting that one again

* merging now returns an actual dirty value

* replaces the sequenceequal with a more accurate solution

* permanent layers, layer visibility on add/remove part in body

* should send all hidden layers over now

* isdirty in visualizer system for base layers

* isdirty checks count as well

* ok, IsDirty should now set the base layers if the merged sprites are different

* equals override in HumanoidSpritePrototypes.cs

temporary until record prototypes :heck:

* makes fields readonly, equates IDs instead

* adds forced markings through marking picker

* forced in humanoidsystem api, ignorespecies in markingpicker

* marking bui

* makes that serializable as well

* ignore species/forced toggles now work

* adds icon to modifier verb, interface and keys to humanoid bases

* needs the actual enum value to open, no?

* makes the key the actual key

* actions now propagate upwards

* ignore species when set now repopulates markingpicker

* modifiable base layers in the markings window

* oops!

* layout changes

* info box should now appear

* adds ignorespecies for marking picker, collapsible for base layer section of appearance modification window

* collapsible layout moment

* if base layers have changed, all markings are now dirty (and if a base layer is missing, the marking is still 'applied' but it's now just invisible

* small change to marking visibility

* small changes to modifier UI

* markings now match skin on zombification

* zombie stuff

* makes the line edit in marking modifier window more obvious

* disables vox on round start

* horizontal expand on the single label in base layer modifiers

* humanoid profiles in prototypes

* randomhumanoidappearance won't work if the humanoid has a profile already stored

* removes unused code

* documentation in humanoidsystem server-side

* documentation in shared/client

* whoops

* converts accessory into marking in locale files (also adds marking loc string into single marking picker)

* be gone, shared humanoid appearance system from the last upstream merge

* species ignore on randomization (defaults to no ignored species)

* more upstream merge parts that bypassed any errors before merge

* addresses review (also just adds typeserializers in some places)

* submodule moment

* upstream merge issues

Content.Client/CharacterAppearance/MagicMirrorBoundUserInterface.cs

@@ -1,269 +0,0 @@
-using System;
-using System.Linq;
-using Content.Client.Stylesheets;
-using Content.Shared.CharacterAppearance;
-using JetBrains.Annotations;
-using Robust.Client.GameObjects;
-using Robust.Client.Graphics;
-using Robust.Client.UserInterface;
-using Robust.Client.UserInterface.Controls;
-using Robust.Client.UserInterface.CustomControls;
-using Robust.Client.Utility;
-using Robust.Shared.GameObjects;
-using Robust.Shared.IoC;
-using Robust.Shared.Localization;
-using Robust.Shared.Maths;
-using static Content.Shared.CharacterAppearance.Components.SharedMagicMirrorComponent;
-using static Robust.Client.UserInterface.Controls.BoxContainer;
-
-namespace Content.Client.CharacterAppearance
-{
-    [UsedImplicitly]
-    public sealed class MagicMirrorBoundUserInterface : BoundUserInterface
-    {
-        private MagicMirrorWindow? _window;
-
-        public MagicMirrorBoundUserInterface(ClientUserInterfaceComponent owner, Enum uiKey) : base(owner, uiKey)
-        {
-        }
-
-        protected override void Open()
-        {
-            base.Open();
-
-            _window = new MagicMirrorWindow(this);
-            _window.OnClose += Close;
-            _window.Open();
-        }
-
-        protected override void ReceiveMessage(BoundUserInterfaceMessage message)
-        {
-            switch (message)
-            {
-                case MagicMirrorInitialDataMessage initialData:
-                    _window?.SetInitialData(initialData);
-                    break;
-            }
-        }
-
-        internal void HairSelected(string name, bool isFacialHair)
-        {
-            SendMessage(new HairSelectedMessage(name, isFacialHair));
-        }
-
-        internal void HairColorSelected(Color color, bool isFacialHair)
-        {
-            SendMessage(new HairColorSelectedMessage((color.RByte, color.GByte, color.BByte),
-                isFacialHair));
-        }
-
-        internal void EyeColorSelected(Color color)
-        {
-            SendMessage(new EyeColorSelectedMessage((color.RByte, color.GByte, color.BByte)));
-        }
-
-        protected override void Dispose(bool disposing)
-        {
-            base.Dispose(disposing);
-
-            if (disposing)
-            {
-                _window?.Dispose();
-            }
-        }
-    }
-
-    public sealed class HairStylePicker : Control
-    {
-        [Dependency] private readonly SpriteAccessoryManager _spriteAccessoryManager = default!;
-
-        public event Action<Color>? OnHairColorPicked;
-        public event Action<string>? OnHairStylePicked;
-
-        private readonly ItemList _items;
-
-        private readonly Control _colorContainer;
-        private readonly ColorSelectorSliders _colorSelectors;
-        private Color _lastColor;
-        private SpriteAccessoryCategories _categories;
-
-        public void SetData(Color color, string styleId, SpriteAccessoryCategories categories, bool canColor)
-        {
-            if (_categories != categories)
-            {
-                _categories = categories;
-                Populate();
-            }
-
-            _colorContainer.Visible = canColor;
-            _lastColor = color;
-
-            _colorSelectors.Color = color;
-
-            foreach (var item in _items)
-            {
-                var prototype = (SpriteAccessoryPrototype) item.Metadata!;
-                item.Selected = prototype.ID == styleId;
-            }
-
-            UpdateStylePickerColor();
-        }
-
-        private void UpdateStylePickerColor()
-        {
-            foreach (var item in _items)
-            {
-                item.IconModulate = _lastColor;
-            }
-        }
-
-        public HairStylePicker()
-        {
-            IoCManager.InjectDependencies(this);
-
-            var vBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Vertical
-            };
-            AddChild(vBox);
-
-            _colorContainer = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Vertical
-            };
-            vBox.AddChild(_colorContainer);
-            _colorContainer.AddChild(_colorSelectors = new ());
-            _colorSelectors.OnColorChanged += color => ColorValueChanged(color);
-
-            _items = new ItemList
-            {
-                VerticalExpand = true,
-                MinSize = (300, 250)
-            };
-            vBox.AddChild(_items);
-            _items.OnItemSelected += ItemSelected;
-        }
-
-        private void ColorValueChanged(Color newColor)
-        {
-            OnHairColorPicked?.Invoke(newColor);
-            _lastColor = newColor;
-            UpdateStylePickerColor();
-        }
-
-        public void Populate()
-        {
-            var styles = _spriteAccessoryManager
-                .AccessoriesForCategory(_categories)
-                .ToList();
-            styles.Sort(HairStyles.SpriteAccessoryComparer);
-
-            foreach (var style in styles)
-            {
-                var item = _items.AddItem(style.Name, style.Sprite.Frame0());
-                item.Metadata = style;
-            }
-        }
-
-        private void ItemSelected(ItemList.ItemListSelectedEventArgs args)
-        {
-            var prototype = (SpriteAccessoryPrototype?) _items[args.ItemIndex].Metadata;
-            var style = prototype?.ID;
-
-            if (style != null)
-            {
-                OnHairStylePicked?.Invoke(style);
-            }
-        }
-
-        // ColorSlider
-    }
-
-    public sealed class EyeColorPicker : Control
-    {
-        public event Action<Color>? OnEyeColorPicked;
-
-        private readonly ColorSelectorSliders _colorSelectors;
-
-        private Color _lastColor;
-
-        public void SetData(Color color)
-        {
-            _lastColor = color;
-
-            _colorSelectors.Color = color;
-        }
-
-        public EyeColorPicker()
-        {
-            var vBox = new BoxContainer
-            {
-                Orientation = LayoutOrientation.Vertical
-            };
-            AddChild(vBox);
-
-            vBox.AddChild(_colorSelectors = new ColorSelectorSliders());
-
-            _colorSelectors.OnColorChanged += ColorValueChanged;
-        }
-
-        private void ColorValueChanged(Color newColor)
-        {
-            OnEyeColorPicked?.Invoke(newColor);
-
-            _lastColor = newColor;
-        }
-
-        // ColorSlider
-    }
-
-    public sealed class MagicMirrorWindow : DefaultWindow
-    {
-        private readonly HairStylePicker _hairStylePicker;
-        private readonly HairStylePicker _facialHairStylePicker;
-        private readonly EyeColorPicker _eyeColorPicker;
-
-        public MagicMirrorWindow(MagicMirrorBoundUserInterface owner)
-        {
-            SetSize = MinSize = (500, 360);
-            Title = Loc.GetString("magic-mirror-window-title");
-
-            _hairStylePicker = new HairStylePicker {HorizontalExpand = true};
-            _hairStylePicker.OnHairStylePicked += newStyle => owner.HairSelected(newStyle, false);
-            _hairStylePicker.OnHairColorPicked += newColor => owner.HairColorSelected(newColor, false);
-
-            _facialHairStylePicker = new HairStylePicker {HorizontalExpand = true};
-            _facialHairStylePicker.OnHairStylePicked += newStyle => owner.HairSelected(newStyle, true);
-            _facialHairStylePicker.OnHairColorPicked += newColor => owner.HairColorSelected(newColor, true);
-
-            _eyeColorPicker = new EyeColorPicker { HorizontalExpand = true };
-            _eyeColorPicker.OnEyeColorPicked += newColor => owner.EyeColorSelected(newColor);
-
-            Contents.AddChild(new BoxContainer
-            {
-                Orientation = LayoutOrientation.Horizontal,
-                SeparationOverride = 8,
-                Children = {_hairStylePicker, _facialHairStylePicker, _eyeColorPicker}
-            });
-        }
-
-        protected override void Dispose(bool disposing)
-        {
-            base.Dispose(disposing);
-
-            if (disposing)
-            {
-                _hairStylePicker.Dispose();
-                _facialHairStylePicker.Dispose();
-                _eyeColorPicker.Dispose();
-            }
-        }
-
-        public void SetInitialData(MagicMirrorInitialDataMessage initialData)
-        {
-            _facialHairStylePicker.SetData(initialData.FacialHairColor, initialData.FacialHairId, initialData.CategoriesFacialHair, initialData.CanColorFacialHair);
-            _hairStylePicker.SetData(initialData.HairColor, initialData.HairId, initialData.CategoriesHair, initialData.CanColorHair);
-            _eyeColorPicker.SetData(initialData.EyeColor);
-        }
-    }
-}

Content.Client/CharacterAppearance/Systems/HumanoidAppearanceSystem.cs

@@ -1,165 +0,0 @@
-using Content.Client.Cuffs.Components;
-using Content.Shared.Body.Components;
-using Content.Shared.CharacterAppearance;
-using Content.Shared.CharacterAppearance.Components;
-using Content.Shared.CharacterAppearance.Systems;
-using Robust.Client.GameObjects;
-using Robust.Shared.Prototypes;
-
-namespace Content.Client.CharacterAppearance.Systems
-{
-    public sealed class HumanoidAppearanceSystem : SharedHumanoidAppearanceSystem
-    {
-        [Dependency] private readonly SpriteAccessoryManager _accessoryManager = default!;
-        [Dependency] private readonly IPrototypeManager _prototypeManager = default!;
-
-        public override void Initialize()
-        {
-            base.Initialize();
-
-            SubscribeLocalEvent<HumanoidAppearanceComponent, ChangedHumanoidAppearanceEvent>(UpdateLooks);
-            SubscribeLocalEvent<HumanoidAppearanceBodyPartAddedEvent>(BodyPartAdded);
-            SubscribeLocalEvent<HumanoidAppearanceBodyPartRemovedEvent>(BodyPartRemoved);
-        }
-
-        public readonly static HumanoidVisualLayers[] BodyPartLayers = {
-            HumanoidVisualLayers.Chest,
-            HumanoidVisualLayers.Head,
-            HumanoidVisualLayers.Snout,
-            HumanoidVisualLayers.HeadTop,
-            HumanoidVisualLayers.HeadSide,
-            HumanoidVisualLayers.Tail,
-            HumanoidVisualLayers.Eyes,
-            HumanoidVisualLayers.RArm,
-            HumanoidVisualLayers.LArm,
-            HumanoidVisualLayers.RHand,
-            HumanoidVisualLayers.LHand,
-            HumanoidVisualLayers.RLeg,
-            HumanoidVisualLayers.LLeg,
-            HumanoidVisualLayers.RFoot,
-            HumanoidVisualLayers.LFoot
-        };
-
-        private void UpdateLooks(EntityUid uid, HumanoidAppearanceComponent component,
-            ChangedHumanoidAppearanceEvent args)
-        {
-            var spriteQuery = EntityManager.GetEntityQuery<SpriteComponent>();
-
-            if (!spriteQuery.TryGetComponent(uid, out var sprite))
-                return;
-
-            if (EntityManager.TryGetComponent(uid, out SharedBodyComponent? body))
-            {
-                foreach (var (part, _) in body.Parts)
-                {
-                    if (spriteQuery.TryGetComponent(part.Owner, out var partSprite))
-                    {
-                        partSprite.Color = component.Appearance.SkinColor;
-                    }
-                }
-            }
-
-            // Like body parts some stuff may not have hair.
-            if (sprite.LayerMapTryGet(HumanoidVisualLayers.Hair, out var hairLayer))
-            {
-                var hairColor = component.CanColorHair ? component.Appearance.HairColor : Color.White;
-                hairColor = component.HairMatchesSkin ? component.Appearance.SkinColor : hairColor;
-                sprite.LayerSetColor(hairLayer, hairColor.WithAlpha(component.HairAlpha));
-
-                var hairStyle = component.Appearance.HairStyleId;
-                if (string.IsNullOrWhiteSpace(hairStyle) ||
-                    !_accessoryManager.IsValidAccessoryInCategory(hairStyle, component.CategoriesHair))
-                {
-                    hairStyle = HairStyles.DefaultHairStyle;
-                }
-
-                var hairPrototype = _prototypeManager.Index<SpriteAccessoryPrototype>(hairStyle);
-                sprite.LayerSetSprite(hairLayer, hairPrototype.Sprite);
-            }
-
-            if (sprite.LayerMapTryGet(HumanoidVisualLayers.FacialHair, out var facialLayer))
-            {
-                var facialHairColor = component.CanColorHair ? component.Appearance.FacialHairColor : Color.White;
-                facialHairColor = component.HairMatchesSkin ? component.Appearance.SkinColor : facialHairColor;
-                sprite.LayerSetColor(facialLayer, facialHairColor.WithAlpha(component.HairAlpha));
-
-                var facialHairStyle = component.Appearance.FacialHairStyleId;
-                if (string.IsNullOrWhiteSpace(facialHairStyle) ||
-                    !_accessoryManager.IsValidAccessoryInCategory(facialHairStyle, component.CategoriesFacialHair))
-                {
-                    facialHairStyle = HairStyles.DefaultFacialHairStyle;
-                }
-
-                var facialHairPrototype = _prototypeManager.Index<SpriteAccessoryPrototype>(facialHairStyle);
-                sprite.LayerSetSprite(facialLayer, facialHairPrototype.Sprite);
-            }
-
-            foreach (var layer in BodyPartLayers)
-            {
-                // Not every mob may have the furry layers hence we just skip it.
-                if (!sprite.LayerMapTryGet(layer, out var actualLayer)) continue;
-                if (!sprite[actualLayer].Visible) continue;
-
-                sprite.LayerSetColor(actualLayer, component.Appearance.SkinColor);
-            }
-
-            sprite.LayerSetColor(HumanoidVisualLayers.Eyes, component.Appearance.EyeColor);
-            sprite.LayerSetState(HumanoidVisualLayers.Chest, component.Sex == Sex.Male ? "torso_m" : "torso_f");
-            sprite.LayerSetState(HumanoidVisualLayers.Head, component.Sex == Sex.Male ? "head_m" : "head_f");
-
-            if (sprite.LayerMapTryGet(HumanoidVisualLayers.StencilMask, out _))
-                sprite.LayerSetVisible(HumanoidVisualLayers.StencilMask, component.Sex == Sex.Female);
-
-            if (EntityManager.TryGetComponent<CuffableComponent>(uid, out var cuffed))
-            {
-                sprite.LayerSetVisible(HumanoidVisualLayers.Handcuffs, !cuffed.CanStillInteract);
-            }
-            else
-            {
-                sprite.LayerSetVisible(HumanoidVisualLayers.Handcuffs, false);
-            }
-        }
-
-        // Scaffolding until Body is moved to ECS.
-        private void BodyPartAdded(HumanoidAppearanceBodyPartAddedEvent args)
-        {
-            if (!EntityManager.TryGetComponent(args.Uid, out SpriteComponent? sprite))
-            {
-                return;
-            }
-
-            if (!EntityManager.HasComponent<SpriteComponent>(args.Args.Part.Owner))
-            {
-                return;
-            }
-
-            var layers = args.Args.Part.ToHumanoidLayers();
-            // TODO BODY Layer color, sprite and state
-            foreach (var layer in layers)
-            {
-                if (!sprite.LayerMapTryGet(layer, out _))
-                    continue;
-
-                sprite.LayerSetVisible(layer, true);
-            }
-        }
-
-        private void BodyPartRemoved(HumanoidAppearanceBodyPartRemovedEvent args)
-        {
-            if (!EntityManager.TryGetComponent(args.Uid, out SpriteComponent? sprite))
-            {
-                return;
-            }
-
-            if (!EntityManager.HasComponent<SpriteComponent>(args.Args.Part.Owner))
-            {
-                return;
-            }
-
-            var layers = args.Args.Part.ToHumanoidLayers();
-            // TODO BODY Layer color, sprite and state
-            foreach (var layer in layers)
-                sprite.LayerSetVisible(layer, false);
-        }
-    }
-}

Content.Client/Clothing/ClothingVisualsSystem.cs

@@ -2,9 +2,9 @@ using System.Collections.Generic;
 using System.Diagnostics.CodeAnalysis;
 using System.Linq;
 using Content.Client.Inventory;
-using Content.Shared.CharacterAppearance;
 using Content.Shared.Clothing;
 using Content.Shared.Clothing.Components;
+using Content.Shared.Humanoid;
 using Content.Shared.Inventory;
 using Content.Shared.Inventory.Events;
 using Content.Shared.Item;
@@ -150,17 +150,6 @@ public sealed class ClothingVisualsSystem : EntitySystem
 
     private void OnGotUnequipped(EntityUid uid, ClothingComponent component, GotUnequippedEvent args)
     {
-        if (component.InSlot == "head"
-            && _tagSystem.HasTag(uid, "HidesHair")
-            && TryComp(args.Equipee, out SpriteComponent? sprite))
-        {
-            if (sprite.LayerMapTryGet(HumanoidVisualLayers.FacialHair, out var facial))
-                sprite[facial].Visible = true;
-
-            if (sprite.LayerMapTryGet(HumanoidVisualLayers.Hair, out var hair))
-                sprite[hair].Visible = true;
-        }
-
         component.InSlot = null;
     }
 
@@ -198,17 +187,6 @@ public sealed class ClothingVisualsSystem : EntitySystem
     {
         component.InSlot = args.Slot;
 
-        if (args.Slot == "head"
-            && _tagSystem.HasTag(uid, "HidesHair")
-            && TryComp(args.Equipee, out SpriteComponent? sprite))
-        {
-            if (sprite.LayerMapTryGet(HumanoidVisualLayers.FacialHair, out var facial))
-                sprite[facial].Visible = false;
-
-            if (sprite.LayerMapTryGet(HumanoidVisualLayers.Hair, out var hair))
-                sprite[hair].Visible = false;
-        }
-
         RenderEquipment(args.Equipee, uid, args.Slot, clothingComponent: component);
     }
 

Content.Client/Cuffs/Components/CuffableComponent.cs

@@ -1,6 +1,6 @@
 using Content.Shared.ActionBlocker;
-using Content.Shared.CharacterAppearance;
 using Content.Shared.Cuffs.Components;
+using Content.Shared.Humanoid;
 using Robust.Client.GameObjects;
 using Robust.Client.Graphics;
 using Robust.Shared.GameObjects;

Content.Client/Damage/DamageVisualsSystem.cs

@@ -230,8 +230,7 @@ public sealed class DamageVisualsSystem : VisualizerSystem<DamageVisualsComponen
             // the layer key just doesn't exist, we skip it.
             foreach (var key in damageVisComp.TargetLayers)
             {
-                if (!spriteComponent.LayerMapTryGet(key, out var index)
-                    || spriteComponent.LayerGetState(index).ToString() == null)
+                if (!spriteComponent.LayerMapTryGet(key, out var index))
                 {
                     Logger.WarningS(SawmillName, $"Layer at key {key} was invalid for entity {entity}.");
                     continue;
@@ -253,18 +252,18 @@ public sealed class DamageVisualsSystem : VisualizerSystem<DamageVisualsComponen
             // Otherwise, we start reserving layers. Since the filtering
             // loop above ensures that all of these layers are not null,
             // and have valid state IDs, there should be no issues.
-            foreach (object layer in damageVisComp.TargetLayerMapKeys)
+            foreach (var layer in damageVisComp.TargetLayerMapKeys)
             {
                 var layerCount = spriteComponent.AllLayers.Count();
                 var index = spriteComponent.LayerMapGet(layer);
-                var layerState = spriteComponent.LayerGetState(index).ToString()!;
+                // var layerState = spriteComponent.LayerGetState(index).ToString()!;
 
                 if (index + 1 != layerCount)
                 {
                     index += 1;
                 }
 
-                damageVisComp.LayerMapKeyStates.Add(layer, layerState);
+                damageVisComp.LayerMapKeyStates.Add(layer, layer.ToString());
 
                 // If we're an overlay, and we're targeting groups,
                 // we reserve layers per damage group.
@@ -274,7 +273,7 @@ public sealed class DamageVisualsSystem : VisualizerSystem<DamageVisualsComponen
                     {
                         AddDamageLayerToSprite(spriteComponent,
                             sprite,
-                            $"{layerState}_{group}_{damageVisComp.Thresholds[1]}",
+                            $"{layer}_{group}_{damageVisComp.Thresholds[1]}",
                             $"{layer}{group}",
                             index);
                     }
@@ -288,7 +287,7 @@ public sealed class DamageVisualsSystem : VisualizerSystem<DamageVisualsComponen
                 {
                     AddDamageLayerToSprite(spriteComponent,
                         damageVisComp.DamageOverlay,
-                        $"{layerState}_{damageVisComp.Thresholds[1]}",
+                        $"{layer}_{damageVisComp.Thresholds[1]}",
                         $"{layer}trackDamage",
                         index);
                     damageVisComp.DisabledLayers.Add(layer, false);

Content.Client/Humanoid/EyeColorPicker.cs

@@ -0,0 +1,40 @@
+using Robust.Client.UserInterface;
+using Robust.Client.UserInterface.Controls;
+
+namespace Content.Client.Humanoid;
+
+public sealed class EyeColorPicker : Control
+{
+    public event Action<Color>? OnEyeColorPicked;
+
+    private readonly ColorSelectorSliders _colorSelectors;
+
+    private Color _lastColor;
+
+    public void SetData(Color color)
+    {
+        _lastColor = color;
+
+        _colorSelectors.Color = color;
+    }
+
+    public EyeColorPicker()
+    {
+        var vBox = new BoxContainer
+        {
+            Orientation = BoxContainer.LayoutOrientation.Vertical
+        };
+        AddChild(vBox);
+
+        vBox.AddChild(_colorSelectors = new ColorSelectorSliders());
+
+        _colorSelectors.OnColorChanged += ColorValueChanged;
+    }
+
+    private void ColorValueChanged(Color newColor)
+    {
+        OnEyeColorPicked?.Invoke(newColor);
+
+        _lastColor = newColor;
+    }
+}

Content.Client/Humanoid/HumanoidComponent.cs

@@ -0,0 +1,15 @@
+using Content.Shared.Humanoid;
+using Content.Shared.Humanoid.Markings;
+using Content.Shared.Humanoid.Prototypes;
+
+namespace Content.Client.Humanoid;
+
+[RegisterComponent]
+public sealed class HumanoidComponent : SharedHumanoidComponent
+{
+    [ViewVariables] public List<Marking> CurrentMarkings = new();
+
+    public Dictionary<HumanoidVisualLayers, HumanoidSpeciesSpriteLayer> BaseLayers = new();
+
+    public string LastSpecies = default!;
+}

Content.Client/Humanoid/HumanoidMarkingModifierBoundUserInterface.cs

@@ -0,0 +1,62 @@
+using Content.Shared.Humanoid;
+using Content.Shared.Humanoid.Markings;
+using Robust.Client.GameObjects;
+
+namespace Content.Client.Humanoid;
+
+// Marking BUI.
+// Do not use this in any non-privileged instance. This just replaces an entire marking set
+// with the set sent over.
+
+public sealed class HumanoidMarkingModifierBoundUserInterface : BoundUserInterface
+{
+    public HumanoidMarkingModifierBoundUserInterface(ClientUserInterfaceComponent owner, Enum uiKey) : base(owner, uiKey)
+    {
+    }
+
+    private HumanoidMarkingModifierWindow? _window;
+
+    protected override void Open()
+    {
+        base.Open();
+
+        _window = new();
+        _window.OnClose += Close;
+        _window.OnMarkingAdded += SendMarkingSet;
+        _window.OnMarkingRemoved += SendMarkingSet;
+        _window.OnMarkingColorChange += SendMarkingSetNoResend;
+        _window.OnMarkingRankChange += SendMarkingSet;
+        _window.OnLayerInfoModified += SendBaseLayer;
+
+        _window.OpenCenteredLeft();
+    }
+
+    protected override void UpdateState(BoundUserInterfaceState state)
+    {
+        base.UpdateState(state);
+
+        if (_window == null || state is not HumanoidMarkingModifierState cast)
+        {
+            return;
+        }
+
+        _window.SetState(cast.MarkingSet, cast.Species, cast.SkinColor, cast.CustomBaseLayers);
+    }
+
+    private void SendMarkingSet(MarkingSet set)
+    {
+        SendMessage(new HumanoidMarkingModifierMarkingSetMessage(set, true));
+    }
+
+    private void SendMarkingSetNoResend(MarkingSet set)
+    {
+        SendMessage(new HumanoidMarkingModifierMarkingSetMessage(set, false));
+    }
+
+    private void SendBaseLayer(HumanoidVisualLayers layer, CustomBaseLayerInfo? info)
+    {
+        SendMessage(new HumanoidMarkingModifierBaseLayersSetMessage(layer, info, true));
+    }
+}
+
+

Content.Client/Humanoid/HumanoidMarkingModifierWindow.xaml

@@ -0,0 +1,18 @@
+<DefaultWindow xmlns="https://spacestation14.io"
+               xmlns:humanoid="clr-namespace:Content.Client.Humanoid">
+    <ScrollContainer MinHeight="500" MinWidth="700">
+        <BoxContainer Orientation="Vertical" HorizontalExpand="True">
+            <humanoid:MarkingPicker Name="MarkingPickerWidget" />
+            <BoxContainer>
+                <CheckBox Name="MarkingForced" Text="Force" Pressed="True" />
+                <CheckBox Name="MarkingIgnoreSpecies" Text="Ignore Species" Pressed="True" />
+            </BoxContainer>
+            <Collapsible Orientation="Vertical" HorizontalExpand="True">
+                <CollapsibleHeading Title="Base layers" />
+                <CollapsibleBody HorizontalExpand="True">
+                    <BoxContainer Name="BaseLayersContainer" Orientation="Vertical" HorizontalExpand="True" />
+                </CollapsibleBody>
+            </Collapsible>
+        </BoxContainer>
+    </ScrollContainer>
+</DefaultWindow>

Content.Client/Humanoid/HumanoidMarkingModifierWindow.xaml.cs

@@ -0,0 +1,138 @@
+using Content.Shared.Humanoid;
+using Content.Shared.Humanoid.Markings;
+using Robust.Client.AutoGenerated;
+using Robust.Client.UserInterface.Controls;
+using Robust.Client.UserInterface.CustomControls;
+using Robust.Client.UserInterface.XAML;
+
+namespace Content.Client.Humanoid;
+
+// hack for a panel that modifies an entity's markings on demand
+
+[GenerateTypedNameReferences]
+public sealed partial class HumanoidMarkingModifierWindow : DefaultWindow
+{
+    public Action<MarkingSet>? OnMarkingAdded;
+    public Action<MarkingSet>? OnMarkingRemoved;
+    public Action<MarkingSet>? OnMarkingColorChange;
+    public Action<MarkingSet>? OnMarkingRankChange;
+    public Action<HumanoidVisualLayers, CustomBaseLayerInfo?>? OnLayerInfoModified;
+
+    private readonly Dictionary<HumanoidVisualLayers, HumanoidBaseLayerModifier> _modifiers = new();
+
+    public HumanoidMarkingModifierWindow()
+    {
+        RobustXamlLoader.Load(this);
+
+        foreach (var layer in Enum.GetValues<HumanoidVisualLayers>())
+        {
+            var modifier = new HumanoidBaseLayerModifier(layer);
+            BaseLayersContainer.AddChild(modifier);
+            _modifiers.Add(layer, modifier);
+
+            modifier.OnStateChanged += delegate
+            {
+                OnLayerInfoModified!(
+                    layer,
+                    modifier.Enabled
+                        ? new CustomBaseLayerInfo(modifier.State, modifier.Color)
+                        : null);
+            };
+        }
+
+        MarkingPickerWidget.OnMarkingAdded += set => OnMarkingAdded!(set);
+        MarkingPickerWidget.OnMarkingRemoved += set => OnMarkingRemoved!(set);
+        MarkingPickerWidget.OnMarkingColorChange += set => OnMarkingColorChange!(set);
+        MarkingPickerWidget.OnMarkingRankChange += set => OnMarkingRankChange!(set);
+        MarkingForced.OnToggled += args => MarkingPickerWidget.Forced = args.Pressed;
+        MarkingIgnoreSpecies.OnToggled += args => MarkingPickerWidget.Forced = args.Pressed;
+
+        MarkingPickerWidget.Forced = MarkingForced.Pressed;
+        MarkingPickerWidget.IgnoreSpecies = MarkingForced.Pressed;
+    }
+
+    public void SetState(MarkingSet markings, string species, Color skinColor, Dictionary<HumanoidVisualLayers, CustomBaseLayerInfo> info)
+    {
+        MarkingPickerWidget.SetData(markings, species, skinColor);
+
+        foreach (var (layer, modifier) in _modifiers)
+        {
+            if (!info.TryGetValue(layer, out var layerInfo))
+            {
+                modifier.SetState(false, string.Empty, Color.White);
+                continue;
+            }
+
+            modifier.SetState(true, layerInfo.ID, layerInfo.Color);
+        }
+    }
+
+    private sealed class HumanoidBaseLayerModifier : BoxContainer
+    {
+        private CheckBox _enable;
+        private LineEdit _lineEdit;
+        private ColorSelectorSliders _colorSliders;
+        private BoxContainer _infoBox;
+
+        public bool Enabled => _enable.Pressed;
+        public string State => _lineEdit.Text;
+        public Color Color => _colorSliders.Color;
+
+        public Action? OnStateChanged;
+
+        public HumanoidBaseLayerModifier(HumanoidVisualLayers layer)
+        {
+            HorizontalExpand = true;
+            Orientation = LayoutOrientation.Vertical;
+            var labelBox = new BoxContainer
+            {
+                MinWidth = 250,
+                HorizontalExpand = true
+            };
+            AddChild(labelBox);
+
+            labelBox.AddChild(new Label
+            {
+                HorizontalExpand = true,
+                Text = layer.ToString()
+            });
+            _enable = new CheckBox
+            {
+                Text = "Enable",
+                HorizontalAlignment = HAlignment.Right
+            };
+
+            labelBox.AddChild(_enable);
+            _infoBox = new BoxContainer
+            {
+                Orientation = LayoutOrientation.Vertical,
+                Visible = false
+            };
+            _enable.OnToggled += args =>
+            {
+                _infoBox.Visible = args.Pressed;
+                OnStateChanged!();
+            };
+
+            var lineEditBox = new BoxContainer();
+            lineEditBox.AddChild(new Label { Text = "Prototype id: "});
+            _lineEdit = new();
+            _lineEdit.OnTextEntered += args => OnStateChanged!();
+            lineEditBox.AddChild(_lineEdit);
+            _infoBox.AddChild(lineEditBox);
+
+            _colorSliders = new();
+            _colorSliders.OnColorChanged += color => OnStateChanged!();
+            _infoBox.AddChild(_colorSliders);
+            AddChild(_infoBox);
+        }
+
+        public void SetState(bool enabled, string state, Color color)
+        {
+            _enable.Pressed = enabled;
+            _infoBox.Visible = enabled;
+            _lineEdit.Text = state;
+            _colorSliders.Color = color;
+        }
+    }
+}

Content.Client/Humanoid/HumanoidSystem.cs

@@ -0,0 +1,63 @@
+using System.Linq;
+using Content.Shared.Humanoid;
+using Content.Shared.Humanoid.Markings;
+using Content.Shared.Humanoid.Prototypes;
+using Content.Shared.Preferences;
+using Robust.Shared.Prototypes;
+
+namespace Content.Client.Humanoid;
+
+public sealed class HumanoidSystem : SharedHumanoidSystem
+{
+    [Dependency] private readonly IPrototypeManager _prototypeManager = default!;
+    [Dependency] private readonly MarkingManager _markingManager = default!;
+
+    /// <summary>
+    ///     Loads a profile directly into a humanoid.
+    /// </summary>
+    /// <param name="uid">The humanoid entity's UID</param>
+    /// <param name="profile">The profile to load.</param>
+    /// <param name="humanoid">The humanoid entity's humanoid component.</param>
+    /// <remarks>
+    ///     This should not be used if the entity is owned by the server. The server will otherwise
+    ///     override this with the appearance data it sends over.
+    /// </remarks>
+    public void LoadProfile(EntityUid uid, HumanoidCharacterProfile profile, HumanoidComponent? humanoid = null)
+    {
+        if (!Resolve(uid, ref humanoid))
+        {
+            return;
+        }
+
+        humanoid.Species = profile.Species;
+        var customBaseLayers = new Dictionary<HumanoidVisualLayers, CustomBaseLayerInfo>
+        {
+            [HumanoidVisualLayers.Eyes] = new CustomBaseLayerInfo(string.Empty, profile.Appearance.EyeColor)
+        };
+
+        var speciesPrototype = _prototypeManager.Index<SpeciesPrototype>(profile.Species);
+        var markings = new MarkingSet(profile.Appearance.Markings, speciesPrototype.MarkingPoints, _markingManager,
+            _prototypeManager);
+        markings.EnsureDefault(profile.Appearance.SkinColor, _markingManager);
+
+        // legacy: remove in the future?
+        markings.RemoveCategory(MarkingCategories.Hair);
+        markings.RemoveCategory(MarkingCategories.FacialHair);
+
+        var hair = new Marking(profile.Appearance.HairStyleId, new[] { profile.Appearance.HairColor });
+        markings.AddBack(MarkingCategories.Hair, hair);
+
+        var facialHair = new Marking(profile.Appearance.FacialHairStyleId,
+            new[] { profile.Appearance.FacialHairColor });
+        markings.AddBack(MarkingCategories.FacialHair, facialHair);
+
+        markings.FilterSpecies(profile.Species, _markingManager, _prototypeManager);
+
+        SetAppearance(uid,
+            profile.Species,
+            customBaseLayers,
+            profile.Appearance.SkinColor,
+            new(), // doesn't exist yet
+            markings.GetForwardEnumerator().ToList());
+    }
+}

Content.Client/Humanoid/HumanoidVisualizerSystem.cs

@@ -0,0 +1,447 @@
+using System.Linq;
+using Content.Shared.Humanoid;
+using Content.Shared.Humanoid.Markings;
+using Content.Shared.Humanoid.Prototypes;
+using Robust.Client.GameObjects;
+using Robust.Client.Graphics;
+using Robust.Shared.GameStates;
+using Robust.Shared.Prototypes;
+using Robust.Shared.Utility;
+
+namespace Content.Client.Humanoid;
+
+public sealed class HumanoidVisualizerSystem : VisualizerSystem<HumanoidComponent>
+{
+    [Dependency] private IPrototypeManager _prototypeManager = default!;
+    [Dependency] private MarkingManager _markingManager = default!;
+
+    protected override void OnAppearanceChange(EntityUid uid, HumanoidComponent component, ref AppearanceChangeEvent args)
+    {
+        base.OnAppearanceChange(uid, component, ref args);
+
+        if (args.Sprite == null)
+        {
+            return;
+        }
+
+        if (!args.AppearanceData.TryGetValue(HumanoidVisualizerKey.Key, out var dataRaw)
+            || dataRaw is not HumanoidVisualizerData data)
+        {
+            return;
+        }
+
+        if (!_prototypeManager.TryIndex(data.Species, out SpeciesPrototype? speciesProto)
+            || !_prototypeManager.TryIndex(speciesProto.SpriteSet, out HumanoidSpeciesBaseSpritesPrototype? baseSprites))
+        {
+            return;
+        }
+
+        bool dirty;
+        if (data.CustomBaseLayerInfo.Count != 0)
+        {
+            dirty = MergeCustomBaseSprites(uid, baseSprites.Sprites, data.CustomBaseLayerInfo, component);
+        }
+        else
+        {
+            dirty = MergeCustomBaseSprites(uid, baseSprites.Sprites, null, component);
+        }
+
+        if (dirty)
+        {
+            ApplyBaseSprites(uid, component, args.Sprite);
+            ApplySkinColor(uid, data.SkinColor, component, args.Sprite);
+        }
+
+        if (data.CustomBaseLayerInfo.Count != 0)
+        {
+            foreach (var (layer, info) in data.CustomBaseLayerInfo)
+            {
+                SetBaseLayerColor(uid, layer, info.Color, args.Sprite);
+            }
+        }
+
+        var layerVis = data.LayerVisibility.ToHashSet();
+        dirty |= ReplaceHiddenLayers(uid, layerVis, component, args.Sprite);
+
+        DiffAndApplyMarkings(uid, data.Markings, dirty, component, args.Sprite);
+    }
+
+    private bool ReplaceHiddenLayers(EntityUid uid, HashSet<HumanoidVisualLayers> hiddenLayers,
+        HumanoidComponent humanoid, SpriteComponent sprite)
+    {
+        if (hiddenLayers.SetEquals(humanoid.HiddenLayers))
+        {
+            return false;
+        }
+
+        SetSpriteVisibility(uid, hiddenLayers, false, sprite);
+
+        humanoid.HiddenLayers.ExceptWith(hiddenLayers);
+
+        SetSpriteVisibility(uid, humanoid.HiddenLayers, true, sprite);
+
+        humanoid.HiddenLayers.Clear();
+        humanoid.HiddenLayers.UnionWith(hiddenLayers);
+
+        return true;
+    }
+
+    private void SetSpriteVisibility(EntityUid uid, HashSet<HumanoidVisualLayers> layers, bool visibility, SpriteComponent sprite)
+    {
+        foreach (var layer in layers)
+        {
+            if (!sprite.LayerMapTryGet(layer, out var index))
+            {
+                continue;
+            }
+
+            sprite[index].Visible = visibility;
+        }
+    }
+
+    private void DiffAndApplyMarkings(EntityUid uid,
+        List<Marking> newMarkings,
+        bool layersDirty,
+        HumanoidComponent humanoid,
+        SpriteComponent sprite)
+    {
+        // skip this entire thing if both sets are empty
+        if (humanoid.CurrentMarkings.Count == 0 && newMarkings.Count == 0)
+        {
+            return;
+        }
+
+        var dirtyMarkings = new List<int>();
+        var dirtyRangeStart = humanoid.CurrentMarkings.Count == 0 ? 0 : -1;
+
+        // edge cases:
+        // humanoid.CurrentMarkings < newMarkings.Count
+        // - check if count matches this condition before diffing
+        // - if count is unequal, set dirty range to start from humanoid.CurrentMarkings.Count
+        // humanoid.CurrentMarkings > newMarkings.Count, no dirty markings
+        // - break count upon meeting this condition
+        // - clear markings from newMarkings.Count to humanoid.CurrentMarkings.Count - newMarkings.Count
+
+        for (var i = 0; i < humanoid.CurrentMarkings.Count; i++)
+        {
+            // if we've reached the end of the new set of markings,
+            // then that means it's time to finish
+            if (newMarkings.Count == i)
+            {
+                break;
+            }
+
+            // if the marking is different here, set the range start to i and break, we need
+            // to rebuild all markings starting from i
+            if (humanoid.CurrentMarkings[i].MarkingId != newMarkings[i].MarkingId)
+            {
+                dirtyRangeStart = i;
+                break;
+            }
+
+            // otherwise, we add the current marking to dirtyMarkings if it has different
+            // settings
+            // however: if the hidden layers are set to dirty, then we need to
+            // instead just add every single marking, since we don't know ahead of time
+            // where these markings go
+            if (humanoid.CurrentMarkings[i] != newMarkings[i] || layersDirty)
+            {
+                dirtyMarkings.Add(i);
+            }
+        }
+
+        foreach (var i in dirtyMarkings)
+        {
+            if (!_markingManager.TryGetMarking(newMarkings[i], out var dirtyMarking))
+            {
+                continue;
+            }
+
+            ApplyMarking(uid, dirtyMarking, newMarkings[i].MarkingColors, newMarkings[i].Visible, humanoid, sprite);
+        }
+
+        if (humanoid.CurrentMarkings.Count < newMarkings.Count && dirtyRangeStart < 0)
+        {
+            dirtyRangeStart = humanoid.CurrentMarkings.Count;
+        }
+
+        if (dirtyRangeStart >= 0)
+        {
+            var range = newMarkings.GetRange(dirtyRangeStart, newMarkings.Count - dirtyRangeStart);
+
+            if (humanoid.CurrentMarkings.Count > 0)
+            {
+                var oldRange = humanoid.CurrentMarkings.GetRange(dirtyRangeStart, humanoid.CurrentMarkings.Count - dirtyRangeStart);
+                ClearMarkings(uid, oldRange, humanoid, sprite);
+            }
+
+            ApplyMarkings(uid, range, humanoid, sprite);
+        }
+        else if (humanoid.CurrentMarkings.Count != newMarkings.Count)
+        {
+            if (newMarkings.Count == 0)
+            {
+                ClearAllMarkings(uid, humanoid, sprite);
+            }
+            else if (humanoid.CurrentMarkings.Count > newMarkings.Count)
+            {
+                var rangeStart = newMarkings.Count;
+                var rangeCount = humanoid.CurrentMarkings.Count - newMarkings.Count;
+                var range = humanoid.CurrentMarkings.GetRange(rangeStart, rangeCount);
+
+                ClearMarkings(uid, range, humanoid, sprite);
+            }
+        }
+
+        if (dirtyMarkings.Count > 0 || dirtyRangeStart >= 0 || humanoid.CurrentMarkings.Count != newMarkings.Count)
+        {
+            humanoid.CurrentMarkings = newMarkings;
+        }
+    }
+
+    private void ClearAllMarkings(EntityUid uid, HumanoidComponent humanoid,
+        SpriteComponent spriteComp)
+    {
+        ClearMarkings(uid, humanoid.CurrentMarkings, humanoid, spriteComp);
+    }
+
+    private void ClearMarkings(EntityUid uid, List<Marking> markings, HumanoidComponent humanoid,
+        SpriteComponent spriteComp)
+    {
+        foreach (var marking in markings)
+        {
+            RemoveMarking(uid, marking, spriteComp);
+        }
+    }
+
+    private void RemoveMarking(EntityUid uid, Marking marking,
+        SpriteComponent spriteComp)
+    {
+        if (!_markingManager.TryGetMarking(marking, out var prototype))
+        {
+            return;
+        }
+
+        foreach (var sprite in prototype.Sprites)
+        {
+            if (sprite is not SpriteSpecifier.Rsi rsi)
+            {
+                continue;
+            }
+
+            var layerId = $"{marking.MarkingId}-{rsi.RsiState}";
+            if (!spriteComp.LayerMapTryGet(layerId, out var index))
+            {
+                continue;
+            }
+
+            spriteComp.LayerMapRemove(layerId);
+            spriteComp.RemoveLayer(index);
+        }
+    }
+
+    private void ApplyMarkings(EntityUid uid,
+        List<Marking> markings,
+        HumanoidComponent humanoid,
+        SpriteComponent spriteComp)
+    {
+        foreach (var marking in new ReverseMarkingEnumerator(markings))
+        {
+            if (!_markingManager.TryGetMarking(marking, out var markingPrototype))
+            {
+                continue;
+            }
+
+            ApplyMarking(uid, markingPrototype, marking.MarkingColors, marking.Visible, humanoid, spriteComp);
+        }
+    }
+
+    private void ApplyMarking(EntityUid uid,
+        MarkingPrototype markingPrototype,
+        IReadOnlyList<Color>? colors,
+        bool visible,
+        HumanoidComponent humanoid,
+        SpriteComponent sprite)
+    {
+        if (!sprite.LayerMapTryGet(markingPrototype.BodyPart, out int targetLayer))
+        {
+            return;
+        }
+
+        visible &= !humanoid.HiddenLayers.Contains(markingPrototype.BodyPart);
+        visible &= humanoid.BaseLayers.TryGetValue(markingPrototype.BodyPart, out var setting)
+           && setting.AllowsMarkings;
+
+        for (var j = 0; j < markingPrototype.Sprites.Count; j++)
+        {
+            if (markingPrototype.Sprites[j] is not SpriteSpecifier.Rsi rsi)
+            {
+                continue;
+            }
+
+            var layerId = $"{markingPrototype.ID}-{rsi.RsiState}";
+
+            if (!sprite.LayerMapTryGet(layerId, out _))
+            {
+                var layer = sprite.AddLayer(markingPrototype.Sprites[j], targetLayer + j + 1);
+                sprite.LayerMapSet(layerId, layer);
+                sprite.LayerSetSprite(layerId, rsi);
+            }
+
+            sprite.LayerSetVisible(layerId, visible);
+
+            if (!visible || setting == null) // this is kinda implied
+            {
+                continue;
+            }
+
+            if (markingPrototype.FollowSkinColor || colors == null || setting.MarkingsMatchSkin)
+            {
+                var skinColor = humanoid.SkinColor;
+                skinColor.A = setting.LayerAlpha;
+
+                sprite.LayerSetColor(layerId, skinColor);
+            }
+            else
+            {
+                sprite.LayerSetColor(layerId, colors[j]);
+            }
+        }
+    }
+
+    private void ApplySkinColor(EntityUid uid,
+        Color skinColor,
+        HumanoidComponent humanoid,
+        SpriteComponent spriteComp)
+    {
+        humanoid.SkinColor = skinColor;
+
+        foreach (var (layer, spriteInfo) in humanoid.BaseLayers)
+        {
+            if (!spriteInfo.MatchSkin)
+            {
+                continue;
+            }
+
+            var color = skinColor;
+            color.A = spriteInfo.LayerAlpha;
+
+            SetBaseLayerColor(uid, layer, color, spriteComp);
+        }
+    }
+
+    private void SetBaseLayerColor(EntityUid uid, HumanoidVisualLayers layer, Color color,
+        SpriteComponent sprite)
+    {
+        if (!sprite.LayerMapTryGet(layer, out var index))
+        {
+            return;
+        }
+
+        sprite[index].Color = color;
+    }
+
+    private bool MergeCustomBaseSprites(EntityUid uid, Dictionary<HumanoidVisualLayers, string> baseSprites,
+        Dictionary<HumanoidVisualLayers, CustomBaseLayerInfo>? customBaseSprites,
+        HumanoidComponent humanoid)
+    {
+        var newBaseLayers = new Dictionary<HumanoidVisualLayers, HumanoidSpeciesSpriteLayer>();
+
+        foreach (var (key, id) in baseSprites)
+        {
+            var sexMorph = humanoid.Sex switch
+            {
+                Sex.Male when HumanoidVisualLayersExtension.HasSexMorph(key) => $"{id}Male",
+                Sex.Female when HumanoidVisualLayersExtension.HasSexMorph(key) => $"{id}Female",
+                _ => id
+            };
+
+            if (!_prototypeManager.TryIndex(sexMorph, out HumanoidSpeciesSpriteLayer? baseLayer))
+            {
+                continue;
+            }
+
+            if (!newBaseLayers.TryAdd(key, baseLayer))
+            {
+                newBaseLayers[key] = baseLayer;
+            }
+        }
+
+        if (customBaseSprites == null)
+        {
+            return IsDirty(newBaseLayers);
+        }
+
+        foreach (var (key, info) in customBaseSprites)
+        {
+            if (!_prototypeManager.TryIndex(info.ID, out HumanoidSpeciesSpriteLayer? baseLayer))
+            {
+                continue;
+            }
+
+            if (!newBaseLayers.TryAdd(key, baseLayer))
+            {
+                newBaseLayers[key] = baseLayer;
+            }
+        }
+
+        bool IsDirty(Dictionary<HumanoidVisualLayers, HumanoidSpeciesSpriteLayer> newBaseLayers)
+        {
+            var dirty = false;
+            if (humanoid.BaseLayers.Count != newBaseLayers.Count)
+            {
+                dirty = true;
+                humanoid.BaseLayers = newBaseLayers;
+                return dirty;
+            }
+
+            foreach (var (key, info) in humanoid.BaseLayers)
+            {
+                if (!newBaseLayers.TryGetValue(key, out var newInfo))
+                {
+                    dirty = true;
+                    break;
+                }
+
+                if (info.ID != newInfo.ID)
+                {
+                    dirty = true;
+                    break;
+                }
+            }
+
+            if (dirty)
+            {
+                humanoid.BaseLayers = newBaseLayers;
+            }
+
+            return dirty;
+        }
+
+        return IsDirty(newBaseLayers);
+    }
+
+    private void ApplyBaseSprites(EntityUid uid,
+        HumanoidComponent humanoid,
+        SpriteComponent spriteComp)
+    {
+        foreach (var (layer, spriteInfo) in humanoid.BaseLayers)
+        {
+            if (spriteInfo.BaseSprite != null && spriteComp.LayerMapTryGet(layer, out var index))
+            {
+                switch (spriteInfo.BaseSprite)
+                {
+                    case SpriteSpecifier.Rsi rsi:
+                        spriteComp.LayerSetRSI(index, rsi.RsiPath);
+                        spriteComp.LayerSetState(index, rsi.RsiState);
+                        break;
+                    case SpriteSpecifier.Texture texture:
+                        spriteComp.LayerSetTexture(index, texture.TexturePath);
+                        break;
+                }
+            }
+        }
+    }
+
+
+}

Content.Client/Humanoid/MarkingPicker.xaml.cs

@@ -0,0 +1,463 @@
+using System.Linq;
+using Content.Shared.Humanoid;
+using Content.Shared.Humanoid.Markings;
+using Content.Shared.Humanoid.Prototypes;
+using Robust.Client.AutoGenerated;
+using Robust.Client.UserInterface;
+using Robust.Client.UserInterface.Controls;
+using Robust.Client.UserInterface.XAML;
+using Robust.Client.Utility;
+using Robust.Shared.Prototypes;
+using Robust.Shared.Utility;
+using static Robust.Client.UserInterface.Controls.BoxContainer;
+
+namespace Content.Client.Humanoid;
+
+[GenerateTypedNameReferences]
+public sealed partial class MarkingPicker : Control
+{
+    [Dependency] private readonly MarkingManager _markingManager = default!;
+    [Dependency] private readonly IPrototypeManager _prototypeManager = default!;
+
+    public Action<MarkingSet>? OnMarkingAdded;
+    public Action<MarkingSet>? OnMarkingRemoved;
+    public Action<MarkingSet>? OnMarkingColorChange;
+    public Action<MarkingSet>? OnMarkingRankChange;
+
+    private List<Color> _currentMarkingColors = new();
+
+    private ItemList.Item? _selectedMarking;
+    private ItemList.Item? _selectedUnusedMarking;
+    private MarkingCategories _selectedMarkingCategory = MarkingCategories.Chest;
+
+    private MarkingSet _currentMarkings = new();
+
+    private List<MarkingCategories> _markingCategories = Enum.GetValues<MarkingCategories>().ToList();
+
+    private string _currentSpecies = SharedHumanoidSystem.DefaultSpecies;
+    public Color CurrentSkinColor = Color.White;
+
+    private readonly HashSet<MarkingCategories> _ignoreCategories = new();
+
+    public string IgnoreCategories
+    {
+        get => string.Join(',',  _ignoreCategories);
+        set
+        {
+            _ignoreCategories.Clear();
+            var split = value.Split(',');
+            foreach (var category in split)
+            {
+                if (!Enum.TryParse(category, out MarkingCategories categoryParse))
+                {
+                    continue;
+                }
+
+                _ignoreCategories.Add(categoryParse);
+            }
+
+            SetupCategoryButtons();
+        }
+    }
+
+    public bool Forced { get; set; }
+
+    private bool _ignoreSpecies;
+
+    public bool IgnoreSpecies
+    {
+        get => _ignoreSpecies;
+        set
+        {
+            _ignoreSpecies = value;
+            Populate();
+        }
+    }
+
+    public void SetData(List<Marking> newMarkings, string species, Color skinColor)
+    {
+        var pointsProto = _prototypeManager
+            .Index<SpeciesPrototype>(species).MarkingPoints;
+        _currentMarkings = new(newMarkings, pointsProto, _markingManager);
+
+        if (!IgnoreSpecies)
+        {
+            _currentMarkings.FilterSpecies(species); // should be validated server-side but it can't hurt
+        }
+
+        _currentSpecies = species;
+        CurrentSkinColor = skinColor;
+
+        Populate();
+        PopulateUsed();
+    }
+
+    public void SetData(MarkingSet set, string species, Color skinColor)
+    {
+        _currentMarkings = set;
+
+        if (!IgnoreSpecies)
+        {
+            _currentMarkings.FilterSpecies(species); // should be validated server-side but it can't hurt
+        }
+
+        _currentSpecies = species;
+        CurrentSkinColor = skinColor;
+
+        Populate();
+        PopulateUsed();
+    }
+
+    public void SetSkinColor(Color color) => CurrentSkinColor = color;
+
+    public MarkingPicker()
+    {
+        RobustXamlLoader.Load(this);
+        IoCManager.InjectDependencies(this);
+
+        SetupCategoryButtons();
+        CMarkingCategoryButton.OnItemSelected +=  OnCategoryChange;
+        CMarkingsUnused.OnItemSelected += item =>
+            _selectedUnusedMarking = CMarkingsUnused[item.ItemIndex];
+
+        CMarkingAdd.OnPressed += args =>
+            MarkingAdd();
+
+        CMarkingsUsed.OnItemSelected += OnUsedMarkingSelected;
+
+        CMarkingRemove.OnPressed += args =>
+            MarkingRemove();
+
+        CMarkingRankUp.OnPressed += _ => SwapMarkingUp();
+        CMarkingRankDown.OnPressed += _ => SwapMarkingDown();
+    }
+
+    private void SetupCategoryButtons()
+    {
+        CMarkingCategoryButton.Clear();
+        for (var i = 0; i < _markingCategories.Count; i++)
+        {
+            if (_ignoreCategories.Contains(_markingCategories[i]))
+            {
+                continue;
+            }
+
+            CMarkingCategoryButton.AddItem(Loc.GetString($"markings-category-{_markingCategories[i].ToString()}"), i);
+        }
+        CMarkingCategoryButton.SelectId(_markingCategories.IndexOf(_selectedMarkingCategory));
+    }
+
+    private string GetMarkingName(MarkingPrototype marking) => Loc.GetString($"marking-{marking.ID}");
+
+    private List<string> GetMarkingStateNames(MarkingPrototype marking)
+    {
+        List<string> result = new();
+        foreach (var markingState in marking.Sprites)
+        {
+            switch (markingState)
+            {
+                case SpriteSpecifier.Rsi rsi:
+                    result.Add(Loc.GetString($"marking-{marking.ID}-{rsi.RsiState}"));
+                    break;
+                case SpriteSpecifier.Texture texture:
+                    result.Add(Loc.GetString($"marking-{marking.ID}-{texture.TexturePath.Filename}"));
+                    break;
+            }
+        }
+
+        return result;
+    }
+
+    public void Populate()
+    {
+        CMarkingsUnused.Clear();
+        _selectedUnusedMarking = null;
+
+        var markings = IgnoreSpecies
+            ? _markingManager.MarkingsByCategory(_selectedMarkingCategory)
+            : _markingManager.MarkingsByCategoryAndSpecies(_selectedMarkingCategory, _currentSpecies);
+
+        foreach (var marking in markings.Values)
+        {
+            if (_currentMarkings.TryGetCategory(_selectedMarkingCategory, out var listing)
+                && listing.Contains(marking.AsMarking()))
+            {
+                continue;
+            }
+
+            var item = CMarkingsUnused.AddItem($"{GetMarkingName(marking)}", marking.Sprites[0].Frame0());
+            item.Metadata = marking;
+        }
+
+        CMarkingPoints.Visible = _currentMarkings.PointsLeft(_selectedMarkingCategory) != -1;
+    }
+
+    // Populate the used marking list. Returns a list of markings that weren't
+    // valid to add to the marking list.
+    public void PopulateUsed()
+    {
+        CMarkingsUsed.Clear();
+        CMarkingColors.Visible = false;
+        _selectedMarking = null;
+
+        if (!IgnoreSpecies)
+        {
+            _currentMarkings.FilterSpecies(_currentSpecies, _markingManager);
+        }
+
+        // walk backwards through the list for visual purposes
+        foreach (var marking in _currentMarkings.GetReverseEnumerator(_selectedMarkingCategory))
+        {
+            if (!_markingManager.TryGetMarking(marking, out var newMarking))
+            {
+                continue;
+            }
+
+            var text = Loc.GetString(marking.Forced ? "marking-used-forced" : "marking-used", ("marking-name", $"{GetMarkingName(newMarking)}"),
+                ("marking-category", Loc.GetString($"markings-category-{newMarking.MarkingCategory}")));
+
+            var _item = new ItemList.Item(CMarkingsUsed)
+            {
+                Text = text,
+                Icon = newMarking.Sprites[0].Frame0(),
+                Selectable = true,
+                Metadata = newMarking,
+                IconModulate = marking.MarkingColors[0]
+            };
+
+            CMarkingsUsed.Add(_item);
+        }
+
+        // since all the points have been processed, update the points visually
+        UpdatePoints();
+    }
+
+    private void SwapMarkingUp()
+    {
+        if (_selectedMarking == null)
+        {
+            return;
+        }
+
+        var i = CMarkingsUsed.IndexOf(_selectedMarking);
+        if (ShiftMarkingRank(i, -1))
+        {
+            OnMarkingRankChange?.Invoke(_currentMarkings);
+        }
+    }
+
+    private void SwapMarkingDown()
+    {
+        if (_selectedMarking == null)
+        {
+            return;
+        }
+
+        var i = CMarkingsUsed.IndexOf(_selectedMarking);
+        if (ShiftMarkingRank(i, 1))
+        {
+            OnMarkingRankChange?.Invoke(_currentMarkings);
+        }
+    }
+
+    private bool ShiftMarkingRank(int src, int places)
+    {
+        if (src + places >= CMarkingsUsed.Count || src + places < 0)
+        {
+            return false;
+        }
+
+        var visualDest = src + places; // what it would visually look like
+        var visualTemp = CMarkingsUsed[visualDest];
+        CMarkingsUsed[visualDest] = CMarkingsUsed[src];
+        CMarkingsUsed[src] = visualTemp;
+
+        switch (places)
+        {
+            // i.e., we're going down in rank
+            case < 0:
+                _currentMarkings.ShiftRankDownFromEnd(_selectedMarkingCategory, src);
+                break;
+            // i.e., we're going up in rank
+            case > 0:
+                _currentMarkings.ShiftRankUpFromEnd(_selectedMarkingCategory, src);
+                break;
+            // do nothing?
+            default:
+                break;
+        }
+
+        return true;
+    }
+
+
+
+    // repopulate in case markings are restricted,
+    // and also filter out any markings that are now invalid
+    // attempt to preserve any existing markings as well:
+    // it would be frustrating to otherwise have all markings
+    // cleared, imo
+    public void SetSpecies(string species)
+    {
+        _currentSpecies = species;
+        var markingList = _currentMarkings.GetForwardEnumerator().ToList();
+
+        var speciesPrototype = _prototypeManager.Index<SpeciesPrototype>(species);
+
+        _currentMarkings = new(markingList, speciesPrototype.MarkingPoints, _markingManager, _prototypeManager);
+        _currentMarkings.FilterSpecies(species);
+
+        Populate();
+        PopulateUsed();
+    }
+
+    private void UpdatePoints()
+    {
+        var count = _currentMarkings.PointsLeft(_selectedMarkingCategory);
+        if (count > -1)
+        {
+            CMarkingPoints.Text = Loc.GetString("marking-points-remaining", ("points", count));
+        }
+    }
+
+    private void OnCategoryChange(OptionButton.ItemSelectedEventArgs category)
+    {
+        CMarkingCategoryButton.SelectId(category.Id);
+        _selectedMarkingCategory = _markingCategories[category.Id];
+        Populate();
+        PopulateUsed();
+        UpdatePoints();
+    }
+
+    // TODO: This should be using ColorSelectorSliders once that's merged, so
+    private void OnUsedMarkingSelected(ItemList.ItemListSelectedEventArgs item)
+    {
+        _selectedMarking = CMarkingsUsed[item.ItemIndex];
+        var prototype = (MarkingPrototype) _selectedMarking.Metadata!;
+
+        if (prototype.FollowSkinColor)
+        {
+            CMarkingColors.Visible = false;
+
+            return;
+        }
+
+        var stateNames = GetMarkingStateNames(prototype);
+        _currentMarkingColors.Clear();
+        CMarkingColors.DisposeAllChildren();
+        List<ColorSelectorSliders> colorSliders = new();
+        for (int i = 0; i < prototype.Sprites.Count; i++)
+        {
+            var colorContainer = new BoxContainer
+            {
+                Orientation = LayoutOrientation.Vertical,
+            };
+
+            CMarkingColors.AddChild(colorContainer);
+
+            ColorSelectorSliders colorSelector = new ColorSelectorSliders();
+            colorSliders.Add(colorSelector);
+
+            colorContainer.AddChild(new Label { Text = $"{stateNames[i]} color:" });
+            colorContainer.AddChild(colorSelector);
+
+            var listing = _currentMarkings[_selectedMarkingCategory];
+
+            var currentColor = new Color(
+                listing[listing.Count - 1 - item.ItemIndex].MarkingColors[i].RByte,
+                listing[listing.Count - 1 - item.ItemIndex].MarkingColors[i].GByte,
+                listing[listing.Count - 1 - item.ItemIndex].MarkingColors[i].BByte
+            );
+            colorSelector.Color = currentColor;
+            _currentMarkingColors.Add(currentColor);
+            var colorIndex = _currentMarkingColors.Count - 1;
+
+            Action<Color> colorChanged = _ =>
+            {
+                _currentMarkingColors[colorIndex] = colorSelector.Color;
+
+                ColorChanged(colorIndex);
+            };
+            colorSelector.OnColorChanged += colorChanged;
+        }
+
+        CMarkingColors.Visible = true;
+    }
+
+    private void ColorChanged(int colorIndex)
+    {
+        if (_selectedMarking is null) return;
+        var markingPrototype = (MarkingPrototype) _selectedMarking.Metadata!;
+        int markingIndex = _currentMarkings.FindIndexOf(_selectedMarkingCategory, markingPrototype.ID);
+
+        if (markingIndex < 0) return;
+
+        _selectedMarking.IconModulate = _currentMarkingColors[colorIndex];
+
+        var marking = new Marking(_currentMarkings[_selectedMarkingCategory][markingIndex]);
+        marking.SetColor(colorIndex, _currentMarkingColors[colorIndex]);
+        _currentMarkings.Replace(_selectedMarkingCategory, markingIndex, marking);
+
+        OnMarkingColorChange?.Invoke(_currentMarkings);
+    }
+
+    private void MarkingAdd()
+    {
+        if (_selectedUnusedMarking is null) return;
+
+        if (_currentMarkings.PointsLeft(_selectedMarkingCategory) == 0 && !Forced)
+        {
+            return;
+        }
+
+        var marking = (MarkingPrototype) _selectedUnusedMarking.Metadata!;
+
+
+        var markingObject = marking.AsMarking();
+        for (var i = 0; i < markingObject.MarkingColors.Count; i++)
+        {
+            markingObject.SetColor(i, CurrentSkinColor);
+        }
+
+        markingObject.Forced = Forced;
+
+        _currentMarkings.AddBack(_selectedMarkingCategory, markingObject);
+
+        UpdatePoints();
+
+        CMarkingsUnused.Remove(_selectedUnusedMarking);
+        var item = new ItemList.Item(CMarkingsUsed)
+        {
+            Text = Loc.GetString("marking-used", ("marking-name", $"{GetMarkingName(marking)}"), ("marking-category", Loc.GetString($"markings-category-{marking.MarkingCategory}"))),
+            Icon = marking.Sprites[0].Frame0(),
+            Selectable = true,
+            Metadata = marking,
+        };
+        CMarkingsUsed.Insert(0, item);
+
+        _selectedUnusedMarking = null;
+        OnMarkingAdded?.Invoke(_currentMarkings);
+    }
+
+    private void MarkingRemove()
+    {
+        if (_selectedMarking is null) return;
+
+        var marking = (MarkingPrototype) _selectedMarking.Metadata!;
+
+        _currentMarkings.Remove(_selectedMarkingCategory, marking.ID);
+
+        UpdatePoints();
+
+        CMarkingsUsed.Remove(_selectedMarking);
+
+        if (marking.MarkingCategory == _selectedMarkingCategory)
+        {
+            var item = CMarkingsUnused.AddItem($"{GetMarkingName(marking)}", marking.Sprites[0].Frame0());
+            item.Metadata = marking;
+        }
+        _selectedMarking = null;
+        CMarkingColors.Visible = false;
+        OnMarkingRemoved?.Invoke(_currentMarkings);
+    }
+}

Content.Client/Humanoid/SingleMarkingPicker.xaml

@@ -0,0 +1,22 @@
+<BoxContainer xmlns="https://spacestation14.io"
+              Orientation="Vertical"
+              HorizontalExpand="True"
+              VerticalExpand="True">
+    <!-- "Slot" selection -->
+    <Label Name="CategoryName" />
+    <BoxContainer Name="SlotSelectorContainer" HorizontalExpand="True">
+        <OptionButton Name="SlotSelector" HorizontalExpand="True" />
+        <Button Name="AddButton" Text="{Loc 'marking-slot-add'}"/>
+        <Button Name="RemoveButton" Text="{Loc 'marking-slot-remove'}"/>
+    </BoxContainer>
+    <!-- Item list -->
+    <BoxContainer Name="MarkingSelectorContainer" Orientation="Vertical" HorizontalExpand="True" VerticalExpand="True">
+        <ScrollContainer MinHeight="500" VerticalExpand="True" HorizontalExpand="True">
+            <ItemList Name="MarkingList" VerticalExpand="True" />
+        </ScrollContainer>
+        <!-- Color sliders -->
+        <ScrollContainer MinHeight="200" HorizontalExpand="True">
+            <BoxContainer Name="ColorSelectorContainer" HorizontalExpand="True" />
+        </ScrollContainer>
+    </BoxContainer>
+</BoxContainer>

Content.Client/Humanoid/SingleMarkingPicker.xaml.cs

@@ -0,0 +1,283 @@
+using System.Linq;
+using Content.Shared.Humanoid.Markings;
+using Robust.Client.AutoGenerated;
+using Robust.Client.UserInterface.Controls;
+using Robust.Client.UserInterface.XAML;
+using Robust.Client.Utility;
+
+namespace Content.Client.Humanoid;
+
+[GenerateTypedNameReferences]
+public sealed partial class SingleMarkingPicker : BoxContainer
+{
+    [Dependency] private MarkingManager _markingManager = default!;
+
+    /// <summary>
+    ///     What happens if a marking is selected.
+    ///     It will send the 'slot' (marking index)
+    ///     and the selected marking's ID.
+    /// </summary>
+    public Action<(int slot, string id)>? OnMarkingSelect;
+    /// <summary>
+    ///     What happens if a slot is removed.
+    ///     This will send the 'slot' (marking index).
+    /// </summary>
+    public Action<int>? OnSlotRemove;
+
+    /// <summary>
+    ///     What happens when a slot is added.
+    /// </summary>
+    public Action? OnSlotAdd;
+
+    /// <summary>
+    ///     What happens if a marking's color is changed.
+    ///     Sends a 'slot' number, and the marking in question.
+    /// </summary>
+    public Action<(int slot, Marking marking)>? OnColorChanged;
+
+    // current selected slot
+    private int _slot = -1;
+    private int Slot
+    {
+        get
+        {
+            if (_markings == null || _markings.Count == 0)
+            {
+                _slot = -1;
+            }
+            else if (_slot == -1)
+            {
+                _slot = 0;
+            }
+
+            return _slot;
+        }
+        set
+        {
+            if (_markings == null || _markings.Count == 0)
+            {
+                _slot = -1;
+                return;
+            }
+
+            _slot = value;
+            _ignoreItemSelected = true;
+
+            foreach (var item in MarkingList)
+            {
+                item.Selected = (string) item.Metadata! == _markings[_slot].MarkingId;
+            }
+
+            _ignoreItemSelected = false;
+            PopulateColors();
+        }
+    }
+
+    // amount of slots to show
+    private int _totalPoints;
+
+    private bool _ignoreItemSelected;
+
+    private MarkingCategories _category;
+    public MarkingCategories Category
+    {
+        get => _category;
+        set
+        {
+            _category = value;
+            CategoryName.Text = Loc.GetString($"markings-category-{_category}");
+
+            if (!string.IsNullOrEmpty(_species))
+            {
+                PopulateList();
+            }
+        }
+    }
+    private IReadOnlyDictionary<string, MarkingPrototype>? _markingPrototypeCache;
+
+    private string? _species;
+    private List<Marking>? _markings;
+
+    private int PointsLeft
+    {
+        get
+        {
+            if (_markings == null)
+            {
+                return 0;
+            }
+
+            if (_totalPoints < 0)
+            {
+                return -1;
+            }
+
+            return _totalPoints - _markings.Count;
+        }
+    }
+
+    private int PointsUsed => _markings?.Count ?? 0;
+
+    public SingleMarkingPicker()
+    {
+        RobustXamlLoader.Load(this);
+        IoCManager.InjectDependencies(this);
+
+        MarkingList.OnItemSelected += SelectMarking;
+        AddButton.OnPressed += _ =>
+        {
+            OnSlotAdd!();
+        };
+
+        SlotSelector.OnItemSelected += args =>
+        {
+            Slot = args.Button.SelectedId;
+        };
+
+        RemoveButton.OnPressed += _ =>
+        {
+            OnSlotRemove!(_slot);
+        };
+    }
+
+    public void UpdateData(List<Marking> markings, string species, int totalPoints)
+    {
+        _markings = markings;
+        _species = species;
+        _totalPoints = totalPoints;
+
+        _markingPrototypeCache = _markingManager.MarkingsByCategoryAndSpecies(Category, _species);
+
+        Visible = _markingPrototypeCache.Count != 0;
+        if (_markingPrototypeCache.Count == 0)
+        {
+            return;
+        }
+
+        PopulateList();
+        PopulateColors();
+        PopulateSlotSelector();
+    }
+
+    public void PopulateList()
+    {
+        if (string.IsNullOrEmpty(_species))
+        {
+            throw new ArgumentException("Tried to populate marking list without a set species!");
+        }
+
+        _markingPrototypeCache ??= _markingManager.MarkingsByCategoryAndSpecies(Category, _species);
+
+        MarkingSelectorContainer.Visible = _markings != null && _markings.Count != 0;
+        if (_markings == null || _markings.Count == 0)
+        {
+            return;
+        }
+
+        MarkingList.Clear();
+
+        foreach (var (id, marking) in _markingPrototypeCache)
+        {
+            var item = MarkingList.AddItem(Loc.GetString($"marking-{id}"), marking.Sprites[0].Frame0());
+            item.Metadata = marking.ID;
+
+            if (_markings[Slot].MarkingId == id)
+            {
+                _ignoreItemSelected = true;
+                item.Selected = true;
+                _ignoreItemSelected = false;
+            }
+        }
+    }
+
+    private void PopulateColors()
+    {
+        if (_markings == null
+            || _markings.Count == 0
+            || !_markingManager.TryGetMarking(_markings[Slot], out var proto))
+        {
+            return;
+        }
+
+        var marking = _markings[Slot];
+
+        ColorSelectorContainer.DisposeAllChildren();
+        ColorSelectorContainer.RemoveAllChildren();
+
+        if (marking.MarkingColors.Count != proto.Sprites.Count)
+        {
+            marking = new Marking(marking.MarkingId, proto.Sprites.Count);
+        }
+
+        for (var i = 0; i < marking.MarkingColors.Count; i++)
+        {
+            var selector = new ColorSelectorSliders
+            {
+                HorizontalExpand = true
+            };
+            selector.Color = marking.MarkingColors[i];
+
+            var colorIndex = i;
+            selector.OnColorChanged += color =>
+            {
+                marking.SetColor(colorIndex, color);
+                OnColorChanged!((_slot, marking));
+            };
+
+            ColorSelectorContainer.AddChild(selector);
+        }
+    }
+
+    private void SelectMarking(ItemList.ItemListSelectedEventArgs args)
+    {
+        if (_ignoreItemSelected)
+        {
+            return;
+        }
+
+        var id = (string) MarkingList[args.ItemIndex].Metadata!;
+        if (!_markingManager.Markings.TryGetValue(id, out var proto))
+        {
+            throw new ArgumentException("Attempted to select non-existent marking.");
+        }
+
+        var oldMarking = _markings![Slot];
+        _markings[Slot] = proto.AsMarking();
+
+        for (var i = 0; i < _markings[Slot].MarkingColors.Count && i < oldMarking.MarkingColors.Count; i++)
+        {
+            _markings[Slot].SetColor(i, oldMarking.MarkingColors[i]);
+        }
+
+        PopulateColors();
+
+        OnMarkingSelect!((_slot, id));
+    }
+
+    // Slot logic
+
+    private void PopulateSlotSelector()
+    {
+        SlotSelector.Visible = Slot >= 0;
+        AddButton.HorizontalExpand = Slot < 0;
+        RemoveButton.HorizontalExpand = Slot < 0;
+        AddButton.Disabled = PointsLeft == 0 && _totalPoints > -1 ;
+        RemoveButton.Disabled = PointsUsed == 0;
+        SlotSelector.Clear();
+
+        if (Slot < 0)
+        {
+            return;
+        }
+
+        for (var i = 0; i < PointsUsed; i++)
+        {
+            SlotSelector.AddItem($"Slot {i + 1}", i);
+
+            if (i == _slot)
+            {
+                SlotSelector.SelectId(i);
+            }
+        }
+    }
+}

Content.Client/Lobby/UI/LobbyCharacterPreviewPanel.cs

@@ -1,12 +1,14 @@
 using System.Linq;
+using Content.Client.HUD.UI;
+using Content.Client.Humanoid;
 using Content.Client.Inventory;
 using Content.Client.Preferences;
 using Content.Client.UserInterface.Controls;
-using Content.Shared.CharacterAppearance.Systems;
 using Content.Shared.GameTicking;
+using Content.Shared.Humanoid.Prototypes;
+using Content.Shared.Inventory;
 using Content.Shared.Preferences;
 using Content.Shared.Roles;
-using Content.Shared.Species;
 using Robust.Client.GameObjects;
 using Robust.Client.UserInterface;
 using Robust.Client.UserInterface.Controls;
@@ -127,7 +129,7 @@ namespace Content.Client.Lobby.UI
                     _viewBox.AddChild(viewWest);
                     _viewBox.AddChild(viewEast);
                     _summaryLabel.Text = selectedCharacter.Summary;
-                    EntitySystem.Get<SharedHumanoidAppearanceSystem>().UpdateFromProfile(_previewDummy.Value, selectedCharacter);
+                    EntitySystem.Get<HumanoidSystem>().LoadProfile(_previewDummy.Value, selectedCharacter);
                     GiveDummyJobClothes(_previewDummy.Value, selectedCharacter);
                 }
             }

Content.Client/MagicMirror/MagicMirrorBoundUserInterface.cs

@@ -0,0 +1,67 @@
+using Content.Shared.Humanoid.Markings;
+using Content.Shared.MagicMirror;
+using Robust.Client.GameObjects;
+
+namespace Content.Client.MagicMirror;
+
+public sealed class MagicMirrorBoundUserInterface : BoundUserInterface
+{
+    private MagicMirrorWindow? _window;
+
+    public MagicMirrorBoundUserInterface(ClientUserInterfaceComponent owner, Enum uiKey) : base(owner, uiKey)
+    {
+    }
+
+    protected override void Open()
+    {
+        base.Open();
+
+        _window = new();
+
+        _window.OnHairSelected += tuple => SelectHair(MagicMirrorCategory.Hair, tuple.id, tuple.slot);
+        _window.OnHairColorChanged += args => ChangeColor(MagicMirrorCategory.Hair, args.marking, args.slot);
+        _window.OnHairSlotAdded += delegate() { AddSlot(MagicMirrorCategory.Hair); };
+        _window.OnHairSlotRemoved += args => RemoveSlot(MagicMirrorCategory.Hair, args);
+
+        _window.OnFacialHairSelected += tuple => SelectHair(MagicMirrorCategory.FacialHair, tuple.id, tuple.slot);
+        _window.OnFacialHairColorChanged +=
+            args => ChangeColor(MagicMirrorCategory.FacialHair, args.marking, args.slot);
+        _window.OnFacialHairSlotAdded += delegate() { AddSlot(MagicMirrorCategory.FacialHair); };
+        _window.OnFacialHairSlotRemoved += args => RemoveSlot(MagicMirrorCategory.FacialHair, args);
+
+        _window.OpenCentered();
+    }
+
+    private void SelectHair(MagicMirrorCategory category, string marking, int slot)
+    {
+        SendMessage(new MagicMirrorSelectMessage(category, marking, slot));
+    }
+
+    private void ChangeColor(MagicMirrorCategory category, Marking marking, int slot)
+    {
+        SendMessage(new MagicMirrorChangeColorMessage(category, new(marking.MarkingColors), slot));
+    }
+
+    private void RemoveSlot(MagicMirrorCategory category, int slot)
+    {
+        SendMessage(new MagicMirrorRemoveSlotMessage(category, slot));
+    }
+
+    private void AddSlot(MagicMirrorCategory category)
+    {
+        SendMessage(new MagicMirrorAddSlotMessage(category));
+    }
+
+    protected override void ReceiveMessage(BoundUserInterfaceMessage message)
+    {
+        base.ReceiveMessage(message);
+
+        if (message is not MagicMirrorUiData data || _window == null)
+        {
+            return;
+        }
+
+        _window.UpdateState(data);
+    }
+}
+

Content.Client/MagicMirror/MagicMirrorWindow.xaml

@@ -0,0 +1,9 @@
+<DefaultWindow xmlns="https://spacestation14.io"
+               xmlns:humanoid="clr-namespace:Content.Client.Humanoid"
+               Title="{Loc 'magic-mirror-window-title'}"
+               MinSize="600 400">
+    <BoxContainer>
+        <humanoid:SingleMarkingPicker Name="HairPicker" Category="Hair" />
+        <humanoid:SingleMarkingPicker Name="FacialHairPicker" Category="FacialHair" />
+    </BoxContainer>
+</DefaultWindow>

Content.Client/MagicMirror/MagicMirrorWindow.xaml.cs

@@ -0,0 +1,52 @@
+using Content.Shared.Humanoid.Markings;
+using Content.Shared.MagicMirror;
+using Robust.Client.AutoGenerated;
+using Robust.Client.UserInterface.Controls;
+using Robust.Client.UserInterface.CustomControls;
+using Robust.Client.UserInterface.XAML;
+
+namespace Content.Client.MagicMirror;
+
+[GenerateTypedNameReferences]
+public sealed partial class MagicMirrorWindow : DefaultWindow
+{
+    // MMMMMMM
+    public Action<(int slot, string id)>? OnHairSelected;
+    public Action<(int slot, Marking marking)>? OnHairColorChanged;
+    public Action<int>? OnHairSlotRemoved;
+    public Action? OnHairSlotAdded;
+
+    public Action<(int slot, string id)>? OnFacialHairSelected;
+    public Action<(int slot, Marking marking)>? OnFacialHairColorChanged;
+    public Action<int>? OnFacialHairSlotRemoved;
+    public Action? OnFacialHairSlotAdded;
+
+    private bool _noHair;
+
+    public MagicMirrorWindow()
+    {
+        RobustXamlLoader.Load(this);
+
+        HairPicker.OnMarkingSelect += args => OnHairSelected!(args);
+        HairPicker.OnColorChanged += args => OnHairColorChanged!(args);
+        HairPicker.OnSlotRemove += args => OnHairSlotRemoved!(args);
+        HairPicker.OnSlotAdd += delegate { OnHairSlotAdded!(); };
+
+        FacialHairPicker.OnMarkingSelect += args => OnFacialHairSelected!(args);
+        FacialHairPicker.OnColorChanged += args => OnFacialHairColorChanged!(args);
+        FacialHairPicker.OnSlotRemove += args => OnFacialHairSlotRemoved!(args);
+        FacialHairPicker.OnSlotAdd += delegate { OnFacialHairSlotAdded!(); };
+    }
+
+    public void UpdateState(MagicMirrorUiData state)
+    {
+        HairPicker.UpdateData(state.Hair, state.Species, state.HairSlotTotal);
+        FacialHairPicker.UpdateData(state.FacialHair, state.Species, state.FacialHairSlotTotal);
+
+        if (!HairPicker.Visible && !FacialHairPicker.Visible && !_noHair)
+        {
+            AddChild(new Label { Text = Loc.GetString("magic-mirror-component-activate-user-has-no-hair") });
+            _noHair = true;
+        }
+    }
+}

Content.Client/Markings/MarkingPicker.xaml.cs

@@ -1,449 +0,0 @@
-using System;
-using System.Collections;
-using System.Collections.Generic;
-using System.Linq;
-using Content.Client.CharacterAppearance;
-using Content.Client.Stylesheets;
-using Content.Shared.CharacterAppearance;
-using Content.Shared.Markings;
-using Content.Shared.Species;
-using Robust.Client.AutoGenerated;
-using Robust.Client.UserInterface;
-using Robust.Client.UserInterface.Controls;
-using Robust.Client.UserInterface.XAML;
-using Robust.Client.Utility;
-using Robust.Shared.IoC;
-using Robust.Shared.Localization;
-using Robust.Shared.Log;
-using Robust.Shared.Maths;
-using Robust.Shared.Prototypes;
-using Robust.Shared.Utility;
-using static Robust.Client.UserInterface.Controls.BoxContainer;
-
-namespace Content.Client.Markings
-{
-    [GenerateTypedNameReferences]
-    public sealed partial class MarkingPicker : Control
-    {
-        [Dependency] private readonly MarkingManager _markingManager = default!;
-        [Dependency] private readonly IPrototypeManager _prototypeManager = default!;
-
-        public Action<MarkingsSet>? OnMarkingAdded;
-        public Action<MarkingsSet>? OnMarkingRemoved;
-        public Action<MarkingsSet>? OnMarkingColorChange;
-        public Action<MarkingsSet>? OnMarkingRankChange;
-
-        private List<Color> _currentMarkingColors = new();
-
-        private Dictionary<MarkingCategories, MarkingPoints> PointLimits = new();
-        private Dictionary<MarkingCategories, MarkingPoints> PointsUsed = new();
-
-        private ItemList.Item? _selectedMarking;
-        private ItemList.Item? _selectedUnusedMarking;
-        private MarkingCategories _selectedMarkingCategory = MarkingCategories.Chest;
-
-        private MarkingsSet _currentMarkings = new();
-
-        private List<MarkingCategories> _markingCategories = Enum.GetValues<MarkingCategories>().ToList();
-
-        private string _currentSpecies = SpeciesManager.DefaultSpecies;
-        public Color CurrentSkinColor = Color.White;
-
-        public void SetData(MarkingsSet newMarkings, string species, Color skinColor)
-        {
-            _currentMarkings = newMarkings;
-            _currentSpecies = species;
-            CurrentSkinColor = skinColor;
-
-            // Should marking limits be dependent on species prototypes,
-            // or should it be dependent on the entity the
-            // species contains? Having marking points as a part of
-            // the component allows for any arbitrary thing to have
-            // a marking (at this point, it's practically a sprite decoration),
-            // but having it as a part of a species makes markings instead
-            // be dependent on humanoid variants for constraints
-            SpeciesPrototype speciesPrototype = _prototypeManager.Index<SpeciesPrototype>(species);
-            EntityPrototype body = _prototypeManager.Index<EntityPrototype>(speciesPrototype.Prototype);
-
-            body.TryGetComponent("Markings", out MarkingsComponent? markingsComponent);
-
-            PointLimits = markingsComponent!.LayerPoints;
-            PointsUsed = MarkingPoints.CloneMarkingPointDictionary(PointLimits);
-
-            Populate();
-            PopulateUsed();
-        }
-
-        public void SetSkinColor(Color color) => CurrentSkinColor = color;
-
-        public MarkingPicker()
-        {
-            RobustXamlLoader.Load(this);
-            IoCManager.InjectDependencies(this);
-
-            for (int i = 0; i < _markingCategories.Count; i++)
-            {
-                CMarkingCategoryButton.AddItem(Loc.GetString($"markings-category-{_markingCategories[i].ToString()}"), i);
-            }
-            CMarkingCategoryButton.SelectId(_markingCategories.IndexOf(MarkingCategories.Chest));
-            CMarkingCategoryButton.OnItemSelected +=  OnCategoryChange;
-            CMarkingsUnused.OnItemSelected += item =>
-               _selectedUnusedMarking = CMarkingsUnused[item.ItemIndex];
-
-            CMarkingAdd.OnPressed += args =>
-                MarkingAdd();
-
-            CMarkingsUsed.OnItemSelected += OnUsedMarkingSelected;
-
-            CMarkingRemove.OnPressed += args =>
-                MarkingRemove();
-
-            CMarkingRankUp.OnPressed += _ => SwapMarkingUp();
-            CMarkingRankDown.OnPressed += _ => SwapMarkingDown();
-        }
-
-        private string GetMarkingName(MarkingPrototype marking) => Loc.GetString($"marking-{marking.ID}");
-        private List<string> GetMarkingStateNames(MarkingPrototype marking)
-        {
-            List<string> result = new();
-            foreach (var markingState in marking.Sprites)
-            {
-                switch (markingState)
-                {
-                    case SpriteSpecifier.Rsi rsi:
-                        result.Add(Loc.GetString($"marking-{marking.ID}-{rsi.RsiState}"));
-                        break;
-                    case SpriteSpecifier.Texture texture:
-                        result.Add(Loc.GetString($"marking-{marking.ID}-{texture.TexturePath.Filename}"));
-                        break;
-                }
-            }
-
-            return result;
-        }
-
-        public void Populate()
-        {
-            CMarkingsUnused.Clear();
-            _selectedUnusedMarking = null;
-
-            var markings = _markingManager.CategorizedMarkings();
-            foreach (var marking in markings[_selectedMarkingCategory])
-            {
-                if (_currentMarkings.Contains(marking.AsMarking())) continue;
-                if (marking.SpeciesRestrictions != null && !marking.SpeciesRestrictions.Contains(_currentSpecies)) continue;
-                var item = CMarkingsUnused.AddItem($"{GetMarkingName(marking)}", marking.Sprites[0].Frame0());
-                item.Metadata = marking;
-            }
-
-            if (PointsUsed.ContainsKey(_selectedMarkingCategory))
-            {
-                CMarkingPoints.Visible = true;
-            }
-            else
-            {
-                CMarkingPoints.Visible = false;
-            }
-        }
-
-        // Populate the used marking list. Returns a list of markings that weren't
-        // valid to add to the marking list.
-        public void PopulateUsed()
-        {
-            CMarkingsUsed.Clear();
-            CMarkingColors.Visible = false;
-            _selectedMarking = null;
-
-            // a little slower than the original process
-            // (the original method here had the logic
-            // tied with the presentation, which did it all
-            // in one go including display)
-            //
-            // BUT
-            //
-            // it's all client side
-            // so does it really matter???
-            //
-            // actual validation/filtering occurs server side, but
-            // it might be better to just have a Process function
-            // that just iterates through all the markings with
-            // a species and points dict to ensure that all markings
-            // that were given are valid?
-            //
-            // one of the larger issues is that this doesn't
-            // necessarily use the existing backing list, but rather it
-            // allocates entirely new lists instead to perform
-            // their functions, making a 'Process' function
-            // more desirable imo, since this isn't *really* used
-            // outside of this specific niche
-
-            var markings = new MarkingsSet(_currentMarkings);
-
-            // ensures all markings are valid
-            markings = MarkingsSet.EnsureValid(_currentMarkings, _markingManager);
-
-            // filters out all non-valid species markings
-            markings = MarkingsSet.FilterSpecies(_currentMarkings, _currentSpecies);
-
-            // processes all the points currently available
-            markings = MarkingsSet.ProcessPoints(_currentMarkings, PointsUsed);
-
-            // if the marking set has changed, invoke the event that involves changed marking sets
-            if (markings != _currentMarkings)
-            {
-                Logger.DebugS("Markings", "Marking set is different, resetting markings on dummy now");
-                _currentMarkings = markings;
-                OnMarkingRemoved?.Invoke(_currentMarkings);
-            }
-
-            IEnumerator markingEnumerator = _currentMarkings.GetReverseEnumerator();
-
-            // walk backwards through the list for visual purposes
-            while (markingEnumerator.MoveNext())
-            {
-                Marking marking = (Marking) markingEnumerator.Current;
-                var newMarking = _markingManager.Markings()[marking.MarkingId];
-                var _item = new ItemList.Item(CMarkingsUsed)
-                {
-                    Text = Loc.GetString("marking-used", ("marking-name", $"{GetMarkingName(newMarking)}"), ("marking-category", Loc.GetString($"markings-category-{newMarking.MarkingCategory}"))),
-                    Icon = newMarking.Sprites[0].Frame0(),
-                    Selectable = true,
-                    Metadata = newMarking,
-                    IconModulate = marking.MarkingColors[0]
-                };
-                CMarkingsUsed.Add(_item);
-            }
-
-            // since all the points have been processed, update the points visually
-            UpdatePoints();
-        }
-
-        private void SwapMarkingUp()
-        {
-            if (_selectedMarking == null)
-            {
-                return;
-            }
-
-            var i = CMarkingsUsed.IndexOf(_selectedMarking);
-            if (ShiftMarkingRank(i, -1))
-            {
-                OnMarkingRankChange?.Invoke(_currentMarkings);
-            }
-        }
-
-        private void SwapMarkingDown()
-        {
-            if (_selectedMarking == null)
-            {
-                return;
-            }
-
-            var i = CMarkingsUsed.IndexOf(_selectedMarking);
-            if (ShiftMarkingRank(i, 1))
-            {
-                OnMarkingRankChange?.Invoke(_currentMarkings);
-            }
-        }
-
-        private bool ShiftMarkingRank(int src, int places)
-        {
-            if (src + places >= CMarkingsUsed.Count || src + places < 0)
-            {
-                return false;
-            }
-
-            var visualDest = src + places; // what it would visually look like
-            var visualTemp = CMarkingsUsed[visualDest];
-            CMarkingsUsed[visualDest] = CMarkingsUsed[src];
-            CMarkingsUsed[src] = visualTemp;
-
-            switch (places)
-            {
-                // i.e., we're going down in rank
-                case < 0:
-                    _currentMarkings.ShiftRankDownFromEnd(src);
-                    break;
-                // i.e., we're going up in rank
-                case > 0:
-                    _currentMarkings.ShiftRankUpFromEnd(src);
-                    break;
-                // do nothing?
-                default:
-                    break;
-            }
-
-            return true;
-        }
-
-        // repopulate in case markings are restricted,
-        // and also filter out any markings that are now invalid
-        // attempt to preserve any existing markings as well:
-        // it would be frustrating to otherwise have all markings
-        // cleared, imo
-        public void SetSpecies(string species)
-        {
-            _currentSpecies = species;
-            var markingCount = _currentMarkings.Count;
-
-            SpeciesPrototype speciesPrototype = _prototypeManager.Index<SpeciesPrototype>(species);
-            EntityPrototype body = _prototypeManager.Index<EntityPrototype>(speciesPrototype.Prototype);
-
-            body.TryGetComponent("Markings", out MarkingsComponent? markingsComponent);
-
-            PointLimits = markingsComponent!.LayerPoints;
-            PointsUsed = MarkingPoints.CloneMarkingPointDictionary(PointLimits);
-
-            Populate();
-            PopulateUsed();
-        }
-
-        private void UpdatePoints()
-        {
-            if (PointsUsed.TryGetValue(_selectedMarkingCategory, out var pointsRemaining))
-            {
-                CMarkingPoints.Text = Loc.GetString("marking-points-remaining", ("points", pointsRemaining.Points));
-            }
-        }
-
-        private void OnCategoryChange(OptionButton.ItemSelectedEventArgs category)
-        {
-            CMarkingCategoryButton.SelectId(category.Id);
-            _selectedMarkingCategory = _markingCategories[category.Id];
-            Populate();
-            UpdatePoints();
-        }
-
-        // TODO: This should be using ColorSelectorSliders once that's merged, so
-        private void OnUsedMarkingSelected(ItemList.ItemListSelectedEventArgs item)
-        {
-            _selectedMarking = CMarkingsUsed[item.ItemIndex];
-            var prototype = (MarkingPrototype) _selectedMarking.Metadata!;
-
-            if (prototype.FollowSkinColor)
-            {
-                CMarkingColors.Visible = false;
-
-                return;
-            }
-
-            var stateNames = GetMarkingStateNames(prototype);
-            _currentMarkingColors.Clear();
-            CMarkingColors.DisposeAllChildren();
-            List<ColorSelectorSliders> colorSliders = new();
-            for (int i = 0; i < prototype.Sprites.Count; i++)
-            {
-                var colorContainer = new BoxContainer
-                {
-                    Orientation = LayoutOrientation.Vertical,
-                };
-
-                CMarkingColors.AddChild(colorContainer);
-
-                ColorSelectorSliders colorSelector = new ColorSelectorSliders();
-                colorSliders.Add(colorSelector);
-
-                colorContainer.AddChild(new Label { Text = $"{stateNames[i]} color:" });
-                colorContainer.AddChild(colorSelector);
-
-                var currentColor = new Color(
-                    _currentMarkings[_currentMarkings.Count - 1 - item.ItemIndex].MarkingColors[i].RByte,
-                    _currentMarkings[_currentMarkings.Count - 1 - item.ItemIndex].MarkingColors[i].GByte,
-                    _currentMarkings[_currentMarkings.Count - 1 - item.ItemIndex].MarkingColors[i].BByte
-                );
-                colorSelector.Color = currentColor;
-                _currentMarkingColors.Add(currentColor);
-                var colorIndex = _currentMarkingColors.Count - 1;
-
-                Action<Color> colorChanged = _ =>
-                {
-                    _currentMarkingColors[colorIndex] = colorSelector.Color;
-
-                    ColorChanged(colorIndex);
-                };
-                colorSelector.OnColorChanged += colorChanged;
-            }
-
-            CMarkingColors.Visible = true;
-        }
-
-        private void ColorChanged(int colorIndex)
-        {
-            if (_selectedMarking is null) return;
-            var markingPrototype = (MarkingPrototype) _selectedMarking.Metadata!;
-            int markingIndex = _currentMarkings.FindIndexOf(markingPrototype.ID);
-
-            if (markingIndex < 0) return;
-
-            _selectedMarking.IconModulate = _currentMarkingColors[colorIndex];
-            _currentMarkings[markingIndex].SetColor(colorIndex, _currentMarkingColors[colorIndex]);
-            OnMarkingColorChange?.Invoke(_currentMarkings);
-        }
-
-        private void MarkingAdd()
-        {
-            if (_selectedUnusedMarking is null) return;
-
-            MarkingPrototype marking = (MarkingPrototype) _selectedUnusedMarking.Metadata!;
-
-            if (PointsUsed.TryGetValue(marking.MarkingCategory, out var points))
-            {
-                if (points.Points == 0)
-                {
-                    return;
-                }
-
-                points.Points--;
-            }
-
-            UpdatePoints();
-
-            var markingObject = marking.AsMarking();
-            for (var i = 0; i < markingObject.MarkingColors.Count; i++)
-            {
-                markingObject.SetColor(i, CurrentSkinColor);
-            }
-
-            _currentMarkings.AddBack(markingObject);
-
-            CMarkingsUnused.Remove(_selectedUnusedMarking);
-            var item = new ItemList.Item(CMarkingsUsed)
-            {
-                Text = Loc.GetString("marking-used", ("marking-name", $"{GetMarkingName(marking)}"), ("marking-category", Loc.GetString($"markings-category-{marking.MarkingCategory}"))),
-                Icon = marking.Sprites[0].Frame0(),
-                Selectable = true,
-                Metadata = marking,
-            };
-            CMarkingsUsed.Insert(0, item);
-
-            _selectedUnusedMarking = null;
-            OnMarkingAdded?.Invoke(_currentMarkings);
-        }
-
-        private void MarkingRemove()
-        {
-            if (_selectedMarking is null) return;
-
-            MarkingPrototype marking = (MarkingPrototype) _selectedMarking.Metadata!;
-
-            if (PointsUsed.TryGetValue(marking.MarkingCategory, out var points))
-            {
-                points.Points++;
-            }
-
-            UpdatePoints();
-
-            _currentMarkings.Remove(marking.AsMarking());
-            CMarkingsUsed.Remove(_selectedMarking);
-
-            if (marking.MarkingCategory == _selectedMarkingCategory)
-            {
-                var item = CMarkingsUnused.AddItem($"{GetMarkingName(marking)}", marking.Sprites[0].Frame0());
-                item.Metadata = marking;
-            }
-            _selectedMarking = null;
-            CMarkingColors.Visible = false;
-            OnMarkingRemoved?.Invoke(_currentMarkings);
-        }
-    }
-}

Content.Client/Markings/MarkingsSystem.cs

@@ -1,173 +0,0 @@
-using System.Collections.Generic;
-using System.Linq;
-using Content.Client.CharacterAppearance.Systems;
-using Content.Shared.Markings;
-using Content.Shared.CharacterAppearance;
-using Content.Shared.CharacterAppearance.Systems;
-using Content.Shared.Preferences;
-using Robust.Client.GameObjects;
-using Robust.Shared.GameObjects;
-using Robust.Shared.IoC;
-using Robust.Shared.Log;
-using Robust.Shared.Utility;
-
-namespace Content.Client.Markings
-{
-    public sealed class MarkingsSystem : EntitySystem
-    {
-        [Dependency] private readonly MarkingManager _markingManager = default!;
-
-        public override void Initialize()
-        {
-            SubscribeLocalEvent<MarkingsComponent, SharedHumanoidAppearanceSystem.ChangedHumanoidAppearanceEvent>(UpdateMarkings);
-        }
-
-        public void ToggleMarkingVisibility(EntityUid uid, SpriteComponent body, HumanoidVisualLayers layer, bool toggle)
-        {
-            if(!EntityManager.TryGetComponent(uid, out MarkingsComponent? markings)) return;
-
-            if (markings.ActiveMarkings.TryGetValue(layer, out List<Marking>? layerMarkings))
-                foreach (Marking activeMarking in layerMarkings)
-                    body.LayerSetVisible(activeMarking.MarkingId, toggle);
-        }
-
-        public void SetActiveMarkings(EntityUid uid, MarkingsSet markingList, MarkingsComponent? markings = null)
-        {
-            if (!Resolve(uid, ref markings))
-            {
-                return;
-            }
-
-            markings.ActiveMarkings.Clear();
-
-            foreach (HumanoidVisualLayers layer in HumanoidAppearanceSystem.BodyPartLayers)
-            {
-                markings.ActiveMarkings.Add(layer, new List<Marking>());
-            }
-
-            foreach (var marking in markingList)
-            {
-                if (_markingManager.Markings().TryGetValue(marking.MarkingId, out var markingProto))
-                {
-                    markings.ActiveMarkings[markingProto.BodyPart].Add(marking);
-                }
-            }
-        }
-
-        public void UpdateMarkings(EntityUid uid, MarkingsComponent markings, SharedHumanoidAppearanceSystem.ChangedHumanoidAppearanceEvent args)
-        {
-            var appearance = args.Appearance;
-            if (!EntityManager.TryGetComponent(uid, out SpriteComponent? sprite)) return;
-            MarkingsSet totalMarkings = new MarkingsSet(appearance.Markings);
-
-            Dictionary<MarkingCategories, MarkingPoints> usedPoints = MarkingPoints.CloneMarkingPointDictionary(markings.LayerPoints);
-
-            var markingsEnumerator = appearance.Markings.GetReverseEnumerator();
-            // Reverse ordering
-            while (markingsEnumerator.MoveNext())
-            {
-                var marking = (Marking) markingsEnumerator.Current;
-                if (!_markingManager.IsValidMarking(marking, out MarkingPrototype? markingPrototype))
-                {
-                    continue;
-                }
-
-                // if the given marking isn't correctly formed, we need to
-                // instead just allocate a new marking based on the old one
-
-                if (marking.MarkingColors.Count != markingPrototype.Sprites.Count)
-                {
-                    marking = new Marking(marking.MarkingId, markingPrototype.Sprites.Count);
-                }
-
-                if (usedPoints.TryGetValue(markingPrototype.MarkingCategory, out MarkingPoints? points))
-                {
-                    if (points.Points == 0)
-                    {
-                        continue;
-                    }
-
-                    points.Points--;
-                }
-
-                if (!sprite.LayerMapTryGet(markingPrototype.BodyPart, out int targetLayer))
-                {
-                    continue;
-                }
-
-                for (int j = 0; j < markingPrototype.Sprites.Count(); j++)
-                {
-                    var rsi = (SpriteSpecifier.Rsi) markingPrototype.Sprites[j];
-                    string layerId = $"{markingPrototype.ID}-{rsi.RsiState}";
-
-                    if (sprite.LayerMapTryGet(layerId, out var existingLayer))
-                    {
-                        sprite.RemoveLayer(existingLayer);
-                        sprite.LayerMapRemove(marking.MarkingId);
-                    }
-
-                    int layer = sprite.AddLayer(markingPrototype.Sprites[j], targetLayer + j + 1);
-                    sprite.LayerMapSet(layerId, layer);
-                    if (markingPrototype.FollowSkinColor)
-                    {
-                        sprite.LayerSetColor(layerId, appearance.SkinColor);
-                    }
-                    else
-                    {
-                        sprite.LayerSetColor(layerId, marking.MarkingColors[j]);
-                    }
-                }
-
-            }
-
-            // for each layer, check if it's required and
-            // if the points are greater than zero
-            //
-            // if so, then we start applying default markings
-            // until the point requirement is satisfied -
-            // this can also mean that a specific set of markings
-            // is applied on top of existing markings
-            //
-            // All default markings will follow the skin color of
-            // the current body.
-            foreach (var (layerType, points) in usedPoints)
-            {
-                if (points.Required && points.Points > 0)
-                {
-                    while (points.Points > 0)
-                    {
-                        // this all has to be checked, continues shouldn't occur because
-                        // points.Points needs to be subtracted
-                        if (points.DefaultMarkings.TryGetValue(points.Points - 1, out var marking)
-                                && _markingManager.Markings().TryGetValue(marking, out var markingPrototype)
-                                && markingPrototype.MarkingCategory == layerType // check if this actually belongs on this layer, too
-                                && sprite.LayerMapTryGet(markingPrototype.BodyPart, out int targetLayer))
-                        {
-                            for (int j = 0; j < markingPrototype.Sprites.Count(); j++)
-                            {
-                                var rsi = (SpriteSpecifier.Rsi) markingPrototype.Sprites[j];
-                                string layerId = $"{markingPrototype.ID}-{rsi.RsiState}";
-
-                                if (sprite.LayerMapTryGet(layerId, out var existingLayer))
-                                {
-                                    sprite.RemoveLayer(existingLayer);
-                                    sprite.LayerMapRemove(markingPrototype.ID);
-                                }
-
-                                int layer = sprite.AddLayer(markingPrototype.Sprites[j], targetLayer + j + 1);
-                                sprite.LayerMapSet(layerId, layer);
-                                sprite.LayerSetColor(layerId, appearance.SkinColor);
-                            }
-
-                            totalMarkings.AddBack(markingPrototype.AsMarking());
-                        }
-
-                        points.Points--;
-                    }
-                }
-            }
-
-            SetActiveMarkings(uid, totalMarkings, markings);
-        }
-    }
-}

Content.Client/Preferences/UI/CharacterSetupGui.xaml.cs

@@ -1,11 +1,12 @@
 using System.Linq;
+using Content.Client.Humanoid;
 using Content.Client.Info;
 using Content.Client.Lobby.UI;
 using Content.Client.Resources;
-using Content.Shared.CharacterAppearance.Systems;
+using Content.Shared.Humanoid;
+using Content.Shared.Humanoid.Prototypes;
 using Content.Shared.Preferences;
 using Content.Shared.Roles;
-using Content.Shared.Species;
 using Robust.Client.AutoGenerated;
 using Robust.Client.GameObjects;
 using Robust.Client.Graphics;
@@ -165,10 +166,10 @@ namespace Content.Client.Preferences.UI
                 }
                 else
                 {
-                    _previewDummy = entityManager.SpawnEntity(prototypeManager.Index<SpeciesPrototype>(SpeciesManager.DefaultSpecies).DollPrototype, MapCoordinates.Nullspace);
+                    _previewDummy = entityManager.SpawnEntity(prototypeManager.Index<SpeciesPrototype>(SharedHumanoidSystem.DefaultSpecies).DollPrototype, MapCoordinates.Nullspace);
                 }
 
-                EntitySystem.Get<SharedHumanoidAppearanceSystem>().UpdateFromProfile(_previewDummy, profile);
+                EntitySystem.Get<HumanoidSystem>().LoadProfile(_previewDummy, (HumanoidCharacterProfile) profile);
 
                 if (humanoid != null)
                 {

Content.Client/Preferences/UI/HumanoidProfileEditor.Random.cs

@@ -1,5 +1,5 @@
-using Content.Shared.CharacterAppearance;
 using Content.Shared.Dataset;
+using Content.Shared.Humanoid;
 using Content.Shared.Preferences;
 using Content.Shared.Random.Helpers;
 using Robust.Shared.Prototypes;
@@ -15,15 +15,8 @@ namespace Content.Client.Preferences.UI
         private void RandomizeEverything()
         {
             Profile = HumanoidCharacterProfile.Random();
-            UpdateSexControls();
-            UpdateGenderControls();
-            UpdateClothingControls();
-            UpdateAgeEdit();
-            UpdateNameEdit();
-            UpdateHairPickers();
-            UpdateEyePickers();
-
-            _skinColor.Value = _random.Next(0, 100);
+            UpdateControls();
+            IsDirty = true;
         }
 
         private void RandomizeName()

Content.Client/Preferences/UI/HumanoidProfileEditor.xaml

@@ -1,8 +1,7 @@
 <Control xmlns="https://spacestation14.io"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-         xmlns:magicmirror="clr-namespace:Content.Client.CharacterAppearance"
          xmlns:prefUi="clr-namespace:Content.Client.Preferences.UI"
-         xmlns:markings="clr-namespace:Content.Client.Markings">
+         xmlns:humanoid="clr-namespace:Content.Client.Humanoid">
     <BoxContainer Orientation="Horizontal">
         <!-- Left side -->
         <BoxContainer Orientation="Vertical" Margin="10 10 10 10">
@@ -98,8 +97,8 @@
                             <!-- Hair -->
                             <prefUi:HighlightedContainer>
                                 <BoxContainer Orientation="Horizontal">
-                                    <magicmirror:HairStylePicker Name="CHairStylePicker" HorizontalAlignment="Center" />
-                                    <magicmirror:HairStylePicker Name="CFacialHairPicker" />
+                                    <humanoid:SingleMarkingPicker Name="CHairStylePicker" Category="Hair" />
+                                    <humanoid:SingleMarkingPicker Name="CFacialHairPicker" Category="FacialHair" />
                                 </BoxContainer>
                             </prefUi:HighlightedContainer>
                             <!-- Clothing -->
@@ -120,7 +119,7 @@
                             <prefUi:HighlightedContainer>
                                 <BoxContainer Orientation="Vertical">
                                     <Label Text="{Loc 'humanoid-profile-editor-eyes-label'}" />
-                                    <magicmirror:EyeColorPicker Name="CEyeColorPicker" />
+                                    <humanoid:EyeColorPicker Name="CEyeColorPicker" />
                                 </BoxContainer>
                             </prefUi:HighlightedContainer>
                         </BoxContainer>
@@ -148,7 +147,7 @@
                 <BoxContainer Name="CMarkingsTab" Orientation="Vertical" Margin="10">
                     <!-- Markings -->
                     <ScrollContainer VerticalExpand="True">
-                        <markings:MarkingPicker Name="CMarkings" />
+                        <humanoid:MarkingPicker Name="CMarkings" IgnoreCategories="Hair,FacialHair" />
                     </ScrollContainer>
                 </BoxContainer>
             </TabContainer>

Content.Client/Preferences/UI/HumanoidProfileEditor.xaml.cs

@@ -1,18 +1,18 @@
 using System.Linq;
-using Content.Client.CharacterAppearance;
+using Content.Client.HUD.UI;
+using Content.Client.Humanoid;
 using Content.Client.Lobby.UI;
 using Content.Client.Message;
 using Content.Client.Players.PlayTimeTracking;
 using Content.Client.Stylesheets;
 using Content.Client.UserInterface.Controls;
 using Content.Shared.CCVar;
-using Content.Shared.CharacterAppearance;
-using Content.Shared.CharacterAppearance.Systems;
 using Content.Shared.GameTicking;
-using Content.Shared.Markings;
+using Content.Shared.Humanoid;
+using Content.Shared.Humanoid.Markings;
+using Content.Shared.Humanoid.Prototypes;
 using Content.Shared.Preferences;
 using Content.Shared.Roles;
-using Content.Shared.Species;
 using Content.Shared.Traits;
 using Robust.Client.AutoGenerated;
 using Robust.Client.GameObjects;
@@ -53,6 +53,7 @@ namespace Content.Client.Preferences.UI
         private readonly IClientPreferencesManager _preferencesManager;
         private readonly IEntityManager _entMan;
         private readonly IConfigurationManager _configurationManager;
+        private readonly MarkingManager _markingManager;
 
         private LineEdit _ageEdit => CAgeEdit;
         private LineEdit _nameEdit => CNameEdit;
@@ -67,8 +68,8 @@ namespace Content.Client.Preferences.UI
         private Slider _skinColor => CSkin;
         private OptionButton _clothingButton => CClothingButton;
         private OptionButton _backpackButton => CBackpackButton;
-        private HairStylePicker _hairPicker => CHairStylePicker;
-        private HairStylePicker _facialHairPicker => CFacialHairPicker;
+        private SingleMarkingPicker _hairPicker => CHairStylePicker;
+        private SingleMarkingPicker _facialHairPicker => CFacialHairPicker;
         private EyeColorPicker _eyesPicker => CEyeColorPicker;
 
         private TabContainer _tabContainer => CTabContainer;
@@ -103,6 +104,7 @@ namespace Content.Client.Preferences.UI
         private bool _needsDummyRebuild;
         public int CharacterSlot;
         public HumanoidCharacterProfile? Profile;
+        private MarkingSet _markingSet = new(); // storing this here feels iffy but a few things need it this high up
 
         public event Action<HumanoidCharacterProfile, int>? OnProfileChanged;
 
@@ -115,6 +117,7 @@ namespace Content.Client.Preferences.UI
             _entMan = entityManager;
             _preferencesManager = preferencesManager;
             _configurationManager = configurationManager;
+            _markingManager = IoCManager.Resolve<MarkingManager>();
 
             #region Left
 
@@ -203,6 +206,7 @@ namespace Content.Client.Preferences.UI
             {
                 CSpeciesButton.SelectId(args.Id);
                 SetSpecies(_speciesList[args.Id].ID);
+                UpdateHairPickers();
                 OnSkinColorOnValueChanged();
             };
 
@@ -210,14 +214,7 @@ namespace Content.Client.Preferences.UI
 
             #region Skin
 
-            // 0 - 100, 0 being gold/yellowish and 100 being dark
-            // HSV based
-            //
-            // 0 - 20 changes the hue
-            // 20 - 100 changes the value
-            // 0 is 45 - 20 - 100
-            // 20 is 25 - 20 - 100
-            // 100 is 25 - 100 - 20
+
             _skinColor.OnValueChanged += _ =>
             {
                 OnSkinColorOnValueChanged();
@@ -233,43 +230,101 @@ namespace Content.Client.Preferences.UI
 
             #region Hair
 
-            _hairPicker.Populate();
-
-            _hairPicker.OnHairStylePicked += newStyle =>
+            _hairPicker.OnMarkingSelect += newStyle =>
             {
                 if (Profile is null)
                     return;
                 Profile = Profile.WithCharacterAppearance(
-                    Profile.Appearance.WithHairStyleName(newStyle));
+                    Profile.Appearance.WithHairStyleName(newStyle.id));
                 IsDirty = true;
             };
 
-            _hairPicker.OnHairColorPicked += newColor =>
+            _hairPicker.OnColorChanged += newColor =>
             {
                 if (Profile is null)
                     return;
                 Profile = Profile.WithCharacterAppearance(
-                    Profile.Appearance.WithHairColor(newColor));
+                    Profile.Appearance.WithHairColor(newColor.marking.MarkingColors[0]));
                 IsDirty = true;
             };
 
-            _facialHairPicker.Populate();
-
-            _facialHairPicker.OnHairStylePicked += newStyle =>
+            _facialHairPicker.OnMarkingSelect += newStyle =>
             {
                 if (Profile is null)
                     return;
                 Profile = Profile.WithCharacterAppearance(
-                    Profile.Appearance.WithFacialHairStyleName(newStyle));
+                    Profile.Appearance.WithFacialHairStyleName(newStyle.id));
                 IsDirty = true;
             };
 
-            _facialHairPicker.OnHairColorPicked += newColor =>
+            _facialHairPicker.OnColorChanged += newColor =>
             {
                 if (Profile is null)
                     return;
                 Profile = Profile.WithCharacterAppearance(
-                    Profile.Appearance.WithFacialHairColor(newColor));
+                    Profile.Appearance.WithFacialHairColor(newColor.marking.MarkingColors[0]));
+                IsDirty = true;
+            };
+
+            _hairPicker.OnSlotRemove += _ =>
+            {
+                if (Profile is null)
+                    return;
+                Profile = Profile.WithCharacterAppearance(
+                    Profile.Appearance.WithHairStyleName(HairStyles.DefaultHairStyle)
+                );
+                UpdateHairPickers();
+                IsDirty = true;
+            };
+
+            _facialHairPicker.OnSlotRemove += _ =>
+            {
+                if (Profile is null)
+                    return;
+                Profile = Profile.WithCharacterAppearance(
+                    Profile.Appearance.WithFacialHairStyleName(HairStyles.DefaultFacialHairStyle)
+                );
+                UpdateHairPickers();
+                IsDirty = true;
+            };
+
+            _hairPicker.OnSlotAdd += delegate()
+            {
+                if (Profile is null)
+                    return;
+
+                var hair = _markingManager.MarkingsByCategoryAndSpecies(MarkingCategories.Hair, Profile.Species).Keys
+                    .FirstOrDefault();
+
+                if (string.IsNullOrEmpty(hair))
+                    return;
+
+                Profile = Profile.WithCharacterAppearance(
+                    Profile.Appearance.WithHairStyleName(hair)
+                );
+
+                UpdateHairPickers();
+
+                IsDirty = true;
+            };
+
+            _facialHairPicker.OnSlotAdd += delegate()
+            {
+                if (Profile is null)
+                    return;
+
+                var hair = _markingManager.MarkingsByCategoryAndSpecies(MarkingCategories.FacialHair, Profile.Species).Keys
+                    .FirstOrDefault();
+
+                if (string.IsNullOrEmpty(hair))
+                    return;
+
+                Profile = Profile.WithCharacterAppearance(
+                    Profile.Appearance.WithFacialHairStyleName(hair)
+                );
+
+                UpdateHairPickers();
+
                 IsDirty = true;
             };
 
@@ -519,6 +574,38 @@ namespace Content.Client.Preferences.UI
 
             #endregion FlavorText
 
+            #region Dummy
+            var species = Profile?.Species ?? SharedHumanoidSystem.DefaultSpecies;
+            var dollProto = _prototypeManager.Index<SpeciesPrototype>(species).DollPrototype;
+
+            if (_previewDummy != null)
+                _entMan.DeleteEntity(_previewDummy!.Value);
+
+            _previewDummy = _entMan.SpawnEntity(dollProto, MapCoordinates.Nullspace);
+            _lastSpecies = species;
+            var sprite = _entMan.GetComponent<SpriteComponent>(_previewDummy!.Value);
+
+            _previewSprite = new SpriteView
+            {
+                Sprite = sprite,
+                Scale = (6, 6),
+                OverrideDirection = Direction.South,
+                VerticalAlignment = VAlignment.Center,
+                SizeFlagsStretchRatio = 1
+            };
+            _previewSpriteControl.AddChild(_previewSprite);
+
+            _previewSpriteSide = new SpriteView
+            {
+                Sprite = sprite,
+                Scale = (6, 6),
+                OverrideDirection = Direction.East,
+                VerticalAlignment = VAlignment.Center,
+                SizeFlagsStretchRatio = 1
+            };
+            _previewSpriteSideControl.AddChild(_previewSpriteSide);
+            #endregion Dummy
+
             #endregion Left
 
             if (preferencesManager.ServerDataLoaded)
@@ -541,17 +628,17 @@ namespace Content.Client.Preferences.UI
             IsDirty = true;
         }
 
-        private void OnMarkingChange(MarkingsSet markings)
+        private void OnMarkingChange(MarkingSet markings)
         {
             if (Profile is null)
                 return;
 
-            Profile = Profile.WithCharacterAppearance(Profile.Appearance.WithMarkings(markings));
+            Profile = Profile.WithCharacterAppearance(Profile.Appearance.WithMarkings(markings.GetForwardEnumerator().ToList()));
             NeedsDummyRebuild = true;
             IsDirty = true;
         }
 
-        private void OnMarkingColorChange(MarkingsSet markings)
+        private void OnMarkingColorChange(List<Marking> markings)
         {
             if (Profile is null)
                 return;
@@ -569,38 +656,21 @@ namespace Content.Client.Preferences.UI
 
             switch (skin)
             {
-                case SpeciesSkinColor.HumanToned:
+                case HumanoidSkinColor.HumanToned:
                 {
-                    var range = _skinColor.Value;
                     if (!_skinColor.Visible)
                     {
                         _skinColor.Visible = true;
                         _rgbSkinColorContainer.Visible = false;
                     }
 
-                    var rangeOffset = (int) range - 20;
-
-                    float hue = 25;
-                    float sat = 20;
-                    float val = 100;
-
-                    if (rangeOffset <= 0)
-                    {
-                        hue += Math.Abs(rangeOffset);
-                    }
-                    else
-                    {
-                        sat += rangeOffset;
-                        val -= rangeOffset;
-                    }
-
-                    var color = Color.FromHsv(new Vector4(hue / 360, sat / 100, val / 100, 1.0f));
+                    var color = SkinColor.HumanSkinTone((int) _skinColor.Value);
 
                     CMarkings.CurrentSkinColor = color;
                     Profile = Profile.WithCharacterAppearance(Profile.Appearance.WithSkinColor(color));
                     break;
                 }
-                case SpeciesSkinColor.Hues:
+                case HumanoidSkinColor.Hues:
                 {
                     if (!_rgbSkinColorContainer.Visible)
                     {
@@ -608,13 +678,11 @@ namespace Content.Client.Preferences.UI
                         _rgbSkinColorContainer.Visible = true;
                     }
 
-                    var color = new Color(_rgbSkinColorSelector.Color.R, _rgbSkinColorSelector.Color.G, _rgbSkinColorSelector.Color.B);
-
-                    CMarkings.CurrentSkinColor = color;
-                    Profile = Profile.WithCharacterAppearance(Profile.Appearance.WithSkinColor(color));
+                    CMarkings.CurrentSkinColor = _rgbSkinColorSelector.Color;
+                    Profile = Profile.WithCharacterAppearance(Profile.Appearance.WithSkinColor(_rgbSkinColorSelector.Color));
                     break;
                 }
-                case SpeciesSkinColor.TintedHues:
+                case HumanoidSkinColor.TintedHues:
                 {
                     if (!_rgbSkinColorContainer.Visible)
                     {
@@ -622,11 +690,7 @@ namespace Content.Client.Preferences.UI
                         _rgbSkinColorContainer.Visible = true;
                     }
 
-                    // a little hacky in order to convert rgb --> hsv --> rgb
-                    var color = new Color(_rgbSkinColorSelector.Color.R, _rgbSkinColorSelector.Color.G, _rgbSkinColorSelector.Color.B);
-                    var newColor = Color.ToHsv(color);
-                    newColor.Y = .1f;
-                    color = Color.FromHsv(newColor);
+                    var color = SkinColor.TintedHues(_rgbSkinColorSelector.Color);
 
                     CMarkings.CurrentSkinColor = color;
                     Profile = Profile.WithCharacterAppearance(Profile.Appearance.WithSkinColor(color));
@@ -652,7 +716,7 @@ namespace Content.Client.Preferences.UI
 
         private void RebuildSpriteView()
         {
-            var species = Profile?.Species ?? SpeciesManager.DefaultSpecies;
+            var species = Profile?.Species ?? SharedHumanoidSystem.DefaultSpecies;
             var dollProto = _prototypeManager.Index<SpeciesPrototype>(species).DollPrototype;
 
             if (_previewDummy != null)
@@ -820,7 +884,7 @@ namespace Content.Client.Preferences.UI
 
             switch (skin)
             {
-                case SpeciesSkinColor.HumanToned:
+                case HumanoidSkinColor.HumanToned:
                 {
                     if (!_skinColor.Visible)
                     {
@@ -828,23 +892,11 @@ namespace Content.Client.Preferences.UI
                         _rgbSkinColorContainer.Visible = false;
                     }
 
-                    var color = Color.ToHsv(Profile.Appearance.SkinColor);
-                    // check for hue/value first, if hue is lower than this percentage
-                    // and value is 1.0
-                    // then it'll be hue
-                    if (Math.Clamp(color.X, 25f / 360f, 1) > 25f / 360f
-                        && color.Z == 1.0)
-                    {
-                        _skinColor.Value = Math.Abs(45 - (color.X * 360));
-                    }
-                    // otherwise it'll directly be the saturation
-                    else
-                    {
-                        _skinColor.Value = color.Y * 100;
-                    }
+                    _skinColor.Value = SkinColor.HumanSkinToneFromColor(Profile.Appearance.SkinColor);
+
                     break;
                 }
-                case SpeciesSkinColor.Hues:
+                case HumanoidSkinColor.Hues:
                 {
                     if (!_rgbSkinColorContainer.Visible)
                     {
@@ -856,7 +908,7 @@ namespace Content.Client.Preferences.UI
                     _rgbSkinColorSelector.Color = Profile.Appearance.SkinColor;
                     break;
                 }
-                case SpeciesSkinColor.TintedHues:
+                case HumanoidSkinColor.TintedHues:
                 {
                     if (!_rgbSkinColorContainer.Visible)
                     {
@@ -929,16 +981,26 @@ namespace Content.Client.Preferences.UI
                 return;
             }
 
-            _hairPicker.SetData(
-                Profile.Appearance.HairColor,
-                Profile.Appearance.HairStyleId,
-                SpriteAccessoryCategories.HumanHair,
-                true);
-            _facialHairPicker.SetData(
-                Profile.Appearance.FacialHairColor,
-                Profile.Appearance.FacialHairStyleId,
-                SpriteAccessoryCategories.HumanFacialHair,
-                true);
+            var hairMarking = Profile.Appearance.HairStyleId switch
+            {
+                HairStyles.DefaultHairStyle => new List<Marking>(),
+                _ => new() { new(Profile.Appearance.HairStyleId, new List<Color>() { Profile.Appearance.HairColor }) },
+            };
+
+            var facialHairMarking = Profile.Appearance.FacialHairStyleId switch
+            {
+                HairStyles.DefaultFacialHairStyle => new List<Marking>(),
+                _ => new() { new(Profile.Appearance.FacialHairStyleId, new List<Color>() { Profile.Appearance.FacialHairColor }) },
+            };
+
+            _hairPicker.UpdateData(
+                hairMarking,
+                Profile.Species,
+                1);
+            _facialHairPicker.UpdateData(
+                facialHairMarking,
+                Profile.Species,
+                1);
         }
 
         private void UpdateEyePickers()
@@ -961,13 +1023,15 @@ namespace Content.Client.Preferences.UI
             if (Profile is null)
                 return;
 
+            /* dear fuck this needs to not happen ever again
             if (_needsDummyRebuild)
             {
                 RebuildSpriteView(); // Species change also requires sprite rebuild, so we'll do that now.
                 _needsDummyRebuild = false;
             }
+            */
 
-            EntitySystem.Get<SharedHumanoidAppearanceSystem>().UpdateFromProfile(_previewDummy!.Value, Profile);
+            EntitySystem.Get<HumanoidSystem>().LoadProfile(_previewDummy!.Value, Profile);
             LobbyCharacterPreviewPanel.GiveDummyJobClothes(_previewDummy!.Value, Profile);
         }