Style Guide
Every color, size and radius in this template is a Webflow Variable, and every class below is bound to one. Change a variable once and the whole site follows.
Twenty-two tokens, light and on dark.
Every fill, border and text color in the template is a Theme Colors variable that points at a raw color in the Base collection. The last four are what the dark sections use, shown on their real background.
Ten roles, one typeface.
Six heading levels and four body sizes, plus the tags themselves. Every text on the site uses one of these, so the type scale never drifts.
Ag
Ag
Ag
Ag
Ag
Ag
Unlimited requests, one at a time, delivered in days instead of weeks.
A sentence with a text link inside it.
- Unlimited design requests
- One active request at a time
- Send a request
- Get the first draft in days
They picked up our design language in a week, and revisions almost stopped.
Classes used inside the Legals CMS content: legal-heading, legal-text, legal-list, legal-list-item and legal-strong. Keep this card: it stops Clean Up from removing classes that only live in CMS content.
Effective Date: September 26, 2026
1. Section heading
Body copy in legal documents wraps evenly and sits in the secondary text color.
- List item with a bold lead-in.
- A second point in the list.
Spacing and radius.
Every gap, padding and corner comes from these. The values that shrink on smaller screens do so through variable modes, so nothing is ever set per breakpoint.
Ten steps for every gap on the site. 2X Large, 3X Large and 4X Large shrink on smaller screens.
The container width and the padding of every section. The dashed lines sit on the section and container edges.
Eight corner sizes. Round is a large fixed value, so pills stay pills at any height.
One component, one hover.
Every button is the Button component with four variants. On hover the brand color fills in from the bottom while the label and arrow roll up, in one IX3 timeline that reverses on hover out. The form buttons and social icons use the same motion.
Two icon sets, one line weight.
Service, process, benefit, contact and social icons are Phosphor Icons. The arrow in buttons and cards is from Feather Icons. Both are MIT licensed SVGs. Icons that sit on dark cards carry a light layer that fades in with the card.
