Video

What a video my man, so calm and explanatory, thanks for that (and a big hug from Brazil!!)

Dope

Space is the final fontier

How to use type scales across breakpoints?

12:02 Please create a video or just list them in the comments here, that would be awesome!

What Font is it that you are using for the Catsnake Brand?

This is a really great tutorial. Clearly explained the reasons behind the design decisions. Thank you! Subscribed and please keep it up!

Thanks a lot for the sharing @Tonic! I have 1 question @5:59 : How can i fit the 12 columns with 32px apart into a 1200px width? The column width should be 70.666px in order to fit to that setting. How would you overcome that? Thanks.

OMG I was looking for this for so damn long. Thanks for the video!

Hey, @Tonic, this is your first video I watched on your channel. But guess what, I was lost in your contents when I decided to skim through the playlist. I don't even know where to start 😊. I subscribed to learn more from you.❤❤

thank you

can you create it without CMS?

Hey @wearestudiotonic I am a huge fan and supporter of your channel due to immense quality of your content. I appreciate that you provide real production examples and know-how, without the superfluous fluff. I'll definitely be curious to checkout the design course once it's out.

Can you just tell me where you bought your Tshirt? Please share the link if you have bought online.

great stuff

Man, you just earned a new subscriber.

Can you share that spacing guide

Thank you

Pixels for font sizes?

what a great video

heavens sake, Get a good mic

What @creativeSolutions said....great tutorial just wat I needed, I am subscribed!

Great video, but I don't understand how you go from wireframe to such a different result in terms of design. It's easy to imagine the siteplan to wireframe, but wireframe to design direction is surprising, and designdirection to final result is even more impressive, as it looks like a complete reorganisation of the page.

Great video.

it doesn't not work in outlook. Outlook doesn't support "inline: block" and "media-queries" at all

This is amazing! Thanks~

Could you create something like this but for colors? How do you guys set the color library and why. Thanks!

I like color fresh good UI

Tom is amazing

font size divided by 1.333 what about 1.618 (golden ratio)?

Finally! The video about spacing makes sense!!! Thank you!!!

Thanks man

Is your cheat sheet available for download somewhere? Thanks for this video, wonderfully explained!

Finally, that's what I needed 🎉 Thanks

Maybe im not getting something here but. Your viewport on the "Check" Frame is 568px. If you then open this in the figma mobile app this obviosly gets scaled to the smarthones viewport. So the h1 for example is not 40px.

Hello Tom, I’ve recently begun working with HTML to design emails, and so far, everything has been going well. I’m truly grateful for your tutorials-they’ve been incredibly helpful. However, I’ve encountered a problem: when I check the email on my iPhone, the images appear broken. Strangely, on other platforms and different operating systems, I don’t encounter this issue. I’m wondering if there’s a solution or any tips that could help me address this issue. Thank you once again for your guidance and support! 😊

I know I'm lat to the party, but my email isn't responsive - what have I done ??

OMG that "set an end" comment made my day, I've been struggling with weird behavior on looping, but that solved it! Thanks so much!

The major difference between a typeface and a font is that Times New Roman(Roman=Regular) at two different sizes( say 32px and 48px ) are still the same typeface but are two different fonts.

Hi, new subscriber, here! This video was excellent! You mentioned possibly going over how to set up the buttons in the style guide. I would love to see that and more on how to create a style guide in general. I'm also curious on the process for animations/transitions. Great work!

Figma file

Thank you

You should actually use the microfone that is right in front of you haha. Love the content but the audio quality is so bad on all of these. It sounds a bit like you used a noise reduction tool wrongly or used a macbook mic. Please also use the good mic that is right in front of you next time.

I like this video.

As junior designer this is type of content is more helpful than you might think, so good to see real projects and not content just made on purpose for CZcams. Thank you for sharing, and looking forward to more videos from you!

LHG tee. :)

Thank you so much for this tutorial! I've gotten better and understanding spacing over time, but this tutorial truly helps me understand the full science of it.

Using figma for a year and only just realized the shortcut to bump spacing up in 8's. Thanks! very helpful :)

Very well explained, thank you!

Thanks for sharing! I consider myself a beginner in this area, and going through videos like these has been so helpful in breaking down that endless research mentality and just putting something together already 😅 Cheers for that. I’m curious, do you have specific breakpoint sizes you develop for on the three screens: desktop, tablet, and mobile?