'
'
'
'
'
'CALL NOW'
'250-888-0002
'
'Injuries
' + DECK + '
Injuries
' + DECK + '
' 'Call now250-888-0002' '' + DECK + '
' '' + LEDE + '
' '' + DECK + '
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.
.hex, with the geometry fixedh1 — “Car Accident Claims”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% |
| 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. |
#FBE3D8 on brand orange — 2.47:1.
That is in the picked homepage design and wants fixing there too.
| 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 |
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.%s
\n' '