# Kurtz & Blum — Design System A design system for **Kurtz & Blum, Attorneys At Law** — a Raleigh, NC law firm in practice since 1998. The firm represents clients in **criminal defense, family law, DWI/DUI, traffic, and domestic-violence** matters across Wake County and beyond. Tagline: **"We're in your corner."** This system reproduces the brand foundations the firm uses on **kurtzandblum.com** and across collateral, so that any new artifact — a slide, a marketing page, a one-pager, an internal prototype — can look and read like K&B without guessing. ## Sources used to build this system - `uploads/K&B Brand Guide-2026052709421767.pdf` — the official 5-page K&B Brand Guide (logos, icons, colors, type, social collateral, legal terms). Links inside the PDF point to the firm's Google Drive folders for distribution. - `uploads/Brand Guide-20260527T134309Z-3-001.zip` — the full asset drop that PDF references: SVG + PNG logos (primary, secondary, b/w, icon-only, Spanish), Raleigh's Best 2024 award marks (Gold + Silver), all affiliation logos (AAJ, BBB, NCAJ, NCBA, NTL, WRAL, Cary DUI Lawyers 2025), and the two brand font families packaged as zips inside the zip (`Poppins.zip`, `Bebas_Neue.zip`). - `https://kurtzandblum.com/` — the live site, fetched for voice, IA, section vocabulary, and link patterns. All assets the PDF lists were extracted and live under `assets/`. Both font families ship with this system in `fonts/` (open-source SIL OFL licenses included). ## Products represented There is **one customer-facing product**: the **kurtzandblum.com marketing site**, built on WordPress + Elementor. There is no SaaS app, mobile app, or in-product UI shipped under this brand — the system is therefore focused on **marketing surfaces** (web pages, blog, social collateral, slides, business card). The "Client Center" link in the nav opens an external payments portal — not K&B-skinned UI, so it is out of scope. --- ## Index — what's in this folder ``` README.md ← you are here SKILL.md ← Claude Skill manifest (run this system as a portable skill) colors_and_type.css ← all CSS custom properties + semantic type classes fonts/ ← Poppins (full family) + Bebas Neue, flat layout Poppins-*.ttf ← all 18 weights/styles BebasNeue-Regular.ttf assets/ logos/ KB_logo_primary.{svg,png} ← horizontal lockup, blue + orange, light bg KB_logo_secondary.{svg,png} ← horizontal lockup, white + orange, dark bg KB_logo_bw.{svg,png} ← single-ink mark icon/KB_icon_{primary,secondary,bw}.{svg,png} ← square monogram (the blue-orange "L" tile) spanish/KB_logo_{primary,secondary}_Spanish.svg awards/ 2024RB_GoldWinner.{svg,png} ← Raleigh's Best 2024 Gold 2024RB_SilverWinner.{svg,png} ← Raleigh's Best 2024 Silver Raleighs-best-awards.svg ← combined Raleigh's Best mark affiliations/ aaj.svg, bbb.svg, ncaj.svg, ncba.svg, ntl.svg, WRAL.png, nc_cary_dui-lawyers_2025.webp ← inverse mark, intended for dark bg preview/ ← Design-System-tab cards (one specimen each) ui_kits/ website/ ← the marketing-site UI kit (JSX + index.html) uploads/ ← original brand-guide PDF + asset zip (untouched) ``` The **Design System tab** of this project surfaces every card in `preview/` plus the UI kit and any slide samples — open it to browse the system visually. --- ## CONTENT FUNDAMENTALS K&B is a **trusted-neighbor law firm**. The copy never reads like a billboard ad ("ACCIDENT? CALL NOW!") and never reads like a white-shoe firm bio ("our practitioners advise…"). It sits in the middle: clear, calm, declarative, and always pointed at the reader's problem. ### Voice — what to write like - **Second person, plural firm.** "You" are the client; the firm is "we" / "our team" / "our attorneys". Never "the firm" or "the user" or "the customer". - **Lead with the problem, follow with the action.** *"A DWI/DUI charge can impact your future. Our DWI attorneys—recognized as Raleigh's Best—challenge evidence and defend your driving privileges."* - **Plain English, lawyerly precision.** Use real legal terms (felony, equitable distribution, alimony, DMV hearing) — these are exactly what people search for — but never stack jargon. One legal term per sentence, then explain it in client language. - **Reassure without softening the stakes.** *"Whether amicable or contentious, child custody & support cases require sensitivity."* The brand acknowledges that these moments are hard before promising to help. - **Confident, not boastful.** *"50+ years of combined legal knowledge"*, *"trial-ready strategies"*, *"strategic, aggressive advocacy"* — these are claims, but they're tied to verbs the firm actually does. ### Tone dial | Setting | K&B sits at… | | -------------------- | ------------ | | Formal ↔ Casual | About 70/30 formal. Suits and shaken hands, not zip-up hoodies. | | Reserved ↔ Warm | Warm. The firm talks about feelings ("overwhelming", "tough cases") and brings up the office dog Augie ("the Law Dog", "paw-torney"). | | Neutral ↔ Persuasive | Persuasive — but persuasion comes from specifics (years, awards, courts), not adjectives. | ### Casing & punctuation rules - **Section eyebrows** (the small label above an H2) — lowercase or Title Case, depending on slot. The site mixes both (`#### areas of practice`, `#### About Us`). When in doubt, **Title Case**, set in Poppins SemiBold + uppercase letter-spacing. - **H1 / H2 headlines** — Title Case. Example: *"Schedule Your Consultation"*, *"Recognized for Excellence in Legal Representation"*. - **Hero banner** — ALL CAPS, Bebas Neue. Used sparingly (the brand guide says "Use sparingly"). Saved for: the firm's tagline ("WE'RE IN YOUR CORNER"), the practice-area splash on category pages, and award call-outs. - **Buttons / CTAs** — Title Case. *"Schedule a Consultation"*, *"Get Directions"*, *"Read More"*, *"View Profile"*. Never SHOUTING. Phone number CTAs use the parens-and-dash format: `(919) 832-7700`. - **Practice-area names** — *Family Law*, *Criminal Law*, *DWI/DUI*, *Traffic Law*, *Misdemeanors & Felonies* — always Title Case in nav, never `dwi`, never `D.W.I.`. - **Ampersand** — yes, "Kurtz & Blum" always with `&`, never "and". The ampersand is part of the wordmark. - **Em dashes** for emphasis: *"With Kurtz & Blum, you don't just hire an attorney—you gain a trusted legal team that's in your corner every step of the way."* Tight, no spaces around the dash. ### Emoji & icon-text mixing - **No emoji.** The brand guide doesn't sanction emoji and the live site never uses them. Don't slip a 🚀 into anything. - The closest the brand gets to a personality glyph is the **Augie dog** photographs and the literal **paw-torney** word coinage — written, not pictured. ### Specific examples to mirror > *"At Kurtz & Blum, we take a collaborative approach to every case. When you hire one of our attorneys, you gain the knowledge and dedication of an entire legal team."* > *"A DWI/DUI charge can impact your future. Our DWI attorneys—recognized as Raleigh's Best—challenge evidence and defend your driving privileges."* > *"Whether amicable or contentious, child custody & support cases require sensitivity. Our award-winning Raleigh family law attorneys are here to help."* > *"We know that hiring a lawyer can feel overwhelming—especially if it's your first time dealing with legal issues."* The pattern: **acknowledge → name the move → invite the next step.** Three short sentences max. Then a CTA. --- ## VISUAL FOUNDATIONS ### Colors Three brand colors, the rest are derived for UI work. | Token | Hex | Role | | ---------------- | ---------- | ---- | | `--kb-blue` | `#0054A0` | Primary. Wordmark, headlines on light, links, primary buttons. The firm's "trust" color. | | `--kb-orange` | `#BC6D0A` | Accent. Tagline ("We're in your corner"), award marks, secondary CTAs, the right-bracket of the icon mark. **Never** primary on body copy or large surfaces — it's a spotlight. | | `--kb-black` | `#000000` | Body text on light backgrounds (used as `--kb-ink` `#0C0C0C` in practice for less harsh anti-aliasing). | Extended scale (in `colors_and_type.css`): tonal blues `100..900`, tonal oranges `100..900`, neutrals (ink → paper), plus semantic roles (`--kb-success`, `--kb-warning`, `--kb-danger`, `--kb-info`). **Pairings:** - Default surface: white paper with `--kb-ink` body, `--kb-blue` headings. - "Dark hero" surface: `--kb-blue-900` `#002F5C` background with white text and an orange tagline. - Tinted surfaces: `--kb-blue-50` and `--kb-orange-50` are the only allowed brand-tinted backgrounds. They're whisper-quiet on purpose. - **Never** use orange and blue together at saturated 50/50 — one always dominates (typically blue), the other accents. ### Type - **Display / banner — Bebas Neue Regular.** Tall, narrow, all-caps. Reserved for the tagline, hero ALL-CAPS banners, big award headlines, and section dividers on collateral. The brand guide explicitly says "Use sparingly" — treat Bebas like a megaphone. - **Body & headings — Poppins.** Full geometric sans, weights 300/400/500/600/700 in active use. Used for H1–H6, body, captions, buttons, navigation, and forms. Forms the visual "glue". - **Mono — platform mono stack** for any technical readout (e.g. case numbers, code, redacted strings). Not part of the formal brand but defined for completeness. `--kb-font-mono` resolves to `ui-monospace, "SF Mono", Menlo, monospace`. To adopt a branded mono (JetBrains Mono was the original intent), drop the `.ttf` into `fonts/`, add a matching `@font-face`, and prepend the family to the token. Type scale lives in `colors_and_type.css` as `--kb-size-eyebrow`/`-xs`/`-sm`/`-base`/`-lg`/`-xl`/`-h4`/`-h3`/`-h2`/`-h1`/`-hero`. Semantic classes: `.kb-eyebrow`, `.kb-hero`, `.kb-h1`–`.kb-h4`, `.kb-lead`, `.kb-body`, `.kb-small`, `.kb-micro`, `.kb-tagline`, `.kb-quote`. ### Spacing A **4px base** scale: `--kb-space-1..10` (4, 8, 12, 16, 24, 32, 48, 64, 96, 128). Section vertical rhythm on marketing pages is `--kb-space-9` (96px) between major sections, `--kb-space-6` (32px) inside a section. ### Backgrounds & imagery - **Photography first.** The live site relies on **stock photography of people in moments of decision**: a couple distantly seated with rings on divorce papers, a smartphone in handcuffs, a lawyer reviewing documents. The imagery is **warm, mostly daylight, slightly muted**, never high-fashion or grainy. No black-and-white treatments. No filters. No duotones. - **No hand-drawn illustrations.** None on site, none in the brand guide. - **No repeating patterns or textures.** White paper is the default ground. - **No gradient hero backgrounds.** When a hero needs depth, it uses **a tinted dark-blue overlay** on a photograph or a solid `--kb-blue-900` block — not a gradient between blue and purple, not a multi-color mesh. - **Full-bleed photo blocks** are common on top-of-page heroes and section dividers; inner content sits in an `--kb-container` (1200px max) centered band. ### Animation The live site is conservative — **WordPress/Elementor defaults, not bespoke motion**. Practical rules for this system: - **Fade + 8–12px translate up** on scroll-in for cards and feature blocks. Duration `--kb-dur-base` (220ms), easing `--kb-ease-out`. - **No bounces, no overshoots, no spring physics.** This is a law firm. - **Hover** state on links/buttons: 140ms color crossfade — blue → orange on links, primary-blue → blue-500 on filled buttons. - **No parallax**, no scroll-jacking. - **No animated SVG icons.** Static glyphs only. ### Hover & press states - **Links** in body copy: underlined or border-bottom in `--kb-blue`, on hover the color shifts to `--kb-orange`. Underline weight stays the same. - **Primary button** (filled blue): on hover, background lifts to `--kb-blue-500`; on press, drops to `--kb-blue-700` with a 1px y-translate. - **Secondary button** (outline blue): on hover, fill becomes `--kb-blue` with white text. - **Accent button** (filled orange): on hover, background lifts to `--kb-orange-500`. - **Cards**: on hover, shadow steps from `--kb-shadow-sm` → `--kb-shadow-md` and the card translates `-2px` on Y. No tilting, no glow. - **Focus** rings: 3px `rgba(0, 84, 160, 0.35)` outline offset 2px (`--kb-shadow-focus`). ### Borders, dividers, rules - **Hairlines** in `--kb-line` `#E6E6E6` separate list rows and nav. - **Strong rules** in `--kb-rule` `#D6D6D6` under section eyebrows. - The signature **chunky 4px orange underbar** (`--kb-rule-w-display` in orange) sits under the most important hero headlines — a single short line, never the full width. - **No double rules**, no dashed lines anywhere. ### Shadows & elevation A flat-with-deliberate-card-lift system. Five steps, all near-black, all soft, never blue-tinted (except `--kb-shadow-card`, which leans subtly navy for warmth on top of white-paper surfaces). - `--kb-shadow-xs` — buttons resting state, form inputs - `--kb-shadow-sm` — default cards - `--kb-shadow-md` — cards on hover, dropdown menus - `--kb-shadow-lg` — modals, image lightboxes - `--kb-shadow-card` — practice-area cards on the homepage (subtle navy bias) - `--kb-shadow-focus` — focus ring No inner shadows. No layered "neumorphism". ### Capsules vs. protection gradients The site does **not** use translucent capsules on full-bleed photos. When text needs to sit over a photo (e.g. blog hero), the photo gets a **solid dark-blue overlay at ~55% opacity** behind the text band — not a gradient. The result reads as "photograph + navy wash", not "photograph + blur card". ### Layout rules - **Fixed nav bar** at top, white background, drops a `--kb-shadow-sm` once the page scrolls below 8px. - **No sticky CTAs**, no chat-bubble overlays, no exit-intent popovers (the site uses Elementor popups, but minimally). - **Container width** `1200px`, content gutters `--kb-space-5` (24px) on mobile, `--kb-space-6` (32px) on desktop. - **Practice-area cards** sit in a 3-column responsive grid that collapses to 2 then 1. - **Footer** is dark — `--kb-blue-900` background, white text, orange link hovers. ### Transparency, blur, glass - **Effectively none.** No `backdrop-filter: blur`, no frosted glass, no translucent header. The header is opaque white. - The only translucency on the system is the dark-blue photo overlay described above. ### Corner radii The brand reads **square-leaning**. Defaults: - **Buttons** — `--kb-radius-sm` (4px). Pill buttons are reserved for tag-style chips only. - **Inputs** — `--kb-radius-sm` (4px). - **Cards** — `--kb-radius-md` (6px) — gentle softening. - **Avatars / attorney portraits** — `--kb-radius-lg` (10px) or full circle when used in a list. - **Hero photo blocks** — square-cut, `--kb-radius-none`. ### Imagery color vibe - Warm tungsten and natural-daylight whites. - Mid-saturation, never punched-up. - People are dressed in business casual or business — no hoodies, no neons. - Subjects look at each other, at documents, or down/away — almost never at the camera. The mood is "decisive privacy", not "smiling stock". - **No black-and-white photography.** No grain overlays. No film looks. ### Cards — anatomy A typical K&B card (e.g. a practice-area card or a blog card): - **Surface** — white, `--kb-radius-md`, 1px border `--kb-border`, default `--kb-shadow-sm`. - **Top image** — full-bleed, 16:9, square-cut to the top of the card (overrides card radius). - **Eyebrow** (optional) — `.kb-eyebrow` (orange uppercase) above the title. - **Title** — `.kb-h4`, blue, 1–2 lines. - **Body** — `.kb-body`, ink, 3 lines clamped. - **Footer link** — *"Read More"* in `--kb-blue`, with `→` arrow appended on hover. - Internal padding `--kb-space-5` (24px) on all sides. - Hover lifts the shadow to `md` and translates `-2px` on Y. --- ## ICONOGRAPHY K&B has **no custom icon set**. The live site is built on WordPress + Elementor; iconography on the page is drawn from **Font Awesome** (Elementor's default icon library, e.g. the social glyphs at the bottom of the page — Linkedin, Facebook-f, Instagram, Twitter, Youtube) supplemented with a handful of **inline SVG** marks for the "Why Choose Us" benefit blocks. Practical guidance for this system: - **Use Lucide via CDN** as the default icon set for any new K&B artifact. It is open-source, has a consistent **2px stroke** and a clean geometric vocabulary that matches Poppins. This is a *flagged substitution* (see Caveats) — the live site uses Font Awesome line-style icons; Lucide is a near-visual match at a more permissive license and crisper file size. Switch to Font Awesome if shipping into the live WordPress site directly. - **Brand marks are SVG, not icon glyphs.** The "K&B icon" — the small blue-square / orange-square / blue-bracket tile — is in `assets/logos/icon/KB_icon_*.svg`. Use it as a favicon, an app-icon, a stamp on dark backgrounds, or anywhere the full wordmark won't fit. Never reconstruct it from primitives — always use the asset. - **Awards and affiliations are real PNG/SVG marks**, not icons — see `assets/awards/` and `assets/affiliations/`. They appear at the bottom of marketing pages in a horizontal row, sized to ~80–100px tall, never altered, never re-colored. - **Social icons** in the footer are Font Awesome–style outlines (`Linkedin`, `Facebook-f`, `Instagram`, `Twitter`/X, `Youtube`). Use Lucide's equivalents or import Font Awesome on-demand. - **No emoji.** Anywhere. Including dog emojis next to Augie — the brand expresses his personality through photography and word coinages ("paw-torney", "Law Dog"), not glyphs. - **No Unicode glyphs as icons** (no `★`, no `✓`, no `→` *standing alone* as a UI element). Arrows that follow a "Read More" link are typographic and acceptable; standalone glyph icons are not. **Loading Lucide** (when used): ```html ``` Recommended icon vocabulary for this system: `scale`, `gavel`, `shield`, `users`, `phone`, `mail`, `map-pin`, `calendar-days`, `arrow-right`, `chevron-right`, `chevron-down`, `menu`, `x`, `linkedin`, `facebook`, `instagram`, `twitter`, `youtube`. --- ## Caveats / flagged substitutions - **Lucide for Font Awesome.** The live site renders icons through Elementor's bundled Font Awesome. Lucide is shipped here as a CDN-loaded, near-visual substitute. If you need pixel-perfect parity with the live site, swap to Font Awesome. - **Tonal scales are derived, not authored.** The official brand guide gives three colors — blue, orange, black — and stops there. The `100..900` ramps in `colors_and_type.css` were derived for UI work and may need review by the brand owner before use on production marketing material. - **No motion guide on file.** The animation rules above are inferred from a single rendered version of the live site, not from a brand spec. Please confirm. - **No "Augie" photography included.** The live site features photos of Augie (the office dog and "paw-torney"). None of those photos are in the brand-guide drop, so this system references him in voice only. - **No branded mono.** `--kb-font-mono` resolves to the platform mono stack. JetBrains Mono was named originally but no font file ever shipped, so the token was pointing at a family that never loaded — it now declares the stack that was actually rendering. Mono is not one of the brand's two fonts and appears only on incidental technical labels, so this is visually a no-op. Add a `.ttf` + `@font-face` and prepend the family if the firm wants a branded mono. --- ## Quick start ```html

Schedule Your Consultation

Get trusted legal advice from our experienced Raleigh attorneys.

Schedule a Consultation ``` For pre-built React components and a full marketing-page recreation, see `ui_kits/website/`.