Instructions

CapWise has 30 pages: 26 static pages and 4 CMS templates. Every page shares the Navbar and Footer components, so one edit updates the whole site.

Before you launch, delete the home layouts and pages you don't use, then delete or set to draft the Template pages. Replace the sample firm names, figures and people in the CMS with your own.

Every color, font size, line height, letter spacing and radius is a variable. Open the Variables panel and edit a variable to restyle every element bound to it.

To change the brand color, edit Accent/Primary. To change fonts, add yours in Site settings > Fonts and point the Heading, Body and Badge font variables to them. The Style Guide page shows the type scale, colors, buttons and form fields as they render, so check it after each change.

Shared parts are components. Select an instance and edit its props in the right panel. To change a component everywhere, open it from the Components panel and edit the definition.

Inside Collection Lists, card props are bound to CMS fields. To show a different field, change the binding next to the prop.

Four linked collections hold the firm's content. Add an item in the CMS panel and it shows on every list that uses the collection and gets its own page.

How the collections connect

• Company > Strategy: each portfolio company belongs to one strategy.
• Team member > Strategy: leave it empty for firm-wide roles.
• Strategy > Team Lead and Company > Board Member point to a team member.
• Team member > Board Seats lists the companies that partner sits on.
• Insight > Author points to the team member who wrote it.

Lists sort by Order (Strategies, Team), Year Invested or Wall Order (Portfolio) and Date (Insights). Featured switches choose what the home pages show. Fill in every reference when you add an item, or the related lists and author cards stay empty.

SEO: each collection has an SEO Description field (150 to 160 characters). Template pages use the item Name for the page title and this field for the meta description.

Photos on static pages are soft images: a sharp image with a blurred twin layered on top. The twin fades out as the image scrolls into view, so the photo comes into focus.

• To replace a soft image, replace both files: the sharp image (name.webp) on soft-image_img and its blurred twin (name-blur.webp) on soft-image_blur. Make the twin by blurring a copy of your image heavily and exporting it at the same size.
• Dark sections use a blurred background image (name-bg.webp) under a shade layer. It is decorative, so keep its alt text empty.
• CMS images (covers, portraits, spheres, logos) need one file only.
• Write alt text for every content image in Image settings. Use WebP at twice the display size.

All motion uses native Webflow interactions, with no custom code. Scroll motion is driven by an animate attribute. To reuse a motion, select an element, open Element settings > Custom attributes and add name animate with one of the values below.

Other motion

• Hovers: cards lift 4 px, arrows nudge and card images zoom in. Row background hovers are hover states with a 200 ms transition in the Style panel.
• FAQ: the FAQ Item component opens and closes its answer on click, wherever you place it.
• Mega menu: the Strategies and Pages menus fade in on hover. The mobile menu icon turns into a cross.
• Home 2 stepper: each stage button fills its bar and shows its card. Edit them in the Interactions panel under CapWise · Stage bar fill.
• Tabs: testimonials and the portfolio, team and insights filters are native Tabs. Set their fade times in Tabs settings.
• Reduced motion: visitors who turn on reduced motion see every element in its final state, and loops and parallax stay still.

Every interaction is named CapWise · and its purpose in the Interactions panel, so timings and easing can be changed in one place.

• Contact 1 and Contact 3, the Founders pitch form and the newsletter forms in the Footer and on Insights are native Webflow forms. Submissions appear in Site settings > Forms, where you also set the notification email.
• Contact 2 has no form: it lists contact routes and offices.
• Sign In, Request Access and Reset Password are visual only. Connect them to your own authentication, or rebuild them with Webflow Memberships, before you go live.
• The 401 page is Webflow's password page. It shows when you password protect a page or the site in Page settings or Site settings.
• To edit success and error messages, select the form and switch its state in Element settings.

CapWise uses Geist and Geist Mono, free for commercial use under the SIL Open Font License.

Images were created for CapWise and are cleared for use in the site you build. Company names, logos, people and figures are fictional: replace them with your own. Details for every asset are on the Licenses page.