Template documentation
Setting up Counsel
Everything you need to turn this demo into your firm’s site, in the order most people do it. This page is hidden from search engines; delete it before launch or keep it as an internal reference.
01 — Start
Duplicate, then rename
Remix the template into your workspace. Rename the firm in three places: the Logo text in the Navigation component, the wordmark and copyright in the Advisory layout footer, and the site title and description in Site settings. Every page uses the Advisory layout, so the header and footer only need changing once.
02 — Brand
Colours and type
Colours live in nine colour styles: Paper, Surface, Rule, Mist, Ink, Signal, Signal tint, Night and Night line. Signal is the only accent; change it and every button, link, label and diagram highlight follows. Type uses text styles built on Instrument Serif (headings), Geist (text) and Geist Mono (labels). Swap a font in the style and the whole site updates. The Style guide page shows every style in use.
03 — Content
Services
The three services are pages under /services. The homepage list uses the Service Row component: select a row and edit Index, Title, Summary, Duration and Link in the right-hand panel. Keep each row’s Title the same as the service page’s breadcrumb so visitors land where they expect.
04 — Content
Case studies and insights
Both live in the CMS. Case studies have Title, Client type, Sector, Service, Summary, Challenge, Approach, Outcome (illustrative), Duration, Cover, Date and Featured. The homepage shows the three most recent Featured items: the newest large on the left, the next two on the right. Insights have Title, Excerpt, Category, Author, Date, Reading time, Cover and Body; the homepage shows the newest as the lead story and the next four as an index. Replace every sample item before launch. They describe a fictional firm.
05 — Graphics
Clarity Diagram and cover plates
The hero graphic is the Clarity Diagram component. Edit its five input labels, the outcome and the caption from the right-hand panel. Wide and Compact set the size; the Static versions have no motion. Case study and insight covers are original diagram plates made for this template and are yours to use on your site. Any landscape image works in their place: the frames crop to fill, so a photo swaps in without layout changes.
06 — Motion
Motion and accessibility
The hero diagram resolves once on load (about 1.05 s) and stays still. Headings, rows and process steps ease in over 450 to 600 ms as they enter the screen, starting at least 60% visible so text never depends on animation. Buttons and rows respond on hover in about 200 ms, and links show the browser focus ring for keyboard users. Reduced motion is on in Site settings, so visitors who ask their device for less motion see the settled layout. To turn a single effect off, select the layer and remove its Appear effect.
07 — Forms
Contact form and booking
Name, email, question and consent are required, and the email field is checked in the browser. Nothing reaches an inbox until you connect a destination: select the form and add an email or webhook in its settings. Until then, the note under the button says so, and the button’s success and error states read “Demo form: not delivered” and “Not sent: demo form”. Once connected, verify the destination (Framer emails a confirmation for email destinations), change the note, set the Submit Button’s Variant 3 and Variant 4 labels to your own thank-you and error messages, publish, and send one test. The booking area on the contact page is a placeholder for a Cal.com or Calendly embed, or delete it and point the Book a call buttons at your booking page.
08 — Launch
Before you publish
Replace sample content and the fictional disclaimer, set your email address in the footer, closing section and contact page, add your own social image in Site settings, check page titles and descriptions, and delete the Style guide and Setup pages and their footer links. Counsel has 15 pages, including the two CMS detail templates, and two CMS collections with 12 items. Framer’s pricing page lists the Basic site plan at 30 pages, 2 CMS collections and 1,000 CMS items, and a custom domain needs a paid site plan. Limits change, so check framer.com/pricing before you buy.
09 — Rights
Fonts and assets
Instrument Serif, Geist and Geist Mono are open-source fonts under the SIL Open Font License and are served by Framer. The diagram plates, cover images and portrait placeholders were drawn for this template. There are no third-party photos, logos or testimonials to license or remove.