A single source of truth for color, type, and core UI components — built from an audit of the live site's actual Webflow styles and variables (August 2026). This page documents what a consistent system should look like, and calls out where the current site has drifted from it so design and dev can converge on one standard.
A review of the site's Webflow style panel and design-token variables turned up a large amount of one-off, near-duplicate styling built up over years of page-by-page work. None of this is anyone's fault — it's the normal result of shipping fast in Webflow without a shared component reference. This page is that reference, going forward.
The site already has a "Base collection" of 38 color variables in Webflow — good news, since it means a token system exists. The problem is usage: many components reference these variables correctly, but a large number hardcode raw hex/hsla values instead (e.g. card borders using #e3e8ee, #d9d9d9 and hsla(192,16%,94%) for what should be the same border color). Below is the recommended, consolidated palette — built from the existing variables, with duplicates called out.
White
#FFFFFF · --white
Dark (primary text/nav)
#212C42 · --dark
Grey 1
#505E78 · --grey-1
Grey 2
#6C7A92 · --grey-2
Grey 3
#95A0B4 · --grey-3
Grey 4 (borders)
#B0B9CB · --grey-4
Haze (surface bg)
#F8F8F9 · --haze
Card border grey
~#EBECEF · --new-card-grey-border
Use this everywhere
Three separate variables land within a few percent of the same near-black navy. Recommend keeping Dark (#212c42) as the only one and retiring the other two.
Dark
#212C42 · --dark
Keep
Dark Slate Blue
#3C4455 · --dark-slate-blue
Near-duplicate
Grey Contrast to White
#51596C · --grey-contrast-to-white
Near-duplicate
333333 resolves to #505e78, not #333333. Meanwhile the sitewide body tag hardcodes color: #333 directly rather than referencing any variable. Rename or merge this variable so its name matches its value, and point the body tag at a real token.
Grade 4-1 (primary blue)
#4D90FF · --grade-4-1
Primary action color
Grade4-1 Darker
#3380FF · --grade4-1-darker (hover state)
Color 1 (green)
#76C515 · --color-1
Color 2 (orange)
#FF9C11 · --color-2
Color 3 (pink)
#D63E8D · --color-3
Color 4 (violet)
#7058FF · --color-4
Success
#27C93F · --success--fullscreen
Grade 2-2 (error/danger)
#F76240 · --grade-2-2
"Color 1–4" and "Grade N-N" cover much of the same hue range under two unrelated naming schemes (e.g. Color 1 #76c515 vs. Grade 1-1 #a8dc19 are both greens). Recommend picking one naming convention — semantic names (Success, Warning, Info, Brand‑Accent) rather than "Color 1/2/3/4" or "Grade 1-1/1-2" — and mapping every existing usage onto it.
A second variable collection, "StayOnHire Job Colour Pallette," holds 10 hue pairs (fill + border) purpose-built for job status tags in the product UI. This is appropriately scoped and doesn't need consolidating with brand colors — keep it separate, just document it here so it isn't reinvented per page.
1 · Blue
4 · Green
5 · Yellow
7 · Red
The site consistently uses Montserrat as its only typeface (good — keep it), but there is no real heading scale. The Webflow style panel currently has 30+ classes literally named Heading 48 through Heading 90, most defining only one or two properties (a font-size, a font-weight) rather than a complete, reusable style — so headings on different pages that should look identical often don't. One component (.editor-text) even sets font-family: Ubuntu, breaking the typeface entirely. Below is the recommended scale to replace the numbered classes.
50+ button-related classes exist site-wide — .button, .button-2, .banner-button, .cta-button, .start-cta-button, .about-button, .nav-button, five separate .transparent-button variants, and more — each hand-tuned per page/section. Border radius alone ranges across 3px, 4px, 6px, 10px and 20px; font sizes range 11–15px; some use the color token system, others (like .button-2) hardcode #212c42 and white directly. Below is a proposed set of 4 canonical variants that can absorb nearly all of these.
Spec: 8–10px vertical × 20–24px horizontal padding, 8px radius, 500 weight, 13–14px text, 300ms ease transition on background/shadow only.
| Current class (sample) | Radius | Font size | Notes |
|---|---|---|---|
.button | 6px | 12px | Uses token for background |
.button-2 | 6px | 15px | Hardcoded #212c42 / white, no token |
.banner-button | 6px | 12px | Duplicates .button almost exactly |
.start-cta-button | 10px | 14px | Different radius family (10px group) |
.nav-button (combo) | 10px | 12px | Overridden radius vs. base .nav-button (3px) |
.transparent-button ×5 variants | 6–10px | varies | Five near-identical "ghost" button definitions |
.button-cookie | 20px | — | One-off pill icon button, fine to keep as a distinct small utility |
15+ card classes (.card, .card_base, .feature-card, .blog-card, .blog-card-2, .integration-card, .update-card, .expect-card, three separate .pricing-card-N classes, etc.) each redefine border, radius, and shadow slightly differently. Radius alone appears as 5px, 6px, 8px, 10px, and 0.375rem (which is 6px, just expressed differently) across otherwise near-identical cards. Border color is sometimes a token, sometimes #e3e8ee, sometimes #d9d9d9, sometimes an inline hsla().
1px border in the card-border-grey token, 8px radius, subtle shadow, 24px padding.
Every card on the site should be able to trace back to this one base style plus, at most, a content-layout combo class.
Spec: border 1px solid --new-card-grey-border, radius 8px, shadow 0 2px 6px rgba(33,44,66,.06).
Input fields show the same drift as buttons and cards: radius varies (5px on .text-field-8, 6px on .input/.text-field-4, none set on .select-field-2), and border color references four different tokens/hardcoded values across near-identical fields. This section wasn't fully audited in depth (flagged as a follow-up) — the pattern below is a starting baseline.
Spec: 44–48px min-height, 8px radius, 1px border in Grey 4 (#b0b9cb), 13–14px text, 200ms ease transition on border/background.
Padding and margin values across components are mostly ad hoc pixel values rather than pulled from a scale. Recommend standardizing on a 4px-based spacing scale and a 3-step radius scale, and using them for all new/updated components.
| # | Action | Why |
|---|---|---|
| 1 | Adopt the 4 button, 1 card, and 4-level heading patterns above as the only new classes used going forward. | Stops the sprawl from growing further. |
| 2 | Retire the two near-duplicate dark navy variables and the mislabeled 333333 variable. | Removes ambiguity about which "dark" to use. |
| 3 | Sweep hardcoded hex/hsla border and background colors in card, button, and input styles onto the matching variable. | Makes future rebrands/theme changes a token edit, not a page-by-page hunt. |
| 4 | Merge the "Color 1–4" and "Grade N-N" naming schemes into one semantic naming convention. | Two names for the same kind of color is confusing for anyone new to the file. |
| 5 | When a page needs a new button/card/heading variant, check this page first — extend an existing class with a combo class rather than creating a new global class. | This is the single habit that caused the current sprawl. |
| 6 | Do a deeper pass on form fields and navigation/footer components (not fully covered in this first audit). | Same drift pattern is likely present there too. |
This page is unpublished and lives at /ui-library/style-guide for internal reference only. Audited from the site's live Webflow styles and variables on 26 August 2026.