v1 · 14 Sep 2026

Internal reference

Digital Socios Style Guide

Every page published to digitalsocios.com 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.

Light surface

sg_ never ships on a marketing page

Structure Typography Colors Spacing Utilities Buttons Assets Layouts Rules

Structure

Every section nests the same three classes. Build the shell first, then drop components inside.

Shell

section

padding-global

container-large

Content sits here

.section > .padding-global > .container-large > [your content]

Shell classes

CLASS

VALUE

NOTE

.container-large

1180px max, centered, width 100%

No breakpoint overrides. Default for every section.

.container-large-1

1180px max, centered, min-width 0

Duplicate of container-large. Do not use in new work.

.padding-global

24px left and right

Matches the Globals/Gutter variable.

.section

Vertical rhythm wrapper

Combos: padding-s, padding-l, top-padding-l, bottom-padding-l, no-top-padding, bottom-padding-0, wide-section

.padding-section-small / -medium / -large

Section padding scale

Driven by the Section Padding variables: 48 / 96 / 168px

Two class systems live here

This site carries leftovers from the Scion template it was built on. Those classes are Title Case and numbered: Button 2 to 5, Info Card 2 to 4, Service Box Icon 2 to 6, Main Container 2 to 14, Section 2, Stat Card, Container - L / M / XS, Accordion Box 2 to 4 and similar. They are legacy. Do not use them in new work and do not restyle them. Everything documented on this page is the Digital Socios system: lowercase names with an underscore before the child part.

Section families

Named section wrappers already in use: section_home-hero, section_pitch, section_logo-wall, section_reasons, section_faq, section_closer.

Typography

The type system is built for a dark surface. Every class below binds its color to Interface/White or inherits from a dark parent, so the previews sit on black. Put type on a light surface and you must override the color with a combo.

Display Heading

Display Size 64px / line height 1.1em

We fix your website so it ranks on Google and AI answers

Combo available: is-mono

Heading H2

H2 Size 40px / 1.2em / weight 400 / capitalize. Color bound to Interface/White.

we fix your website so it ranks on google and ai answers

This class capitalizes the copy for you. Type it in sentence case in the CMS.

Heading H3

H3 Size 32px / 1.2em / weight 400. Color bound to Interface/White.

We fix your website so it ranks on Google and AI answers

Combos available: is-mono, stat-context

Heading H4

H4 Size 25px / 1.25em / weight 400. Sets no color, so it inherits from its parent.

We fix your website so it ranks on Google and AI answers

Because it inherits, this one is safe on either surface. Combos: is-mono, faded-heading

Heading H5

H5 Size 20px / 1.35em. Card titles.

We fix your website so it ranks on Google and AI answers

Body Text

Body Size 16px / 1.4em. Default body copy.

We clear years of technical debt, optimize your content to get discovered at real volume, and put you in front of buyers who don't know you yet.

Combos available: author, Spline, Badge Title, is-off, code

Badge Text

Badge Size 14px / 1.4em, Typefaces/Badge. Color bound to Interface/White.

Trusted by 450+ Brands

Combos available: is-ink for the dark-on-light treatment, small, bg

Muted Text

This is a report, not a sales pitch.

Two surfaces, not one

The type classes above came from the Scion template and target a dark page. The card classes documented under Assets went the other way: cta-card is a white fill with a #111111 border and a hard shadow, and optin-form_input is #111111 text. On a light section you need is-ink on badge-text, or a combo that sets color, or the copy will not be readable. This split is the single most common way a new page goes wrong.

is-mono is a combo, not a global

It exists on display-heading, heading-h2, heading-h3, heading-h4, text-mark and an is-mono-parent wrapper. Applying the name alone will not resolve. Use the pair.

Type scale

VARIABLE

SIZE

LINE HEIGHT

Typography/Display

64px

1.1em

Typography/H1

51px

1.15em

Typography/H2

40px

1.2em

Typography/H3

32px

1.2em

Typography/H4

25px

1.25em

Typography/H5

20px

1.35em

Typography/Body

16px

1.4em

Typography/Badge

14px

1.4em

Typography/Fine Print

13px

1.4em

H1 has a size variable but no live global class. The only H1-shaped class is hp2_h1, which belongs to the legacy form system. Use Display Heading for page titles.

Colors

One Base collection, fifteen color variables. Every chip below is bound to its variable, not to a hex.

Brand

Colors - Brand/Brand 1
#fe0

Colors - Brand/Brand 2
#1e1e1e

Colors - Brand/Brand 3
#fd0

Colors - Brand/Brand 4
#010101

Interface, solid

Interface/Dark
black

Interface/Dark 2
#121212

Interface/White
#fffdf7

Interface/Hairline
#e4decd

Interface, transparent

Shown on dark. These seven read as nothing on a light surface.

White - Faded, 6%

White - Faded (hover), 12%

White - Border, 10%

Glass BG - Dark, black 25%

Glass BG - White, 15%

Body Text, white 70%

Faded Heading, white 50%

There is an undocumented ink

#111111 appears as a raw hex across the light-surface card classes: cta-card, cta-card_tag, proof-card_title, team-list_image, optin-form_input. It is not in the Base collection. Promote it to a variable before writing any new light-surface component.

Modes

The Base collection carries three modes: Base mode, Mobile Portrait and Mobile Landscape. Confirm the mode before assuming a value.

Yellow is an accent, not a surface

Brand 1 belongs on solid marks: the square on a label, a text-mark highlight, the cta-card_tag chip, one primary CTA per page. It disappears as a 1px line on white, so rules and borders use Hairline or the ink instead.

Spacing, radius and stroke

Spacing comes from variables, not numbers typed into the style panel. Pick the nearest existing value instead of inventing one.

Grid gaps

Tight 12px, Default 24px, Loose 48px

Section padding

Small 48px, Default 96px, Large 168px

Containers

VARIABLE

WIDTH

Containers/Main Container (with gutters)

1248px

Containers/Content - XL

960px

Containers/Content - L

768px

Containers/Content - M

576px

Containers/Content - S

480px

Containers/Content - XS

384px

The .container-large class caps at 1180px, which is the Main Container variable minus the two 24px gutters.

Radius

0. Flat surfaces and full-bleed panels.

Border Radius/Small, 5px. Chips, inputs, small marks.

Border Radius/Default, 10px. Cards.

Buttons/Button X Radius, 54px. Pill buttons only.

Digital Socios card classes bind radius to these variables rather than typing px. The leftover Scion classes carry raw px values. That difference is how you tell the two systems apart in the style panel.

Stroke

1px solid Hairline

Outer edge of a card on the light surface.

1px solid White - Border

Outer edge of a card on a dark surface. Invisible on light.

1px dashed Hairline

Internal rules inside a card. Never an outer edge.

Utilities

Small pieces that show up inside the components. Each one is shown on both surfaces, because most of these classes set no color of their own and take it from the parent.

tag

Light

Our Approach

Dark

Our Approach

One eyebrow per section at most.

trust-badge

Light

★★★★★

Trusted by 450+ Brands

Dark

★★★★★

Trusted by 450+ Brands

trust-badge_stars is the glyph row. It is a child of trust-badge, never used alone.

badges and badge-text

Light, needs the is-ink combo

Technical

Content

SEO

Dark, the default

Technical

Content

SEO

badge-text binds its color to Interface/White, so the light column is deliberately unreadable. That is what happens without is-ink.

bullet-custom

Light

Keyword map with priority tiers

Dark

Keyword map with priority tiers

Check rows are for a flat list. Use steps-list when the content is an ordered sequence.

text-mark

Light

The full plan in your hands before you spend a dollar.

Dark

The full plan in your hands before you spend a dollar.

The yellow highlight. Combo available: is-mono. One phrase per paragraph.

logo-wall

Globant

Hard Rock

Toptal

Hot Wheels

Común

Betr

logo-wall_grid is the frame, logo-wall_logo the cell. Text stands in for the real SVGs here, see the open items note.

optin-form

Light only. optin-form_input is #111111 text on a transparent fill.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Got it. Your SEO report is now in the queue.

That didn't send. Check your details and try again.

form.optin-form_grid > div.optin-form_field > label.optin-form_label + input.optin-form_input

optin-form is the documented form system. The hp2_ classes are a parallel legacy set. Do not mix them.

No divider class exists

There is no divider or rule class on this site. Every rule on this page is a 1px dashed Hairline border on the sg_ chrome. If a marketing page needs a divider, add one global class and document it here.

Buttons

One button global, with combos on top. One primary per section at most.

button

Get My Free Report

button

dark

Get My Free Report

Radius

The button global carries its own radius. Buttons/Button X Radius (54px) is the pill shape and Buttons/Button Height is 48px. Do not set a custom radius on a button.

Legacy button classes

hp2_btn and hp2_nav-cta belong to the legacy hp2 system. Button 2, Button 3, Button 4 and Button 5 are Scion template leftovers. None of them should appear in new work.

Assets

Proof elements pulled from the live site. Each one uses the real global classes, so editing them in the Designer updates this page.

testimonial

Testimonials

★★★★★5.0 RATING

The team brought real strategic clarity, resolved years of technical SEO debt, launched 130+ high-impact content pieces, and helped us outrank much larger competitors.

Abiel Gutiérrez, Founder & CTO @ Común

div.testimonial > div.testimonial_top [testimonial_label + testimonial_rating > testimonial_rating-text] + div.testimonial_quote + div.testimonial_cite

testimonial_face carries the author photo. It is empty here because no asset is bound on this page.

proof-card

Betr · First 30 Days · GA4

+343% revenue from organic search

$5,093

$22,564

Before

After 30 Days

div.proof-card > proof-card_kicker + proof-card_title + proof-card_chart [proof-card_column > proof-card_value + proof-card_bar] + proof-card_axis [proof-card_axis-label × 2]

cta-card

Free Report & 90-Day Plan

Get My Free Report

An in-depth audit of your website plus a senior-handcrafted 90-day plan, free and with no commitment.

Get My Free Report

cta-card and cta-card_tag are the only two classes in this family. The heading, body and button are the shared globals.

steps-list

Strategy

Keyword research, content clusters, and your 90-day plan.

Execution

Senior copywriters produce every piece of content.

Numbered markers only when the content really is a sequence. For a flat list use bullet-custom.

team-list

Andrés

Founder

Javier

Senior SEO Strategist

José

Senior Technical SEO

Gabriela

SEO Strategist

div.team-list > div.team-list_item > team-list_image + team-list_name + team-list_role. team-list_fade masks the last row.

Photos are not bound on this page. The image slots are empty on purpose, see the open items note.

timeline

Days 1 to 30

Technical sprint

Layouts

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.

01 Left text, right image

Hero and feature sections. Stacks to one column at 991px.

Eyebrow

Heading

Body

CTA

Image or form card

.section > .padding-global > .container-large, grid minmax(0,1fr) minmax(280px,520px), 991px and below 1fr

02 Centered text

Statement sections and intros. One column, capped at 750px.

Eyebrow

Heading

Body

CTA

03 Menu left, cards right

Numbered index on the left, panels on the right. The index is sticky on desktop and moves above the panels at 991px. This is the 12 Reasons section.

grid 0.4fr 1fr, 991px and below 1fr with the index above the panels. Classes: section_reasons, reasons_rail-link, reasons_anno-number

04 Centered card

A single panel on its own. Forms, thank-you states, callouts. Capped at 520px.

Card

05 Centered info, grid below

The most common section on the site. Centered heading block, then a grid. Three columns, two at 991px, one at 767px.

Eyebrow

Heading

Item

Card structures

Six ways information is organised inside a card. Pair one with a section layout above.

A Deliverables

steps-list plus bullet-custom

Eyebrow

Heading

Step title and body

Partial match. Digital Socios has the numbered rows (steps-list) and the check rows (bullet-custom) but no single card wrapper that combines them. Build the two halves inside a section, not a card class.

B Lead form

optin-form_grid

Trust row

Heading

Field

Three promises

Submit

Note under button

C CTA card

cta-card, in section_closer

cta-card_tag

Heading

Body

Button

D Testimonial

testimonial

Label + stars + score

Quote, the largest element

Author and role

The closest one-to-one match to the reference. The quote carries the card.

E Result card

proof-card

Kicker, client and source

One-line headline

Before value + bar

After value + bar

Axis labels

Digital Socios builds this as a before-and-after bar chart, not as a logo with two independent metrics. Keep the two-column chart shape.

F Stat tile

No Digital Socios equivalent

There is no stat tile in the Digital Socios system. The only stat-card class on this site is a Scion template leftover and must not be used. Numbers live inside proof-card instead. If a standalone tile is ever needed, add one global class and document it here.

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

No new global classes. Add a combo on an existing global instead. The sg_ prefix on this page is documentation chrome and never appears on a marketing page.

Color through variables only. Never type a hex into a style panel.

Headings use the scale. Never set a custom font size on a heading.

Every section wraps as section, then padding-global, then container-large.

Use the Digital Socios system. Never reach for a Scion template leftover.

Grid columns are yours to change. The parts inside are not.

Anti-patterns

DO NOT

Yellow on solid marks: the label square, a text-mark highlight, one primary CTA.

Yellow as a 1px rule or border. It vanishes on the light surface.

Bind radius to Border Radius/Default or Small.

Typing a px radius into the style panel. That is how you can tell a Scion class from ours.

optin-form for every form.

Mixing optin-form and hp2_ classes in the same form.

Number real sequences with steps-list.

01 / 02 / 03 on a list of benefits. Use bullet-custom for those.

White - Border on dark surfaces only.

Any of the seven transparent variables on the light surface. They read as nothing.

Combo class for a variation.

A new global class. That is how the class list reached its current size.

Display Heading for page titles.

hp2_h1, which belongs to the legacy form system.

Build prompt

Paste above every page request

You are building a page on the Digital Socios Webflow site (site ID 69e67d7de7e53d5093e86f24). Read the 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 variable in the Base collection. No raw hex. 3. Headings use Display Heading and Heading H2 to H5. Body uses Body Text. Chips use Badge Text. 4. Wrap every section as section, then padding-global, then container-large. 5. Never use a Scion template leftover: Title Case names and numbered suffixes such as Button 2, Info Card 3, Main Container 7, Stat Card, Section 2. 6. Use optin-form for forms, never hp2_. 7. 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

v1. Page created at /style-guide-v2 on the light surface, background bound to Colors - Interface/White. New variable Colors - Interface/Hairline (#e4decd) added to Base for every dashed rule. Navbar component instance prepended. Fifteen Base swatches bound to variable IDs through sg_sw-1 to sg_sw-15. Typography documented as Spline Sans Mono for headings and labels, Spline Sans for form fields; Typefaces/Serif recorded as unused. Two class systems documented, with the Scion template leftovers marked legacy. optin-form chosen as the documented form system and hp2_ marked legacy. Card structures A to F audited against live classes: D and E match, B and C match, A is partial, F has no equivalent. No divider class found, recorded as a gap. All sg_ chrome responsive at 991 and 767.

Open for the next pass

Bind real images: team-list_image slots and testimonial_face are empty, and the logo wall uses text stand-ins rather than the six client SVGs. Confirm the mapping between padding-section-small / -medium / -large and the Section Padding variables. Decide whether to add an H1 global class, since the size variable exists but no class carries it. Decide whether the site needs a divider global. Retire container-large-1, which duplicates container-large. Plan the removal of the Scion template classes. Disable indexing still needs switching on in Page Settings.