1. HTML: Keep elements in form-groups. That is a <div> with the class of form-group. This would include the label and input, textarea, button etc..
2. Set the font of form elements to font: inherit to get the same font, font-size, font-weight, font-style and line-height etc..
3. You may also want to do the same with color: color: inherit.
4. Set the <form> element to display: grid.
5. Set the form-group divs (in 1.) to display: grid too.
6. Add a background colour to the <input> elements.
7. <input> have a default min-width applied by default. On the <input> elements affected add a width: 100% to size them to the grid columns.
8. Set the accent colours of the form using the CSS accent-color property on the input selectors: input { accent-color: red }. This sets up checkboxes, radio buttons, range sliders.
9. On labels use text-box-trim: both to remove top and bottom gaps. Not fully supported yet but it’s a progressive enhancement.
10. Can go further to reduce this gap with text-box-edge: cap alphabetic. Best use for uppercase text only as it can cut off descenders. You can then use gap on the form-group class to fine tune the gap.

On <input> elements you can use the pseudo classes :user-valid and user-invalid to style elements when they’re valid or not. For the email an @ symbol and a dot are required.

Your email:

password:

Send