WEBVTT

1
00:00:00.000 --> 00:00:06.200
OK, so we're going to go ahead and add in some of the copy here.

2
00:00:06.200 --> 00:00:10.440
So we actually have a whole document that was put together, luckily.

3
00:00:10.440 --> 00:00:12.760
So of course, if you don't have this for your brand, this is not a big deal.

4
00:00:12.760 --> 00:00:17.720
But if you do, it can be kind of nice to have all of this stuff here, and I'm going to give

5
00:00:17.720 --> 00:00:22.680
it all the context it can possibly have, as well as like some of the details of how to

6
00:00:22.680 --> 00:00:24.940
put the brand together.

7
00:00:24.940 --> 00:00:27.520
So let me grab that.

8
00:00:28.240 --> 00:00:31.660
OK, so I am just going to upload these now from my computer.

9
00:00:31.660 --> 00:00:34.620
I do already have downloads.

10
00:00:34.660 --> 00:00:36.500
I'm just going to pull this top here.

11
00:00:37.100 --> 00:00:42.700
I'm going to open these up using the attached PDFs.

12
00:00:43.540 --> 00:00:48.260
I want colors, typography, et cetera.

13
00:00:49.100 --> 00:00:53.180
Everything that might be helpful for the brand.

14
00:00:54.040 --> 00:00:59.760
I could do this as its own file.

15
00:01:00.680 --> 00:01:01.200
Let's do that.

16
00:01:01.200 --> 00:01:07.960
Actually, I'm going to interrupt it and say, like, make this a new brand.md file.

17
00:01:10.160 --> 00:01:11.680
Stop, start.

18
00:01:12.600 --> 00:01:17.600
So 4.0 has been pretty good at this.

19
00:01:17.600 --> 00:01:25.700
I could also switch to 0.1 and 0.3 mini and all these, but they don't have the ability

20
00:01:25.700 --> 00:01:33.820
to basically upload images and files just yet, so I'll have to use 4.0 for this.

21
00:01:35.180 --> 00:01:37.260
For context, these are the files that I just gave it.

22
00:01:37.300 --> 00:01:39.140
So we have a web typography.

23
00:01:39.420 --> 00:01:43.460
Again, this is stuff that you may have for your website or something.

24
00:01:44.400 --> 00:01:48.000
And this just tells you exactly how we like to use our typography.

25
00:01:49.000 --> 00:01:50.240
This is what the designer put together.

26
00:01:50.280 --> 00:01:52.120
I'm not sure how good.

27
00:01:52.120 --> 00:01:58.840
It seems to be pulling these out, these different shades of colors, the blue color, these light

28
00:01:58.840 --> 00:02:02.720
grays, and we'll see how it handles this.

29
00:02:04.480 --> 00:02:08.039
And we do have some really cool key art that our designer has made.

30
00:02:08.220 --> 00:02:15.180
These things are all custom graphics and little architectural details.

31
00:02:15.460 --> 00:02:19.380
So what I'll also do is start to incorporate that into various parts of the app.

32
00:02:19.420 --> 00:02:20.420
So it went ahead and did that.

33
00:02:20.460 --> 00:02:21.580
Looks like it did a good job.

34
00:02:22.140 --> 00:02:30.220
Identity, got all our colors, headlines, like use this for GT Superweight, headline one.

35
00:02:30.260 --> 00:02:32.460
So it's getting this little detail here.

36
00:02:33.080 --> 00:02:35.960
And the only thing I may do.

37
00:02:37.320 --> 00:02:39.840
Yeah, it's, this is great.

38
00:02:45.320 --> 00:02:46.680
Okay, I'm going to save it like that.

39
00:02:46.680 --> 00:02:47.320
That's perfect.

40
00:02:47.720 --> 00:02:48.520
Make a new file.

41
00:02:48.800 --> 00:02:52.640
So you don't always have to use cursor because cursor is not the best at everything.

42
00:02:52.640 --> 00:02:57.080
So we're going to call this like brand.md and I'm just going to dump all that in there.

43
00:02:58.040 --> 00:02:59.320
So now we have instructions.

44
00:02:59.340 --> 00:03:04.420
And again, if I want to reference everything, I can do that by just hitting like at instructions.

45
00:03:05.060 --> 00:03:11.700
And now I can, or I can just say, Hey, like if it's missing the colors and it's the wrong color, I can say, Hey, at brand, like check, check your colors.

46
00:03:12.860 --> 00:03:13.180
That's good.

47
00:03:13.180 --> 00:03:13.860
So we're getting there.

48
00:03:14.580 --> 00:03:17.900
It's a little bit slow, but that's how we built out like the brand.

49
00:03:18.300 --> 00:03:23.260
And the next thing we could do here is go in and start to put in the logos.

50
00:03:24.060 --> 00:03:26.940
And I would love to do those as SVGs.

51
00:03:27.180 --> 00:03:28.900
And here we've got an images folder.

52
00:03:29.080 --> 00:03:32.720
We've got team and all of this.

53
00:03:32.720 --> 00:03:33.960
So I'm just going to open this.

54
00:03:34.080 --> 00:03:39.480
I like to reveal in finder, just easier to work with, I think in finder.

55
00:03:39.940 --> 00:03:47.880
And then I'm going to grab all my logos, which are over here and I'm going to grab those and pull them in.

56
00:03:48.920 --> 00:03:49.120
Cool.

57
00:03:49.120 --> 00:03:51.700
So now we have the icons here.

58
00:03:51.760 --> 00:03:53.860
These are all FCS VGs.

59
00:03:54.200 --> 00:03:56.200
So now I can go here.

60
00:03:56.200 --> 00:03:59.180
We're going to make a new tab and let's just go ahead and add the logo.

61
00:03:59.180 --> 00:04:02.620
So, um, let's add at a Novo.

62
00:04:03.180 --> 00:04:05.940
So we've got, um, logo mark.

63
00:04:06.500 --> 00:04:08.020
Let's go back to my folder here.

64
00:04:08.540 --> 00:04:15.260
I think it's just a Novo underscore logo, um, logo dot SVG.

65
00:04:15.340 --> 00:04:16.220
Oh, it's not indexed.

66
00:04:16.220 --> 00:04:18.820
So if you see this where it's not, it doesn't actually know what's in here.

67
00:04:18.820 --> 00:04:20.940
File cursor settings, cursor settings.

68
00:04:21.399 --> 00:04:27.760
Just go back down here to, um, the index, which is somewhere model.

69
00:04:28.960 --> 00:04:29.320
Yep.

70
00:04:31.520 --> 00:04:33.840
Features re-index.

71
00:04:35.100 --> 00:04:35.480
Cool.

72
00:04:36.160 --> 00:04:38.200
Um, let's try that again.

73
00:04:41.520 --> 00:04:44.320
A Novo underscore.

74
00:04:46.160 --> 00:04:47.640
So let's see if we've got this.

75
00:04:47.720 --> 00:04:49.240
I'm going to search, see if it can find it.

76
00:04:49.240 --> 00:04:50.560
I see that you have a logo.

77
00:04:50.940 --> 00:04:51.800
Component.

78
00:04:52.320 --> 00:04:54.960
Let's check read file.

79
00:04:55.200 --> 00:04:58.840
Now let's optimize, modify the logo component to use the new SVG file.

80
00:04:59.480 --> 00:05:00.000
Um,

81
00:05:00.000 --> 00:05:09.900
Let's see what it's doing here we go I'm gonna move these around a little bit so

82
00:05:09.900 --> 00:05:19.580
it's brought in the name that's got an alt text let's see these views are

83
00:05:19.580 --> 00:05:22.700
properly placed in the public

84
00:05:27.140 --> 00:05:29.180
Oh

85
00:05:29.180 --> 00:05:52.460
okay aha beautiful looks pretty good and I'm just give it's like let's make it

86
00:05:52.460 --> 00:06:00.500
bigger that's the beauty of an SVG so we always use SVGs but let's just see

87
00:06:00.500 --> 00:06:05.340
what it does there you go that's nice but you can see how quickly this is

88
00:06:05.340 --> 00:06:08.300
gonna come together now I need to go through next thing we'll be updating the

89
00:06:08.300 --> 00:06:13.580
typography and then we'll keep working down through the page updating various

90
00:06:13.580 --> 00:06:23.260
things so let's accept all that I like to just like move on there we're all

91
00:06:23.260 --> 00:06:27.220
good so we'll keep going sorry I forget that you can only see this piece here

92
00:06:27.220 --> 00:06:32.340
okay so so we'll jump in next to typography