Inner service hero — options (Car Accident Claims)

Six ways to open an inner service page, from Adi’s reference: a title, a photograph and contact information in the hero. Every option also carries the two things the reference does not have — a breadcrumb and the practice hexagon — and every option carries the same five parts, so what is being compared is the layout and nothing else.

What each option must contain (checked mechanically):

breadcrumb — Home › What We Do › Injury Claims › Car Accident Claims
the practice hexagon, .hex, with the geometry fixed
one h1 — “Car Accident Claims”
a photograph
a contact block — eyebrow, phone, availability, two fields, two buttons

The hexagon is fixed, and it is fixed as a ratio. A regular pointy-top hexagon has height 2R and width √3·R, so its box must always be width / height = √3 / 2 = 0.8660254. The live site draws it 50×65 — ratio 0.769 — and at that ratio its four diagonal sides come out 8.3% shorter than its two vertical sides. That is the squash. These options declare aspect-ratio:.8660254 and set only a width, so the second number cannot drift. The glyph is centred by the flexbox alone; the live 3px nudge is gone, because on a pointy-top hexagon the geometric centre already is the optical centre.

drawn	ratio	diagonal side vs vertical side
50 × 65 — the live site	0.769	−8.3%
95 × 110 — live, “Get in touch”	0.864	−0.2%
11 × 13 — home_v1 kicker dot	0.846	−1.7%
74 × 85 — home_v1 hive	0.871	+0.4%
width + aspect-ratio — these options	0.8660	0.0%

Which brand colours can hold text — measured, not guessed. This decided the colour of every panel below.

white on	ratio	usable for
brown `#423C37`	10.86:1	any size — the only brand colour that is safe everywhere
deep orange `#B44A33`	5.29:1	any size — but this colour is not in the brand yet
brand orange `#EF6D3E`	3.03:1	large text only (≥24px, or ≥18.7px bold). Fails for body copy.
teal `#46ADC8`	2.60:1	nothing — fails even the large-text floor. Teal is a shape colour, not a text ground.

One finding that is not about this sheet: home_v1’s contact band already sets its availability line and office note in #FBE3D8 on brand orange — 2.47:1. That is in the picked homepage design and wants fixing there too.

Two things only Adi or the firm can settle:

Does Darren’s ban on the intro image reach inner pages? It is documented for the homepage first screen. Five of these six put a photograph in the hero; A5 is the one that does not need the question answered.
The availability line. These use home_v1’s approved “Free consultations for injury & estate litigation”. A car-accident page would rather say it about car accidents — but that is the firm’s sentence to write, not ours.

How much of the first screen each one eats. Measured below the 93px header. On a 700px-tall viewport the first screen has 607px to give away, so the last column is what is left for the page itself.

option	hero height	left for the page
A2 — flush to the header	324px	283px
A1 — the reference, mapped	341px	266px
A3 — cards on the photograph	360px	247px
A4 — half and half	380px	227px
A6 — photograph, then a ribbon	395px	212px
A5 — the light one	510px	97px

A5 is the calm one and the expensive one: it is the only option that carries the lede sentence, and paying for it costs almost the whole rest of the first screen.

Photograph: the same picture in every option on purpose — the option is what varies, not the picture. It is League’s own passengerclaim.png, the closest thing in the library to the reference’s approach of showing the person rather than the wreckage. Monochrome and a placeholder until the November colour shoot; labelled in every frame.

A1The reference, mappedBrand orange · brownThe three panels of Adi’s reference, one for one: a colour block with the title, a photograph, and a contact block. Breadcrumb on a white strip above the band, so the hero itself stays as clean as the reference. The diagonal cut between panel and photograph is kept.

CALL NOW250-888-0002

Car Accident Claims

Injuries

Placeholder · November shoot

Call Me BackBook Consultation

The orange block carries only large type: the title at 38px and the sub-line at 20px bold. White on brand orange is 3.03:1 — it clears the 3:1 floor for large text and fails the 4.5:1 floor for anything smaller, so the small contact copy sits on brown (10.86:1) instead. That is also why the reference’s own arrangement works: bright block for the title, dark block for the details.

A2Flush to the headerDeep orange · brownThe same three panels, but the breadcrumb becomes a slim brown bar directly under the header, so the hero starts at the header with no white gap. The title block uses the deepened orange, which lets the deck sit at reading size inside it.

CALL NOW250-888-0002

Injuries

Car Accident Claims

League & Williams are Experienced Car Accident Injury Claims Lawyers

Placeholder · November shoot

Call Me BackBook Consultation

The deepened orange #B44A33 is 5.29:1 against white — it holds body copy, which the brand orange cannot. That is the trade: A2 can put the page’s real deck line in the colour block, A1 cannot. It also introduces a colour the brand does not have yet, so it is a decision for Adi, not a detail.

A4Half and halfBrown · photographNo third panel: the left half is a brown block carrying breadcrumb, hexagon, title, deck and the phone; the right half is the photograph, with a white contact card inset into its lower corner.

CALL NOW250-888-0002

Car Accident Claims

League & Williams are Experienced Car Accident Injury Claims Lawyers

Call now250-888-0002

Placeholder · November shoot

Call Me BackBook Consultation

This is the only option where the contact block sits on white, so its small copy is at full contrast without any colour arithmetic. It is also the only one where the photograph gets half the band — worth seeing before the November shoot decides how good the pictures will be.

A5The light onePaper · photograph as a stripType on paper, the way home_v1 opens: breadcrumb, hexagon and title at left, the contact card at right across a hairline, and the photograph below as a full-bleed strip rather than a backdrop.

CALL NOW250-888-0002

Car Accident Claims

League & Williams are Experienced Car Accident Injury Claims Lawyers

Our team of lawyers are experienced in car accident injury claims & work to ensure that injured victims recover their fullest potential. Free consultations.

Call Me BackBook Consultation

Placeholder · November shoot

This is the option that does not put a title over a picture. Darren’s ban is on the homepage intro image; whether it reaches inner pages has never been decided, and A5 is the answer that does not need it decided. It is also the only option that carries the page’s own lede sentence in the hero. The strip is a hard crop: 1440×220 is 6.5:1 out of a 3:2 photograph, so nothing in the library survives it well. If A5 is picked, the November shoot needs a wide master for this slot — that is a brief for the photographer, not a CSS problem.