draftbit · bluerssen · Jul 3, 2026 · Jul 3, 2026 · Jul 3, 2026 · Jul 3, 2026
diff --git a/public/images/sketch.svg b/public/images/sketch.svg
diff --git a/src/components/App.res b/src/components/App.res
@@ -79,7 +79,7 @@ let make = (
     <div className="body-bg-right" />
     <header className="Layout-header">
       <div className="Layout-left">
-        <Wordmark />
+        <Wordmark placement="header-wordmark" />
         <h1 className="Text-title"> {React.string("Personas")} </h1>
         <span className="Text-subtitle"> {React.string("Avatar Generator")} </span>
       </div>
@@ -96,16 +96,16 @@ let make = (
       <div className="Layout-left">
         <span className="Text-overline"> {React.string("Built by")} </span>
         <br />
-        <Wordmark />
+        <Wordmark placement="footer-wordmark" />
       </div>
       <div className="Layout-right">
         <span className="Text-marketing mb-2">
           {React.string("Visually build robust, native mobile apps with clean, reusable code.")}
         </span>
         <br />
         <IconLink
-          href="https://draftbit.com"
-          title="Build fobust native front-end apps with usable code using Draftbit"
+          href="https://draftbit.com?utm_source=personas&utm_medium=referral&utm_campaign=avatar-generator&utm_content=footer-link"
+          title="Build robust native front-end apps with usable code using Draftbit"
           label="draftbit.com"
           icon="arrow"
         />

diff --git a/src/components/AvatarGenerator.css b/src/components/AvatarGenerator.css
@@ -10,6 +10,7 @@
   justify-content: space-between;
   align-items: center;
   padding-top: 110px;
+  padding-bottom: 32px;
 }
 
 .AvatarGenerator-pngContainer {
@@ -39,6 +40,18 @@
   top: -75px;
 }
 
+/* On small screens the styler list is a long scroll; keep the avatar
+   preview pinned so changes stay visible (community request, #34) */
+@media (max-width: 767px) {
+  .AvatarGenerator-avatar {
+    position: sticky;
+    top: 20px;
+    margin-top: -185px;
+    margin-bottom: 35px;
+    z-index: 1;
+  }
+}
+
 .AvatarGenerator-faceFeature {
   position: absolute;
   top: 0;
@@ -75,31 +88,3 @@
   }
 }
 
-.AvatarGenerator-footer {
-  width: 100%;
-  background-color: #f9fafc;
-  padding-top: 28px;
-  padding-bottom: 28px;
-  border-radius: 8px;
-  text-align: center;
-  margin-top: 24px;
-}
-
-@media (min-width: 768px) {
-  .AvatarGenerator-footerTop {
-    margin-right: 48px;
-    margin-left: 24px;
-  }
-
-  .AvatarGenerator-footer {
-    width: 100%;
-    background-color: #f9fafc;
-    padding-top: 28px;
-    padding-bottom: 28px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 8px;
-    margin-top: 32px;
-  }
-}
diff --git a/src/components/AvatarGenerator.res b/src/components/AvatarGenerator.res
@@ -97,16 +97,5 @@ let make = (~randomize, ~settings: array<Types.setting>, ~onChange, ~onExport) =
     <button onClick=onExport className="Button-primary Text-button">
       {React.string("Download Avatar")}
     </button>
-    <div className="AvatarGenerator-footer">
-      <img width="32" height="32" src="/images/sketch.svg" />
-      <div className="AvatarGenerator-footerTop">
-        <span className="Text-cta-title mb-1"> {React.string("Want to make your own?")} </span>
-        <br />
-        <span className="Text-cta-subtitle">
-          {React.string("Get the Sketch file on Gumroad.")}
-        </span>
-      </div>
-      <IconLink label="Let's Go" href="https://gumroad.com/l/PersonasByDraftbit" icon="arrow" />
-    </div>
   </div>
 }
diff --git a/src/components/SvgLoader.res b/src/components/SvgLoader.res
@@ -105,8 +105,8 @@ let getBuncurls = (fill, size) =>
   `<svg width="${size}" height="${size}" viewBox="0 0 64 64"><g fill="none"><path fill="${fill}" d="M44.544 20.777C42.254 16.167 37.497 13 32 13s-10.254 3.168-12.544 7.777a2 2 0 0 1 .551-2.376v-.005a2 2 0 0 1 .271-3.571 2 2 0 0 1 1.31-3.337 2 2 0 0 1 2.234-2.802 2 2 0 0 1 2.961-2.019 2 2 0 0 1 3.425-1.056 2 2 0 0 1 3.584 0 2 2 0 0 1 3.425 1.056 2 2 0 0 1 2.961 2.02 2 2 0 0 1 2.235 2.801 2 2 0 0 1 1.309 3.337 2 2 0 0 1 .272 3.571v.005a2 2 0 0 1 .55 2.376z"/><path fill="#5ac4d4" d="M45.934 25.632C43.828 20.564 38.83 17 33 17h-2c-5.83 0-10.828 3.564-12.934 8.632C18.753 18.542 24.73 13 32 13s13.247 5.542 13.934 12.632z"/></g></svg>`
 let getBuzzcut = (fill, size) =>
   `<svg style="mix-blend-mode: multiply;" width="${size}" height="${size}" viewBox="0 0 64 64"><path fill="${fill}"  d="M46 27v3c-1.333-1.667-2.667-4.667-4-9-2.657 1.333-5.99 2-10 2s-7.343-.667-10-2c-1.333 3.667-2.667 6.333-4 8v-2c0-7.732 6.268-14 14-14s14 6.268 14 14z"/></svg>`
-let getCurlybun = (_, size) =>
-  `<svg width="${size}" height="${size}" viewBox="0 0 64 64"><g fill="none"><path fill="#000" d="M44.544 20.777C42.254 16.167 37.497 13 32 13c-5.497 0-10.254 3.168-12.544 7.777a2 2 0 0 1 .551-2.376v-.005a2 2 0 0 1 .271-3.571 2 2 0 0 1 1.31-3.337 2 2 0 0 1 2.234-2.802 2 2 0 0 1 2.961-2.019 2 2 0 0 1 3.425-1.056 2 2 0 0 1 3.584 0 2 2 0 0 1 3.425 1.056 2 2 0 0 1 2.961 2.02 2 2 0 0 1 2.235 2.801 2 2 0 0 1 1.309 3.337 2 2 0 0 1 .272 3.571v.005a2 2 0 0 1 .55 2.376z"/><path fill="#f55d81" d="M45.934 25.632C43.828 20.564 38.83 17 33 17h-2c-5.83 0-10.828 3.564-12.934 8.632C18.753 18.542 24.73 13 32 13s13.247 5.542 13.934 12.632z"/></g></svg>`
+let getCurlybun = (fill, size) =>
+  `<svg width="${size}" height="${size}" viewBox="0 0 64 64"><g fill="none"><path fill="${fill}" d="M44.544 20.777C42.254 16.167 37.497 13 32 13c-5.497 0-10.254 3.168-12.544 7.777a2 2 0 0 1 .551-2.376v-.005a2 2 0 0 1 .271-3.571 2 2 0 0 1 1.31-3.337 2 2 0 0 1 2.234-2.802 2 2 0 0 1 2.961-2.019 2 2 0 0 1 3.425-1.056 2 2 0 0 1 3.584 0 2 2 0 0 1 3.425 1.056 2 2 0 0 1 2.961 2.02 2 2 0 0 1 2.235 2.801 2 2 0 0 1 1.309 3.337 2 2 0 0 1 .272 3.571v.005a2 2 0 0 1 .55 2.376z"/><path fill="#f55d81" d="M45.934 25.632C43.828 20.564 38.83 17 33 17h-2c-5.83 0-10.828 3.564-12.934 8.632C18.753 18.542 24.73 13 32 13s13.247 5.542 13.934 12.632z"/></g></svg>`
 let getCurlyhightop = (fill, size) =>
   `<svg width="${size}" height="${size}" viewBox="0 0 64 64"><path fill="${fill}" d="M33.792 9a2 2 0 0 1 3.816 0h.558a2 2 0 0 1 3.83.668c.075.03.15.063.224.095a2 2 0 0 1 3.13 2.298l.152.179a2 2 0 0 1 1.775 3.41c.042.156.08.314.114.473a2 2 0 0 1 .018 3.748l-.047.324a2 2 0 0 1-.022 3.62 1.994 1.994 0 0 1 .159.852 1.8 1.8 0 0 1-1.22 2.924L46 29.5c-.44-.659-.842-1.48-1.209-2.465a1.797 1.797 0 0 1-.437-.796 1.998 1.998 0 0 1-.563-2.679 38.655 38.655 0 0 1-.022-.098 2 2 0 0 1-.956-2.937 1.994 1.994 0 0 1-2.44-.323 2 2 0 0 1-3.724.057l-.312.032a2 2 0 0 1-3.573.203l-.23.003a2 2 0 0 1-3.521-.099 36.13 36.13 0 0 1-.41-.031 2 2 0 0 1-3.676-.165 1.997 1.997 0 0 1-3.04-.22 19.96 19.96 0 0 1-.023.155 2 2 0 0 1-.701 3.35 2 2 0 0 1-1.397 3.095A24.897 24.897 0 0 1 18 29.5l-.188-1.923a1.8 1.8 0 0 1-.338-3.465l-.012-.126a2 2 0 0 1-.38-3.889l-.013-.144a2 2 0 0 1 .067-3.92 8.93 8.93 0 0 1 .041-.177 2 2 0 0 1 1.46-3.627 2 2 0 0 1 3.066-2.326 2 2 0 0 1 3.835-.894 9 9 0 0 1 .052-.003A2 2 0 0 1 29.408 9h.184a2 2 0 0 1 3.816 0z"/></svg>`
 let getHightopcurly = (fill, size) =>

diff --git a/src/components/Wordmark.res b/src/components/Wordmark.res
@@ -1,5 +1,10 @@
+let utmHref = (placement: string) =>
+  `https://draftbit.com?utm_source=personas&utm_medium=referral&utm_campaign=avatar-generator&utm_content=${placement}`
+
 @react.component
-let make = () =>
-  <a href="https://draftbit.com" title="Robust native front-end apps with usable code by Draftbit">
+let make = (~placement: string) =>
+  <a
+    href={utmHref(placement)}
+    title="Robust native front-end apps with usable code by Draftbit">
     <Icon name="wordmark" />
   </a>
diff --git a/src/data/config.json b/src/data/config.json
@@ -9,6 +9,7 @@
     "Bobcut",
     "Buncurls",
     "Buzzcut",
+    "Curlybun",
     "Hightopcurly",
     "Long",
     "Pigtails",
@@ -17,7 +18,6 @@
     "Bunundercut",
     "Extralong",
     "Fade",
-    "Hat",
     "Mohawk",
     "Shortcomboverchops",
     "Sidebuzz",
@@ -63,34 +63,45 @@
   "bgStyles": ["Background"],
   "skinColors": [
     "FFCC22",
+    "FFDFC4",
     "FBD2C7",
     "F2AD9B",
     "E58F7B",
     "E4A070",
     "B16A5B",
     "92594B",
+    "7A4536",
     "623D36",
-    "C9E6DC"
+    "C9E6DC",
+    "C4B5F2"
   ],
   "hairColors": [
     "362C47",
     "675E97",
+    "4E7DE0",
     "5AC4D4",
+    "58B368",
     "DEE1F5",
     "6C4545",
     "F29C65",
+    "F2C94C",
     "E16381",
-    "E15C66"
+    "E15C66",
+    "979FB0"
   ],
   "facialHairColors": [
     "362C47",
     "675E97",
+    "4E7DE0",
     "5AC4D4",
+    "58B368",
     "DEE1F5",
-    "6c4545",
+    "6C4545",
     "F29C65",
+    "F2C94C",
     "E16381",
-    "E15C66"
+    "E15C66",
+    "979FB0"
   ],
   "bodyColors": [
     "456DFF",
@@ -100,7 +111,11 @@
     "7555CA",
     "E24553",
     "54D7C7",
-    "F3B63A"
+    "F3B63A",
+    "FF8A5C",
+    "3E4E7C",
+    "C866D9",
+    "68C9F2"
   ],
   "bgColors": [
     "93A7FF",
@@ -110,6 +125,10 @@
     "FF6674",
     "89E6E4",
     "FFCC65",
+    "FFB27A",
+    "B8EBC5",
+    "D9CCFF",
+    "6C7BC4",
     "F8FBFF"
   ],
   "disabledColors": [

diff --git a/src/pages/Index.res b/src/pages/Index.res
@@ -4,22 +4,6 @@ external config: Types.config = "default"
 @module("../helpers/exportImage.js")
 external exportImageAsync: unit => unit = "default"
 
-let defaultStyles: Types.styles = {
-  skin: "Skin",
-  skinColor: "B16A5B",
-  hair: "Balding",
-  hairColor: "E16381",
-  facialHair: "Mustache",
-  facialHairColor: "6C4545",
-  body: "Square",
-  bodyColor: "5A45FF",
-  eyes: "Glasses",
-  mouth: "Pacifier",
-  nose: "Smallround",
-  bgColor: "FFCC65",
-  head: "Head",
-}
-
 let randomizeStyles = (config: Types.config): Types.styles => {
   let getRandom = _list => {
     let len = Array.length(_list)
@@ -45,7 +29,7 @@ let randomizeStyles = (config: Types.config): Types.styles => {
 
 @react.component
 let make = () => {
-  let (styles, setStyles) = React.useState(_ => defaultStyles)
+  let (styles, setStyles) = React.useState(_ => randomizeStyles(config))
   let (showModal, setShowModal) = React.useState(_ => false)
 
   let onChange = (key: Types.key, value) =>