The brand guide specifies no buttons. It gives CTA wording and nothing about their appearance, so the system below is our judgement, derived from the palette and the one-accent rule in notes/mockups/shared-v1/design-system.md. Nothing here invents a colour.
This is a build spec sheet, not a Step 1 artboard. The mockup brief puts hover and focus states on the not-drawn list because they are Kadence build decisions — which is exactly what this is: the decision, written down, so both directions and every later page use one set of buttons.
The system below is live in both directions. Every button on home-A-v1.html and home-B-v1.html is now .btn.main, .btn.secondary or .btn.outline; the old ad-hoc classes are gone. Change a button here and it changes on both pages.
There are three jobs and only two button styles doing them. Gold-filled and dark-outline are the whole vocabulary today, so Take the Business Legal Health Assessment — a real conversion — and Our Team → — a navigation link — are drawn identically. That is the gap the third role fills.
And Direction A is inconsistent about which button is primary. Measured, not eyeballed: Book a Consultation is gold twice and outline once; Take the Business Legal Health Assessment is gold twice and outline three times. In four places on one page the reader is told a different thing about which action matters more. Direction B is already consistent — gold is always Book a Consultation.
| Label | Where it appears | Direction A today | Direction B today | Proposed role |
|---|---|---|---|---|
| Book a Consultation | Hero, The Plan, Final CTA, header (B), mega menus | Main in 2 places, Outline in 1 | Main everywhere | Main |
| Take the Business Legal Health Assessment | Hero, The Plan, Assessment, Final CTA | Main in 2, Outline in 3 | Secondary everywhere | Secondary |
| Take the Assessment | Header (short form), mega menu | Main (small) | Secondary (small) | Secondary |
| Find Out Where Your Business Is Exposed | The Problem | Outline | Outline | Outline |
| Our Team → | The Guide (A only) | Outline | — | Outline |
| View all Practice Areas & Industries → | Mega menu foot | Plain text link | Plain text link | Link |
| Contact Us | Header (A only) | Main | — (B uses the two CTAs) | Main |
| Subscribe | Footer newsletter (A only) | Main | — (B has no form) | Secondary |
Main is CONFIDENCE gold and belongs to Book a Consultation alone — the action that earns money. Gold is the site's only accent, so spending it anywhere else costs it its meaning. Secondary is a solid NIGHT fill for the assessment, the transitional conversion: it has real weight without a second accent, because NIGHT is structural rather than an accent colour. Outline is the border-only button for everything that is a route rather than a conversion.
Chosen: treatment 3, the sweep (Adi, 2026-09-05). It is live in both directions. 1 and 2 stay on the sheet because a spec is more useful when it records what was considered than when it only shows what won.
All three change colour; they differ in whether anything moves. Hover the buttons to compare. Every one of them animates only background-color, border-color, color and transform — never a property that forces layout.
The fill deepens and nothing moves. The most restrained, and the safest on a law firm's site — the client called the current site busy, and a button that jumps is the small end of busy. It is also the only option with no motion at all, which matters for prefers-reduced-motion users because there is nothing to suppress.
The same colour change plus a one-pixel rise. It reads as a physical control and is the convention most people have been trained on. The cost is that a lift on a row of two buttons makes the unhovered one look slightly sunken, and it needs a prefers-reduced-motion guard.
The background is painted in from the left. The most product-like of the three, which is Direction B's stated feel, and the most likely to look decorative in Direction A. Drawn with a pseudo-element so it animates transform only, never width — width would relayout on every frame.
Focus is not optional. A keyboard user has to see where they are, and it is sold under Baseline Structural SEO / AEO ("general technical accessibility best practices"). Shown forced on below; in the build it is :focus-visible, so it appears for keyboard users and not on mouse clicks. Disabled is only ever needed on the newsletter submit, and only while the form is submitting.
One combination failed and is already corrected here. The obvious hover for the gold button is DAY gold with white text, and Direction A's header CTA uses exactly that today — it is 2.71:1, which fails AA for normal text and fails it for large text too. The fix is to keep the ink label on hover: the same gold at 5.16:1. Every other state passes AA as drawn.
| State | Text on ground | Ratio | AA |
|---|---|---|---|
| Main, default | #2c2c2c on #FFD457 | 9.85:1 | Pass |
| Main, hover — white label | #ffffff on #D98D00 | 2.71:1 | FAIL — not used |
| Main, hover — ink label | #2c2c2c on #D98D00 | 5.16:1 | Pass |
| Secondary, default | #ffffff on #003B53 | 12.00:1 | Pass |
| Secondary, hover | #ffffff on #027CA1 | 4.77:1 | Pass |
| Outline, hover | #ffffff on #003B53 | 12.00:1 | Pass |
| Secondary on NIGHT, hover | #003B53 on #93BCCD | 5.89:1 | Pass |
Two, and only two: the default, and a small used in the header and inside mega-menu panels. A large size is drawn here so the hero can be tested with it, but nothing currently needs it.
Small · default · large. The small size is what the header uses; the label there is the short form “Take the Assessment”, which is a length variant of the one name, never a second name.
Measured, at the system's own size and padding:
| Label | Characters | Rendered width | Small size |
|---|---|---|---|
| Take the Business Legal Health Assessment | 41 | 395px | 347px |
| Find Out Where Your Business Is Exposed | 38 | 381px | 335px |
| Take the Assessment | 19 | 220px | 189px |
| Book a Consultation | 19 | 214px | 183px |
| Our Team → | 10 | 152px | 127px |
| Contact Us | 10 | 142px | 119px |
| Subscribe | 9 | 135px | 112px |
Two problems fall out of those numbers, and only one of them is a layout problem.
1. It cannot fit on a phone at any size. A 375px viewport with the page's side padding leaves about 335px. The label is 395px at the default size and still 347px at the small size, so on mobile it must wrap — there is no setting that avoids it. That is why the base button here uses line-height:1.3 and symmetric padding instead of line-height:1: a button built for one line puts two lines on top of each other.
2. The secondary button is nearly twice the width of the primary. 395px against 214px. The largest object in the row is the action we do not want first, which quietly contradicts the hierarchy the colours are working to establish. This is the more serious of the two, and no amount of wrapping fixes it.
Fix 1 — let it wrap, and build the button for two lines. Already in the base button above. It is not optional; it is the floor everything else sits on. On its own it leaves the width imbalance untouched.
Fix 2 — the pair shares width. Both buttons take an equal share of the row, so the long label sets the height and neither dominates. This is the one that answers problem 2, and it costs nothing but a flex:1. The primary becomes wider than its label needs, which reads as deliberate rather than accidental.
Fix 3 — cap the secondary so it always sets two lines. A fixed 280px ceiling makes the long label a deliberate two-line block that is only a little wider than the primary. Tidier than fix 2 on wide screens, but it hard-codes a width to one particular string — change the label and the number is wrong.
And below roughly 760px the pair stacks, both full width. Not a choice — the pair needs 623px plus the page's side padding, so it stops fitting before tablet width. Stacked, the primary is first, which is also the brand story's order.
Forty-one characters is not a button label, it is a sentence, and every treatment above is a way of coping with that rather than solving it. The short form already exists and is 220px: Take the Assessment. With it, the pair is 434px, fits a 640px column on one line, nearly balances the primary, and the wrapping question disappears.
That is not ours to change. The mockup brief reserves the short form for the header and the mobile drawer and requires the full label on the hero, the plan, the assessment section and the final band. So the measurement goes to Rian as a question rather than being answered in the CSS — and it is a good question, because the same decision also settles the assessment's name, which is still unconfirmed. Until it is answered, fix 1 plus fix 2 is what the build should carry.
One Main per screen wherever the layout allows. Two golds in one viewport is two primary actions, which is none. The paired CTAs are always Main then Secondary, in that order — the brand story sets the order and the buttons must not contradict it. Outline never carries a conversion; if a button starts to matter commercially it moves up a role rather than growing a colour of its own. No third accent, ever — a new button need is answered with weight, not with a new hue.