Designing with Claude Code

0:00So, I've been using Claude code as my primary design tool for just over a month now. And it's been pretty spectacular. Uh I've made a few things here. I made this sort of pricing page, [music] a three-tier pricing page with a comparison table. And it's got some other stuff here like a testimonial and a FAQ section. This isn't for anything particular. I just kind of made it for fun just to kind of get familiar with using Claude code as a

0:26design tool. Uh then I also made this sort of finance dashboard. We made this for Tailwind Labs to sort of consolidate our all of our revenue streams into one clean dashboard. Um I populated this with a bunch of fake content just to make it look all colorful and whatnot. And I thought it'd be cool today to build a marketing page for this app. [music] And just show you my workflow and maybe

0:57share a few design tips along the way. Now, I have it opened up in my Ghosty app here. I have the the folder I created for this project. Full disclosure, I I'm still incredibly new to the command line. This is all pretty foreign to me. [music] Adam Wathan helped me get set up initially. And now I just have this V project template that I copy from every project that I start. So, at this point I'm pretty much only I'm pretty much only confident like changing directories and

1:32getting Claude started up. Um but so I yeah, I have this project opened. I'm going to get it all started up and running here. So, Okay, so this is now running on my local host here. So, I'm just working from a blank canvas here. I have there's no skills I'm using. I'm just starting from complete

1:59scratch here. Okay. So, I'm going to split this window up. Okay. And now I'm going to run Claude. Okay, so let's get started here. So, I did sort of pre-write a a prompt here. I'm going to copy and paste that in and and I'll read it out. Okay, so I'm going to say design a simple

2:28marketing home page for a finance app. It's essentially an app that consolidates all of your revenue streams to see all the activity in one dashboard. It focuses on revenue tracking, expense management, forecasting, and tax prep. Keep it pretty simple. Include a navbar, hero, logo cloud, feature section that highlights like two of the main features, a stat section, testimonials, and finish it with a CTA section and footer. And let's see what it outputs. [music]

3:07And we have it billowing now. Okay, so this is a decent starting point. I can work with [music] this. Yep. Okay, I mean I like that it used like this emerald color instead of indigo, which I find AI kind of defaults to every time. So, that's that's cool. Um the first thing I want to do is I'm going to put an actual screenshot of an of the app in here. Um putting a it kind of just generated this fake UI that it kind of guessed based on how I described the app. Uh putting a screenshot on your homepage like if you don't have any graphics or

3:49anything, uh including a screenshot is just a great way to bring a graphical element into your homepage just to make it look a little bit more splashy, make it look more interesting if you don't have any [music] sort of visual graphics to work with. So, okay, so I'm going to say So, I said swap the demo in the hero, grab a screenshot of the app in the

4:11code/finance app in the index.html file. Make sure you use any dependencies so it renders correctly. Capture it at 3x so it's high resolution. Razmatazzing. Okay, so it did a decent job. Let me just look in here. So, I can already see what the heck. The corner radius isn't quite right there. And even when I zoom in here, I can also see that like the the grays that I'm using on this app are it's using it looks like it's using like

4:44a slate gray here. So, I'm going to update a few things here. First, uh tighten tighten up the corner radius on this screenshot. Cool. That looks like it's, you know, just eyeballing it, it's a little bit better. Kind of matches the corner radius of the corner radius that I generated in the screenshot. I'm also going to update the grays now. This is using it looks like it's using more of a slate and my screenshot is using I think I'm using like neutrals in there like neutral grays. So, um update all the grays

5:21on the site to use neutral. Uh the next thing I'm going to do is uh right now it kind of looks a little muddy here with the you got the shadow and then the inner gray border. Uh what is it using for a border here? Yeah, it's using a solid color color for a border. So, one thing I like to do when making borders on [music] elements like buttons and screenshots and stuff like this is I like to use uh I I try to avoid using solid colors cuz you get that muddy-looking effect between the shadow and the border. What I like to do is use like a gray 950 and

6:01then reduce the opacity to like 10% and make it stick on the outside. Um so, you kind of get that crisp-looking shadow that kind of sits behind that that border. So, I'm going to say use a outer ring on the screenshot instead of a border. Make it gray 950 um at 10%. Okay. And now now we have a much crisper-looking border here. It

6:32kind of bleeds into the shadow nicely. It looks a lot cleaner. It's not as muddy as it was. Okay, so the next thing I'm going to do, like I said, I do admire that it chose like this green instead of indigo, but I do want to keep this kind of neutral-looking. So, um swap all the uses of emerald to [music] gray

6:57950. Okay. I like that better. Okay, uh next thing. Okay, so this it looks like it's using Inter here, which I I like. I'm just going to confirm that. Yep. Okay, but I want to make sure it's using the variable version of the font. And it doesn't look like it's doing that because uh the nice thing about the variable version of Inter is that it's got a a text version of the font,

7:29it's got a display version of the font. And uh the display version just looks a little bit more has a little more higher impact to it. Uh I don't really know how to describe it. It just feels more displayy. And so, I want to use make sure I'm using that one. Plus it has all of the the variable version has all of the fancy font features like if I want to do

7:49a single story A. Uh so, I find that um what what Claude when it generates sites, it typically leans into just like [music] the sort of basic default version of Inter. So, I'm going to say make sure you're using the variable version of Inter with all the fancy font feature settings and the display version of the font and get it from the RSMS.me,

8:14Rasmus. Rasmus's website. Okay. [music] So, that's better. I don't want to use that version of the L. Don't use the version of the lower case [music] L with the tail. Okay, so that's looking better. So, another cool thing about using Inter is I can use sort of all the in-between weights. So, if I feel like medium feels a little too thin and [music] semi-bold feels a little bit too bold, I can find something kind of

8:54in the middle. So, I'm going to say change the font weight to be uh I'm going to say 550. Just somewhere in between medium and semi-bold. Cuz So, medium would be 500, semi-bold would be 600, I believe. Uh so, okay. And I'm also going to make it [music] uh make the tracking just a bit tighter. Uh just to kind of give it a little bit more impact. I find like when you get two font sizes over like you know, 24 to 30 pixels, I like to make the tracking just a bit tighter. Cuz So, I'm going to tighten that up a bit. So, make the tracking in the

9:39tracking in the headline a bit tighter. Cool. And um Now, one thing I find that when I generate sites with AI, that it kind of [music] defaults it centers everything by default. I'm more of like a left aligned guy. Another thing you could do is I did this on the the Tailwind Plus website. If I go into

10:12Where did I do this? Yeah, on my Tailwind Plus homepage I kind of did this sort of uh split headline with the subheading like split like not quite 50/50. There's a little more weight given to the headline, but [music] you know, it's just a little bit more interesting than a center aligned or left aligned [music] headline and it kind of fills that space nicely. So, change the layout of the hero headline, make the headline left aligned, and put the supporting text on the right with

10:41the buttons. Left aligned, make sure the top [music] of the supporting text lines up with the top of the headline, make it like a 3/5 and 2/5 split. Let's see what that does. It's a pretty sloppily written sentence. I just kind of you know Oh, it got it it got it pretty right there. That looks pretty good. [music] And I'm just going to get rid of this eyebrow treatment. I don't want that in

11:07there. Okay, and I also want to make the supporting text a bit smaller. I want these to kind of almost be the same height. I'm going to make these buttons a bit smaller, [music] too. Uh let's just make it like make the supporting text 16 pixels. Let's just see what that looks like. I'm guessing that's like 18 or 20 looks

11:36like right now. Hey, that's a bit better. Um Yeah, I'm going to make this a bit wider, too. Um so, make the page container wider. Maybe 1280? Okay, that's a bit better. Um I don't like the way this sort of wrapped here. I'd like this to be with the sentence. So, um put each sentence in the headline on its own

12:13line. That's better. Okay. Um next thing I First of all, I don't like that this is kind of doing this zigzaggy thing. Um Yeah, so [music] make the screenshot full width in the page container. Okay. That looks better. I also think those buttons are looking pretty clunky. I think the text could be even smaller

12:45than too. Make the buttons in the hero smaller. Um thinking like 14 pixel font size. Well, I like somewhere in like the 36 38 pixel range for button height. I'm just going to say that. Make the button height 38 pixels. Not [music] fixed height, though. Just make it work with padding stuff.

13:19I like that icon in there. It just I don't know. Not into it. Get rid of the icon in the watch demo button. I want it looking clean, you know? Okay, I also think that the X padding is a little bit more. You know what? I'm going to make these pill buttons and I'll I'll see you what happens from there. So, uh make the buttons pill shaped

13:44all all through the site. Okay. That looks pretty good. And um make the secondary button a bit more elevated to give it a small shadow. Okay. And how is this built? Okay, so I think this is doing what it was doing on the screenshot where the border is using a solid color and you're kind of getting that muddy looking border right now. So, I'm going to say uh use a uh outer ring instead

14:30of a border on the secondary one. 95010. Okay. So, yeah, now you get a much more crisp looking shadow. Now How is this built? Okay, so this button has a ring [music] around it and this one doesn't. So as a result, this is technically two pixels taller than this button and we can't have that. That's that's that's how I lose sleep at night. Um Adam Wathan cooked something up for me to solve this problem. [music] Uh I have it saved in a a Tailwind play

15:15here. Uh Basically, what you want to do is wrap You want to wrap this border button in a span with this inline flex and [music] p-px utility and then he puts all this calc stuff on here. Honestly, I could not have cooked this up myself. This is some Adam Wathan magic happening. So, but he did kind of give me this Tailwind play. I'll be sure to put a a link to this play in the comments so you can use it yourself. I don't fully understand how it works, but I'm going to take this structure here and update all the buttons [music] to be structured like this and let's see let's see what it

15:59does. That didn't do what I wanted it to do. Oh, and it put the shadow on the parent here. Okay. Make sure the button shadow is on the button, not the parent span class. That's looking better. Okay, this is looking pretty coming along. It's looking clean. Um okay. So, I'm going to just What I'm going to do now is update [music] the hero. So let's put a different logo in there. I just kind of generated this fake logo and it has weird alignment. Um

16:54I have a Figma file. This is one of the few uh reasons I still open up Figma is to generate generate vector graphics [music] and um I just have this file of all these fake logos that I just kind of go through every now and then. So, I'm just going to use this this logo right

17:13here that I made up. Uh but yeah, this is one of the few reasons I still open up Figma is to get vector graphics going. AI is still kind of working on that. The Quiver AI tool that recently came out, that looks very promising. Uh I haven't had a chance to dabble in it yet, but I'm excited to dive into it. Um so, I'm going to

17:36copy this logo. Uh I have ADHD. So, as [music] you can see, I have a lot of unclosed tabs here. Um but yeah. Update the logo to use this.

17:55And uh now that we're using this logo, let's uh update all mention of the word Ledger to be Axiom. Uh update all mention of the word Ledger to Axiom on the site.

18:21Okay. Now, let's uh let's work on this nav a little bit. I'm going to make that logo just a tinge bigger. Make the logo a tinge bigger. That seems fine. Okay. And um And I think I want to uh I think I want to left align these links to be kind of snug with the logo instead

18:47of centered. Uh it just feels kind of busy in here with these three elements. So um left align the links in the navbar to be closer to the logo. Hm. Okay, good. [music] And I want the the button in the navbar to be a bit smaller. It looks like it might be even a bit bigger than the hero [music] button. Um so, I want it to be a bit tighter so it's not competing with that

19:22button. [music] Maybe I'll put this sign in button into like a secondary looking um give it that secondary treatment as well. So, make the the button in the nav smaller. I don't know. I'm going to say like 28 pixels tall. Uh give the sign in [music] link a secondary button treatment. Made it too small. It's 24 pixels.

19:59That's 24 pixels. Make it 28. And I want it to be text excess. Or text text small, not excess. Cool, that looks better. Um I think it's pretty good. I like that blur treatment that gave. I didn't I didn't do that. That just kind of added it. That looks That's kind of cool. Uh but [music] the border is doing the on the nav is doing that same thing where it's looking kind of

20:39muddy. It's probably using a solid gray. Yeah. Uh So, make the bottom border on the nav ring. I guess it would be a ring. Yeah, like a ring um 950. 10 an outer ring.

21:06Okay. That's better. That's looking a little more crisp. Let's move down. [music] So, I'm going to move down to the this logo cloud. Let's put some real some real fable logos in there, you know, not just these text [music] logos. Where's my Figma file with all the logos? Yeah, so I'm going to grab a bunch of

21:28these logos logos. Uh I have them all. Let me just grab these ones right here that are all in a nice column. I'm going to export. Export them as SVGs. And I'm just going to put them in the folder of this project.

22:03So, I can say update the logos in the logo [music] cloud to use these logos in the uh public /logos folder.

22:20Okay. Um Yeah, they're set at H6 with opacity 70. Um Don't use any opacity. Make them just gray 950. Uh make them full width [music] in the container. Make them a bit bigger.

22:59Okay. Get rid of the off-white background [music] in this section. Get rid of the I don't know how to type. Get rid of the top bottom borders. Get rid of the title of this section. Okay. I like that. I don't think the title of that was necessary. I think it was uh you know, I see these on a lot of sites and they don't really have [music] uh a title for the section. They just put the logo and it's very clear that they're they're user they're likely

23:46going to be users [music] of this app. Okay, let me move on to do this feature section. Okay, I'm going to I'm going to left align this section heading. Uh left align section heading in the feature section.

24:12Okay, and uh so, I'm going to do something different with this [music] uh treatment. Uh I'm going to do that sort of inline treatment. I I I think I first saw it on Apple. Linear does this. Where it's sort of the the title kind of leads into the supporting copy and it's just it's sort of inline and they just use a different color for the supporting text. I think that looks a little more

24:39interesting. Uh like Stripe does this too. They do it on their their hero now and in these sections. Uh I think Adio Adio does the same thing. Um Yeah, they sort of do it here as well. So, I think that's a cool style right now. So, I'm going to update that to do that

25:01style. So, um update the style of the feature section heading. Or make the title and supporting text the same size. Make the title inline with the supporting text so it reads like one block. Make the supporting text I don't know, I'll say gray 600 for now just to see what that looks like. Uh make it uh

25:44medium weight. Make it medium weight. I think that kind of captures that look. We'll see what it does. I mean, that did it. Make it bigger like 4XL. Also make the supporting sentence a bit longer. I feel like this this treatment the style of um title kind of requires a bit of a longer sentence if you're going to use

26:15it. Yeah, it seems fine. Uh How's this built? Does it have like a max width on it? Max width 3XL. So, I instead of giving it like a fixed max width, I like to use like the the the max width character thing. Um Make the max How was that written out? Max width like the I'm just going to say like

26:45CH45. 45. Maybe a bit tighter than that. 40? Mhm. Let me use a C35. 35? I like 40 better. Sometimes you got to Goldilocks it. What this character rule does is is it bases the the width of this text block on the amount of characters it could fit into. [music] That I think it's based on like the the

27:22zero character. And uh so, I could fit like 45 zeros of this font size in this space. I think that's how it works. Um But, that's a little bit more flexible for when you're working with typography cuz sometimes you just want typography to you just want a nice reading width. You don't really just uh you don't want

27:43to have like a like sort of a set width. You want to base on how many characters you can fit on one. So, that's a nice little uh tool for that. Um I'm going to say add It got rid of the It got rid of the the eyebrow there. So, I'm going to add that back. Add the eyebrow

28:02back. Okay.

28:09Yep. Okay, and um I'm going to make it use How are you doing this section? You're doing good. I like using uh a monospace for these eyebrows. I think it just looks a little bit more designed, a little more um interesting. So, uh I'm going to say make make the eyebrow monospace. Um maybe maybe Geist Mono.

28:38That's a good font. Uh and when I do that, I uh I like to make them all uppercase. So, uppercase and uh uh I like to make the tracking a bit wider when I make everything all uppercase. Tracking wide.

29:04Um and I'm going to make it uh gray um 600. And uh maybe uh text excess. Yeah, and I'm going to say the tracking wider. Just to give it a little bit more room to breathe. Okay, so that looks more interesting. Uh And I want this this same treatment for all of these section headings. Um Apply this same feature section heading style to all of the

29:54sections below.

30:05Okay. Okay, that did it right, but it kept it pretty tight there. Uh What's going on here? Why is that happening? Oh, it put the max width 40 characters in [music] It needs to be on the same size that the font is set. Uh make sure uh max width 40 characters is on the same line where the font size

30:38is set.

30:47Uh I don't like that orphaned orphan word right there. Um I'll get to that in a minute. Let me let me just focus on this uh feature section. [music] So, let me um I'm going to put some actual screenshots in here. [music] So, what do I got here? I got unified revenue tracking and smart forecasting. I'll just use more screenshots and I'll just kind of focus in on the feature that's highlighting. So, for unified revenue tracking, I'll just kind of focus in on this chart and maybe I'll have it have that like little

31:22tooltip thing opened up. And then for the smart forecasting [music] if I go to the actual app here there's this sort of trend forecast graph at the bottom here. So, maybe I'll have it focus on that with this tooltip showing. So, I said swap the graphics in the feature section to use an actual screenshot. Grab a screenshot from the finance app file like you did in the hero. Capture the whole screenshot and crop it in the space so I can focus on a specific part. When grabbing screenshot for the unified revenue section, make sure the tooltip on the revenue chart is showing. For the forecasting section,

31:58grab a screenshot with a forecasting tooltip showing. Let's see if I can pull that off. Oh boy, I'm rasmatizing for 5 minutes. Oh, there we go. Okay. I'm going to put the screenshots on top of the text. Move the screenshots to be above the um text in the containers.

32:40I'm going to inset them a bit. Inset the screenshots in the containers. I like when it's pretty tight. Uh Thinking like like eight pixels maybe as a starting point.

33:01Make sure the border radius on the screenshot is concentric with the container radius. That's just so that the yeah, the radius kind of matches. It's kind of hugs the outer radius. That looks more correct. I'm going to add add an outline to the uh screenshots. Uh I'm going to say like 950 uh five for now.

33:45Yeah, just like that. I want it to be inset so it's on top of the image.

34:04Um It's probably there. It's probably underneath it. So, um I want it to be on [music] top of the image. Right now, it's likely behind it. I think I don't know how to do this stuff. I think you got to like put it on its own [music] thing and absolute position it. I have no idea how

34:32this stuff work. Yeah, but this is now it's doing what I wanted it to do. So, has a ring on there and it's sort of just kind of covering the corner of the image. So, that give me a nice crisp border around it. Yeah, that looks good. Um now, I want to zoom in on the images a bit more. It's a little zoomed out on each. So, um zoom in on each

35:03of the images. Like I don't know. Maybe 25% as a starting point. That seems fine, I think. Okay, but I want to move these around. Right now, they're just kind of positioned in the top right. So, uh I could kind of just tell it how where I want it moved to, but you know

35:27what? I'm going to have uh build me a little tool here. A temporary tool that I can use to move the image around myself to and get it to the spot I want. Uh so, uh uh build a temporary tool so I can move the images around in the cropped area and uh Uh so, I'm going to do that. So, build me a temporary tool so that I can move

35:54the images around in the crop area. Let's see what it does here.

36:07Okay, so it made me this little tool here on a different logo host. Uh can you just make it a temporary inline thing on the site I'm working on. Yeah, so it built me a tool, but it's like in a separate domain. I just want to see it inline here. I want to be able to just move things around them right

36:37here. So, I can position them exactly where I want. Cool. So, now I can move this around right here. And I think I want it just like right I don't know. [music] I'm just going to scale this by Oh, yeah. Maybe like right right there. And then this one I'm going to have the same zoom. But I want to show

37:13this little panel. Maybe right there. So, it's telling me once I Once I've got the positions I like, share the values or hit copy and I'll bake them into [music] the code and remove the tool. So, here are the values for the first image. Here are the values for the second [music] image. Copy that code.

37:54Amazing. Okay. Uh instead of Yeah, so I want this [music] container to be more of a a well-styled treatment instead of a just like a white container just to give the help the image pop a little bit more. So, I'm going to say uh give the containers a background color. Uh I'm going to say gray 950. I want it to be really soft. I'm

38:28going to say like like 2 and 1/2%. [music] Let's just see how that looks. Uh drop the border around the container.

38:48Okay, that's That's That's pretty soft. Let's make it make it opacity five. That's a bit better. Um and let's make it a little bit more snug between these containers. Uh I I want it to basically be like the same as the gap betw- around this image. So, I want it to be pretty tight in there. Um make the gap between the two features

39:22uh eight pixels. Oh, did it get rid of the border on the on the screenshot? No, it didn't. It just matches the color of the background. Uh so, let's make that bit border. Make make the border on the screenshots 10% opacity. Yeah, now it just kind of pops a little bit more. Okay. Okay, I think this text is a little chunky, too. I'm going

39:56to make that a bit tighter. Make the feature text um text small, maybe. Uh both the title and description.

40:19And I'm going to make it uh make the letting a bit taller. Make the letting bit taller. I'm going to say, I don't know. What is text small is 14. I'm going to double it, like so I'm going to make it like double it from the text size, so uh just that big 20 pixels.

40:43Clean. Cool. I like this well treatment. You know what? [music] I might do the same well treatment in for the hero, too. Uh I'm going to say uh put the screen shot in the hero in a [music] well styled container like the feature sections. Uh [sighs] but I want it because it's much bigger, I do want it to have much more liberal spacing. This is all pretty tight. Um so give it I'm going to say like 64 pixel padding

41:32around the screenshot. I feel like these sentences are right barely make sense. But it it understands me every single time. Yeah, that's that's like doing what I wanted it to do. Uh Why don't change the the radius of the screenshot there? Uh make the radius on the screen shot a bit bigger. That's better. I want to crop the bottom, I want it kind of sitting on the bottom of the

42:12[music] container. So instead of having like equal space all around, um zero padding [music] the bottom. I want the bottom of the screen shot to be cropped a bit at bottom. Crop it by like 10 pixels just to get rid of that like gray edge around it at the bottom. at the the bottom. [music] Get rid of the bottom corner

42:59radius.

43:06And uh now that it's cropped I'm I need to add a little bit of a border here, so uh add a inset ring on the container. Um 5% opacity. Uh make sure it's on top of the screenshot. Okay, that's better. So now it kind of has some definition between the edge and the screenshot.

43:42Okay. Let's work our Let me let me work my way down here. Um I'm going to do this stats section here. Um First of all, I'm not crazy about this dark background. Uh I want it to be pretty simple. Uh get rid of the dark background on the stats section.

44:19Okay. And let's left align all the stats. So I'm going to say left align the stats, make them fill the entire width of the page container. I'm going to have it also I'm not crazy about this orphan text, so uh apply um pretty to the section heading sentence.

44:49Text pretty, that's what I meant to say. But it understood me perfectly. Okay, these numbers stats are pretty clunky. Uh Make the values in the stats, I don't know, like just regular font size. I think I can make them a [music] bit bigger, like um maybe 5XL. I'm going to say regular font weight.

45:24Oh, it but it got it right. And make the labels also look a little bit soft. Labels like, I don't know, gray 600. Is that what it is already? No, that's a bit better. So it's a little bit higher contrast. Okay, so this section is looking pretty good. Um maybe I could add a like a divider. Add a divider between

45:51each stat. Yeah, it looks pretty good. Yeah, I'm going to move on to this testimonial section. What can I do here? I just want to make it look a bit more visual. I'm going to get some real images in here. You know what I mean? You I'm going to put the images I'm going to get like just generate some images on ChatGPT and make [music] some make them like the background of the card and then uh put a sort of a dark shim on it that

46:26[music] the text could sit on top. So I'm going to go over to So I got ChatGPT to generate a bunch of images for me. Uh so yeah, I'm going to copy all of these into into the prompt here. First image second image, third image. Use these images in the testimonial section. Uh use each image as the background [music]

47:03for the card container. Uh make the text for the quote white. Um Get rid of the stars and the circle uh avatar container. Um align the quote at the bottom of the portrait. Okay, so it wants me to put these images [music] into my public folder, so I I'm going to do that right here. Um and yeah, I'm just going to pop them in

47:45there. And I'm just going to rename these three. Okay, so those are all saved in there. Uh they are there now. Um They are as PNGs, whatever. Um also update the names to be unisex. Oh, yeah. Oh, it didn't even update the spacing cuz I wanted to I was planning to match that with this, but it just kind of

48:22learned from itself. And what I also like what it did is it added a bit of a dark shim to the bottom. It just sort of right? Is that what I'm seeing correctly? Yeah, there's sort of a Yeah, like it's sort of a gradient from the bottom to the top there. So it just

48:47so the text stands out a bit more. Wonderful. Um and I'm going to make the names just a bit smaller. Make the name title a bit smaller. Uh maybe text I guess I'll text XS. Which is small boy.

49:20Cool. Um and maybe make the line height of the name title [music] bigger. Cool. Lovely. Okay, the last thing I want to touch on I'm going to do this footer and the and the CTA section. Uh it get rid of the background card in the CTA section.

50:05Cool. And I want to just update everything else. I updated the style [music] of the button. So, it's just kind of learning as it goes here, which is is sort of nice. I don't have to make additional updates. Um I mean, that looks fine. What I've done differently? Um No, that looks fine. I'll leave it as it is. I think the way this kind of wraps is funny. Uh

50:34text pretty.

50:39That doesn't look pretty. Maybe text balance.

50:50That's better. Yeah, so sometimes you have to play with like text pretty and text balance to get the right results, but I think text balance looks a little bit better in this situation cuz you don't have the funny funky wrapping with the the 14-day free trial stuff. Uh so, it's looking pretty good. Um get rid of the [music] off-white

51:15background on the footer. Let's start there. Okay, and uh I'm going to swap this logo to be just the mark, not like the mark and the text. So, I'm going to go back to my my Figma file here and grab just that. Let's just like duplicate this and get rid of this guy and

51:48copy as SVG. Okay, uh um use this for the logo in the [music] footer. [snorts]

52:08And how is this built? This is built like with equal columns. Yeah, this is built with on a grid. Okay, with five columns. Okay, that's fine. Uh um get rid of the text below the logo. I don't think that's necessary. I want to clean that up a little bit. It's looking kind of busy over here. Yep, that's fine. And I want to make all the

52:44links a bit tighter. Um make Right now, it looks like it's using like text small. Make all the links in the footer text XS. Cool. Uh next, let's make those social media links. Make the social They look a little clunky. Me I I want to make them darker. Uh they also feel just a bit clunky right now. So, make the social media icons

53:27a bit smaller and gray 950.

53:36Cool. That's fine. Okay, this is looking pretty good. I want to fix up the spacing between these sections. Uh one thing I was thinking I could do to this site is I see this on a lot of sites. This sort of um [sighs and gasps] I like to call it a canvas grid. It's

53:56something like a stripe sort of does it. You can kind of see these borders that go around the entire site. They kind of contain each section. Um and and Adio, the site I brought up earlier as well, it does that as well. It sort of has this grid. We do it on the Tailwind site. Uh it's just sort of a popular treatment to do. [music] It's a great It's again, like the screenshot, it's just a great little technique you could add to a site just to make it a little bit more interesting, just make it a little bit more visual if you don't have like custom graphics to work with. It's just

54:29a nice way to add uh just some visual gimmick to the site. Um and then once I do that, maybe that will kind of fix some of my problems here with with the spacing between everything. So, uh So, I'm going to write something up here and repeat it out loud when I'm done writing it up. So, uh Okay, so I want to say I want to add decorative borders to the entire site. I want each section to have containing borders that are the size of the page

54:57container. I also want dividers between each section. Um let's just see what it does with that. Oh, yeah. Okay. Yeah, it did a pretty good job. This is a good double border right here. Okay. Um Okay, I think it'd be cool if I think it'd be cool if the borders kind of hugged the containers a little bit

55:30better. Uh so, any of these sections have a container sort of in them. It should hug those, but maybe give add a little bit more space between areas that don't have containers. So, I'll try to communicate that. [music] And I think I want And I think I want the space between the containers to be sort of match the the gap I have between these containing elements. So, this eight pixel pad this

56:00eight pixel gap right here. Um Okay, so I I wrote I want the borders to hug the containers on the side of it better. So, the container in the hero feature section and the testimonials, uh make sure it has eight pixel space between the containers on the sides and at the bottom of the container. For items that are not contained, give them additional padding. So, like all the section headings and stuff. So,

56:29let's just see what it does with that. Okay, so it did a pretty good job there. Yeah, like it even hugs the bottom of these container sections. [music] So, that looks good. The only thing it didn't quite do it in the hero. So, uh I'm going to say good job. The seeing about 16 pixel padding below the image

57:03in the hero. Can you fix that?

57:14Seeing a double border between the CTA section and the footer.

57:34And I also want this border to be full width. So, make the border between the footer links and the um copyright stuff full width. Cool. And you know what? It might be cool if the all the vertical borders actually full width of like the viewport, not just this container. Um just to make it a little bit more

58:16interesting [music] as you scroll. Uh make the vertical borders [music] vertical I mean, it's horizontal borders. Make the horizontal borders between each section full width of the viewport. [music] Keep the vertical lines where they are. Oh, yeah. First try. Yeah, I'm going to get it to bring up my So, I'm getting it to bring up the old version. I'm just going to put it on a different page within this within this project just so I can So, it's recreating the old version right

59:06now. Okay. Yeah, so here's what it looked like before. Okay. And here is where I landed with it. So, you know, just some more interesting patterns and different way of laying it out. These all just ideas you could try to use on your site. So, I'm pretty happy with that. Um I'm going to leave it like that. Cool. I'm not going to make any other

59:41changes. Uh I've been recording for a while now. Um I'm probably going to chop this all up, but Yes, if you enjoyed this, uh we're working on a tool right now called ui.sh. Uh it's a tool to set of skills for coding agents like Claude Code, Amp, Cursor, everything it says right here. And um I'm working on this with Adam Wathan and the Tailwind team. And it's not fully out right now. There are some early users right now. Uh but we'll be We're sharing a lot of updates right now, and we'll be making it more public

1:00:20very soon. So, follow along with that. Um now, if you enjoyed this, I hope to be making more videos like this very soon. So, um thanks for tuning in.