Glued Style Guide
Every page published to getglued.co is built from the parts below. Previews on this page use the live global classes, so editing a class in the Designer updates this guide too.
v2 · 14 Sep 2026
Internal reference
Structure
Every section nests the same three classes. Build the shell first, then drop components inside.
section
padding-global
container-large
Content sits here
.section .padding-global .container-large [your content]
CLASS
DESKTOP
767PX
479PX
.section
100px top and bottom
100px
49 / 40px
.section-minumun
100px
30px
30px
.padding-global
40px sides
20px
16px
.container-large
1280px, flex, centered
same
same
.container-medium
1000px
same
same
.container-small
800px
same
same
.section.dark-bg adds the #160a08 fill. Switch inner text to a dark theme variable when you use it.
Read before using Client-First docs
Glued class names overlap with Finsweet Client-First and the values differ. Where they collide, the Glued value wins.
CLASS
CLIENT-FIRST
GLUED, USE THIS
container-large
80rem, block
1280px, flex, centered
container-medium
64rem
1000px
container-small
48rem
800px
text-size-large
24px
18px
text-size-medium
20px
16px
text-size-small
14px
15px
text-size-tiny
12px
named text-size-xsmall
padding-section-*
3 / 5 / 8rem
not used
padding-global
responsive rem
40 / 20 / 16px
Container classes
page-wrapper
Outermost wrapper. Carries a 92px top padding for the fixed nav.
main-wrapper
Wraps all page content between nav and footer. No styling of its own.
container-small
800px max, centered. Long-form copy.
container-medium
1000px max, centered. FAQ and narrower sections.
container-large
1280px max, centered, flex. The default for every section.
Typography
Four families, one job each. Exposure for display headings, Sundry Condensed for emphasis, IBM Plex Sans for body, JetBrains Mono for data and labels.
heading-h1
We craft sticky digital narratives that help sell
767px: 72px / 89% / 0 479px: 40px / 120% / -1.6px
heading-h2
We craft sticky digital narratives that help sell
767px: 54px / 95% 479px: 32px / 120%
heading-h3
We craft sticky digital narratives that help sell
767px: 40px 479px: 33px
heading-h4
We craft sticky digital narratives that help sell
767px: 36px 479px: 30px
heading-h5
We craft sticky digital narratives that help sell
767px: 24px
subheading-1
subheading-2
subheading-3
subheading-4
30px / 140% / 600 Built for Shopify brands doing 1M and up
26px / 140% / 600 Built for Shopify brands doing 1M and up
24px / 130% / 600 Built for Shopify brands doing 1M and up
14px / 95% / 700 Built for Shopify brands doing 1M and up
text-size-large
text-size-regular
text-size-small
text-size-xsmall
18px / 150%, section intros. We rebuild the pages that carry your revenue, then prove the lift with a test.
16px / 150%, default body. We rebuild the pages that carry your revenue, then prove the lift with a test.
15px / 150%, card body and form notes. We rebuild the pages that carry your revenue, then prove the lift with a test.
12px / 132% MONO, average project lift across 350 brands
text-size-regular and text-size-medium are both 16px today. Pick text-size-regular for new work.
caption_new
Conversion audit
What you get
Sentence case, one category word or short phrase. Not a sentence, not uppercase.
text-link_underline
On Glued this class is an absolutely positioned 2px bar that lives inside text-link_anim. Applying it to a text node will position that text absolutely. Use the pair, never the bar alone.
a.text-link_anim div.text-size-regular the label div.text-link_underline the 2px bar
heading-h6
We craft sticky digital narratives that help sell
Mobile: 1rem. Unlike h1 to h5 this one does not capitalize, so copy renders as typed.
Type scale
CLASS
DESKTOP, RATIO 1.25
MOBILE, RATIO 1.2
heading-h1
3.815rem
2.488rem
heading-h2
3.052rem
2.074rem
heading-h3
2.441rem
1.728rem
heading-h4
1.953rem
1.44rem
heading-h5
1.563rem
1.2rem
heading-h6
1.25rem
1rem
Mobile values apply at 767px and below. Line height is 1.15 throughout.
Colors
Five base colors. Everything else is a semantic alias pointing at one of them. Bind to the alias so a theme change propagates.
Base collection
Red is an accent, not a surface. It belongs on step numbers, checkmarks, the 12px offer square, logo marks and one primary CTA per page.
Theme aliases
SLOT
LIGHT
BRAND
DARK
background
beige
red
black
text
black
beige
beige
button-background
black
black
beige
button-text
beige
beige
black
button-bg-hover
dark-beige
#cf2d00
#242422
logo
red
black
red
alt-text
red
beige
red
The color/ set is the default theme: beige background, black text, glued-white button text, glued-white alt-text.
Not yet variables
Live in production but unbound. Do not introduce new ones. Flag anything you need and it gets promoted at the weekly pass.
Spacing, radius and stroke
Vertical rhythm comes from spacer classes, not margins typed into the style panel.
spacer-*
spacer-xsmall 8px
spacer-small 16px
spacer-medium 32px
spacer-large 48px
spacer-xxlarge 80px
spacer-huge 96px
spacer-xhuge 128px
spacer-regular, 25px height, is legacy. Avoid it in new builds.
Gap values in use
Pick the nearest existing value instead of inventing one.
Radius
0
Offer card, service card, form card. Flat beige surfaces.
8px
Icon chip, how-do-it-card
10px
Stat card, method card, text pill
12px
Case study card, dark review card
100px
Caption pill, button underline decor, avatars
Stroke
none
Any card with a beige or dark-beige fill. Fill and stroke do not combine.
1px solid
Review card, icon chip, outlined pair
1.5px plus 10px hard shadow
Form card only. The page single loudest object.
1px dashed
Internal rules inside cards and FAQ rows. Never an outer edge.
Utilities
Small pieces that show up inside every component.
text-pill
caption
gads-hero_badge
109% average lift
✓
Free mockups✓
48 hour turnaround✓
No contract2X
text-pill is Sundry Condensed 24px / 800 on dark-beige, 10px radius. A number plus a short label.
gads-hero_badge is the only uppercase treatment in the system, mono 12px / 700 / 0.06em. Three per row maximum.
gads-hero_check-box is a 15px square with a 1.5px ink border and a red glyph. Square, not round.
caption is the 180px round token at 40px / 800. One per section at most.
offer-card_get-head
offer-card_step
01
We audit the pages that carry revenue
Home, collection, product, cart.
Check rows are for a flat list of deliverables. Step rows are for an ordered process. Numbered markers only when the content really is a sequence.
card-divider
dashed rules
Dashed 1px #d7d5b2, inside a beige card
gads-hero_logo-grid
3 columns, 32px column gap, 24px row gap. Two rows of three is the standard shape. Logos cap at 30px tall and 130px wide with brightness(0) at 0.8 opacity. Change the column count freely. Never restore original logo colors.
form_field
gads-hero_input
form-label
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
div.form-label.gads-hero_form-label input.form_field.gads-hero_input
form_field base is transparent fill, 12px vertical padding, 1px #bab6aa underline. The gads-hero_input combo darkens it to 1.5px #383838 for the white form card. Labels are a combo on form-label, never on their own.
Assets
Proof elements pulled from the live homepage. Each one uses the real global classes, so editing them in the Designer updates this page.
rating_wrapper
Clutch rating row. Sits above the hero heading and again inside the form card.
div.rating_wrapper.left div.rating-shield HTML embed, Clutch SVG div.text-size-regular.Semibold.black
The shield is an HTML embed on the homepage. Copy the embed across rather than rebuilding it.
cta-features
Asterisk discipline row. Used under the hero and inside both CTA cards.
Strategy
Design
Copywriting
Development
div.cta-features div.cta-feature div.svg.black HTML embed, red asterisk div.caption_new.small.caps.black.bold
buttons_combo
The standard hero button pair: solid primary plus outlined secondary.
div.buttons_combo a.button a.button.is-outlined.dark
Image assets
Loaded below from the site asset library.
Andrés Esquivel
Founder
Brock Hamilton
Co-Founder
Jonathan Cruz
Project Manager
Lucía Shi
Creative Director
Ximena de la Fuente
Senior Strategist
Mariana Alas
Project Manager
Ale Santamaría
UX/UI Designer
Daniela Henríquez
UI & Brand Designer
Roberto Azmitia
Senior Designer
Mariana Valladares
Digital Strategist
Daniel Figueroa
Digital Strategist
Daniela Gómez
Digital Strategist
Frank Quevedo
Senior Developer
Valeria Martell
Senior Designer
Daniela Chilliseo
Researcher
Rocío Rubí
Researcher
Rodrigo Romero
Digital Strategist
Eduardo Argueta
Digital Strategist
Layouts
Five section arrangements already used across the site. Dotted boxes stand in for whatever component goes inside. Resize the window to see how each one stacks on tablet and phone.
01 Left text, right image
Hero and feature sections. Text leads, media supports. Stacks to one column at 991px, image drops below the text.
Heading
CTA
Image or form card
.section > .padding-global > .container-large grid-template-columns: minmax(0,1fr) minmax(360px,520px) 991px and below: 1fr
02 Centered text
Statement sections and intros. One column, capped at 750px. Already single-column, so mobile only tightens the type.
Heading
CTA
.section > .padding-global > .container-medium text-align: center max-width: 750px, auto margins
03 Menu left, cards right
Numbered index on the left, stacked panels on the right. The index is sticky on desktop. At 991px the index moves above the panels and loses the sticky.
.section > .padding-global > .container-large grid-template-columns: 0.4fr 1fr 991px and below: 1fr, index above panels
04 Centered card
A single panel on its own. Forms, thank-you states, callouts. Capped at 520px, goes full width under that.
Card
.section > .padding-global > .container-medium card max-width 520px, auto margins
05 Centered info, grid below
The most common section on the site. Centered heading block, then a grid. Three columns on desktop, two at 991px, one at 767px.
Heading
Item
Item
Item
.section > .padding-global > .container-large heading block: max-width 750px, centered grid: 1fr 1fr 1fr 991px: 1fr 1fr 767px: 1fr
Rules and anti-patterns
Six rules that let pages ship without a review round, then the things that make a page look off-brand even when every class is correct.
The six rules
1
No new global classes. Add a combo class on an existing global instead. The sg_ prefix on this page is documentation chrome and is never used on marketing pages.
2
Color through variables only. Never type a hex into a style panel.
3
Headings use the scale. Never set a custom font size on a heading.
4
Every section wraps as section, then padding-global, then container-large.
5
Cards keep their fill and stroke. A beige card has no stroke. An outlined card has no fill.
6
Grid columns are yours to change. The parts inside are not.
Anti-patterns
DO
DO NOT
Beige fill with no stroke, or an outlined card with no fill
Beige fill plus a 1px stroke. That combination is nowhere on the site.
One radius per card type, matching the radius table
Applying 12px to every card. Radius separates card types here.
Red on step numbers, checks, the offer square, one CTA
Red headings, red body copy, red card fills, two red CTAs in one section.
caption_new in sentence case
A tracked-out uppercase eyebrow above every heading.
Number real sequences only
01 / 02 / 03 on a list of benefits. Use check rows for those.
One hard shadow, on the form card
Soft grey drop shadows anywhere. The system has one shadow and it is a hard offset.
Flatten logos with brightness(0) at 0.8 opacity
Full-color logo files. Mixed logo colors break the section.
Let the heading class handle capitalization
Retyping copy in Title Case or ALL CAPS in the CMS field.
Combo class for a variation
A new global class. That is how the class list reached its current size.
Build prompt
You are building a page on the Glued Webflow site (site ID 686c03adca1129cc3148a278). Read the Glued Style Guide at /style-guide-v2 before you build anything, and follow it. Hard constraints: 1. Use only global classes documented in that guide. Do not create new global classes. For a variation, add a combo class on an existing global. Never use sg_ classes, they are documentation chrome. 2. Bind every color to a Webflow variable in the Base collection. No raw hex. 3. Headings use heading-h1 to heading-h5. Body uses text-size-large, text-size-regular, text-size-small, text-size-xsmall. Condensed labels use subheading-1 to subheading-4. 4. Wrap every section as: section, then padding-global, then container-large. 5. Reuse the documented components. You may change grid column count, alignment and order. Do not change padding, fill, stroke or radius on a card. 6. Follow the anti-patterns list. If a request conflicts with the guide, say so and stop rather than inventing a pattern. Then report which components you used and which combo classes you added.
Changelog
2026-09-14
v2. Rebuilt in Webflow on the Client-First style guide framework. Chrome namespaced sg_. All previews bind to live global classes. Corrections against v1: container-medium and container-small do exist; the button is-* combo family is documented; offer-card_wrapper.is-dark noted; outlined-cards_rule removed as it never existed; text-link_underline documented as a positioned bar, not a text underline.
Open for the next pass: the fa-* classes on /free-audit-new are still undocumented; the Section Library page built 11 Sep holds assembled sections rather than components and should be linked from here; the loose hexes under Colors need promoting to variables; responsive breakpoints on the sg_ chrome are not set yet.