Log In

The white card everything sits on.

"Log In" / "Check Your Email".

The intro sentence, the field label and the opt-in line.

The small print at the bottom of the panel.

"Send a New Code" and "Use a Different Email" on the code step.

The round disc behind the person / envelope glyph at the top.

The person / envelope drawing itself.

The main button's background (it still darkens on hover).

The main button's label.

The outline of the email field and the six code boxes (a wrong code still turns them red).

Size and weight of the big title. Font stays Plus Jakarta Sans, like every heading on the site.

The intro sentence, the email field, its label and the opt-in line.

The small print at the bottom of the panel.

"Send Me a Code" / "Log In".

The digits typed into the six boxes on the code step.

How wide the card may grow (a phone narrower than this just uses its full width).

Space between the card's edge and its contents.

How rounded the card's corners are.

The soft shadow that lifts the card off the page.

How rounded the email field, code boxes and button are.

Between the icon, heading, intro, form and help text.

Between the label, field, opt-in line and button.

Between the help sentence and the links under it.

Diameter of the circle at the top (the glyph scales with it).

The gap between the six boxes on the code step.

How tall the six boxes are.

Center everything, or line it up on the left (the icon and the links follow).