Docs

How to customise Counsel.

Every repeated element is a component, every list is a CMS collection, every colour is a token. Change the source and the pages follow.

Layers

Layers are named Type: Purpose. Section: Hero, List: Solicitors, Card: Result, Row: Situation, Icon: Arrow Right. A List: layer is a CMS list; its single child is the repeated card. Structural words are fixed: Container, Heading group, Heading row, Columns, Column, Grid, Row, Buttons, Photo, Text.

Components

Button (Primary, Secondary, On dark, Small, Ink, Light) · Card / Status (Default, Glass, Light) · Row / Situation · Card / Practice area · Card / Solicitor (Portrait, Compact, Support) · Card / Result (Numbers, Story) · Card / Review · Card / Receipt · Row / Insight · Card / Office · Card / Step · FAQ / Item · Row / Check · Row / Detail · Chip / Trust · Contact side · Form / Consultation (Default, Phone) · Form / Submit · Navigation (Desktop, Tablet, Phone, Phone open). Edit the master once; every page updates.

CMS collections

Solicitors (with Type: Solicitor or Support staff) · Practice areas (page copy, matters, cost lines, who works on it) · Situations (the Home ledger; each links to a practice area) · Fee categories (Type: Matter or Funding option) · FAQs (Category: Fees, Practice area, General) · Testimonials · Results (Type: Numbers or Story) · Offices · Insights · Trust items (Set: UK, US, Any). Field names say what goes in and where it acts.

Fonts and colours

Text styles: Display, Heading 1 to 4, Lead, Body, Body strong, Body muted, Small, Small strong, Label, Quote, Stat, Price, Button, Nav, Article heading. Colour styles: Background, Surface, Text, Text muted, Line, Accent, Accent deep, Accent tint, Slate, Slate deep, Slate line, Text on dark, Text muted on dark, Open, Closed, Warning. Each has a light and a dark value.

Code components

OpeningHours (hours source and live status), ThemeToggle, MapTheme (dark map), BrushText (underline), Carousel and Settings: Carousel, DatePicker (demo), LoopVideo, MapEmbed, NavScroll, StepNumber. Property controls carry their descriptions.

Forms

The consultation form is a native Framer form. Set where submissions go in Site Settings → Forms. The submit button shows Sending, Sent and Error states from the Form / Submit component.

Regulatory lines

Form disclaimer: Form / Consultation → Disclaimer property. Footer line and badges: Main layout template → Footer → Regulatory row. Fees disclaimer: Fees page → FAQ section. Complaints, Privacy, Terms: their own pages.

Titles, language and theme colour

Every page has its title and description in its page settings (CMS pages use fields, for example {{Name}} - Practice areas - Marlow & Reid). The site language (en-GB) and the browser theme colour for light and dark mode are set in Site Settings → General → Custom code, start of head: change the colour values there if you change the Background tokens. Text links that stand alone (navigation, footer, contact lines, All … links) sit inside a Link: frame that gives them a 44 px tap target; put new links on a frame, not on the text.

Publishing checklist

Replace demo content · set forms destination · add your video or turn Play video off · set favicon and site title · check every regulatory line · run a test booking · publish.