Tools and Resources

Highly recommanded = 🔥

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

Palette Generators

https://www.tints.dev 🔥

https://www.tailwindshades.com

https://uicolors.app/create

https://coolors.co/generate

https://www.canva.com/colors

Gradient Generators

https://cssgradient.io

Other color tools

https://coolors.co/contrast-checker

https://coolors.co/visualizer

https://huemint.com

https://colorhunt.co

https://www.color-hex.com

https://icolorpalette.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://nekocalc.com/px-to-rem-converter

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 🔥

Heroicons: https://heroicons.com

Emoji Finder: https://emojifinder.com