ESQ CoPilot brand guide
One green, one near-black, a few grays and three message colors. One font for words, one for figures. Square, ruled and quiet, so the content carries the authority. Every ESQ CoPilot page, app and email follows these rules.
- Colors on the public site today
- 48
- Named colors after this guide
- 13
- Corner styles today → after
- 9 → 1
- Table styles today → after
- 2 → 1
- Icon line weights today → after
- 6 → 1
Thirteen colors, nothing else
Ten brand colors and three message colors. Hover and pressed shades and light message backgrounds belong to their parent color and are listed with it. Any color not on this page is a mistake.
Brand colors
1 · Ink
- HEX
- #15181D
- RGB
- 21 24 29
- Token
- --alc-ink
Headings, body text on white, logo, footer, dark heroes
2 · Ink 2
- HEX
- #3A4049
- RGB
- 58 64 73
- Token
- --alc-ink-2
Paragraphs, disclosures, secondary text
3 · Ink 3
- HEX
- #5B626B
- RGB
- 91 98 107
- Token
- --alc-ink-3
Captions and labels, 14 px and larger
4 · Paper
- HEX
- #FFFFFF
- RGB
- 255 255 255
- Token
- --alc-paper
Page background
5 · Stone
- HEX
- #F3F4F1
- RGB
- 243 244 241
- Token
- --alc-stone
Alternate bands, panels, table headers. Hover shade #E8EAE5
6 · Rule
- HEX
- #D5D8D2
- RGB
- 213 216 210
- Token
- --alc-rule
Hairlines between rows and sections
7 · Field
- HEX
- #7D847D
- RGB
- 125 132 125
- Token
- --alc-field
Borders of inputs, checkboxes and tiles
8 · Signal
- HEX
- #0B5F59
- RGB
- 11 95 89
- Token
- --alc-signal
Buttons, links, the logo square, tags. Hover #084A45, pressed #063A36
9 · Signal tint
- HEX
- #E2EFEC
- RGB
- 226 239 236
- Token
- --alc-signal-tint
Selected rows, highlighted panels
10 · On ink
- HEX
- #6FD1BE
- RGB
- 111 209 190
- Token
- --alc-signal-on-ink
Accent and check marks on Ink. Muted text on Ink #B9BFC6
Message colors (only for success, warning and error)
11 · Success
- HEX
- #1E6B34
- RGB
- 30 107 52
- Token
- --alc-success
Background #EEF6EF. Also "approved" and "found" states
12 · Warning
- HEX
- #8A4B00
- RGB
- 138 75 0
- Token
- --alc-warning
Background #FBF3E6. Also "pending" states, including the MCLE badge
13 · Error
- HEX
- #B42318
- RGB
- 180 35 24
- Token
- --alc-error
Background #FDF1EF. On Ink use #FFB4A2
Appendix A lists all 36 colors that leave the site and the color that replaces each one.
Mostly white, Ink for weight, Signal for action
Pages read as white paper with dark type. Signal marks what can be clicked. Message colors appear only next to words that say the same thing.
- White pages, Stone bands. Alternate sections may use Stone. No other tinted backgrounds.
- Ink is the only dark surface: footer, homepage and product heroes, course card headers. Flat Ink, no gradient.
- Signal means "you can act here": buttons, links, the active menu line, tags. Never a large background.
- On Ink, use On ink (#6FD1BE) for accents and check marks. Signal is too dark there.
- No gold, navy, blue, purple or second green anywhere.
- No color as the only signal. A colored state always has words or an icon.
Approved pairings
| Text or mark | On | Ratio | Result | Use |
|---|---|---|---|---|
| #15181D | #FFFFFF | 17.79 : 1 | Passes | Headings and body text |
| #3A4049 | #FFFFFF | 10.45 : 1 | Passes | Paragraphs |
| #3A4049 | #F3F4F1 | 9.47 : 1 | Passes | Paragraphs on Stone |
| #5B626B | #FFFFFF | 6.17 : 1 | Passes | Captions, 14 px and larger |
| #0B5F59 | #FFFFFF | 7.51 : 1 | Passes | Links and tags |
| #FFFFFF | #0B5F59 | 7.51 : 1 | Passes | Primary button label |
| #FFFFFF | #15181D | 17.79 : 1 | Passes | Text on dark heroes |
| #B9BFC6 | #15181D | 9.60 : 1 | Passes | Muted text on Ink |
| #6FD1BE | #15181D | 9.78 : 1 | Passes | Accents on Ink |
| #1E6B34 | #EEF6EF | 5.94 : 1 | Passes | Success messages |
| #8A4B00 | #FBF3E6 | 6.18 : 1 | Passes | Warning and pending messages |
| #B42318 | #FDF1EF | 5.95 : 1 | Passes | Error messages |
| #FFB4A2 | #15181D | 10.42 : 1 | Passes | Error text on Ink |
| #7D847D | #FFFFFF | 3.84 : 1 | Passes | Input borders (needs 3 to 1) |
Schibsted Grotesk for words, IBM Plex Mono for labels and figures
Both fonts are served from esqcopilot.com (SIL Open Font License 1.1). No page loads fonts from Google or anywhere else.
Rules
- Sentence case for every heading and button ("One platform for the whole practice"). Names keep their capitals: ESQ CoPilot, Matching Engine, AI Practice Risk Score, State Bar of California.
- Three weights only: 400 text, 500 menu, 600 headings, buttons and bold.
- Text lines stop at about 68 characters.
- Nothing smaller than 14 px, except 12 px mono labels.
Square, ruled, generous with space
Structure comes from lines and spacing, not boxes and shadows. A 2 px Ink line opens a group; 1 px Rule lines separate rows.
Page grid
| Setting | Desktop | Tablet | Phone |
|---|---|---|---|
| Content width | full page width, text max 68 characters | full | full |
| Side margin | 32 px | 24 px | 16 px |
| Column gap | 24 px | 24 px | 16 px |
| Section spacing | 96 px | 64 px | 48 px |
| Menu bar | 64 px | 64 px | 64 px |
Pages use the full browser width, as you asked for all pages. Running text still stops at about 68 characters so it stays easy to read; tables, maps and lists spread out.
Spacing (4 px steps)
Corners: 2 px everywhere
Buttons, fields, cards, panels, tags and tiles all use 2 px (your choice, October 21, 2026). Only step numbers and avatars stay round.
Today's 4, 6, 8, 10, 12, 14 and 99 px corners all change to 2 px.
Buttons
Right and wrong
Ethics, confidentiality, verification, cybersecurity, supervision and vendor risk.
Groups open with a 2 px Ink line. No box, no shadow.
Boxes, side stripes and round corners compete with the content.
Same ruled pattern in white; check marks in On ink.
- No lawyer pays for placement or ranking
See-through boxes, 14 px corners and #7FD1B9 all leave.
Signal for available, gray for planned, Warning for pending.
#1F6B4F green and the #7A5400 / #C79A2B amber are outside the palette.
Messages and fields
- Shadows: only on the phone menu and the Products drop-down.
- Motion: color changes in 120 ms, nothing moves or grows on hover; switched off for visitors who ask for reduced motion.
- Focus: 2 px Signal outline on everything a keyboard can reach.
Plain, factual, specific
| Write | Use | Never |
|---|---|---|
| ESQ CoPilot | The brand. Domain in lowercase: esqcopilot.com | EsqCoPilot, ESQCoPilot |
| Matching Engine | Matches people with licensed lawyers and explains why | "referral service" |
| EsqHarness pending | Today the menu says "AI Harness" and the page says "EsqHarness". One name should be used in both places. | Esq Harness |
| AI Practice Risk Score | Full name on first use; "Risk Score" after that and in the menu | Free Risk Score as a name |
| Courses | Course title: "Ethics-Safe AI Use for Law Firms" | |
| Digital Crossings Inc | Operator; no comma, no period | Digital Crossings, Inc. |
| Christian Kameir | No title, or "Course Author" | Founder, CEO, any officer title |
Voice
- Short sentences, everyday words, American English, "we" voice.
- Specific numbers over adjectives.
- MCLE: only "Pending State Bar review" until the State Bar approves.
- Never "would" in drafts.
- No return projections, guarantees, assured tax treatment, urgency or scarcity.
Email to lawyers
- "Dear [first name],"
- No contractions.
- "With respect and appreciation," then "Christian Kameir" and the Irvine address. Today's 5 notes: "Christian Kameir" only.
- No word "investor" and no investment ask in outreach.
Numbers and dates
$99 · $50,000 · December 3, 2026 · 1.0 hour · 60 minutes · U.S. · 92 Corporate Park, Ste C #1083, Irvine, CA 92606 · notices@esqcopilot.com
One table style, a fixed chart order
| Product | Status | Price |
|---|---|---|
| AI Practice Risk Score | Live | $0 |
| eBook | Live | $99 |
| Protection kit | Planned | — |
2 px Ink line on top, 1 px Rule between rows, no side lines, mono uppercase headers, mono figures. The boxed style leaves. (Rows show the style only.)
Chart color order
Charts in the CRM and reports use these in this order. More than five series is a sign to split the chart. Good / warning / bad values use the three message colors.
Three bars, a Signal square, ESQ CoPilot
Unchanged. The logo files will also get ESQ CoPilot file names; the current addresses keep working.
Primary
Menu bar at 22 px tall, documents, signatures.
Reversed
Footer at 20 px and any Ink background.
Compact
Square spaces and avatars, 64 px minimum.
Symbol and favicon
Pixel-fitted files below 24 px.
- Clear space: 44 units (two bar thicknesses), about 9 px at menu size.
- Minimum: 18 px tall for the horizontal logo.
- No recoloring, effects, rotation, retyped wordmark, or moving the square.
One line weight, text-first badges
- Icons: outline only, 1.5 px line, 20 px box, drawn in the text color. Today's 1, 1.2, 1.3, 1.4 and 2 px icons change to 1.5 px.
- Check marks: Signal on white, On ink (#6FD1BE) on Ink.
- Step numbers: Ink circles, 32 px, white figures.
- Badges: 12 px mono uppercase, 2 px corners, colored border and text. Signal = available, gray = planned, Warning = pending, Success = approved.
- No stock legal pictures: gavels, scales, columns, seals.
Word files and messages
- Word documents: Times New Roman 12 pt, no divider lines, "we" voice, never "would", American English. pending Switch to Schibsted Grotesk for a matching look, or keep Times New Roman.
- Versions: every deliverable saved as a new version (V1, V2, V3).
- Legal and offering documents follow counsel's format.
One shared style file, then one service at a time
Each step gets before and after pictures and your approval before it goes live. Nothing about content, prices or legal wording changes during the cleanup.
| Order | Service | Address | Colors today | Work |
|---|---|---|---|---|
| 1 | Public website | esqcopilot.com | 48 | Replace 36 colors, one corner style, one table style, sentence-case headings, intake.html onto the system |
| 2 | Matching Engine | match.esqcopilot.com | 8 | Link the shared style file; check fonts, buttons, corners |
| 3 | Lawyer directory | directory.esqcopilot.com | 20 | Map its colors to the 13; separate app, so a separate release |
| 4 | Pay-per-client app | app.esqcopilot.com | not yet counted | Its source lives on the server; count and map before switch-on |
| 5 | CRM pages | esqcopilot.com/crm.html and others | 39 | Internal tool; same palette, chart order from section 7 |
| 6 | Emails and checkout | Auto-send, notices, Stripe | — | Signal for links and buttons; Stripe checkout already uses Signal and Ink |
Every color that leaves, and what replaces it
The 36 colors typed into single pages on esqcopilot.com today and what each one becomes. One of them, #FFB4A2, stays as the Error shade on Ink. Uses are counted across the 40 public pages.
| Today | Becomes | Where it appears now | |
|---|---|---|---|
| #1F6B4F 30 uses | → | Signal #0B5F59 | "Live" and "Free" tags |
| #B8965A 13 uses | → | Signal #0B5F59 | Old gold check icons (course-detail, intake) |
| #C9A96E 1 uses | → | Signal #0B5F59 | Old gold (intake.html) |
| #1A365D 3 uses | → | Ink #15181D | Old navy icons (course-detail.html) |
| #0F1216 1 uses | → | Ink #15181D | Hero gradient start, EsqHarness demo panel |
| #111E35 1 uses | → | Ink #15181D | Old navy (intake.html) |
| #1B2A4A 1 uses | → | Ink #15181D | Old navy (intake.html) |
| #744210 1 uses | → | Ink #15181D | Old brown gradient (faculty.html) |
| #1D6B3A 1 uses | → | Success #1E6B34 | Citation "found" status |
| #4B5563 5 uses | → | Ink 3 #5B626B | Badge "none" text |
| #718096 1 uses | → | Ink 3 #5B626B | Old gray (intake.html) |
| #7FD1B9 5 uses | → | On ink #6FD1BE | Check marks on Ink |
| #A0AEC0 2 uses | → | Field #7D847D | Old gray (intake.html) |
| #7A5400 9 uses | → | Warning #8A4B00 | MCLE pending badge, Risk Score pills |
| #C79A2B 7 uses | → | Warning #8A4B00 | MCLE pending badge border |
| #7A5A00 1 uses | → | Warning #8A4B00 | Pending text |
| #8A5A00 1 uses | → | Warning #8A4B00 | Citation "unconfirmed" status |
| #9A6B00 1 uses | → | Warning #8A4B00 | Risk Score middle pill |
| #B45309 1 uses | → | Warning #8A4B00 | Warning icon (cle-requirements.html) |
| #C9A43A 1 uses | → | Warning #8A4B00 | Pending border |
| #B4442C 4 uses | → | Error #B42318 | EsqHarness case border, Risk Score pill |
| #FC8181 4 uses | → | Error #B42318 | Old error (intake.html) |
| #A3161B 2 uses | → | Error #B42318 | Citation "not found" status |
| #8A1F1F 1 uses | → | Error #B42318 | Risk Score error |
| #8A2F1D 1 uses | → | Error #B42318 | Risk Score "bad" pill text |
| #9A3412 1 uses | → | Error #B42318 | Account page error |
| #9ECBFF 1 uses | → | Muted on ink #B9BFC6 | EsqHarness demo, your lines |
| #C9CDD2 5 uses | → | Rule #D5D8D2 | Badge "none" border |
| #CBD5E0 1 uses | → | Rule #D5D8D2 | Old gray (intake.html) |
| #EAF6F0 7 uses | → | Success background #EEF6EF | Approved badge background |
| #F6F7F8 5 uses | → | Stone #F3F4F1 | Badge "none" background |
| #FFF8E6 7 uses | → | Warning background #FBF3E6 | MCLE pending badge background |
| #FFF4D6 2 uses | → | Warning background #FBF3E6 | Risk Score label background |
| #FFF8EC 2 uses | → | Warning background #FBF3E6 | Accreditation callout background |
| #FFB4A2 1 uses | → | Error on Ink #FFB4A2 | EsqHarness demo errors (stays: Error on Ink) |
| #E8EAED 2 uses | → | Paper #FFFFFF | EsqHarness demo text |
Version 2, approved by Christian Kameir on October 22, 2026. Version 1 (the record of the site as it was) stays in the repository at ESQCoPilot-Migration-V1/brand/guide.src.html. Source of this page: ESQCoPilot-Migration-V1/brand/guide-v2.src.html, commit c636fbd.