counsel

Counsel Theme Design System

Direction

Use a calm, authoritative layout that lets clients trust the firm before the first call. Put the practice areas, the attorneys, the way to book a consultation, the costs and the urgent hotline first, followed by proof: years, matters, certified specialists and selected results. Show real people, offices and the city; avoid clichés like gavels on every page, handshake stock photos as the main visual or dramatic courtroom scenes.

Foundations

• Use only the markup and classes supplied by ./theme/views/.
• Use system fonts (classic serif fonts for headings) and the existing --pico-* variables.
• Keep page content within a 1280px maximum width.
• Use an ivory background and header, navy (#0E2A47) for heroes, the footer and dark sections, brass (#7D5F2A) for links and accents on light backgrounds and gold (#C6A15B) only for rules, the first button and text on dark backgrounds, never for text on light backgrounds.
• Use sharp corners, hairline borders and thin gold rules instead of shadows; dark sections show a faint diagonal pinstripe, eyebrows are uppercase and tracked, portraits are grayscale until hovered.

Components

• Hero: a navy hero with an eyebrow naming the firm and city, a short headline, two actions ("Book a consultation" and the practice areas) and a city skyline or building photo as background.
• Figures and badges: cards in the figures layout for founding year, matters, transaction volume and specialists, and in the badges layout with brass line icons for partner-led work, specialists, languages and confidentiality.
• Practice areas: four-column cards with a photo, a short text and a link; each practice area page names the responsible attorney, lists typical matters, answers cost and deadline questions and links a matching insight.
• Attorneys: four-column cards with portraits of the same ratio, the name as title and role, focus, certifications and languages as text; the team size matches the figures.
• Results: figure-style cards with the amount or outcome as title, always followed by the note that prior results don't guarantee a similar outcome.
• Fees: a pricing element with the initial consultation, hourly rates and fixed fees, prices plus VAT.
• Process: a horizontal timeline from contact to resolution.
• Insights: blog pages below the insights page, each with an article, key figures, a vertical step timeline, questions and a call to action that reminds readers it is no legal advice.
• Consultation: a contact form with selects for the practice area and client type, a field for other parties for the conflict check and the matter in brief, plus the fees and a map with office hours, the hotline and directions.
• Footer: office hours with the hotline, practice areas, firm links including careers, imprint and privacy, contact and the disclaimer.
• Firm details: the firm config adds the legal business JSON-LD, the action bar for phones, the top bar with the hotline, the consultation button in the header and the footer disclaimer.