The designer has handed us a Figma file. So let's dive in. The design that we're going to build, Here are the three screens that we are going to build, but really there are two main layouts. There is this, uh, login oath screen, and then the other two screens have a very similar three column layout. This is the feed and then the profile page. And in both cases, I imagine the middle column has a scrolling container.

And in both cases, I imagine the middle column has a scrolling container. We'll take a look at that very soon. And if I go back to the oath screen, there is this interesting sort of word stack here with all the words stacking on top of each other and sort of fading out. Uh, I'm excited to look into building this one, but before we dive into the build, I think we should translate some of this design.

before we dive into the build, I think we should translate some of this design to our tailwind.config.js. So I'm thinking that there is definitely that custom font family, this pixelated pretty cool font that represents literally everything on the entire ui. So this is probably going to replace our default font family. You can see it's really used for absolutely every bit of ui. So we're gonna need to register this custom font.

You can see it's really used for absolutely every bit of ui. So we're gonna need to register this custom font. And the other obvious thing is the colors that we see throughout the entire site. So if I zoom out once again, you can clearly see a lot of that gold yellow, which is a highlight color. And then there is also an obvious background color, which is present in most pages, which is not really completely black. Matter of fact, if I inspect this,

which is not really completely black. Matter of fact, if I inspect this, the background hex #090909. And so I think this is also going to be a custom color. And finally, the last one that I notice is this seemingly white text color. But if I select this and inspect, once again, you can see that the color is actually #EEEEEE. And I think these are the three main colors.

that the color is actually EEE, EEE. And I think these are the three main colors that we want to customize. You may say, but what about this one? But if we inspect that actually it's using the same e, e, e color, but then at a 40% opacity, and there's a few more instances of that maybe here you can see this one has the same color but with a different opacity. But it looks like this is the main, uh, design tokens

but with a different opacity. But it looks like this is the main, uh, design tokens that we can add to our tailwind theme to implement this design. The highlight color, the light and dark color, and then the pixelated font family. There might be a few other values that we could customize, like the font sizes or maybe the container width. But I think for the most part, while we are trying to do a decently high fidelity implementation of the design,

But I think for the most part, while we are trying to do a decently high fidelity implementation of the design, we are going to eyeball certain things. The idea is to definitely recreate a UI that matches this design. But we're not going completely for pixel perfection here. What matters is to walk through the implementation of the design into CSS and HTML, but we definitely want to include the correct colors, uh, and font family.

but we definitely want to include the correct colors, uh, and font family. And for the rest, we're going to pick the nearest value in the tailwind default theme, unless there's really a big discrepancy in which case we're going to later add this value if we need to. Alright, and with all that said, uh, let's go and set up our project that we are going to begin from scratch. So we're not going to use any framework.

to begin from scratch. So we're not going to use any framework or templating language, but we can still benefit from a little dev server that's going to live reload when we make changes and also allow us to process the Tailwind CSS stars. So we are going to use vt, which for this sort of stuff, vt is elite. And so in the next lesson, let's set up a vt dev server. We're going to install Tailwind CSS,

And so in the next lesson, let's set up a VT dev server. We're going to install Tailwind CSS, and then we're going to bring these custom colors and font families that we've seen in the design.