Not a specification. This is a record of what home-B-v1.html actually uses, read out of
the file on 2026-09-08, so that what gets built matches what was drawn. Where the prototype is inconsistent with
itself, that is written down rather than tidied away, because the inconsistency is the thing worth deciding.
The brand system of record is the client’s Brand Kit (notes/source/brand-kit/). Where this
page departs from it, the departure is marked.
Montserrat throughout, the confirmed brand face. Every specimen below is rendered with the prototype’s own rule, not retyped.
<h1>, eleven <h2> and six <h3>. Nothing deeper was needed
and nothing deeper was invented. Inner pages will need at least an H4, so a scale is proposed at the foot of this
section and marked as unbuilt.Grow Your Business Without Growing Your Legal Anxiety
Legal Problems Are Easier to Prevent Than Repair
You may be wondering:
The Transformation
Too many growing businesses discover legal gaps only after something goes wrong.
Equinox Business Law helps entrepreneurs build stronger, safer businesses through proactive and practical legal guidance.
Get a clearer picture of where your business is protected and where it may need attention.
Attorney advertising. Prior results do not guarantee a similar outcome.
.h1 .h2 .h3 all carry +.005em, which came from the 2022 brand deck and is a slide value:
correct at 34px, wrong above about 40px. Every heading retuned during this build runs NEGATIVE tracking instead:
section 2’s H2 at -.006em, section 3’s turn line at -.008em, the comparison at
-.004em, the final CTA at -.006em. Deciding this is one edit to three rules, and it
should happen before the pattern library is built, not after..13em, the mega heads at .15em, the footer heads at .16em, the comparison
column heads and the image slot labels at .2em. One value should win. .13em is the one
chosen deliberately during this build; the rest are inherited.Proposed and NOT built: H4 17px / 600 / 1.35, H5 15px / 700 / 1.4 / +.06em, H6 13px / 700 / +.13em / uppercase. Drawn from the gaps between the three levels that exist. These have never been rendered and should be tested on a real inner page before they enter the library.
Six brand colours plus ink. Gold is the only accent; NIGHT and BUSINESS are structural, which is why a solid NIGHT button does not break the one-accent rule.
NIGHT
#003B53
The primary dark. Headings, solid panels, the secondary button.
BUSINESS
#027CA1
The active blue. Links, ticks, focus rings. Structural, not an accent.
FREEDOM
#93BCCD
Light blue. Tints, gradient ends, hover fills on dark.
CONFIDENCE
#FFD457
The single accent. The primary button, and nothing else that competes.
DAY
#D98D00
Deeper gold. The primary button’s hover wipe only.
LAW
#FFFAEB
Warm near-white. Section grounds and the mega-menu foot.
INK
#2C2C2C
Body text. Not a brand colour but present in every specimen.
#F2F2F2 and #F0F0F0 are both hairlines,
#8A8A8A and #8C8C8C are both muted labels, #EEF4F7, #EDF3F6,
#E7EFF3 and #E3EEF3 are four barely different tints. Collapsing these to about six
values is worth doing before the build.#E4E4E4
borders, mega-panel rules#EEF4F7
mega-link hover, image placeholder#9A9A9A
chevrons, mega counts#EDF3F6
section tint ground#8A8A8A
fine print, column head A#8C8C8C
mega heads#666666
supporting lines#5B6B73
group summaries#E8F0F4
gradient mid stop#E7EFF3
placeholder ground#E3EEF3
icon holder#F2F2F2
hairlines#F0F0F0
hairlines#5D8FA2
placeholder label#4D7C8F
slot label#7A97A4
slot subtext#9AA6AB
the old state in the comparison#B8B8B8
the minus marker#4A4A4A
newsletter subtext#112337
the footer ground#BFC9CF
the dashed ring in section 8One system, three roles, two grounds, two sizes. Live below, so hover and focus can be tested rather than described.
| Class | Role | Resting | Hover wipe | Where it is used |
|---|---|---|---|---|
.btn.main | Primary | #FFD457 fill, #2c2c2c label | #D98D00 | Book a Consultation. The money action, and the only place the accent is spent. |
.btn.secondary | Secondary | #003B53 fill, white label | #027CA1 | The assessment, the transitional conversion. |
.btn.outline | Outline | transparent, NIGHT 1.5px border | #003B53 fill, white label | Routes and non-conversions. |
| Dark-ground override | Resting | Hover wipe |
|---|---|---|
.on-dark .btn.main | #FFD457 fill | #ffffff wipe, NIGHT label |
.on-dark .btn.secondary | #ffffff fill, NIGHT label | #93BCCD wipe |
.on-dark .btn.outline | transparent, white 60% border | #ffffff wipe, NIGHT label |
| Property | Value | Why |
|---|---|---|
| Size, default | 15px / 600, padding 12px 24px | — |
| Size, small | .btn.sm 14.5px, padding 10px 20px | Header and mega panels, where two buttons sit side by side and are scanned rather than read. |
| Line height | 1.3, with text-wrap:balance | "Take the Business Legal Health Assessment" is 395px and a 375px phone has about 335px, so it MUST wrap. line-height:1 would stack the lines on top of each other, and balance is what stops one word being stranded. |
| Hover | A ::before panel wiping left to right, 220ms | Not a colour change: the fill scales in from the left edge. Every role has its own wipe colour. |
| Focus | 3px BUSINESS outline, 3px offset; gold on dark | Visible on both grounds. Never removed. |
| Icons | .bic 16px, .bic.arrow 17px | Small size only. A trailing arrow marks a ROUTE, not a subject. |
| Row | .btnrow max-width 660px, items flex:1 1 0, min-width 180px | Two buttons stretch to equal widths. .btnrow.single opts one button out. |
.btnrow is capped
at 660px, so justify-content:center centres the button inside that box rather than in the container:
auto margins are what centre it. Second, several buttons in the prototype carry an inline
style="margin-top:34px", and an inline style beats any stylesheet rule, so spacing set in CSS
silently does nothing until the attribute is removed.It records the prototype, not the client’s Brand Kit, and the two are not the same. The Brand Kit is a 76-slide deck built for print and slides: its body line height is 1.2, its tracking is given in design-software thousandths, it has six colours and no neutrals, and it says nothing about buttons, forms, links, navigation, hover, focus or responsive behaviour. Everything on this page that the Kit does not cover was decided during the build, and every one of those decisions is a candidate for the client to review.