Style Guide

This style guide page contains styles and components used through the library.

Components

NavbarsHerosGalleriesFeaturesFAQsCTAsGridsTextBlogContactServicesNewslettersFooters

Info

Style GuideChangelogSupportLicenses

Typography

The different text sizes used throughout the site.

studio-global_heading
3xlarge-size

This is a heading.

studio-global_heading
2xlarge-size

This is a heading.

studio-global_heading
2xlarge-size

This is a heading.

studio-global_heading
large-size

This is a heading.

studio-global_heading
medium-size

This is a heading.

studio-global_heading
small-size

This is a heading.

studio-global_heading
xsmall-size
This is a heading.
studio-global_heading
2xsmall-size
This is a heading.
studio-global_paragraph
large-size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

studio-global_paragraph
medium-size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

studio-global_paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

studio-global_paragraph
small-size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

studio-link
Text Link

Rich Text

studio-blog_richtext

I'm a New York based Illustrator.

I'm a New York based Illustrator.

Hi, I'm Macey Harris. I work with a variety of consumer facing brands from around the world to help them produce better campaigns and speak to their customers better .

I've won 12 Top Design Awards and 3 Best Awwwards for my work. If you want to find our more about me and what I can do for you, contact me here.

Latest press

  • Adobe Design Achievement
  • Brand New
  • Communication Arts
  1. Brand New
  2. Communication Arts
Latest press

More about Webflow

An image with caption

Colors

The different weights of greys and colors used throughout the website.

black-color
light-black-color
soft-black-color
dark-grey-color
grey-color
soft-grey-color
faint-grey-color
back-grey-color
white-color
accent-color

Buttons

The different button styles used across the library.

studio-button
Get in touch
studio-button
grey-color
Cancel
studio-button
white-color
Cancel
studio-button
outline-color
Get in touch
studio-button
grey_outline-color
Get in touch
studio-button
white_outline-color
Get in touch
studio-link_arrow
Text Link
studio-link_arrow
white-color
Text Link

Grids

Different grid layouts used across the library.

studio-4colgrid
studio-3colgrid
studio-2colgrid

Spacers

Spacer elements using the 8-pt grid to give sections more room to breathe.

studio-spacer
16-size
studio-spacer
24-size
studio-spacer
32-size
studio-spacer
48-size
studio-spacer
64-size
studio-spacer
80-size
studio-spacer
96-size
studio-spacer
128-size

Forms

The different form elements used across the library.

studio-contact_fieldinput
studio-contact_formdropdown
studio-contact_fieldarea
studio-contact_radioelement
&
studio-contact_radiobutton
studio-contact_checkelement
&
studio-contact_checkbox
Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.

© Studio Library. Built by Nikolai Bain. Powered by Webflow.

© Studio Library. Built by Nikolai Bain. Powered by Webflow.