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
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.
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
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.
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 contracttext-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
Card structures
Six ways information is organised inside a card on the homepage and the Google Ads page. Pair one of these with a section layout above. Dotted boxes stand in for the real component.
A Deliverables card
Eyebrow with the red square, heading, dashed rule, then two columns of check rows or numbered steps. The homepage tabs and the Google Ads offer block both use this.
Heading
✓
✓
01
02
div.offer-card_wrapper div.offer-card_head square + caption_new + heading-h5 div.offer-card_get-grid 1fr 1fr, check rows div.offer-card_steps 1fr 1fr, numbered rows
B Lead form card
Social proof first, then the ask. Team circles, heading, one line of reassurance, fields in pairs, three checkbox promises, a full-width submit, a note, and the Clutch row to close.
Heading
Submit
div.gads-hero_card img team-wrapper h2.heading-h4 + div.text-size-regular form.gads-hero_form-grid 1fr 1fr div.gads-hero_badge-row input.gads-hero_submit div.gads-hero_form-note + div.rating_wrapper
C CTA card
A label chip, heading, two lines of body, a row of asterisk features, one button. Two of these side by side is the standard closing section.
Heading
Button
Heading
Button
div (1px outline, dark fill) div.text-pill label h3.heading-h3 + div.text-size-regular div.cta-features asterisk row a.button.is-light
D Testimonial card
Brand name on top, star rating with score, the quote as the largest element, then author name and role. Nothing else. The quote carries the card.
Quote
div (1px stroke, beige fill) div.text-size-small.smallest brand div.rating-score stars + score div.richtext quote div.Heading-H6 + div.text-size-small.smaller author + role
E Result card
Client logo, one line on what changed, and two numbers pinned to the bottom. The gap between headline and numbers flexes, so cards line up in a row regardless of copy length.
What changed
+41%
2.1X
What changed
+18%
-22%
What changed
97%
+9%
div.case-studies-card justify-content: space-between [logo + heading-h5] div.case-studies-card-stats 1.25fr .75fr subheading-1 + text-size-xsmall, twice
F Stat tile
The smallest card. A number and a label, nothing else, at a fixed 2:1 ratio so a row of them reads as tiles. Shorten the label rather than let it wrap.
109%
350
48h
div.stat-in-card flex row, 16px gap div.stat-card 227px max, aspect 2/1 div.stat-card-heading subheading-1 div.text-size-xsmall label
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.1. Nav replaced with the Nav - Dark component instance, header on Section.gradient-bg, page background bound to glued-beige. Fonts: Instrument Sans Semicondensed on the body tag and six classes, and Sundry Condensed on 21 classes, replaced site-wide by IBM Plex Sans, Sundry classes set to weight 700. Heading scale confirmed Major Third on desktop, Minor Third written to 767 and 479 on h1 through h6, H6 documented and placed under H5. Corners squared site-wide on text-pill, caption, cvr-pill, special_btn and cta-btn. Labels restyled as an 8px red square plus JetBrains Mono caps. All page dividers dashed 1px #d7d5b2, divider demo reduced to that single style. text-pill set to 14px caps on red, one instance kept. caption_new set to caps. Button combo family documented, button.is-text restyled as underlined text, gads-hero_submit removed from the grid. Components section removed. Structure gained page-wrapper, main-wrapper and the three containers, container-small set to 500px with width 100%. Base swatches bound to variables via sg_sw-* classes. Layouts section added: five section arrangements plus six card structures from the homepage and Google Ads page, all with breakpoints. Assets section added: rating row with the Clutch shield, asterisk row with the red asterisk, button pair, 24 client logos from brand-grid, five certifications from Sticky Tab #8, Teams CMS grid bound to photo, name and position, plus the Clutch badges, CVR chart and team circles at 0.3x. New variable glued-dark-brown. New utility text-color-white. Chrome responsive at 991, 767 and 479.
Open for the next pass: delete the Not yet variables block under Colors and add the glued-dark-brown swatch to the Base row; place the testimonial card from Div Block 406 in Assets; bind the remaining sg_ hex values (label ink, wire borders, divider color, dark fills) to variables; the fa-* classes on /free-audit-new are still undocumented; the Section Library page is not yet linked from here; the Client-First utility sections (text-style, text-weight, text-align, max-width, padding, margin) are not built; Disable indexing still needs switching on in Page Settings.