Responsive Social link page | Semantic HTML, BEM, and Design Tokens

What are you most proud of, and what would you do differently next time?

I am most proud of my Design Token Vault. I successfully implemented a system of Primitive and Semantic abstractions (using the "tatami" analogy) that makes the project highly maintainable. I also achieved a professional "hydraulic" feel with asymmetric transitions, using a snappy entry for hover and a smooth exit for the base state. Next time, I would like to experiment more with CSS Grid for the internal layout, even though Flexbox was perfect for this "magnetic containment.

What challenges did you encounter, and how did you overcome them?

My main challenge was making the interactive links occupy the full width of the button area. I overcame this by applying my knowledge of the Box Model: converting the links from inline to display: block, allowing them to expand "like a gas" to fill their parent container. I also struggled initially with the asymmetric transitions, which I solved by placing the longer transition on the "mother rule" and the shorter one on the :hover state.

What specific areas of your project would you like help with?

I would like guidance on how to accurately interpret font weights from Figma design files. In this project, the Figma text styles are labeled as follows:

• "text-preset-1 24/150" for the profile name.
• "text-preset-2-bold 14/150" for the location string.

The project style guide provides three numerical font weights: 400 (Regular), 600 (Semi-Bold), and 700 (Bold). However, the Figma preset simply says "bold," leaving it unclear whether it should map to 600 or 700 in my CSS rules.

Any tips on how to correctly inspect and translate these Figma tokens into the exact numerical font-weight values would be highly appreciated.

Here is my current implementation for reference:

.social-card__name {
  margin: var(--mrg-name);
  font-size: var(--fs-24);
  font-weight: var(--fw-400); /* regular */
  color: var(--clr-white);
}

.social-card__location {
  margin-bottom: var(--mrg-location);
  font-size: var(--fs-14);
  font-weight: var(--fw-600); /* bold*/
  color: var(--clr-green);
}