Newsletter sign-up form ft. 11ty, Fluid custom props, and Vanilla JS

For this solution, I focused on two things: staying as close as possible to the design and providing a form validation that was intuitive and accessible.

For the first one, instead of copy-pasting the generated scales from Utopia.fyi, I made custom properties only as I needed them. In this case, the body text stays the same for the mobile and desktop designs, so I only created a custom fluid font size for the heading. This reduced the amount of unused code in the project, and also gave me a deeper understanding of the math behind fluid responsive design.

For design tokens, I made a simple implementation with 11ty as Heydon Pickering suggested in Easily Use Design Tokens in Eleventy which I think is suitable for small projects like this one.

Lastly, I think implementing the form validation is the most difficult part of this project. In particular, thinking about the possible scenarios that the user might run into while filling out the form and making sure your code accounts for those cases. For this solution, I used afterward and submit validation as Sandrina Pereira talks about in A Guide To Accessible Form Validation.

Looking forward to hear any feedback!