Instructions. Edit Basalt with confidence.

Basalt ships with 15 pages: Home, Product, Integrations, Pricing, About, Careers, Blog, Blog Post (CMS template), Contact, Style Guide, Instructions, Licenses, Changelog, 404 and Password.

Classes follow Client-First naming. Global classes such as button, card, tag, heading-style-h2 and padding-section-medium are styled once and reused on every page. Colors, fonts and layout sizes are Webflow Variables, so open the Variables panel first when you rebrand.

The Style Guide page shows every global class in one place. Edit a class there and the change carries across the site.

Go to Site settings → Fonts → Google Fonts and add:

• Fraunces, weights 300 to 500, for headings
• Inter Tight, weights 400 to 700, for body copy
• Martian Mono, for labels, buttons and tags

Fraunces needs its variable axes fixed so the headings stay crisp and upright. Select each heading class (heading-style-h1 to h3, text-statement) and add the custom property in the Style panel. Weight 360 and -0.02em tracking are already set on the classes.

Martian Mono is set slightly condensed. On text-style-mono, button, tag and form_label add:

• Navbar menu: an IX3 click interaction on navbar_menu-button toggles is-open on navbar. CSS slides the menu down and turns the two lines into a cross below 991px.
• This is some text inside of a div block.
• FAQ accordion: an IX3 click interaction on faq_trigger toggles is-open on its parent faq_item. CSS animates the height and the plus icon.
• Pricing toggle, code samples and testimonials use the native Webflow Tabs element. Edit tab content in the Navigator, and keep the testimonial tab links in the same order as their panes.

• Rails: one page-rails div sits inside page-wrapper and draws the two vertical lines at the container edges.
• Section lines: add the section-line combo class to a section for a top border with ┌ and ┐ marks where it meets the rails. The marks are the ::before and ::after pseudo-elements.
• Corner frames: add corner-frame to a card or box for four bracket marks. Set the --c custom property on the element to change their color.
• Contained backgrounds: put full-bleed art inside a rail-clip div so it stops at the rails.

The basalt columns on the home hero and the honeycomb behind the CTA are inline SVG in Embed elements, each under Webflow's 50,000 character limit. G3 animates the columns and G17 animates the honeycomb.

• Make them lighter or darker: change opacity on hero_bg (default 0.75) or cta_clip-bg (default 0.7).
• Remove them: delete the Embed inside hero_bg or cta_clip-bg. The script skips any block whose elements are missing.
• Calm the motion: lower columnLift in SETTINGS for smaller columns, or delete the G17 block for a static honeycomb.

Three collections drive the dynamic pages. Every card on Blog, Careers and Integrations is a Collection List bound to them, so new items appear without design work.

• Blog Posts: name, slug, category, excerpt, cover image, author, publish date, read time, featured switch and rich text body. The Blog Post page is the collection template.
• Careers Roles: role name, slug, department (Engineering, Product & Design, Go-to-market), team, location, type, summary and description. Roles list on the Careers page in one Collection List per department, each filtered by that field.
• Integrations: name, slug, category, short description, icon and status. Cards fill the Integrations grid and can be filtered by category.

To add an item, open the CMS panel, pick the collection and select New item.

The logo mark, icons and illustrations are inline SVG inside Embed elements. They inherit color from the text color, so a change to the parent's color restyles them. To swap one, double-click the Embed and paste your own SVG code. Keep fill="currentColor" or stroke="currentColor" to keep the theme colors.