Every colour on the site resolves to one of these seven tokens. Nothing else is allowed.
color/black
black
color/white
white
color/grey-100
#eee
color/grey-500
#9a9a9a
color/accent
#adff2f
color/border
black
color/transparent
transparent
These are the classes the live site actually uses. Every value is bound to a token. This block is the regression fixture: screenshot it at 1440 and 390 before and after every phase.
.hero / display/2xl 4.75rem, leading/display, tracking/display, 400 / tiny display/sm 2.75rem
Metamensaje
heading-style-display (was .big) / display/xl 4.5rem, leading/display, tracking/display, 400 / tiny display/md 3.2rem
Metamensaje
.medium / size/7xl 2.25rem, leading/lead, tracking/heading, 400 / tiny size/3xl 1.5rem
The core systems behind modern brands
.body.is-large (was .body.big) / size/4xl 1.75rem, leading/lead, tracking/lead, 400 / tiny size/3xl 1.5rem
The core systems behind modern brands
.eyebrow-big / size/4xl 1.75rem, leading/lead, tracking/subhead, 600 / tiny size/2xl 1.375rem
The core systems behind modern brands
.rich-text / size/xl 1.25rem / tiny size/lg 1.125rem
Editorial-grade websites your team can update without filing a ticket.
.body / size/lg 1.125rem, tracking/text, 400 / tiny leading/body-mobile 1.325, size flat
Editorial-grade websites your team can update without filing a ticket.
.caption / size/base 1rem, leading/lead / tiny size/md 0.875rem
Editorial-grade websites your team can update without filing a ticket.
.body.small / size/base 1rem / tiny flat, the two-class chain outranks .body tiny
Editorial-grade websites your team can update without filing a ticket.
.footer-info / size/md 0.875rem, 400 / tiny size/sm 0.75rem
.separator_label (was .separator-text) / size/base 1rem, leading/tight, 600 / tiny size/md 0.875rem
Selected work
.project-card_meta (was .project-meta) / size/base 1rem, leading/heading, 600 / tiny size/md 0.875rem
.uppercase / size/sm 0.75rem, leading/caps, tracking/none / tiny flat
Web design and development
.uppercase.is-tag / font/mono, size/xs 0.6875rem, leading/tight, tracking/mono / tiny flat
Webflow
.marquee_label (was .marquee-text) / font/mono, size/sm 0.75rem, leading/tight, 400 / tiny flat
Strategy, design, engineering
Rich-text body copy at size/xl, 1.25rem. Dropping to size/lg, 1.125rem, at tiny.
Rich-text body copy at size/xl, 1.25rem. Dropping to size/lg, 1.125rem, at tiny.
Rich-text body copy at size/xl, 1.25rem. Dropping to size/lg, 1.125rem, at tiny.
Rich-text body copy at size/xl, 1.25rem. Dropping to size/lg, 1.125rem, at tiny.
Rich-text body copy at size/xl, 1.25rem. Dropping to size/lg, 1.125rem, at tiny.
Rich-text body copy at size/xl, 1.25rem. Dropping to size/lg, 1.125rem, at tiny.
The vocabulary for all new work. Each class mirrors a legacy class in section 2 and carries the same tokens and the same responsive overrides, so old and new render identically. Applying them here is also what stops Webflow deleting them as unused.
heading-style-h1 / mirrors .hero / 4.75rem, tiny 2.75rem
Metamensaje
heading-style-h2 / mirrors .medium, in use on 12 elements / 2.25rem, tiny 1.5rem
The core systems behind modern brands
heading-style-h3 / mirrors the h2 tag / 2rem, tiny flat
The core systems behind modern brands
text-size-large / mirrors .body.is-large / 1.75rem, tiny 1.5rem
Editorial-grade websites your team can update without filing a ticket.
text-size-medium / mirrors .rich-text / 1.25rem, tiny 1.125rem
Editorial-grade websites your team can update without filing a ticket.
text-size-regular / mirrors .body / 1.125rem, tiny flat size with leading/body-mobile
Editorial-grade websites your team can update without filing a ticket.
text-size-small / mirrors .caption, in use on 2 elements / 1rem, tiny 0.875rem
Editorial-grade websites your team can update without filing a ticket.
text-size-tiny / mirrors .footer-info, in use on 3 elements / 0.875rem, tiny 0.75rem
Buenos Aires, Argentina
text-style-allcaps / mirrors .uppercase / 0.75rem, tiny flat
Web design and development
text-style-mono / mirrors .uppercase.is-tag / 0.6875rem, tiny flat
Webflow, Shopify, Klaviyo
text-weight-semibold
Weight 600 at the inherited size
text-color-secondary / color/grey-500
Secondary text, no opacity
heading-style-h4 / mirrors the h4 tag / 1.5rem, tiny flat / replaced the retired .body.semibold.plus
Brand Strategy and Identity
heading-style-display / was .big / 4.5rem, medium and tiny 3.2rem
Metamensaje
text-color-primary / color/black
Primary text, pairs with text-style-mono on tags
Two competing button trees, both kept and both bound. .button-group is deprecated for new work. .button.is-secondary is the true secondary: transparent fill, 2px black rule, inverts to solid black on hover. Note that .button.is-outline is misnamed — it is a solid white fill with no border, and .button.is-outline.alt is the dark-context ghost; both are renaming candidates.
.button
Start a projectLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text Link.button.is-outline
Start a project.button.is-outline.alt
Start a project.button.rounded
Start a project.button.small
Start a project.button.is-legal
Start a project.button-group (deprecated)
Start a project.button-group.small (deprecated)
Start a project.button-group.alt (deprecated)
Start a project.button-group.alt.outline (deprecated)
Start a project.button-underline
Start a projectBorder widths are border/hairline 1px and border/rule 2px. Four widths on the site still sit outside the token set: 0.5px on the footer menu divider, 1.5px on .project-index-url, 4px on .nav-link at tiny, and 8px on the footer top border.
.separator_component (was .separator)
.separator_component.is-light
.index-row
.card-item
.offer-row
Twenty-three tokens on a 4px cadence. The name is the pixel value at a 16px root. space/44 is new: it exists because two places on the site use 2.75rem and rounding them to 3rem would have been a visible change.
space/2 = 0.125rem
space/4 = 0.25rem
space/6 = 0.375rem
space/8 = 0.5rem
space/12 = 0.75rem
space/16 = 1rem
space/18 = 1.125rem
space/20 = 1.25rem
space/24 = 1.5rem
space/28 = 1.75rem
space/32 = 2rem
space/40 = 2.5rem
space/44 = 2.75rem (new)
space/48 = 3rem
space/56 = 3.5rem
space/64 = 4rem
space/72 = 4.5rem
space/80 = 5rem
space/88 = 5.5rem
space/96 = 6rem
space/128 = 8rem
space/144 = 9rem
space/160 = 10rem