Typography
Headings
Styles
These are your first impressions.
Big, grounded, made to hold weight — just like your boldest ideas.
Use them to set the tone, not whisper it.
Big, grounded, made to hold weight — just like your boldest ideas.
Use them to set the tone, not whisper it.
heading-style-h0
Heading H0
All H1 Headings
Heading H1
heading-style-h1
Heading H1
All H2 Headings
Heading H2
heading-style-h2
Heading H2
All H3 Headings
Heading H3
heading-style-h3
Heading H3
All H4 Headings
Heading H4
heading-style-h4
Heading H4
All H5 Headings
Heading H5
heading-style-h5
Heading H5
All H6 Headings
Heading H6
heading-style-h6
Heading H6
Body
Styles
Built for brains, not boredom.
Designed to be read, not just scanned.
This is where your message finds its rhythm and breathes a little.
Designed to be read, not just scanned.
This is where your message finds its rhythm and breathes a little.
text-size-large
We’re rattling through sections faster than a skeleton in roller skates. Every layout clicks together like perfect phalanges. Sure, it’s a little bony now, but soon it’ll have muscle, skin, and maybe even a stylish hat.
text-size-medium
We’re rattling through sections faster than a skeleton in roller skates. Every layout clicks together like perfect phalanges. Sure, it’s a little bony now, but soon it’ll have muscle, skin, and maybe even a stylish hat.
text-size-small
We’re rattling through sections faster than a skeleton in roller skates. Every layout clicks together like perfect phalanges. Sure, it’s a little bony now, but soon it’ll have muscle, skin, and maybe even a stylish hat.
UI
Styles
Labels, buttons, microcopy — the quiet engineers.
Always on time, always aligned.
Not flashy, but you’d miss them if they vanished.
Always on time, always aligned.
Not flashy, but you’d miss them if they vanished.
text-button-large
text-button-small
text-label-large
Faster than a skeleton
text-label-lsmall
Faster than a skeleton
Labels
Variants
Small words, big impact — labels guide the flow.
Consistent, precise, and always reliable.
They do the heavy lifting without making a scene.
Consistent, precise, and always reliable.
They do the heavy lifting without making a scene.
label
Label
label
is-icon
label
is-outline
Label
label
is-outline
is-icon
label
is-dark
Label
HTML
Text Styles
The root of it all — quiet rules shaping every word.
From paragraphs to pre tags, they set the tone and spacing.
Get them right, and the whole skeleton stands taller.
From paragraphs to pre tags, they set the tone and spacing.
Get them right, and the whole skeleton stands taller.
All Paragraphs
Skeletons don’t rush — and neither do we. Our wireframes are carefully assembled, each rib in its right place, every vertebra aligned. Soon, we’ll dress it in design muscle, but for now, it’s all about the pure, unshakable structure.
All Links
Text LinkAll Ordered Lists
- Built on a solid spine of good ideas
- No fluff, just marrow-deep essentials
- Dead serious about good design
All Unordered Lists
- BYQ Studio: where every pixel has a backbone
- Holding it together with ribcage precision
- Polished to the skull, sharp to the eye
All Block Quotes
“We stripped it to the bones. Turns out, that’s all we needed.”
Text Styling
Looks
The wardrobe department for your words.
Dress them in italics, mute them for quiet moments.
Every style tells a little story.
Dress them in italics, mute them for quiet moments.
Every style tells a little story.
text-style-strikethrough
text-style-strikethrough
text-style-italic
text-style-italic
text-style-muted
text-style-muted
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-link
text-style-link
text-style-quote
Sample text is being used as a placeholder.
text-style-2lines
Skeletons don’t rush - and neither do we. Our wireframes are carefully assembled, each rib in its right place, every vertebra aligned. It’s the backbone of our process, the marrow of our creativity. Soon, we’ll dress it in design muscle, but for now, it’s all about the pure, unshakable structure.
text-style-2lines
Skeletons don’t rush - and neither do we. Our wireframes are carefully assembled, each rib in its right place, every vertebra aligned. It’s the backbone of our process, the marrow of our creativity. Soon, we’ll dress it in design muscle, but for now, it’s all about the pure, unshakable structure.
Text Weights
Variants
Some words deserve a louder voice.
Others, just a soft breath.
Text weights help your message speak in the right tone.
Others, just a soft breath.
Text weights help your message speak in the right tone.
text-weight-black
text-weight-black
text-weight-xbold
text-weight-xbold
text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light
text-weight-xlight
text-weight-xlight
text-weight-thin
text-weight-thin
Text Alignements
Positions
Every sentence needs a stage.
Alignment decides where it stands.
Balance the page, and the words will do the rest.
Alignment decides where it stands.
Balance the page, and the words will do the rest.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Colors
Color
Neutral
The unsung scaffolding.
They hold the structure, define the contrast, and let everything else shine.
Quiet doesn’t mean boring — it means essential.
They hold the structure, define the contrast, and let everything else shine.
Quiet doesn’t mean boring — it means essential.
background-color-light
background-color-light-88
background-color-light-64
background-color-light-48
background-color-light-32
background-color-light-16
background-color-light-8
background-color-light-4
background-color-dark
background-color-dark-88
background-color-dark-64
background-color-dark-48
background-color-dark-32
background-color-dark-16
background-color-dark-8
background-color-dark-4
Color
Background
The air your content breathes
These tones shape atmosphere without demanding attention.
They make space — not noise.
These tones shape atmosphere without demanding attention.
They make space — not noise.
background-color-one
background-color-two
background-color-three
background-color-four
Color
Accent
Where the brand gets bold
These are the flavors.
The punch. The subtle nod or loud statement. Pick your mood, make it yours.
These are the flavors.
The punch. The subtle nod or loud statement. Pick your mood, make it yours.
background-color-accent
Color
UI
For those ‘hey, pay attention’ moments.
Error red. Confirm green.
System signals that guide, warn, or say “you’re good to go.”
Error red. Confirm green.
System signals that guide, warn, or say “you’re good to go.”
background-color-error
background-color-link-primary
background-color-transparent
Buttons
Button
Base
Tap me. Click me. Hover me.
Primary, secondary, ghost — whatever their flavor, buttons do one job: move people forward. These are styled for clarity, not vanity.
Primary, secondary, ghost — whatever their flavor, buttons do one job: move people forward. These are styled for clarity, not vanity.
Button
Circle
When square is too much.
Small, circular buttons for quick actions or icon triggers.
Minimal footprint, max intention.
Small, circular buttons for quick actions or icon triggers.
Minimal footprint, max intention.
Button
Text
Links with a little extra flair.
Pair text with an icon to guide clicks, hint at action, or just look sharp.
Small in size, big in clarity
Pair text with an icon to guide clicks, hint at action, or just look sharp.
Small in size, big in clarity
Icons
Icons
Image
For image-based icons and logos.
Control the size of icons added as images, keeping them consistent, and perfectly scaled.
From tiny details to bold statement icons, they ensure visual balance across the design.
Control the size of icons added as images, keeping them consistent, and perfectly scaled.
From tiny details to bold statement icons, they ensure visual balance across the design.
Icon height
Great for icons that aren’t in a 1:1 aspect ratio. Control the height - the width will adjust automatically.
icon-height-small
icon-height-medium
icon-height-large
icon-height-xlarge
icon-height-huge
Icon 1x1
Perfect for icons with a 1:1 aspect ratio. Height and width stay equal for a consistent, balanced look.
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
icon-1x1-huge
Icons
HTML
For icons added via HTML embeds.
hese classes control the size of SVG or code-based icons, ensuring they stay crisp.
From subtle indicators to bold visuals, they keep your interface sharp and consistent.
hese classes control the size of SVG or code-based icons, ensuring they stay crisp.
From subtle indicators to bold visuals, they keep your interface sharp and consistent.
icon-embed-small
icon-embed-medium
icon-embed-large
icon-embed-xlarge
icon-embed-huge
Webflow Native
Form
Inputs
The most polite way to ask.
Text fields for names, emails, secrets and confessions.
Includes focus, hover, error - and every “state” in between.
Text fields for names, emails, secrets and confessions.
Includes focus, hover, error - and every “state” in between.
form_component
Rich Text
Formatted
From clean paragraphs to eye-catching callouts
Sharp, consistent, and ready for any story you need to tell.
Perfect for articles, blog posts, and detailed content with personality.
Sharp, consistent, and ready for any story you need to tell.
Perfect for articles, blog posts, and detailed content with personality.
rich-text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Structure
Wrappers
Core Structure
The backbone of every layout.
These wrappers keep content aligned, breathing room consistent, and structure rock-solid.
From page-wide containers to global paddings, they hold everything in place.
These wrappers keep content aligned, breathing room consistent, and structure rock-solid.
From page-wide containers to global paddings, they hold everything in place.
page-wrapper
Outermost parent of all elements on the page. This Div Block wraps every element on the page.
main-wrapper
The main content of the page. Use a <main> HTML tag that wraps all or most of our website content sections.
container-small
This is some text inside of a div block.
container-large
This is some text inside of a div block.
padding-global
Global horizontal spacing. This class manages the left and right padding of a page's content.
padding-section-small
Add this class to your "padding-global" to add small vertical padding to the section.
padding-section-medium
Add this class to your "padding-global" to add medium vertical padding to the section.
padding-section-large
Add this class to your "padding-global" to add large vertical padding to the section.
button-group
Used to wrap to buttons next to each other and aligned to the left.
button-group
is-flex-center
Used to wrap to buttons next to each other in a centered layout.
Max Width
Classes
Keeps your content from stretching too far.
Max width classes lock in comfortable reading lines and balanced layouts.
From wide hero sections to tight content blocks, they set the limits.
Max width classes lock in comfortable reading lines and balanced layouts.
From wide hero sections to tight content blocks, they set the limits.
max-width-full
Full max-width
max-width-full-tablet
Full max-width on tablet
max-width-full-mobile-landscape
Full max-width on mobile landscape
max-width-full-mobile-portrait
Full max-width on mobile portrait
max-width-tiny
3 columns max-width
max-width-xsmall
4 columns max-width
max-width-small
5 columns max-width
max-width-medium
6 columns max-width
max-width-large
7 columns max-width
max-width-xlarge
8 columns max-width
max-width-huge
10 columns max-width
Spacings
Paddings
Variants
The breathing room of your layout.
Padding classes create consistent spacing from edge to content, keeping designs open and readable.
From global page paddings to section-specific tweaks, they set the rhythm of the page.
Padding classes create consistent spacing from edge to content, keeping designs open and readable.
From global page paddings to section-specific tweaks, they set the rhythm of the page.
Direction Classes
Add this class to your div block wrapper to control where padding is applied, then pair it with a combo size class to set the amount.
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Size Classes
Once your direction class is set, add a size class to define how much padding to apply.
padding-none
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
Margin
Variants
The space outside your elements.
Margin classes create consistent gaps between sections and components.
From subtle breathing room to bold separation, they shape how content flows on the page.
Margin classes create consistent gaps between sections and components.
From subtle breathing room to bold separation, they shape how content flows on the page.
Direction Classes
Add this class to your div block wrapper to control where margin is applied, then pair it with a combo size class to set the amount.
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
Once your direction class is set, add a size class to define how much margin to apply.
margin-none
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
Spacers
Variants
Purpose-built gaps for flexibility.
Spacer elements create quick, adjustable separation between components.
From tiny nudges to large breaks, they give you precise control over vertical space.
Spacer elements create quick, adjustable separation between components.
From tiny nudges to large breaks, they give you precise control over vertical space.
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
Utility
Essentials
Classes
Small but essential style helpers.
Classes for quick alignment, spacing, and visibility tweaks.
Perfect for those “just-right” adjustments anywhere.
Classes for quick alignment, spacing, and visibility tweaks.
Perfect for those “just-right” adjustments anywhere.
hide
this class hides the element on all breakpoints
hide-tablet
this class hides the element on tablet and below
hide-mobile-landscape
this class hides the element on mobile landscape and below
hide-mobile-portrait
this class hides the element on mobile portrait
overflow-visible
this class sets overflow to visble
overflow-hidden
this class sets overflow to hidden
overflow-auto
this class sets overflow to auto
overflow-scroll
this class sets overflow to scroll
pointer-events-auto
this class sets pointer events to auto
pointer-events-none
this class sets pointer events to noe
layer
this class makes element absolute within first relative parent element
spacing-clean
this class sets all margins and paddings to 0
align-center
this class centers the element by giving it auto side margins
z-index-1
this class sets z-index to 1
z-index-2
this class sets z-index to 2
z-index-mega
this class sets z-index to 9999
inherit-color
this class forces all descendants to inherit the color property from their parent element instead of using their own default or other applied colors
aspect-ratio-square
this class sets element aspect ration to 1x1
aspect-ratio-portrait
this class sets element aspect ration to 2x3
aspect-ratio-landscape
this class sets element aspect ration to 3x2
aspect-ratio-widescreen
this class sets element aspect ration to 16x9
theme-dark
Sets theme to dark. Can be applied to whole page, sections or specific elements
image-fit-cover
Makes image fit 100% width and height of it's parent element with fit cover