Round 2 design QA

[domyen]

Really excited about this work. Below is second pass at design QA.

Dark mode

Overlay mask in dark mode: blue border is tough to see, can we make it more visible?

Position of tooltip feels too far away from the overlay mask so I'm having trouble connecting the two things visually. Can we make the distance between the tip and the mask 6px, currently it looks like it's 10 or 12px.

When overlay mask is presented atop the canvas, the border radius is still present which leads to a visual artifact in the corner

Set line-height to 18px

Minor grammar tweak for punchier copy "You've learned" » "You learned"

Missing bottom border

Tough to see the X, it's darker in the design

Remove offset on title

• Set line-height to 18px (right now it uses system default which is 17.5px).
• Set the margin from between <h3> to <p> to 10px, it also uses the system default.

This code should look like the other inline code elements. i.e., monospace font

What the standard inline code element looks like in SB

• Align the circle and the text so that the first line of text is vertically centered with
• Add a period to the end of each step

Two paragraphs reads strange. Can we make it 1 paragraph and shorten the copy to:

You just created your first story. Continue setting up your project to write stories for your own components.

Light mode

Line spacing looks irregular because of the inline code, can we make it consistent?