The Definitive Squarespace UI Toolkit
By Hueman Studio • Date: August 24, 2023 • Squarespace Circle Day 2023 • Crafted with Fluid Engine.
Speakers: Ken Roberson, CP Phan, Elvis Lopez, Carly Harris, Ilmaa Haque
Color Theory
Incorporate color psychology into your work
Good color design is accessible
Make your color work more efficient
Color Theory
Color Hunt
Pre-made color palettes
Find and pick palettes based on keywords and colors
Great for web
Free to use
Logo/images credit: www.colorhunt.co
Color Theory
Atmos
Accessible UI focused
Use in tangent with Toolness Accessible Color Palette Builder
Freemium options
Logo/images credit: https://atmos.style
Color Theory
Sip
Eye-drop tool
Perk is that you can save color palettes to your navigation
Affordable but not free
Logo/images credit: www.sipapp.io
Color Theory
Aquarelo
Available on Mac App Store, or on SetApp
Create presentable color palettes
Great to find a color in between 2
Affordable but not free
Export color cards
Logo credit: Aquarelo on App Store
Typography
Identify and curate any font on the web
Choose cohesive font pairs
Scale your type to best practices
Typography
Fonts Ninja
Identify fonts instantly, without inspecting code
Use in tandem with Land-Book.com for quick inspiration
Freemium
Power-Users: Hoverify
Logo/images credit: https://www.fonts.ninja
Typography
TypeScale
Create fluid typography
Use the calculator to automatically upscale by your ideal ratio
Great for mobile
Free
Logo/images credit: https://typescale.com
Typography
Typewolf
Free Google/Adobe font alternatives to paid fonts
Find solid type pairings
View fonts “in the wild”
Curated lists that match specific styles
Freemium
Logo/images credit: https://www.typewolf.com/
Polish & Perfection
Create unique page layouts
Add extra bells & whistles for polish and wow
“I can’t believe this site was done in Squarespace”
Polish & Perfection
Ghost Plugins
Best for quick copy/paste touch-ups
Largest library of Squarespace CSS snippets for your website
Mostly free
Logo/images credit: https://www.ghostplugins.com
Polish & Perfection
Square Refresh
Effects people wouldn't think would be possible to do with SQSP/ “developer built”
Best for sites that are more artistic, avant-garde, and art-based
Mostly paid options
Logo/images credit: https://www.squarefresh.com
Polish & Perfection
SquareKicker
Best for no-code
Installable plugin (not copy/paste code snippets)
Create engaging and unique page layouts and scroll animations
Monthly subscription
Logo/images credit: https://squarekicker.com
Questions
Remember a question later? Don’t hesitate to reach out! hi@huemanstudio.com
Special thanks to the Squarespace/Circle Team!
Sarah, Sam, Arianna, Taylor, Madeleine, Colton