Using a mixin for this would prevent the repetition.

Let me update this. I haven't used mixins before

classes are better than mixins, mixings generate a ton of repetitive css code, while classes inherit and cascade. That's why bootstrap has .btn and .btn-primary classes separately. .btn styles a lot of the button while .btn-primary just changes the color, which is just one or two lines of css.

@extend is also an option that minimizes css code (same as having two classes) and reduces the number of classes an element needs to take. If we do go with two classes here we should have the _typographic class .text-gradient then a utility class for all the gradients so they can be applies as text color, background color, border color ect.