Tools and Resources

Highly recommended: 🔥

Fluid Typography

Fluid Type Sacle: https://www.fluid-type-scale.com 🔥

Fluid Sup / Sub CSS Generator: https://codepen.io/realanthonyc/pen/emOXEMz 🔥

Finsweet's Fluid Responsive: https://finsweet.com/client-first/docs/fluid-responsive

Color Tools

Tints / Palette Generators

https://www.tints.dev 🔥

https://hihayk.github.io

https://www.tailwindshades.com

https://uicolors.app/create

https://coolors.co/generate

https://www.canva.com/colors

Gradient Generators

https://cssgradient.io

More color tools

https://coolors.co/contrast-checker

https://huemint.com

https://www.color-hex.com

https://poolors.com

Learn more about colors

Knowing how others deal with color systems, palettes, naming, etc.

Tailwind Colors https://tailwindcss.com/docs/customizing-colors

Google Dynamic Color in Material Design 3 https://m3.material.io/styles/color

Google Material 2 Color System https://m2.material.io/design/color/the-color-system

Shopify Polaris - Palettes and Roles https://polaris.shopify.com/design/colors/palettes-and-roles

Shopify Polaris - Color Tokens https://polaris.shopify.com/tokens/color

Table Generator

Finsweek Table (a Webflow app): https://webflow.com/apps/detail/finsweet-table

HTML Table Generator: https://www.tablesgenerator.com/html_tables

Fonts

PX to REM Converter: https://remtopx.com

Fontjoy Font Pairing: https://fontjoy.com

Others

CSS Grid generator: https://cssgridgenerator.io

UTM builder: https://utmbuilder.net

Squoosh: https://squoosh.app

Phosphor Icons: https://phosphoricons.com 🔥

Boxicons: https://boxicons.com 🔥

Lucide Icons: https://lucide.dev

Heroicons: https://heroicons.com

Emoji Finder: https://emojifinder.com

UTM Builder: https://utmbuilder.com