0:00 To make the ribbon look nicer, I'll start by changing the text color a little bit. I'll use text ember, and let's go with something like 800 probably. It seems a bit light, but if we changed the font weights that might look better.

0:14 Font, semi-bold. Yeah. That's nice. Let's make it uppercase. I probably want the text a bit smaller with textsm or even text extra-small. I'll increase the letter spacing with tracking. Let's go with wider. Nice. I also probably want to add some vertical padding, so I'll go with PY-2.

0:37 That's a bit too much, so let's try PY-1. Actually, let's go with 1.5, which is in between. That's nice. Let me also remove this BG ember 100 class on the parents, so we have a better idea of what the ribbon actually looks like, and I think we can add a shadow as well. Nice. I'll go really subtle with shadow SM. That's great.

0:58 One thing I notice here is the text is dangerously close to the edge of the card. What we could do is increase the size of the parents square. Perhaps instead of 32 Let's go with 36. That's better. This is why we have defined our width as a percentage-based value, so we can increase the container and everything follows along.

1:17 By the way, our entire design here assumes that the container here is square and has a perfect aspect ratio of one by one. For example, if I had 36 in width, but the height was 24, you can see that everything is thrown out.

1:29 One thing we can do instead of having to change both the width and height equally is remove one of them like the height, and use aspect ratio and use aspect square which is one by one. Defining the width only will dictate what size the ribbon is, and we only have to change one value for that. Let's go back to 36, which I think fits nicely. I'm pretty happy with these stars and ready to move along.