YF Agency · internal reference · published to staging only

Style Guide

Every specimen below uses the real site classes, not copies. What renders here is the live system. If a specimen looks wrong, the system is wrong — fix the class, not this page.

Building a new page

The Home and Approach pages are the reference. A new page is assembled from what they established, in this order:

1 · Page shell. Nav component at the top. If the page opens on a hero over media, set the body and hero attributes from §6 — all of them, or the nav will be unreadable over it.

2 · Sections. Stack .yfapp-sec shells (§5), one ground combo each, alternating light and dark as the design asks. Every section gets data-yf="‹name›".

3 · Heads. .yfapp-head with a .yfeyebrow-row (§4) and a type utility from §5. Copy the eyebrow specimen rather than rebuilding it.

4 · Content. Reach for a layout primitive in §5 before inventing one — column row, split-with-rule, or a linked CMS list. If the content is a card, chip, form, counter, disclosure row or image frame, the component catalogue (§9–§18) already specifies it.

5 · Buttons. Copy a specimen from §3. On a new page that means .yfapp-btn.

6 · Tier block. Add the 992–1919 token block from §6 to the page's embed, or the page jumps straight from desktop to tablet on a laptop.

7 · Focus states. Anything clickable or focusable needs its own :focus-visible rule. There is no site-wide default to inherit — see §11.

8 · Check the traps. §8 before debugging anything visual. Most of what looks like a mystery is on that list.

How to use this

Do — copy an existing specimen before building a new one. It is the fastest way to stay on-system.

Do — bind every size, colour, space and font to a variable. The token tables below are the source of truth; they step automatically per breakpoint, so one binding covers all three.

Do — reuse an existing class before inventing one. Search the class list for the pattern name first, and check §9–§18 for whether the component already exists under another prefix.

Do — let colour inherit. Set it once on the section's ground combo and never again below it.

Don't — type a raw px or hex value into the Designer. If a value isn't in a table below, it either belongs in a variable or it's an exception that needs writing down in §8.

Don't — add a per-section duplicate of an existing pattern (a seventh eyebrow class, an eighth button, a fifth counter). Extend the shared one with a combo class.

Contents

System — the rules that apply everywhere.

• 1 · Variables
• 2 · Typography
• 3 · Buttons
• 4 · Eyebrows
• 5 · Section shell & layout
• 6 · Page shell, hero & nav
• 7 · Motion
• 8 · Exceptions & traps

Component catalogue — what exists, which generation is current, and what is frozen.

• 9 · Cards & tiles
• 10 · Chips & tags
• 11 · Forms & inputs
• 12 · CMS filter UI
• 13 · Footer
• 14 · Stat counters
• 15 · Accordions & disclosure
• 16 · Media & imagery
• 17 · Rails, marquees & sliders
• 18 · Spacing & utility scale

01

Variables

One collection, Base, with three live modes bound to breakpoints. Bind once at main and the value steps on its own — you should almost never need a per-breakpoint override.

Colour

Identical in all three modes — colour does not step.

Solution accents

Per-solution identity colours. Used for the solution stack and CMS-driven accents — never for UI chrome.

Type scale

Spacing

Item sizes

02

Typography

Four families, each bound to a variable. The table is the source of truth — read the family names here, not off the rendered specimens.

Where the four families come from

Rules

Headings — Archivo, weight 700 (500 on tile titles), line-height: 1, letter-spacing 0, no text stroke.

Meta — Sometype Mono, weight 500, line-height: 1, text-transform: uppercase, white-space: nowrap. The nowrap is load-bearing: without it a button label wraps to two lines and changes the button's height.

Body — Inter, weight 400. line-height: 1.2 for captions and stat labels, 1.55 for running text.

Scale specimens

Sizes come from the live variables — resize the canvas and they step.

05

Section shell & layout primitives

Every section is the same three-part shell. Build a new page by stacking these and filling the content slot — do not invent a layout.

Type utilities

Use these instead of styling a heading ad hoc. All are margin: 0, color: inherit, and bound to the scale in §1.

.yfapp-num takes a ground combo of its own — .yfapp-num-onlight (--text--text-light) or .yfapp-num-ondark (--text--text-light-alt) — because a counter is deliberately quieter than body text rather than inheriting it.

Numbered blocks

Added 18 Sep 2026, after an audit found six different ways of presenting a numbered run across the site.

A run of numbered items — process steps, an argument in stages, a list of situations — is always the same three parts, in this order. There is one pattern. Do not invent a second.

Column row

Equal columns under a rule. Wraps to two-up at ≤991 and one-up at ≤767.

Split with a rule

Two or three stacks divided by a hairline: .yfapp-whom-row > .yfapp-whom-col with .yfapp-whom-rule between them. The rule is width:1px; align-self:stretch on desktop and flips to width:100%; height:1px at ≤991, so the same markup serves both axes.

Collection List plumbing

Webflow inserts .w-dyn-list / .w-dyn-items / .w-dyn-item between your styled container and your styled row. They are not yours to class, so the flex context must be handed down through them in CSS or the rows lose their layout:

Tactics link to Solutions through ONE field, not two. The Solution's curated Tactics list is the only place the relationship is edited; saving it auto-fills each tactic's Solution Slug and Curated Order. Every surface reads those two fields — the /solutions chips and the solution template's tactics grid both filter on Solution Slug and sort by Curated Order, which is why their counts agree. The legacy Parent Solution reference is still on the collection for older rows; never filter a list on it, or a page will advertise capabilities another page does not show.

06

Page shell — hero, video and the nav

The nav is a shared component and it reads the page, not the other way round. A page tells it what it is sitting on through attributes; get these wrong and the nav is unreadable over your hero.

The nav is position: fixed

It takes NO space in the flow. Your first section already starts at the very top of the viewport, underneath it. So the nav's height is added to the hero's top padding, never subtracted:

Attribute contract

Glass

Background video

Cover-fit for a 16:9 embed: 56.25vw is the height of a 16:9 box at full width, 177.78vh the width of one at full height, and whichever is larger wins. Repeat the rule under @supports (height:100svh) with the svh units so mobile browser chrome does not letterbox it. Stacking inside the hero is video 0, scrim 1, copy 2 — and the copy needs position: relative to get a z-index at all.

The 992–1919 tier

Webflow has no ≤1439 breakpoint and the 1920 one is not enabled, so a laptop gets desktop values with nowhere to put its own. Solve it once per page in CSS by re-declaring the TOKENS on the section class rather than restating every rule — everything already reads from the tokens, so one block moves the whole page down a tier:

07

Motion

Two families, and they must not be mixed. UI feedback is quick and eased; content transitions are slow and share one curve so overlapping changes read as a single motion.

The 0.45s value is not arbitrary — it matches the project overlay slide, so a tile's title, client logo and solution chips all land at the same instant as the overlay.

08

Exceptions & traps

Documented deviations, and the failure modes that have already cost real time. Read this before debugging anything visual.

Live exceptions

Traps

Lowercase selectors. Webflow publishes class names lowercased. Custom code querying .ProjectOverlay matches nothing; it must be .projectoverlay. The same gap bites when copying markup out of this guide — the Designer name may be capitalised.

Never hand-write a box-shadow containing var(…, fallback). The comma inside var() does not survive Webflow's shadow storage. It fails silently and renders as a solid blob with stretched children. Use real border properties bound to a variable instead.

SVGs are display:inline by default and sit ~4px below their box on the text baseline. The site head carries an icon reset that zeroes line-height on every icon box. Add new icon boxes to that list.

align-items:center cancels negative margins on a full-width flex child. Full-bleed needs align-self:stretch; width:auto.

A CSS border adds height to an auto-height box; box-shadow: inset 0 0 0 1px does not. Pick one per variant family and keep it consistent, or buttons drift apart by 2px.

Webflow forbids a Collection List inside a Link. Nested lists must be siblings of the link, with pointer-events:none so they don't steal clicks.

A nested multi-reference Collection List renders at most five items, silently. See §5 for the join-by-field workaround.

A class applied to no element in the Designer can be stripped from the published CSS. Style script-built elements in an embed, never as a Webflow class.

An inline font-family inside an embed does not make Webflow bundle that font. Only a Webflow style applied to a real element on the page does — §2 documents the fix.

A custom font is matched to its variable by literal family string. --typography--family--meta resolves to Sometype Mono; renaming the uploaded font, or the variable's value, breaks the match silently and everything falls back to a serif.

An empty combo class usually means the styling is on a global of the same name. .sol-card.sol-card--vert and .yfapp-num.yfapp-num-ondark are both empty; the flex-direction and the colour live on the standalone classes. Check before assuming something is broken.

Accordion state is not in CSS. Panels set only overflow:hidden; height is written at runtime. A panel that will not open is a script problem — §15.

There is no site-wide focus style. Exactly one :focus-visible rule exists on the entire site, on a legacy accordion header. Every new interactive element needs its own — §11.

mix-blend-mode: multiply blends an element with its whole subtree. Anything light placed inside the project overlay disappears against the photo — which is why the title, logo and chips are siblings of it, never children.

The Designer canvas runs no scripts, and Preview renders from the Designer's in-memory copy. Changes made through the API do not always reach an already-open Designer session. If something looks unchanged, reload the Designer tab before assuming the change failed.

Open debt — broken

· Dangling variables. Nine variable IDs are referenced by styles but no longer exist in the Base collection, so those declarations are invalid and paint nothing. Affected: .work-card-image, .tac-card, .partner-card-top, .partner-image-wrapper, .card-tactics-item, .footer-block-content, .counter-label, .fs-numbercount_number, .rangeslider_fill, .rangeslider_handle, .text-style-link, .tac-faq, .faq-a-padding, .filter_form, .filter_block_header, .filter_tags_item, .filter_search, and the hover states of .filter_dropdown_toggle / .filter_clear-all / .filter_dropdown_link. Fix by rebinding to a live token or deleting the declaration.

· No focus states. The contact form, the current disclosure toggle and the filter chip remove control are all keyboard-reachable with no visible focus indicator. Highest-impact accessibility item — §11.

· Form validation is unstyled — Webflow's default red and green blocks render against the dark contact section. §11.

· Active filters are invisible below 992px — .filter_tags is hidden at medium, so applied filters cannot be seen or removed individually on tablet or phone. §12.

· .yfhero-vidfit has no centring transform — the hero video is offset unless page CSS supplies one. §16.

· .yfprj-film has no height or ratio and collapses without an intrinsically-sized child. §16.

· Four broken utilities: .hide-mobile-portrait (empty), .show-mobile-portrait (hides forever), .max-width-full-mobile-portrait and .text-style-2lines (empty), plus .text-size-medium.text-weight-bold which sets weight 400. §18.

· Two 301 redirects are still owed for the old Geothermal project slugs.

Open debt — duplication

· Two button generations. .yfapp-btn is the one for new pages; .letstalkemailbutton, .yfabout-btn, .yfwrk-allbtn and .yfcon-submit stay on their pages until touched.

· Two eyebrow generations. .yfeyebrow-* is the consolidation; eight per-section families migrate when their pages are rebuilt.

· Four counter implementations, two of them byte-identical (impactnumbersholder_* and fs-numbercount-4_*). §14.

· Three accordion implementations plus " 2" and " 3" clones of the Finsweet one. §15.

· Six chip/tag variants, including four paste-duplicates of .sol-tag. §10.

· An untrimmed Client-First utility import — roughly 96 classes, about 20 in use. §18.

· Dead classes from the Approach accordion removal, awaiting a sweep: .yfapp-sol-panel · -panelrow · -desc · -tactics · -tactics-tag · -chips · -chip · -chip-label · -dot · -more · -toggle-plus

· Dead classes awaiting a sweep: .projectsolutioncollection · .collection-item-28 · .heading-55 · .finsweetholder · .fs-numbercount-4_* · .page-wrapper · .yf-page-padding · .who-marquee-outer-copy · .yfval-rail-items · .ZFooter2Col · .GridNumber · .faq-body

· Roughly 122 Webflow default-named leftovers (Div Block 142, Paragraph 31, Image 77) and ~380 singleton class names.

· The 1920 breakpoint is still not enabled; §6 documents the CSS tier that stands in for it. Base still holds Desktop values.

· Stray variable mode zz-probe-nobp needs deleting by hand.

· .yfwrk-allbtn-icon / -art are the shared button arrow primitives despite the section prefix — rename to .yfbtn-* in one move, updating the icon reset list and hover selectors together.

Cleared

· Sometype Mono is uploaded and self-hosted as a variable font (wght 400–700). Meta type no longer falls back to a serif. See §2.

09

Cards & tiles

Eight card families exist. Three are current, five are legacy and should not be extended. Every current card is a flex column whose spacing comes from the section gap tokens — a card never invents a padding value.

Which family to use

Canonical anatomy

.yfsolp-cards        flex column, row-gap --padding--section--gap-lg (8rem)
  .yfsolp-card       flex column, row-gap --padding--section--gap (4rem), min-height 41.875rem
    .yfsolp-top      .yfsolp-tl + .yfsolp-tr
    .yfsolp-bot
    .yfsolp-stage    absolute inset 0, z-index 1, pointer-events none, display none

No padding, no border, no radius, no background on the card itself. A card is a spacing container; the ground comes from the section it sits in (§5).

.yfsolp-stage ships display:none and is switched on by script. It is inert by design — do not "fix" it in the Designer.

Real values, current families

Breakpoints that actually exist

· .yfins-list 3 → 2 (medium) → 1 column (small); .yfins-cell gains margin:auto at small to centre the single column; .yfins-card caps at 30rem.

· .work-card-wrapper aspect-ratio 2/3 → 1/1 at small.

· .proj-card is the only card that restacks row → column (medium).

· .yfsolp-* has zero breakpoint overrides. That is the target: if a new card needs a medium rule, ask first whether a token would do it instead.

10

Chips & tags

A chip is a dot plus a label in a row. It is not a pill: the current chip has no background, no border and no radius. Six variants exist; two are the same component under different prefixes, and the rest are legacy pills.

Canonical anatomy

.yfsolp-tactics / .yfapp-sol-chips   flex, wrap, gap --item-sizes--icon--distance (0.625rem)
  .yfsolp-chip / .yfapp-sol-chip     flex, padding 0.25rem 0, gap 0.625rem, no bg/border/radius
    .yfsolp-chip-dotwrap             1rem square, centring box
      .yfsolp-chip-dot               0.625rem circle, 1px border, flex 0 0 auto
    .yfsolp-chip-label               Sometype Mono, --typography--size--meta, lh 1.2, 400, nowrap

Chip labels are not uppercase. Unlike every other Meta element on the site, .yfsolp-chip-label and .yfapp-sol-chip-label set no text-transform and weight 400, not 500. Solution names are proper nouns and are set as written. This is an intentional exception to the §2 Meta rule.

.yfapp-sol-chip is a byte-identical copy of .yfsolp-chip for the app shell. Two prefixes, one component — consolidate when either page is next touched.

Legacy pills — do not extend

11

Forms & inputs

One current form system, .yfcon-*, on the Contact page. Four legacy sets survive on drafts and Finsweet demo surfaces. Fields are flat, square and transparent on the dark ground — there is no filled input anywhere on this site.

Anatomy

.yfcon-section     flex column, padding --padding--section--tb / --left-right, bg --brand--dark
  .yfcon-row       grid 1fr 1fr        (medium: 1fr)
    .yfcon-col-right
      .yfcon-formwrap        width 100%, margin-bottom 0   [Webflow Form Block]
        .yfcon-form          flex column, row-gap --padding--section--gap-sm (2rem)
          .yfcon-field       × n
          .yfcon-field.yfcon-field-area   [textarea]
          .yfcon-submit
            .yfcon-submit-icon > .yfcon-submit-art
            .yfcon-submit-label

Field

Submit button

The submit is a full member of the §3 button family: padding --padding--button--bg--top-bottom / --padding--button--bg--left-right, gap --item-sizes--icon--distance, radius 1.875rem, ground --brand--y, label --brand--dark, Sometype Mono --typography--size--meta weight 500 uppercase, icon box 1.25rem × --item-sizes--icon--size, art 0.8125 × 0.625rem. It differs from .yfapp-btn only in prefix — consolidate when Contact is next rebuilt.

Which system is which

There is no .yfcon-fieldlabel. .yfcon-label exists but is a value label, not bound to a field — inputs currently carry no visible label element, only placeholders.

12

CMS filter UI

One coherent Finsweet-based filtering system, used on the Work listing. It is entirely snake_case and off the token naming, but it works and it is the only filter UI on the site — document it, do not rewrite it piecemeal.

Skeleton

.filter_layout            flex column, gap 2rem
  .filter_content         flex column, padding 2rem 2rem 4rem, bg --backgrounds--pure-white
    .filter_grid          grid auto 1fr        (medium: flex · small: 1fr)
      .filter_form_block  border-right 1px --lines--separator   (medium: display none)
        .filter_form      grid 1fr, row-gap 1rem, radius 0.375rem
          .filter_block
            .filter_block_header   padding 1rem, borders top+bottom 1px separator
            .filter_list-wrapper > .filter_list > .checkbox_field
      .filter_list        [results column]
  .filter_tags            flex wrap            (medium: display none)
  .filter_results         flex, min-height 3rem, justify flex-end (medium: space-between)
  .filter_empty           flex column centred, min-height 12rem, padding 3rem

Controls

Dropdown. .filter_dropdown_toggle min-width 12rem, padding 0.5rem 4rem 0.5rem 1.2rem, radius 0.25rem, ground --backgrounds--pure-white. Icon 1rem with 1.2rem right margin. Links: padding 0.5rem 2rem 0.5rem 1.5rem, 1px bottom border in white.

Search. .filter_search min-height 3rem, padding-left 3.25rem to clear the magnifier background-image, transparent ground, 1px borders.

Results counter. .filter_results_span is a hardcoded #111 chip with #a1a1a1 text — off-token, min-width 1.5rem, radius 0.25rem.

Facet count. .filter_facet-count margin-left auto, Sometype Mono 0.875rem.

Empty and loading. .filter_empty colour #b7b7b7, 4rem icon. An exhausted facet is .is-list-emptyfacet → opacity: 0.5 and nothing else. A loading item is .is-list-loading → opacity 0; translateY(2rem).

13

Footer

The footer is the second global surface after the nav (§6). One current implementation, .yffoot-*; one dead PascalCase generation still sitting in the class list.

Anatomy

.yffoot-footer          flex column, border-top 1px --lines--separator, bg --brand--dark
                        padding --padding--section--tb / --left-right, gap --padding--section--gap
  .yffoot-main          flex row, col-gap --padding--section--gap-lg     (medium: column)
    .yffoot-logo-col > .yffoot-logo > .yffoot-logo-art
    .yffoot-cols-wrap   margin-left auto, align-items flex-end          (medium: full width, left)
      .yffoot-cols      grid repeat(4, minmax(0, max-content))          (medium: 1fr 1fr)
        .yffoot-col     flex column, row-gap --padding--section--gap-sm
          .yffoot-col-title
          .yffoot-links > .yffoot-link  (+ combo .yffoot-sol-link)
  .yffoot-note
  .yffoot-codeholder    display:none

Type

Breakpoints

medium — .yffoot-main becomes a column; .yffoot-cols-wrap drops its auto margin and goes full width, left-aligned; .yffoot-cols 4 → 2 columns; logo 12rem → 8rem; section padding 8rem/8rem → 5rem/4rem.

small — padding 4rem/2rem, gaps tighten to 2rem. The grid stays at two columns; it never goes to one.

14

Stat counters

Four parallel implementations of the same idea. .yfimp-* is the one to use; the other three are a Finsweet component, a renamed copy of that same component, and a set of one-off numbers.

Canonical anatomy

.yfimp-section        flex column, padding --padding--section--tb / --left-right, bg --brand--dark
  .yfimp-eyebrowbar   height --padding--section--gap, overflow hidden
    .yfimp-eyebrowrow > .yfimp-eyebrowicon > .yfimp-eyebrowart + .yfimp-eyebrow
  .yfimp-row          flex, space-between, border-top 1px --lines--separator,
                      padding-block --padding--section--gap
    .yfimp-passthrough    display:contents   [CMS list wrapper made invisible to layout]
      .yfimp-num          flex column, row-gap --padding--section--gap-sm, flex 0 1 15rem
        .yfimp-numrow     flex, align-items: baseline
          .yfimp-numvalue Unbounded, --typography--size--numbers, --brand--y, lh 1, nowrap
          .yfimp-numlabel Sometype Mono, --typography--size--meta, --brand--light, lh 1.2

align-items: baseline on .yfimp-numrow is load-bearing. The figure is Unbounded at 4.625rem and the suffix is Sometype Mono at 1rem; anything other than baseline alignment makes the suffix float.

.yfimp-passthrough uses display: contents so a Webflow Collection List wrapper disappears from the flex layout and the items become direct children of .yfimp-row. Reuse this whenever a CMS list needs to participate in its parent's flex or grid — it is cleaner than restyling the wrapper.

Breakpoints

medium — .yfimp-row switches to flex-start + wrap, col-gap --padding--section--gap, row-gap 3.4375rem; .yfimp-num fixes at 14.375rem.

small — back to space-between, col-gap 0, .yfimp-num width 45.5% — a deliberate two-up grid.

15

Accordions & disclosure

Three accordion implementations plus one current toggle primitive. Read the state note first — it explains why none of these can be debugged from CSS alone.

The four sets

Only one breakpoint override exists across all four sets: .faq2_arrow shrinks from 2rem to 1.5rem at small. Everything else is breakpoint-agnostic, which is correct — disclosure rows should be fluid, not stepped.

16

Media & imagery

One pattern, used everywhere current: a frame that owns the ratio and clips, holding a fill that covers it. Never put the ratio on the image itself.

.frame   position:relative; overflow:hidden; width:100%; aspect-ratio: W / H;
  .fill  display:block; width:100%; height:100%; object-fit:cover;

The ratio register

Thirty-one classes set an aspect-ratio. Before inventing a new one, use the ratio that already means what you want.

object-fit convention. cover for photography and any image that fills a frame (20 classes). contain for logos, marks, icons and map artwork — anything whose edges must not be cropped (11 classes). fill appears twice and both are legacy; do not add a third.

17

Rails, marquees & sliders

Three unrelated mechanisms share this vocabulary. Knowing which one you are looking at saves the most time here.

1 · CSS marquee — the only self-contained one

.who-marquee-outer clips (min-height 6.25rem, overflow-x/y: hidden); .who-marquee-track is display:flex; width:max-content; animation: who-scroll 30s linear infinite; will-change:transform. No script. Copy this when you need a logo strip. Note the base class also sets overflow:visible before the axis-specific rules — dead shorthand, harmless, worth removing.

2 · "Rails" that are not rails

.yfval-rail-cell and .yfval-rail-items are byte-identical duplicates; keep one. .yfval-gridwrap is width: 49.875rem; max-width: 50% — the only place on the site where a rem width and a percentage cap are used together, and the reason the block looks fixed until the viewport drops below ~100rem.

3 · Webflow slider and the range control

The native slider set (.slider min/max-height 720px, .slide-nav, .SliderNavWrap, .SliderNumberWrap, .hero-slide) plus the whole our-partners-logo-slider-* family (~20 classes, px units, Lato, !important backgrounds) is legacy. Only two classes in it carry any breakpoint rule at all.

.rangeslider_* is a bespoke control: track 96% × 0.25rem, radius 999rem, ground #4c4c4c; handle 1rem square, radius 999rem, cursor: grab; native input display:none. Both the fill and the handle paint from a deleted variable, so the control currently renders with no colour on either — listed in §8.

18

Spacing & utility scale

A Client-First utility layer arrived with an old import and never left. It is not the system — §1 variables are — but roughly a hundred of these classes exist, a few dozen are genuinely in use, and the scale has been locally modified, so it has to be written down.

padding-* and margin-* (identical scales)

The other scales

max-width-* — xxsmall 12 · xsmall 16 · small 20 · medium 32 · large 48 · xlarge 64 · xxlarge 80 (rem, each with width:100%). No huge/xhuge/xxhuge exist.

text-size-* — tiny 0.75 · small 0.875 · regular 1 · medium 1.25 · large 1.5rem (1.25rem at small). No xlarge.

text-weight-* — light 300 · normal 400 · medium 500 · semibold 600 · bold 700 · xbold 800.

heading-* — xsmall 0.875/1.5 · small 1.25 (1rem) · medium 2 (1.5) · large 3 (2) · xlarge 4rem (2.5rem at small), all weight 700.

container-* — small 48 · medium 64 · large 80rem · wide 90vw · nav 100%. page-padding 2.5rem → 1.25rem at small.

Visibility — hide-tablet, hide-mobile-landscape, show-tablet, show-mobile-landscape behave as named.