Law & Advisory · Free
Chambers
A firm site with quiet gravity: charcoal and cream, editorial serif, practice areas laid out like a well-organized argument, consultation without friction.

Fraunces + InterCharcoal authority, editorial restraint
prompt.txt — paste as your first message
You are designing the site for a firm whose clients arrive by referral. Build a complete one-page site for a fictional practice called Chambers ("Considered counsel."). Write all copy — measured, precise, confident without adjectives; no "passionate about justice" filler, no lorem ipsum.
ART DIRECTION — charcoal authority. Deep charcoal #221F1C for the hero and closing band, warm cream #F5F1E8 for body sections, ink #201D19, bronze #8A6D3B strictly for hairlines, numerals, and one underline. Wide margins, hairline rules, generous line-height. Fonts via Google Fonts: "Fraunces" 500/600 for headlines (editorial serif), "Inter" 400 for body. No icons anywhere — typography and rules carry the design. Mood: a letterhead you keep.
LAYOUT, top to bottom:
1. Nav — serif wordmark, Practice / People / Contact anchors, a cream-outlined "Request a consultation" button.
2. Hero — charcoal: a large serif headline in cream, one sentence stating who the firm serves and how, the consultation CTA, and one line of quiet proof ("Serving founders and families since 2011").
3. Practice areas — on cream: four numbered entries (01–04) laid out editorially — area name in serif, two lines of plain-English scope, "typical engagements" note. Numbers in bronze.
4. How engagements work — three steps in a row (A conversation, A clear scope and fee, The work) with two sentences each; fee transparency stated plainly.
5. People — two or three profiles: name, role, bar/credential line, and one restrained human sentence.
6. A single testimonial — one client quote set large in serif, attributed by initials and matter type.
7. Perspective — three short article teasers (title + one line + "3 min read") to signal a thinking firm.
8. Consultation — a labeled form (name, email, matter type select, brief description) with a note on confidentiality and that the form needs connecting; response-time promise stated.
9. Footer — address, admissions line, required disclaimers set small and honest.
MOTION: nearly none, deliberately. Sections fade at 400ms; the bronze underline under the hero headline draws once (600ms) after load; hovers are color shifts only, no lifts. Respect prefers-reduced-motion: fully static.
RULES: responsive at 375 / 768 / 1280. Semantic HTML, labeled form fields, focus states, body contrast at least 7:1 on cream. Include the small professional-rules disclaimer ("attorney advertising" style) in the footer; invent no case results or statistics. All art is typography and CSS rules — no images, no libraries. Complete without JavaScript.Why these prompts work
Every template follows the same five-part structure, so the result is consistent every time:
01
Role + output contract
What to build and the quality bar — no lorem ipsum, real copy.
02
Art direction
Exact hex palette, Google-Fonts pairing, and mood keywords.
03
Layout spec
Section by section, top to bottom — nothing left to chance.
04
Motion spec
Entrances, scroll reveals, hovers, and timing curves.
05
Rules
Responsive breakpoints, accessibility, and what the AI must not do.
Works great for
Each industry page carries this style pre-tailored — your services, prices and palette already written in: