Ironclaw Webflow template
Style guide
Colors, typography, buttons and global classes. Every class here is linked to a variable, so changing a variable updates the whole site.
[ 01 Colors ]
Foreground
--color--foreground · #f4f4f1
Black
--color--black · #38342a
Primary
--color--primary · #bff747
Surface
--color--surface · #fbfbf9
Surface Alt
--color--surface-alt · #e9e8e2
[ 02 Typography ]
heading-style-display · Anton
Display heading
Block Quote
Body text uses Inter Tight at 1rem with a 150% line height. It keeps long reads comfortable on every screen, from case study stories and blog articles to service descriptions, and pairs with Anton headings for a bold, confident contrast.
heading-style-h1 · Anton
Heading one
heading-style-h2 · Anton
Heading two
heading-style-h3 · Inter Tight 500
Heading three for card titles
text-style-eyebrow
Brand strategy & identity
text-style-tag
[ Our work ]
text-size-large · Inter Tight
From first strategy session to final launch asset, we shape brands that look sharp, sound confident and grow with you.
text-size-regular · Inter Tight
Positioning, audience research and messaging that give your brand a clear reason to exist and a voice people remember.
[ 03 Buttons ]
button · button is-dark (+ button_icon is-primary) · button-pill
[ 04 HTML tags ]