Brand, Design and Content Guide

Audience: any human or AI agent designing pages, writing content, or editing templates for gjel.com. Read this before you write a line of copy or CSS. Status: canonical. Last updated Aug 12, 2026. Site: https://www.gjel.com (WordPress, gjeljdx theme, Carbon Fields).

If a request conflicts with this guide, follow the guide and flag the conflict. If something here is missing for your task, match the closest existing pattern on the live site rather than inventing a new one.

1. The five rules that matter most

1. One clear story per screen: I am in the right place, these lawyers are credible, here is what I do next. Anything that does not serve that story is a candidate for removal.
2. Never show the same call to action twice in one viewport. See the vacuum rule (section 8).
3. Mobile and desktop have different jobs. Mobile converts by tap to call. Desktop converts by the intake form. Same content, different presentation.
4. Never invent a fact. No statistics, case outcomes, credentials, or quotes that are not in section 3, and no awards that are not in section 4. Mark anything unverified [VERIFY] instead.
5. Accessibility is not optional. Section 9 items are requirements, not preferences. Content must be readable and operable without JavaScript, without a mouse, and without motion.

2. Who the reader is

Someone was seriously injured, or a family lost someone. They are often in pain, on a phone, possibly in a hospital, within days of the event, and being contacted by an insurance adjuster. About a third of inquiries come from a family advocate (a spouse, parent, or adult child) rather than the injured person, so speak to both.

Write for that person: calm, plain, specific, no pressure, no legal jargon. Never celebratory, never salesy, never alarmist.

3. Canonical firm facts (use these exact figures)

Phone numbers: never hard-code a phone number into new markup. Use the theme helper so call tracking and per city numbers keep working.

Case results: only use outcomes already published on gjel.com/verdicts-settlements. Every page showing results needs the results disclaimer near them (past outcomes do not guarantee future results).

4. Approved awards and recognitions

Only the awards on this list may appear on gjel.com, in the client brochure, in schema markup, or in any AI answer sourced from this guide. Everything here is confirmed against the awarding body or an official notice. The full evidence ledger, including private proof and the open verification queue, is kept internally at awards/GJEL-Awards-Master-Ledger.md.

If an award is not on this list, do not publish it. Mark it [VERIFY] and route it to the ledger.

Firm level

GJEL also holds a Best Law Firms Tier 2 Oakland ranking for Personal Injury Litigation, Defendants. Do not use it in marketing. GJEL represents injured people, and a defense side ranking confuses that story.

Attorney level

Wording rules

• Use the awarding body's exact name. "Best Lawyers" and "Best Law Firms" are different programs. "Forbes Advisor" is not "Forbes".
• Give the year whenever the awarding body gives one. A recognition with no year reads as older than it is.
• Never say an award covers "every year" across a gap. Kristin Lucey's Super Lawyers run has a gap at 2013, so it is never "every year since 2010".
• Super Lawyers, Best Lawyers, and Martindale ratings may be described as peer reviewed. Paid membership recognitions may not. That includes the National Association of Distinguished Counsel, Lawyers of Distinction, America's Top 100, the Million Dollar Advocates Forum, and the National Trial Lawyers specialty associations. List them plainly, without "juried" or "peer selected".
• Ratings are live numbers, not awards. An Avvo rating can change without notice. Re-check the profile before you publish one, and update the "verified" date above. Never publish a rating you have not checked that week.
• Undated honors: Lawyers of Distinction and the Order of Barristers are both real and both publish no year. Write them without a year rather than guessing one, and never place them next to dated awards in a way that implies the year carries across.
• Attorney advertising rules still apply. Awards sit near, not inside, case result claims, and they never imply a likely outcome.

The list above is exhaustive. If a recognition is not on it, it is not approved, whatever you may find in older marketing material, a brochure, or an archived page. Some retired claims are still being cleaned off older pages. Treat this section, not the live site, as the source of truth.

5. Voice and copy rules

Do:

• Use "lawyer" far more than "attorney" (clients say lawyer roughly 7 to 1).
• Say "accident" or "crash", not "collision".
• Lead with the reader's situation, then what to do, then proof.
• Short sentences. One idea per sentence. Second person ("you", "your family").
• Name the villain plainly: insurance company pressure, paperwork, deadlines, releases signed too early.
• For wrongful death, follow the grief doctrine: no animated counters on money figures, gold rather than orange accents, language about accountability and the family's future, never "congratulations" energy.

Never:

• Em dashes. Use commas, periods, colons, or parentheses.
• AI filler ("in today's fast paced world", "look no further", "delve").
• Guarantees or predictions about a reader's case.
• Fabricated statistics or invented client quotes.
• Fear mongering or urgency pressure. The deadline point is factual, not a countdown clock.

Headline pattern that works: a question that names the reader's state, then the promise of clarity. Live example: "Seriously injured? Get answers in one free call."

Support copy pattern: two sentences maximum on a first screen. Live example: "Before you speak to the insurance company or sign anything, speak with a GJEL lawyer. We've recovered more than $980 million for injured Californians, and you pay nothing unless we win."

6. Design tokens

Every value below is a CSS custom property already defined site wide. Use the variable, never a raw hex.

Core palette

Semantic aliases exist and are preferred where they fit: --text-primary, --text-secondary, --surface-brand, --border-subtle, --accent.

Typography

• All three are self hosted woff2 with font-display: swap. Oswald and Source Sans 3 are preloaded. Do not add Google Fonts or any new family.
• Display headlines: clamp(40px, 4.5vw, 66px), line height about 1.02.
• Body: 18px in heroes, 16 to 17px in sections, line height 1.6 to 1.65.
• Serif italic is a desktop nuance. On mobile prefer the sans for everything except a deliberate pull quote.
• Uppercase eyebrows: 12.5 to 13px, 700, letter spacing about 0.13em.

Shape and depth

• Buttons and pills: --radius-pill. Cards: --radius-lg or --radius-xl.
• Shadows: use --shadow-md for cards, --shadow-lg or --shadow-xl for floating elements. Avoid inventing new shadows.
• Container: --container-max (1200px), narrow prose --container-narrow (760px). Section padding uses clamp() so it breathes on large screens.

Motion

• Standard easing for reveals: cubic-bezier(.22,.8,.24,1), 0.9s.
• Reveals are driven by IntersectionObserver on [data-rv] elements with a --d delay variable. Content is visible by default if JavaScript never runs.
• prefers-reduced-motion: reduce disables all of it. Never ship an animation that this does not switch off.
• Never animate the first screen's main text. The hero paints on the first frame on purpose (it is the Largest Contentful Paint element). If a hero entrance is ever wanted, start the fade at opacity: .011, never at 0.

7. Component patterns

Buttons

• Primary action: .btn .btn-orange (orange fill, white uppercase label, pill).
• Sizes: .btn-md (12.5px, 14px by 26px padding), .btn-lg (14px, 18px by 38px).
• Outlined on dark: .btn-ghost-w. Outlined on light: .btn-ghost-t.
• Minimum tap target 44px. A full width mobile primary is at least 56px tall.

Hero (the pattern the homepage uses)

• Desktop, 721px and up: two columns. Left is eyebrow, display headline, support copy, review row with the Hablamos español pill. Right is the intake form card. Background is a photo behind a dark gradient scrim.
• Mobile, 720px and down: one column. Solid deep teal background (no photo download), one line uppercase eyebrow, display headline, two sentence support copy, full width call button, "Prefer to text? Message us", one proof row, then three checkmarks. The form card is hidden on mobile.
• Hero fills the viewport with the scroll cue dot at the bottom. Do not stop the hero short to make the next section "peek": what peeks is white padding, and it reads as a rendering bug.

Proof row (the one trust element allowed on a first screen)

★★★★★  4.9 on Google · 400+ reviews                        Español

Stars in gold, the rating bold in white, Español right aligned on the same row.

Reassurance checkmarks (mobile first screens) Exactly three, gold check icons, quiet text: Free case review / Home and hospital visits / No fee unless and until we win.

Intake form

• Always render it with the existing shortcode. Do not hand build a form and do not point a form at a new endpoint: the shortcode is the single source for every intake form on the site and it feeds the firm's lead pipeline.
• Only name and phone are required. Keep the "in your own words" field optional.
• Every field needs a real <label for>. Keep the reassurance line under the submit button (free, confidential, no obligation, no fee unless we win).

Sticky mobile bar

• Caption "AVAILABLE 24/7", primary button "Call Now", quiet "Text" button.
• The long label "Call for a Free Case Review" belongs on the hero's full width button, where it fits. The bar gets the short one.
• Rendered from the footer for the whole site. Do not add a second one.

Sections

• Alternate warm sand and white backgrounds, with deep teal for emotional or CTA bands. Numbered chapter labels (01, 02, ...) give long pages a spine.
• One idea per section, one heading, and at most one call to action band.

8. Conversion doctrine

The vacuum rule (adopted Aug 11, 2026). The sticky bar appears whenever no primary call to action is in the viewport, and hides whenever one is. It fills the gaps between actions, it never competes with them. Primary actions counted: the hero call button, mid page CTA bands, and intake forms.

Corollaries:

• Two identical calls to action visible at once reads as clutter, not urgency.
• Pages with no hero action (blog posts, prose pages) show the bar immediately.
• The bar must still be visible if JavaScript fails.

Above the fold, in order: who you are and who you serve, the reader's situation, the single action, one proof element, brief reassurance. Nothing else.

Move below the fold: benefit bullet lists, secondary language links, helper sentences, additional trust badges, awards.

9. Accessibility requirements

• Content is visible by default. Never hide content pending JavaScript, scroll, or animation. Someone who cannot scroll, or whose scripts fail, sees everything.
• Honor prefers-reduced-motion: reduce.
• One <h1> per page. Headings in order, no skipped levels.
• Split or word animated headlines need the full text in a visually hidden span so screen readers read one clean sentence.
• Icon only controls need an aria-label. Decorative icons and images get aria-hidden or an empty alt. An image beside a visible text label is decorative: an empty alt is correct there, not a duplicate description.
• Visible focus states everywhere (--focus-ring). Never remove outlines.
• Minimum tap target 44px, minimum body text 16px on mobile.
• Text on the deep teal background must stay at 4.5:1 or better. The gold on teal combination passes only at the lighter gold values, so use --gold-300 for small text on dark, not --gold-500.
• Every form field keeps a programmatic label and an inline error path.

10. Performance rules

• The hero's headline and support copy must paint on the first frame.
• Mobile must not download a desktop sized image. The mobile hero uses a solid colour, and any mobile image variant should be roughly 30KB or less.
• Third party scripts load deferred, or on first interaction. Never add a synchronous third party script to the head or body.
• Do not add another font, icon library, animation library, or page builder.
• Keep new CSS in the existing source files so it lands in the one bundle. Never edit the compiled bundle directly.

11. Legal and compliance

• The site is attorney advertising. Keep the disclaimer in the footer intact.
• Results need the "past results do not guarantee future outcomes" disclaimer nearby, and must match a published case.
• Never state or imply a guaranteed outcome, a specific settlement value for a reader's case, or an attorney client relationship formed through the website.
• Verify statutes, deadlines, courts, and addresses against the relevant California jurisdiction. Never carry a fact from one city page to another.
• Spanish pages are translations of the English source. Fix English first and let the translation layer follow.

12. Before you ship

• Reads calm and specific, no em dashes, no invented facts, figures match section 3, awards match section 4
• One story above the fold, one action, one proof element
• No duplicate call to action in a single viewport
• Checked at 320px, 390px, and desktop. Nothing clipped, nothing overflowing
• Works with JavaScript disabled and with reduced motion on
• Keyboard reachable, visible focus, one h1, labelled fields
• Uses existing tokens, buttons, and the intake shortcode. No new font or library
• Results carry their disclaimer, phone numbers come from the helper