Unternehmens-Website (Professionell)

Create a corporate professional website that earns trust through clarity, evidence and calm structure — the kind of site a cautious buyer reads carefully before picking up the phone.

Brief

Subject: Hartwell & Rowe — an employment law firm in Chicago advising companies with 50 to 5,000 staff

Use specific, credible content: practice areas or services, named partners, founding year, outcomes, office address, accreditations. Avoid vague claims like "innovative solutions" — every claim should be checkable

Design Requirements

Colour: Primary (#1d3557), secondary (#9a6b2f) used sparingly, background (#ffffff), near-black text

Typography: Source Serif 4 for headings, a highly readable sans for body (16–18px); a clear, conservative hierarchy

Layout: 12-column grid, max-width 1200px, generous whitespace, left-aligned text

Imagery: Restrained and consistent — real photography if you have it, otherwise architectural or abstract compositions in CSS/SVG

Trust signals: Accreditations, client sectors, statistics with qualifiers, named people

Sections to Include

Header — Logo, navigation with one dropdown for services, phone number and a "Book a consultation" button

Hero — A clear statement of who they help and how, a primary CTA and a secondary link, on a composed visual that fits the subject

Services — Services as a structured list or grid with short, specific descriptions — not identical icon cards

About / Mission — Two columns: image plus a short history with founding year and values in plain language

Statistics Bar — 3–4 facts (years, clients, matters, recognition), each with a short qualifier

Team — Partners with portrait (photo or monogram), name, role, focus area and LinkedIn link

Testimonials — Client sectors or logos plus one or two substantive quotes

Contact CTA — Short form (name, company, email, topic) next to office details

Footer — Contact info, quick links, accreditations, legal links

Technical Details

Restrained: no flashy animation; hover is a colour or underline change

Placeholder photos from https://picsum.photos/seed/// are random stock unrelated to the subject — use them only for incidental images. The hero and anything that must show the subject are built in CSS/inline SVG instead (e.g. a typographic hero on a deep colour field, or an abstract architectural pattern)

No small all-caps eyebrow label above the hero headline

Responsive with an accessible hamburger menu on mobile

Semantic HTML, labelled form fields, visible focus states