--- version: alpha name: barrow-vance-design description: "A deep navy-charcoal canvas (#14181f) with cool white ink (#eceef2), a brass gold (#c8a24a) for the firm's own mark and primary action, and a slate blue (#7b9cbd) for the scale's pans and secondary status. Spectral carries every heading at weight 600; Inter carries the surrounding prose. The system reads as an actual small litigation firm's site, restrained and specific, never a billboard-style injury-lawyer landing page." --- ## Brand Positioning Barrow & Vance is for clients who want an honest read on their odds, not a billboard promising millions. It exists because most law-firm sites borrow personal-injury-billboard chrome (stock photos of handshakes, a giant phone number, "we fight for you" copy) that has nothing to do with how a matter actually gets weighed and argued. Barrow & Vance's bet: the one piece of drama on the page should be the scale itself, tipping honestly back and forth before settling level, the same way a real case gets weighed before anyone commits to a position. Every visual decision below serves that one bet. If a component doesn't help someone understand an outcome or start a consult, or doesn't come from a real firm interaction (case table, matter status, consult form), it doesn't belong in this system. colors: accent: "#c8a24a" accent-alt: "#7b9cbd" ink: "#eceef2" ink-muted: "#9098a8" canvas: "#14181f" surface: "#1b202a" surface-raised: "#232935" border: "#2f3646" focus-ring: "#c8a24a" ## Logo / Wordmark System The mark is a rounded-square card containing a small balance scale, a gold post and beam with two slate-blue pans, literally a 1:1 miniature of the homepage's `#beam-group` mechanic frozen level. ```svg ``` - **Lockup**: mark, then a `0.5rem` gap, then the wordmark "Barrow & Vance" in Spectral/600, mark always left of the wordmark, never stacked or reversed. - **Minimum size**: mark not smaller than `16px` square, below that the beam and pans merge into the post. Wordmark not smaller than `0.85rem`. - **Clearspace**: empty margin equal to the mark's own height (22px at default size) on all four sides of the lockup. - **Don't**: recolor the mark for a light background, it only ever renders on `--panel`/`--bg`. Don't tip the static mark's beam off-level, the mark represents the settled, considered state, motion belongs to the homepage's hero only. Don't use a gavel instead of a scale, the firm's whole visual logic is weighing, not striking. Don't rotate or stretch it. ## Color System ### Roles | Role | Token | Value | Used for | |---|---|---|---| | Canvas | `--bg` | `#14181f` | Page background | | Surface | `--panel` | `#1b202a` | Panels, nav, practice cards, table header | | Surface raised | `--surface-raised` | `#232935` | Row hover, input focus bg | | Border | `--border` | `#2f3646` | Panel edges, dividers, table rules | | Ink | `--ink` | `#eceef2` | Primary text | | Ink muted | `--dim` | `#9098a8` | Secondary text, helper text | | Firm / primary | `--accent` | `#c8a24a` | Scale post/beam, primary button fill, favorable-outcome status, closed badge, focus ring | | Pans / secondary | `--accent-alt` | `#7b9cbd` | Scale pans, settled-outcome status | There is deliberately no red anywhere. A delayed filing is real information a client needs plainly, not a failure to alarm them with, so it's communicated with `--accent-alt` and a specific sentence, the same slate blue the scale's pans use. ### Contrast (computed from the hex values above via WCAG relative luminance) | Pairing | Ratio | Passes | |---|---|---| | `--ink` text on `--bg` | ~15.3:1 | AAA | | `--dim` text on `--bg` | ~6.1:1 | AA (body text) | | `--accent` text on `--bg` (favorable status, links) | ~7.4:1 | AAA | | `--accent-alt` text on `--bg` (settled status, delay copy) | ~6.2:1 | AA (body text) | | Dark label on `--accent` fill (primary button) | ~7.4:1 | AAA | | `--ink` on `--panel` | ~14.1:1 | AAA | | `--ink` on `--surface-raised` | ~12.6:1 | AAA | The rule this table exists to enforce: a button or badge filled with `--accent` always labels itself in a near-black (`#211804`), never `--ink`, white-on-gold at this saturation reads noticeably flatter and undershoots the crispness the rest of the system holds to. typography: display: fontFamily: Spectral fontWeight: 600 body: fontFamily: Inter fontWeight: 400 ## Type Scale | Token | Size | Weight | Family | Line-height | Letter-spacing | Used for | |---|---|---|---|---|---|---| | `--text-display` | `clamp(2.25rem, 5.5vw, 3.75rem)` | 600 | Spectral | 1.1 | 0 | Hero H1 only | | `--text-h2` | `1.6rem` (homepage) / `1.4rem` (second page) | 600 | Spectral | 1.2 | 0 | Section headings | | `--text-quote` | `1.2rem` | 500, italic | Spectral | 1.5 | 0 | The client testimonial only | | `--text-body` | `1rem` | 400 | Inter | 1.6 | 0 | Paragraph copy | | `--text-small` | `0.85rem` | 400 | Inter | 1.5 | 0.01em | Footer, nav utility links, helper text, table cells | Rule for Spectral vs. Inter: Spectral, and only Spectral, ever appears in italic, reserved for the hero headline, section headings, and the single testimonial quote, moments meant to feel considered rather than filed. Everything else, nav, buttons, form labels, table cells, case names, is Inter, upright and legible for actual case detail. ## Spacing Scale Base unit `8px`. Tokens in use: `--space-2: 0.5rem`, `--space-3: 1rem`, `--space-4: 1.5rem`, `--space-6: 2rem`, `--space-8: 3rem`, `--space-12: 4rem`. ## Shape One radius scale: `--radius: 8px` for panels, practice cards, inputs, and table containers, tighter than a typical SaaS `10-14px`, a law firm's UI shouldn't feel soft. `--radius-pill: 999px` reserved for buttons and the closed-matter badge only. ## Iconography No icon library. The only non-text glyph beyond the scale illustration is one Unicode glyph, `✓` (matter closed), set at the same weight as the text beside it. Matter status is communicated with a plain-language phrase ("Favorable verdict", "Settled, 2026") paired with color, never a status icon. If a future page needs more iconography, the fallback is Phosphor (line style, `1.5` stroke), that decision just hasn't been needed yet. ## Motion Principles Scroll tips the hero's scale beam back and forth in a decaying oscillation, driven entirely by scroll position (`scrub`, not a fixed duration or physics simulation), settling level exactly at the bottom of the hero. This is the only scripted animation on either page, everything else (buttons, table rows, form inputs) uses only `:hover`/`:active`/`:focus-visible` CSS transitions. The whole system honors `prefers-reduced-motion` by holding the beam level throughout, no oscillation. ### Never-list (written before the impeccable-pass rebuild) 1. No small decorative scale icon stacked above a centered headline, the scale is large (up to 420px, was 180px) and shares the first viewport with the copy in a two-column layout. 2. No two-button CTA row floating free of the scale, the primary action sits beside the intro copy that introduces it. ## Voice & Tone formal, precise, plain language over legalese, confident not cocky. In practice: - **Button label**: "Request a consult", not "Get Your Free Case Evaluation Now!" - **Error message**: "Filing delayed. The court clerk's office pushed the hearing date.", not "Uh-oh, a delay!" - **Empty state**: "No open matters on file for that search.", not "Nothing found, try again?" - **Success status**: "Closed, favorable verdict", not "WE WON! 🎉" ## Accessibility Baseline - Focus ring: `2px solid var(--accent)`, `2px` offset, applied via `:focus-visible` on every interactive element (links, buttons, inputs, textarea), never removed without a visible replacement. - Reduced motion: the scale's oscillation checks `prefers-reduced-motion: reduce` and holds the beam level with no animation when it's set. - Minimum tap target: `44px` in the smallest dimension for every button and form control on touch viewports. - Color is never the only signal: matter outcomes pair color with a specific phrase and year, the filing-delay state pairs slate blue with a full sentence naming what changed. ## Components ### Navigation Single-line bar, `64px` tall, `--panel` background with a `--border` bottom hairline, sticky to the top. Left: a small "back to gallery" utility link. Center-left: the mark + wordmark lockup. Right: a Cases link plus one primary button. Collapses to just the lockup and primary button under `480px`, no hamburger, there are only two destinations. ### Buttons Three variants, `8px` radius except the pill exception below, one accent: - **Primary**: `--accent` fill, dark label, `--radius` (not pill), used once per view for the single real action ("Request a consult", "Send it over"). - **Secondary**: transparent fill, `1px solid --border`, `--ink` label. "Check new date" and similar secondary actions. - **Ghost**: text-only, `--dim` label, `--ink` on hover. Tertiary actions like "see what we handle." All variants define `:hover` (brightness/border shift), `:active` (`transform: scale(0.98)`), `:disabled` (`opacity: .4`, `pointer-events: none`), and `:focus-visible` (accent outline). ### Scale illustration An SVG post and base with a rotating beam group carrying two pan shapes, driven by scroll-scrubbed rotation. Illustrative only, not interactive, exists purely to make the "weighed carefully" metaphor literal. ### Practice cards A flat panel per practice area: a Spectral name and one sentence of plain-language detail. No stock photography, no icon per card, the sentence does the work. ### Table Header row in `--panel`/`--dim` labels, body rows in `--bg`, one `--border` rule between rows, row hover to `--surface-raised`. Outcome cells are plain text colored by result (`--accent` for a favorable verdict, `--accent-alt` for a negotiated settlement), never a bare dot. ### Quote A single italic Spectral blockquote in a flat panel, with a plain, non-italic attribution line below. Used once, for one real testimonial, never stacked into a rotating carousel. ### Forms Label above input, `--text-small`/`--dim`. Input/textarea: `--panel` background, `1px solid --border`, `--radius`, `--ink` text, `--dim` placeholder. On `:focus`, border becomes `--accent` and background lifts to `--surface-raised`. On error, border becomes `--accent-alt` and helper text explains what's missing in plain language. ### Status / feedback states - **Loading**: a skeleton shaped like the real content (bars matching text line-heights), not a spinner. - **Empty**: a plain sentence in `--dim`, no illustration. - **Error**: an inline `--accent-alt` message naming the specific change, with a concrete next step, never a silent failure. - **Success / status badge**: `--radius-pill`, `1px solid --accent`, `--accent` text on transparent fill, not filled, filled would compete with the primary button's exclusive use of a solid `--accent` fill. ### Footer One row: firm name/tagline on the left, real page links on the right (Cases, back to gallery). No invented bar-admission or jurisdiction text. ## Do's and Don'ts ### Do - Let the scale's tip-and-settle be the only scroll-scrubbed element on the page, everything else reacts only to direct interaction. - Reserve `--accent` for the firm's own primary meaning and `--accent-alt` for the pans/secondary meaning, keep that split consistent everywhere. - State real, specific outcomes and years, never vague claims like "millions recovered." - Use a dark label on any `--accent`-filled surface. - Keep the testimonial singular and attributed, never an anonymized or stacked review carousel. ### Don't - Don't use stock photography of handshakes or gavels, the scale illustration and typography carry the whole visual system on purpose. - Don't introduce red for delays or setbacks, route those to `--accent-alt` with specific copy instead. - Don't replay the scale's oscillation on every scroll pass in a loop, it plays exactly once per scroll through the hero, tied to position. - Don't stack more than one primary button in the same view. - Don't fill a status badge solid, badges stay outlined so the primary button remains the only solid-`--accent`-fill element on screen. ## Known Constraints - Two routes now exist (home, cases), still no client portal or secure document upload, no responsive breakpoint table beyond a single-column mobile collapse, no authenticated client login (the "Request a consult" form is not wired to anything real, this is a concept demo).