← back to Lawyer Directory Builder
public/style.html
578 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>The visual standard — Counsel & Bar</title>
<meta name="description" content="The look of a tier-A directory listing. Palette, typography, ornament, and voice for Counsel & Bar — independent California attorney directory.">
<link rel="canonical" href="https://lawyers.agentabrams.com/style.html">
<meta name="robots" content="index, follow">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<meta name="theme-color" content="#0a0a0c">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Counsel & Bar">
<meta property="og:title" content="The visual standard — Counsel & Bar">
<meta property="og:description" content="Palette, typography, ornament, and voice for the directory.">
<meta property="og:url" content="https://lawyers.agentabrams.com/style.html">
<meta property="og:image" content="https://lawyers.agentabrams.com/og.png">
<meta name="twitter:card" content="summary_large_image">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--noir: #0a0a0c;
--noir-rise: #131316;
--noir-deep: #050507;
--rule: #2a2724;
--rule-faint: #1a1815;
--ink: #f4f1ea;
--ink-soft: #d8d2c5;
--ink-mute: #8b857a;
--metal: #b89968;
--metal-glow: #d4b683;
--metal-deep: #8a7044;
--serif: "Cormorant Garamond", "Georgia", serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--hairline: 1px solid var(--rule);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
margin: 0; background: var(--noir); color: var(--ink);
font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.55;
overflow-x: hidden;
}
a { color: var(--metal); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
a:hover { color: var(--metal-glow); border-color: var(--metal); }
::selection { background: var(--metal); color: var(--noir); }
/* ─── Top bar ──────────────────────────────────────────────────── */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
padding: 22px 48px;
display: flex; justify-content: space-between; align-items: center;
background: linear-gradient(180deg, rgba(10,10,12,0.92) 0%, rgba(10,10,12,0.0) 100%);
backdrop-filter: blur(8px);
}
.brand-row { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; border: 0; }
.brand { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: 0.01em; }
.brand .ampersand { color: var(--metal); font-style: italic; padding: 0 4px; }
.topbar nav { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.topbar nav a { color: var(--ink-mute); border: 0; margin-left: 28px; transition: color 180ms ease; padding: 0; }
.topbar nav a:hover { color: var(--metal); }
@media (max-width: 720px) { .topbar { padding: 16px 20px; } .topbar nav a { margin-left: 16px; } }
/* ─── Layout ────────────────────────────────────────────────────── */
.wrap { max-width: 1100px; margin: 0 auto; padding: 140px 48px 80px; }
@media (max-width: 720px) { .wrap { padding: 110px 20px 56px; } }
/* ─── Folio mark ────────────────────────────────────────────────── */
.folio {
display: flex; align-items: center; gap: 18px; margin: 0 0 32px;
color: var(--metal); font-family: var(--serif); font-style: italic;
font-size: 14px; letter-spacing: 0.02em;
}
.folio .f-rule { flex: 0 0 56px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--metal) 50%, transparent 100%); }
.folio .f-meta { font-family: var(--sans); font-style: normal; color: var(--ink-mute); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; }
/* ─── Display title ─────────────────────────────────────────────── */
h1.display {
font-family: var(--serif); font-weight: 300;
font-size: clamp(48px, 8vw, 96px); line-height: 0.98;
letter-spacing: -0.025em; margin: 0 0 28px; color: var(--ink);
}
h1.display em { font-style: italic; color: var(--metal); font-weight: 400; }
.lede {
font-family: var(--serif); font-weight: 300;
font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55;
color: var(--ink-soft); max-width: 60ch; margin: 0 0 80px;
font-style: italic;
}
/* ─── Section ───────────────────────────────────────────────────── */
section { margin: 96px 0; }
.section-eyebrow {
font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--metal); font-weight: 500; margin: 0 0 18px;
}
h2.section-title {
font-family: var(--serif); font-weight: 300;
font-size: clamp(32px, 4vw, 48px); line-height: 1.1;
letter-spacing: -0.015em; margin: 0 0 8px; color: var(--ink);
}
h2.section-title em { font-style: italic; color: var(--metal); font-weight: 400; }
.section-sub {
font-family: var(--serif); font-style: italic; color: var(--ink-mute);
font-size: 16px; margin: 0 0 36px;
}
/* ─── Palette ───────────────────────────────────────────────────── */
.palette {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
border: var(--hairline);
}
.swatch {
padding: 28px 22px 22px;
border-right: var(--hairline);
min-height: 200px;
display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
position: relative;
}
.swatch:last-child { border-right: 0; }
.swatch::before {
content: ''; position: absolute; top: 16px; left: 22px; right: 22px; height: 1px; background: currentColor; opacity: 0.35;
}
.swatch .s-name {
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: 18px; letter-spacing: 0.01em; opacity: 0.95;
}
.swatch .s-hex {
font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
font-weight: 500; opacity: 0.7; font-variant-numeric: tabular-nums;
}
.swatch .s-role {
font-family: var(--sans); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
color: var(--ink-mute); margin-top: 8px; padding-top: 8px;
border-top: 1px solid currentColor;
}
.sw-noir { background: #0a0a0c; color: var(--ink); }
.sw-noir-rise { background: #131316; color: var(--ink); }
.sw-rule { background: #2a2724; color: var(--ink-soft); }
.sw-ink { background: #f4f1ea; color: var(--noir); }
.sw-metal { background: linear-gradient(180deg, #d4b683 0%, #b89968 50%, #8a7044 100%); color: var(--noir); }
.sw-metal .s-role { border-top-color: rgba(10,10,12,0.35); }
.sw-ink .s-role { border-top-color: rgba(10,10,12,0.18); }
@media (max-width: 720px) {
.palette { grid-template-columns: repeat(2, 1fr); }
.swatch { border-right: 0; border-bottom: var(--hairline); }
.swatch:nth-child(odd) { border-right: var(--hairline); }
.swatch:nth-last-child(-n+1) { border-bottom: 0; }
}
/* ─── Typography ────────────────────────────────────────────────── */
.type-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
border-top: var(--hairline); border-bottom: var(--hairline);
}
.type-cell {
padding: 36px 0;
border-right: var(--hairline);
}
.type-cell:nth-child(2n) { padding-left: 36px; border-right: 0; }
.type-cell:nth-child(2n-1) { padding-right: 36px; }
.type-cell .t-eyebrow {
font-family: var(--sans); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--metal); font-weight: 500; margin: 0 0 18px;
}
.specimen-serif {
font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 6vw, 84px);
line-height: 0.95; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 16px;
}
.specimen-serif em { font-style: italic; color: var(--metal); font-weight: 400; }
.specimen-sans {
font-family: var(--sans); font-weight: 300; font-size: 18px; line-height: 1.55;
color: var(--ink-soft); margin: 0 0 16px;
}
.specimen-sans strong { font-weight: 500; color: var(--ink); }
.t-meta {
font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-mute); font-weight: 500;
}
.t-meta span { color: var(--metal); padding: 0 6px; }
@media (max-width: 720px) {
.type-grid { grid-template-columns: 1fr; }
.type-cell { padding: 28px 0; border-right: 0; border-bottom: var(--hairline); }
.type-cell:last-child { border-bottom: 0; }
.type-cell:nth-child(2n) { padding-left: 0; }
.type-cell:nth-child(2n-1) { padding-right: 0; }
}
/* ─── Scale ─────────────────────────────────────────────────────── */
.scale {
display: grid; grid-template-columns: 80px 1fr 90px; gap: 24px;
padding: 24px 0; border-bottom: var(--hairline);
align-items: baseline;
}
.scale:last-child { border-bottom: 0; }
.scale .s-num {
font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--metal); font-weight: 500; font-variant-numeric: tabular-nums;
}
.scale .s-text { font-family: var(--serif); color: var(--ink); line-height: 1; }
.scale .s-meta {
font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-mute); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums;
}
.s-d1 { font-size: 64px; font-weight: 300; letter-spacing: -0.025em; }
.s-d1 em { font-style: italic; color: var(--metal); }
.s-d2 { font-size: 40px; font-weight: 400; letter-spacing: -0.015em; }
.s-d3 { font-size: 24px; font-weight: 400; }
.s-body { font-family: var(--sans); font-size: 16px; font-weight: 300; line-height: 1.55; color: var(--ink-soft); }
.s-eyebrow { font-family: var(--sans); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--metal); font-weight: 500; }
@media (max-width: 720px) {
.scale { grid-template-columns: 1fr; gap: 6px; }
.scale .s-meta { text-align: left; }
.s-d1 { font-size: 44px; }
.s-d2 { font-size: 30px; }
}
/* ─── Ornament gallery ──────────────────────────────────────────── */
.ornament-gallery {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border-top: var(--hairline); border-bottom: var(--hairline);
}
.orn-cell {
padding: 56px 28px;
border-right: var(--hairline);
display: flex; flex-direction: column; align-items: center; gap: 18px;
text-align: center;
}
.orn-cell:last-child { border-right: 0; }
.orn-cell svg { display: block; max-width: 100%; height: auto; }
.orn-cell .orn-name {
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: 16px; color: var(--ink); margin-top: 8px;
}
.orn-cell .orn-meta {
font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-mute); font-weight: 500;
}
@media (max-width: 720px) {
.ornament-gallery { grid-template-columns: 1fr; }
.orn-cell { border-right: 0; border-bottom: var(--hairline); padding: 40px 18px; }
.orn-cell:last-child { border-bottom: 0; }
}
/* ─── Voice ─────────────────────────────────────────────────────── */
.voice-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
border-top: var(--hairline);
}
.voice-cell { padding: 36px 0; border-bottom: var(--hairline); }
.voice-cell:nth-child(2n-1) { border-right: var(--hairline); padding-right: 36px; }
.voice-cell:nth-child(2n) { padding-left: 36px; }
.voice-cell .v-eyebrow { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--metal); font-weight: 500; margin: 0 0 16px; }
.voice-cell .v-quote {
font-family: var(--serif); font-weight: 300; font-style: italic;
font-size: 22px; line-height: 1.4; color: var(--ink-soft); margin: 0 0 12px;
}
.voice-cell .v-quote::before { content: '"'; color: var(--metal); margin-right: 4px; }
.voice-cell .v-quote::after { content: '"'; color: var(--metal); margin-left: 4px; }
.voice-cell .v-rule {
font-family: var(--sans); font-size: 12px; line-height: 1.6; color: var(--ink-mute);
font-weight: 300;
}
.voice-cell .v-rule strong { color: var(--ink); font-weight: 500; }
.voice-cell.do .v-eyebrow::before { content: '✓ '; color: var(--metal); }
.voice-cell.dont .v-eyebrow::before { content: '✗ '; color: var(--metal-deep); }
@media (max-width: 720px) {
.voice-grid { grid-template-columns: 1fr; }
.voice-cell, .voice-cell:nth-child(2n-1), .voice-cell:nth-child(2n) {
padding: 28px 0; border-right: 0; border-bottom: var(--hairline);
}
.voice-cell:last-child { border-bottom: 0; }
}
/* ─── Closer ────────────────────────────────────────────────────── */
.closer {
margin: 120px 0 0; padding: 80px 0;
border-top: var(--hairline); text-align: center;
}
.closer .glyph {
font-family: var(--serif); font-style: italic; font-size: 56px;
color: var(--metal); opacity: 0.7; display: block; margin: 0 auto 28px;
}
.closer .quote {
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4;
color: var(--ink); margin: 0 auto 20px; max-width: 60ch;
}
.closer .credit {
font-family: var(--sans); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--ink-mute); font-weight: 500;
}
/* ─── Footer ────────────────────────────────────────────────────── */
footer {
padding: 56px 48px 48px;
border-top: var(--hairline);
background: var(--noir);
font-size: 12px; color: var(--ink-mute);
text-align: center;
}
footer a { color: var(--ink-mute); border: 0; }
footer a:hover { color: var(--metal); }
footer .legal { font-size: 11px; opacity: 0.65; max-width: 600px; margin: 0 auto 18px; line-height: 1.6; }
@media (max-width: 720px) { footer { padding: 40px 20px 32px; } }
/* ─── Reveals ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 800ms cubic-bezier(.16,.84,.3,1), transform 800ms cubic-bezier(.16,.84,.3,1); }
.reveal.in-view { opacity: 1; transform: none; }
}
*:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(184,153,104,.45); border-radius: 1px; }
</style>
</head>
<body>
<header class="topbar">
<a class="brand-row" href="/">
<svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true">
<defs>
<linearGradient id="mg-stroke" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#d4b683"/>
<stop offset="50%" stop-color="#b89968"/>
<stop offset="100%" stop-color="#8a7044"/>
</linearGradient>
</defs>
<circle cx="14" cy="14" r="13" fill="none" stroke="url(#mg-stroke)" stroke-width="1"/>
<path fill="url(#mg-stroke)" d="M9.6 9.5c-1.6 0-2.7 1.2-2.7 3v3c0 1.8 1.1 3 2.7 3 1.4 0 2.4-.8 2.6-2.1h-1.3c-.1.6-.6 1-1.3 1-.9 0-1.4-.6-1.4-1.7v-2.4c0-1.1.5-1.7 1.4-1.7.7 0 1.2.4 1.3 1h1.3c-.2-1.3-1.2-2.1-2.6-2.1zm5.5.1v8.7h2.7c1.6 0 2.6-.9 2.6-2.4 0-1-.5-1.7-1.3-2 .7-.3 1.1-1 1.1-1.8 0-1.5-1-2.5-2.5-2.5h-2.6zm1.3 1.1h1.2c.8 0 1.4.5 1.4 1.4 0 .9-.5 1.4-1.4 1.4h-1.2v-2.8zm0 3.9h1.4c.9 0 1.4.6 1.4 1.5s-.5 1.5-1.4 1.5h-1.4V14.6z"/>
</svg>
<span class="brand">Counsel <span class="ampersand">&</span> Bar</span>
</a>
<nav>
<a href="/find-a-lawyer">Find counsel</a>
<a href="/methodology.html">Methodology</a>
<a href="/audit.html">Audit</a>
</nav>
</header>
<main class="wrap">
<p class="folio">
<span class="f-rule"></span>
<span>The visual standard</span>
<span class="f-meta">Volume I · Edition 2026 · v1.0</span>
</p>
<h1 class="display reveal in-view">The look of a <em>tier-A</em> directory listing.</h1>
<p class="lede reveal in-view">
A field guide to the typography, palette, ornament, and voice that the directory
holds itself to — and against which every audited firm site is measured.
</p>
<!-- ─── Palette ─────────────────────────────────────────────────── -->
<section>
<p class="section-eyebrow">Palette</p>
<h2 class="section-title">A restrained <em>five.</em></h2>
<p class="section-sub">No blue. No tech-stack accent. The page is a noir field with one metallic.</p>
<div class="palette">
<div class="swatch sw-noir">
<span class="s-name">Noir</span>
<span class="s-hex">#0a0a0c</span>
<span class="s-role">Page · Field</span>
</div>
<div class="swatch sw-noir-rise">
<span class="s-name">Noir Rise</span>
<span class="s-hex">#131316</span>
<span class="s-role">Card · Inset</span>
</div>
<div class="swatch sw-rule">
<span class="s-name">Rule</span>
<span class="s-hex">#2a2724</span>
<span class="s-role">Hairline · Divider</span>
</div>
<div class="swatch sw-ink">
<span class="s-name">Ink</span>
<span class="s-hex">#f4f1ea</span>
<span class="s-role">Type · Display</span>
</div>
<div class="swatch sw-metal">
<span class="s-name">Metal</span>
<span class="s-hex">#b89968</span>
<span class="s-role">Accent · Italic</span>
</div>
</div>
</section>
<!-- ─── Typography ──────────────────────────────────────────────── -->
<section>
<p class="section-eyebrow">Typography</p>
<h2 class="section-title">Two faces. <em>One job each.</em></h2>
<p class="section-sub">A serif for voice, a sans for instrumentation. Never reverse the two.</p>
<div class="type-grid">
<div class="type-cell">
<p class="t-eyebrow">Display · Editorial</p>
<p class="specimen-serif">Counsel <em>&</em> Bar</p>
<p class="t-meta">Cormorant Garamond <span>·</span> 300 / 400 italic</p>
</div>
<div class="type-cell">
<p class="t-eyebrow">Body · Instrumentation</p>
<p class="specimen-sans">An indexed directory of every California-licensed attorney, drawn from the State Bar public roll. <strong>Browse, verify, contact directly.</strong></p>
<p class="t-meta">Inter <span>·</span> 300 / 500 weights</p>
</div>
</div>
<div style="margin-top: 56px;">
<p class="t-eyebrow" style="font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--metal);font-weight:500;margin:0 0 18px;">The scale</p>
<div>
<div class="scale">
<span class="s-num">D · 01</span>
<span class="s-text s-d1">Every <em>licensed</em> attorney.</span>
<span class="s-meta">64–96 px · 0.95 lh</span>
</div>
<div class="scale">
<span class="s-num">D · 02</span>
<span class="s-text s-d2">A directory worth its name.</span>
<span class="s-meta">32–48 px · 1.10 lh</span>
</div>
<div class="scale">
<span class="s-num">D · 03</span>
<span class="s-text s-d3">Verified, not listed.</span>
<span class="s-meta">24 px · 1.20 lh</span>
</div>
<div class="scale">
<span class="s-num">B · body</span>
<span class="s-text s-body">Filter by ZIP, practice area, firm size. Contact the attorney through their listed channels.</span>
<span class="s-meta">15–17 px · 1.55 lh</span>
</div>
<div class="scale">
<span class="s-num">E · eyebrow</span>
<span class="s-text s-eyebrow">Volume I · Edition 2026 · v1.0</span>
<span class="s-meta">10 px · 0.30 ls</span>
</div>
</div>
</div>
</section>
<!-- ─── Ornament ────────────────────────────────────────────────── -->
<section>
<p class="section-eyebrow">Ornament</p>
<h2 class="section-title">Three engravings, <em>used sparingly.</em></h2>
<p class="section-sub">Architectural restraint. No flourish for its own sake.</p>
<div class="ornament-gallery">
<div class="orn-cell">
<svg viewBox="0 0 240 90" width="240" height="90" aria-hidden="true">
<defs>
<linearGradient id="og1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#d4b683"/><stop offset="50%" stop-color="#b89968"/><stop offset="100%" stop-color="#8a7044"/>
</linearGradient>
</defs>
<g fill="none" stroke="url(#og1)" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round">
<rect x="40" y="10" width="160" height="5"/>
<line x1="42" y1="17" x2="198" y2="17"/>
<path d="M50 22 Q 62 18 80 22 Q 98 26 116 22 Q 134 18 152 22 Q 170 26 188 22"/>
<path d="M50 22 Q 38 30 42 42 Q 46 50 56 47 Q 64 44 64 38 Q 64 33 60 33 Q 56 33 56 38"/>
<path d="M188 22 Q 200 30 196 42 Q 192 50 182 47 Q 174 44 174 38 Q 174 33 178 33 Q 182 33 182 38"/>
<line x1="64" y1="52" x2="174" y2="52"/>
<line x1="64" y1="56" x2="174" y2="56"/>
<line x1="80" y1="62" x2="80" y2="84"/>
<line x1="100" y1="62" x2="100" y2="84"/>
<line x1="120" y1="62" x2="120" y2="84"/>
<line x1="140" y1="62" x2="140" y2="84"/>
<line x1="160" y1="62" x2="160" y2="84"/>
<path d="M115 30 L 120 25 L 125 30 L 120 35 Z" fill="url(#og1)" stroke="none" opacity="0.55"/>
</g>
</svg>
<span class="orn-name">Capital</span>
<span class="orn-meta">Section opener · 320 × 110</span>
</div>
<div class="orn-cell">
<svg viewBox="0 0 240 36" width="240" height="36" aria-hidden="true">
<defs>
<linearGradient id="og2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="rgba(184,153,104,0)"/>
<stop offset="20%" stop-color="rgba(184,153,104,0.85)"/>
<stop offset="50%" stop-color="rgba(212,182,131,1)"/>
<stop offset="80%" stop-color="rgba(184,153,104,0.85)"/>
<stop offset="100%" stop-color="rgba(184,153,104,0)"/>
</linearGradient>
<pattern id="og2-pat" x="0" y="0" width="48" height="36" patternUnits="userSpaceOnUse">
<path d="M0 18 Q 12 4 24 18 T 48 18" fill="none" stroke="url(#og2)" stroke-width="0.6"/>
<path d="M0 18 Q 12 32 24 18 T 48 18" fill="none" stroke="url(#og2)" stroke-width="0.6"/>
<circle cx="12" cy="11" r="0.7" fill="url(#og2)" opacity="0.6"/>
<circle cx="36" cy="25" r="0.7" fill="url(#og2)" opacity="0.6"/>
</pattern>
</defs>
<rect x="0" y="0" width="240" height="36" fill="url(#og2-pat)"/>
</svg>
<span class="orn-name">Frieze</span>
<span class="orn-meta">Section break · banking-engraving</span>
</div>
<div class="orn-cell">
<span style="font-family:var(--serif);font-style:italic;font-weight:300;font-size:96px;line-height:1;color:var(--metal);opacity:0.78;">&</span>
<span class="orn-name">Ampersand</span>
<span class="orn-meta">Closer glyph · italic 84 px</span>
</div>
</div>
</section>
<!-- ─── Voice ───────────────────────────────────────────────────── -->
<section>
<p class="section-eyebrow">Voice</p>
<h2 class="section-title">Speak as the <em>indexer,</em> not the marketer.</h2>
<p class="section-sub">Editorial, exacting, third-person. We are a directory, not a service desk.</p>
<div class="voice-grid">
<div class="voice-cell do">
<p class="v-eyebrow">Do</p>
<p class="v-quote">Every licensed attorney in California, indexed.</p>
<p class="v-rule"><strong>Why:</strong> states the scope and the verb. Indexed = drawn from a public roll, not curated for advertising.</p>
</div>
<div class="voice-cell dont">
<p class="v-eyebrow">Don't</p>
<p class="v-quote">Find your perfect lawyer fast — get matched in 60 seconds!</p>
<p class="v-rule"><strong>Why:</strong> "matched" implies referral; "perfect lawyer" is unsubstantiated; the urgency is theatrical. All three fail Rule 7.1 and §6155.</p>
</div>
<div class="voice-cell do">
<p class="v-eyebrow">Do</p>
<p class="v-quote">Each firm publishes its own consultation fee, schedule, and booking flow.</p>
<p class="v-rule"><strong>Why:</strong> attributes terms to the firm, not the directory. Money and engagement letters never touch us.</p>
</div>
<div class="voice-cell dont">
<p class="v-eyebrow">Don't</p>
<p class="v-quote">We'll find you a top-rated attorney near you — no fee.</p>
<p class="v-rule"><strong>Why:</strong> "we'll find" is referral language; "top-rated" is unsubstantiated; "no fee" implies a paid alternative we're undercutting.</p>
</div>
</div>
</section>
<!-- ─── Closer ──────────────────────────────────────────────────── -->
<div class="closer">
<p class="quote">A directory is a piece of typography before it is a piece of software.</p>
</div>
</main>
<footer>
<p class="legal">
Counsel & Bar is an independent directory of California-licensed attorneys, not a lawyer referral service under California Business & Professions Code §6155.
Visual standard v1.0 — last reviewed 2026-05-04.
</p>
<p>
<a href="/">Home</a> ·
<a href="/find-a-lawyer">Find counsel</a> ·
<a href="/methodology.html">Methodology</a> ·
<a href="/audit.html">Audit</a> ·
<a href="/privacy.html">Privacy</a> ·
<a href="/terms.html">Terms</a>
</p>
</footer>
<script>
if ('IntersectionObserver' in window && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in-view');
io.unobserve(e.target);
}
});
}, { threshold: 0.12 });
document.querySelectorAll('.reveal:not(.in-view)').forEach(el => io.observe(el));
}
</script>
</body>
</html>