Complete Text and Color Styler — Complete Text & Color Styler

Generate Text Styles

• Smart Scale Systems : Choose between Tailwind CSS (standard utility scale) or Modular Scale (Golden Ratio-based) to generate your typographic hierarchy.

• Responsive by Default : Automatically generates breakpoints for Desktop , Tablet , and Mobile .

• Font Flexibility : Use existing Project Fonts

• Custom Style Builder : Add your own custom styles with specific Tags ( h1 - h6 , p ), Font Weights (Thin to Black), and Line Heights.

• Inline Editing : Click any style in the preview list to tweak its Name, Tag, Size, or Weight before adding it to your project.

• Live Preview : See exactly how your font and size look directly in the plugin window.

Generate Color Styles

• Tailwind Presets : Access the complete library of Tailwind CSS color palettes (Slate, Blue, Emerald, Rose, etc.) and add multiple families at once.

• Custom Palette Generator : Input a single Hex code to generate a full 50–950 shade scale automatically mixed for your brand.

• Automatic Dark Mode : innovative toggle that automatically generates Dark Mode variants for every color style by intelligently inverting the shade scale (e.g., a light 50 background becomes 950 in dark mode).

General

• Bulk Generation : Create dozens of Text and Color styles in seconds with a single click.

• Clean UI : Tabbed interface for focused work on Typography or Color.

• Live Preview