Global Settings Overview
Colors, typography, buttons, and more

VIDEO TRANSCRIPT:
Okay, you've downloaded Scaffold, and
you've set it as your
website theme.
Now let's show you how to edit the theme settings.
So no matter where you are in HubSpot,
the first thing you're gonna wanna do
is go to one of your website or landing pages.
So on the side
navigation here, you go content, content,
and then website pages.
And now you can select any of the pages you've built,
or you can create a new page if you don't have anything
here. But for this example, we'll
just select
one of our pages.
Now that we're in the page editor, what you need to
do is go to the top navigation and select
Edit and then Theme Scaffold
Pro. Well, this version is Scaffold Pro,
you could also be on Scaffold Lite.
That takes you to your theme editor. So this
is where you edit the global
settings for
typography, font, colors,
background colors, all these things, border
radiuses,
all these settings. So,
uh, if you're in Pro, you're gonna have access to light mode and
dark mode settings.
Uh, you have your global
colors here, so this is like your primary
brand and secondary brand color.
You also have these four utility colors that you
can edit and change if you'd like.
Um, background colors,
because we're in Pro, you have option for light mode and
dark mode. If you were just in Lite,
you would just have
light mode because you don't have dark mode in Scaffold
Lite. Uh, here
you can change your fonts,
your heading font, your body font, an
extra monospace font that
I like to use on things like,
um, tags and things like that.
And, uh, and there's some other cool things
too, like the grid pattern. This is taking from
your, from your primary color,
but you could change it to whatever you want here. So if I could
change it to
red, and I could make it
eighty percent opacity,
and then you can also change the size here too.
You can make it big,
you can make it small.
And something to note is when I go back
here, see how we changed that, and now
there's this little icon here with the two arrows?
I can click that,
and it'll reset to its default. So if,
if we mess around, we're,
you know, we're doing all kinds of stuff, we're experimenting with different
looks, we break something,
you could just click that button, and it'll re-re,
uh, set it to its default settings.
Another cool thing I like is,
uh, this borders. So you could change your
different border types,
and then you can also set all borders to
zero. So this will automatically, see how
now the buttons are squared off, the images
are squared off.
Um, I think it kinda
has a cool look to it. I, I think things have been
very rounded for a long time, and
now just by making, uh, your
icons and your buttons and your images squared off,
it, it could look a little different.
But I think that's about it for now. I
don't-- You know, all these things you're gonna have to go around,
you're gonna have to go into your settings and, and mess
around with things and see,
uh, what you can learn and how you could change things. But I think
this is a good introduction of
how you get to the HubSpot theme settings, or
I'm sorry, Scaffold theme settings,
and how to change it to fit your brand.