Style Guide
Every color, text style and component used across StudioM. Change them once in Assets and the whole site updates.
Typography
Text styles live in Assets → Text Styles. Each has a desktop, tablet and phone size. Edit a style and every heading or paragraph using it updates.
Headings
10 styles
heading-display · 700 · 316px / 128px / 72px
Aa
heading-page · 700 · 164px / 104px / 56px
Page title
heading-404 · 700 · 300px / 240px / 140px
404
heading-contact · 700 · 164px / 104px / 52px
Say hello
heading-h2 · 700 · 120px / 96px / 40px
Heading 2
heading-number · 700 · 120px / 96px / 58px
250+
heading-article · 600 · 72px / 56px / 36px
Article title
heading-h3 · 600 · 48px / 40px / 32px
Heading 3
heading-h4 · 600 · 40px / 36px / 28px
Heading 4
heading-service · 600 · 60px / 48px / 36px
Branding
Text XL
4 styles
text-3xl-medium · 500 · 40px / 32px / 24px
The quick brown fox jumps over the lazy dog
text-xl-bold · 700 · 32px / 29px / 22px
The quick brown fox jumps over the lazy dog
text-xl-semibold · 600 · 32px / 28px / 24px
The quick brown fox jumps over the lazy dog
text-xl-2-semibold · 600 · 24px / 19px
The quick brown fox jumps over the lazy dog
Text LG
6 styles
text-lg-semibold · 600 · 20px / 18px / 16px
The quick brown fox jumps over the lazy dog
text-lg-medium · 500 · 20px / 19px / 17px
The quick brown fox jumps over the lazy dog
text-lg-regular · 400 · 20px / 18px / 16px
The quick brown fox jumps over the lazy dog
text-lg-2-bold · 700 · 18px / 14px / 17px
The quick brown fox jumps over the lazy dog
text-lg-2-medium · 500 · 18px / 16px
The quick brown fox jumps over the lazy dog
text-lg-2-regular · 400 · 18px / 16px
The quick brown fox jumps over the lazy dog
Text Base
3 styles
text-base-semibold · 600 · 16px
The quick brown fox jumps over the lazy dog
text-base-medium · 500 · 16px
The quick brown fox jumps over the lazy dog
text-base-regular · 400 · 16px
The quick brown fox jumps over the lazy dog
Text SM & XS
5 styles
text-sm-semibold · 600 · 14px
The quick brown fox jumps over the lazy dog
text-sm-medium · 500 · 14px
The quick brown fox jumps over the lazy dog
text-sm-regular · 400 · 14px
The quick brown fox jumps over the lazy dog
text-xs-medium · 500 · 12px
The quick brown fox jumps over the lazy dog
text-xs-regular · 400 · 12px
The quick brown fox jumps over the lazy dog
Rich Text (CMS)
4 styles
rich-h3 · 600 · 40px / 34px / 28px
Rich text heading 3
rich-h4 · 600 · 36px / 30px / 26px
Rich text heading 4
rich-paragraph · 400 · 16px / 15px
Rich text paragraph used in project pages.
article-paragraph · 400 · 16px / 15px
Article paragraph used in blog posts.
Colors
Colors live in Assets → Colors. Every section, card and text color points to these, so one change updates the whole site.
Black 900
#0C0407
Black 800
#333333
Black 700
#4C4C4C
Black 600
#666666
Black 500
#808080
Black 400
#999999
Black 100
#E5E5E5
Black 50
#F9F9F9
Black
#000000
White
#FFFFFF
Border
#D6D6D6
Black 50%
#000000 · 50%
Lime
#DCEE68
Buttons
Button components with built-in hover. Set the label and link on each instance in the right panel.
Links & tabs
Nav and footer links roll their letters on hover. Filter tabs switch the blog list and show the Active variant for the selected type.
Cards
CMS cards. Each pulls its content from a collection and has its own hover animation.
I am working with StudioM was a pleasure.
“Their team turned our vision into a digital masterpiece, with stunning design and seamless functionality. We’re thrilled with the results.”
Michael T
Founder @agency
Esther Howard
Founder & CEO
FAQ
Click a question to open or close it. The withAccordion override keeps one question open at a time. Set the variant to Open or Closed on each instance.
Can you work with wireframes or our existing designs?
Yes. Send us your wireframes, brand guidelines or current designs and we’ll build on them, refining the visuals and filling any gaps so the final product feels consistent.
Do you charge for additional revisions?