# DeMar Consulting Group — Design System Spec > Source: demarconsultinggroup.com (live site, captured 2026-05-08) > WordPress (Astra child theme) · Elementor Pro 4.0.3 · ElementsKit Lite · Essential Addons > All tokens grepped from real production CSS. All photos and headshots are real DeMar assets. --- ## At-a-glance - **Firm**: DeMar Consulting Group (often shortened to DCG) - **What they do**: Full-stack business management consulting — Tax · Audit & Assurance · Office of Finance · Wealth Management · Data Analytics · Digital Transformation - **HQ**: Reno, NV 89521 - **Audience**: Mid-market and enterprise CFO/COO/owner-operators across 8 verticals (agriculture, construction, ecommerce, hospitality, manufacturing, non-profits, property management, retail) - **Voice anchor pulled from live site**: *"Speak With a Financial Expert Today"*, *"Trusted by world-class brands and organizations of all sizes"*, *"We create value where it matters most."*, *"Comprehensive Consulting Services"* - **Register**: Advisory / executive / professional-services. Crimson red over warm ivory and off-black — closer to a boutique financial-advisory or law-firm aesthetic than a SaaS or cold corporate-blue consultancy. --- ## Color tokens (extracted, frequency-counted) Frequency table from `post-1500141.css` (homepage Elementor-generated CSS) + `astra-main.css`, full-stylesheet `grep -oE '#[0-9A-Fa-f]{6}'`: | Hex | Count | Role | |---|---:|---| | `#CB3131` | 112 | **THE DeMar red** — primary CTAs, links, accents | | `#9B2525` | 46 | Deep crimson — hero scrim base | | `#FFFFFF` / `#ffffff` | 52 | White surface | | `#9A2526` | 24 | Heading hover red (Elementor color `9286677`) | | `#292929` | 19 | Secondary ink (`--e-global-color-secondary`) | | `#000000` | 15 | Primary ink (`--e-global-color-primary`) | | `#810000` | 13 | Deepest red oxblood | | `#AC3D3D` | 13 | Softer brick — secondary CTA outline | | `#868686` | 13 | Ink-quiet meta-line color | | `#F4F4F4` | 13 | Pale neutral surface | → canonical mapping: - `--brand` → `#CB3131` - `--brand-deep` → `#9B2525` - `--brand-soft` → `#AC3D3D` - `--brand-darker` → `#810000` - `--ink-pure` → `#000000` - `--ink-deep` → `#1a1a1a` (softened off-black for screen comfort) - `--ink` → `#292929` - `--ink-quiet` → `#868686` - `--bg-soft` → `#f7f4f0` (warm-ivory band — derived; live uses `#F4F4F4` cool gray, but the warm ivory pairs better with crimson and matches the editorial register the photography asks for) Hero gradient (live): `linear-gradient(180deg, #992525 0%, #9B2525 100%)` — captured verbatim into `--grad-hero`. --- ## Typography (extracted Elementor global tokens) Direct from `--e-global-typography-*` in `post-1500141.css`: ``` primary — Manrope 700, 50px, line-height 1.2em, letter-spacing -1px secondary — Manrope 700, 37px, line-height 1.2em, letter-spacing -0.5px text — Inter 400, 16px, line-height 24px (1.5) accent — Manrope 700, 12px (eyebrow / button caps) ``` → token mapping: - `--font-display` → `'Manrope', system-ui, ...` (live: loaded from `elementor/google-fonts/css/manrope.css`) - `--font-body` → `'Inter', system-ui, ...` (live: loaded from `elementor/google-fonts/css/inter.css`) - `--font-eyebrow` → `'Manrope', ...` - All display headings carry **negative letter-spacing** — never zero, never positive. Compresses to a confident slab. --- ## Site-specific patterns These are the signature stylistic moves that make the live site recognizably DeMar — not generic SaaS or stock Astra defaults. They are baked into `_shared.css` from the start, **not** retrofitted as a refinement layer. ### 1. Sharp corners + rare 9px hero button Live `border-radius:` frequency table: ``` 20 border-radius: 0px 0px 0px 0px ← DOMINANT 12 border-radius: 50% 50% 50% 50% ← circle headshots 7 border-radius: 2px ← form chrome 1 border-radius: 9px 9px 9px 9px ← SOLE rounded element (home hero CTA) ``` The brand has **zero** 16/20/24px "consumer-SaaS" radii. We bake that in: `--radius-lg: 0` is deliberate. Cards stay sharp; only the hero button + form inputs pick up a hint of softness. Headshots are full circles. ### 2. Halo shadow, not directional drop Live `box-shadow:` shows only one card-style shadow — a wide, soft `0 0 60px rgba(0,0,0,0.10)` halo + a heavier `2px 8px 23px 3px rgba(0,0,0,0.20)` for hover-state cards. There is no `0 4px 6px` or directional editorial drop. The halo reads as photographic — closer to a print-spread than a UI tile. ### 3. Brisk 0.30s transitions, not cinematic Live default is `transition: color 0.3s` and `transition: background 0.3s, border-radius 0.3s, opacity 0.3s` (8 + 6 occurrences). The brand pace is brisk and transactional — not the 0.8s cinematic settle some industrial brands use. Fits the advisory / responsive-firm voice. ### 4. Same-hue red ramp on hero Live home hero uses `linear-gradient(180deg, #992525 0%, #9B2525 100%)` — a same-hue ramp, deliberately subtle. There is **no rainbow gradient or two-color CTA gradient on the brand**. The crimson is unified. We provide a deeper variant (`--grad-hero-deep`) for variety but the canonical hero uses the live narrow ramp. ### 5. Negative letter-spacing on ALL display Every Elementor global typography token uses negative tracking (`-1px` on primary 50px, `-0.5px` on secondary 37px). No display heading sits at zero. We bake `letter-spacing: -0.025em` on the bare `h1-h6` reset and tighter still (-0.030em / -0.035em) on display utilities. ### 6. Manrope 700 + Inter 400 binary The brand is a strict two-typeface system — no Lato fallbacks, no serif accents. Manrope carries every display, every eyebrow, every button. Inter carries every paragraph. The brand's editorial weight comes from the typeface contrast alone (sans display vs. sans body) — no italic, no serif counterpoint. ### 7. Crimson eyebrow lead-line Eyebrows on the live site are red (`#CB3131`) Manrope-700 12px caps with no separator glyph. We add a 28px-wide hairline lead-rule before each eyebrow (`::before { width:28px; height:1px; background:currentColor; opacity:0.65 }`) — derived from the editorial conventions of the trust-marks block but more pronounced. Optional, never required. ### 8. Crimson rule (signature page-divider) A 56-wide × 3-tall gradient bar (`linear-gradient(90deg, #CB3131 0%, #9B2525 50%, #810000 100%)`) anchored above section eyebrows. Used as an editorial "this is the next idea" rule — appears on `.page-hero::before`, on `.footer::before`, on `.crimson-rule` utility, and on `.tile::before` width-zero-to-full hover sweep. This is the brand's strongest single editorial cue and we use it deliberately, not decoratively. ### 9. Tile hover top-rule sweep Every `.tile` (practice-area card) starts with `width: 0` on its top-rule pseudo and animates to 100% on hover (`transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1)`). It's the brand's most distinctive interaction — a small but unmistakable signature. ### 10. Industries flip on hover The 8-up `.industries` grid flips entire tiles to `--brand` background with white text on hover. No icon swap, no copy reveal — just the surface flip. Specific to consulting/advisory grids where each tile represents a vertical the firm serves. Comes straight from the live "8 industries" section pattern. --- ## Imagery / Photography **Real assets pulled from live site** (referer header set): - Logo: `Main-Logo.png` (1080×371) at `/wp-content/uploads/2026/02/` - Mark: `Insta-Profile.png` (1080×1080) — used as social mark - Welcome hero illustration: `Welcome.png` (1280×720) at `/wp-content/uploads/2025/05/` - Header texture: `bg_header-2.png` (300×300, repeating) at `/wp-content/uploads/2023/09/` - Office candids (3): `d1ngw7snehm.jpg`, `iusj25iyu1c.jpg`, `7akbq3rd480.jpg` (~1600×1200) - Headshots (8 named consultants): Tasha, Treyson, Stephanie, Justin, Scott, DeeDee, Erik, Jennifer (500-1080px) - Editorial / blog imagery (5): IRS, multi-state-payroll, FedEx-UPS-tariff-refunds, tariff-refund-shipping-invoice, tariff-refund-importer-payor-broker **Treatment rules**: - Headshots default to 88px circle avatars; bio cards use 96px; principal-profile uses 200px square. - Office photography sits in 4:3 or 16:10 frames with a soft-halo shadow (no 8px-radius — keep sharp). - Editorial article hero imagery uses the live "wide" 16:9 aspect. --- ## Catalog chrome (`sections.html`) The pattern catalog wrapper UI (`sx-shell`, `sx-header`, `sx-index`, `sx-pattern`, `sx-demo`, `demo-label`) is themed with DeMar tokens: - `sx-header::before` — 4px crimson-rule gradient strip across the top (signature page-opener) - `sx-index` — flat ivory panel with crimson-bullet `::before` dot that slides in on hover - `sx-pattern::before` — 80px × 4px crimson rule above each pattern (DeMar's editorial cue) - `sx-pattern .id` — left-rule 4px crimson border on a brand-pale ID chip - `sx-demo` — flat surface, sharp corners (radius-none), wide-halo shadow on hover only - `demo-label` — crimson pill in upper-left with Manrope-700 caps All values flow from `--brand`, `--brand-deep`, `--bg-soft`, `--shadow-halo`, etc., so the palette toggle continues to work. --- ## Domain-fit reframings (consulting-shaped) These section names map the canonical SECTION-PATTERNS.md vocabulary to DeMar's advisory voice: | Canonical pattern | DeMar reframe | Notes | |---|---|---| | `service-times` | `engagement-stats` / `firm-snapshot` | "30 Years · 1,200 Engagements · 22 Industries" | | `ministries-grid` | `practice-areas-grid` | The 6 practice areas as `.tile` cards | | `staff-profile` | `principal-profile` | One named consultant w/ creds + bio | | `staff-grid` | `team-grid` / `consultants-grid` | All 8 named DeMar consultants | | `service-area` | `industries-served` | 8-up flip-tile pattern | | `member-quote` | `client-testimonial` | Quote + named client + role | | `ways-to-give` | `engagement-paths` | Initial Consultation · RFP · Retainer · Expert Witness | | `events-list` | `insights-list` / `news-list` | Editorial articles row | | `beliefs-list` | `core-values-list` | "Integrity · Outcomes · Confidentiality · Independence" | Plus DS signatures: `credentials-strip`, `case-study-card` (`.case-card`), `expertise-matrix`, `crimson-rule`, `engagement-stats`. --- ## Provenance / gaps - Logo: real (PNG only — no SVG found on site). 1080×371. `Main-Logo.png` from /wp-content/uploads/2026/02/. - Type: real (Manrope + Inter both Google Fonts; no proprietary substitution required). - Photography: 12+ real assets confirmed. - Brand colors: 100% extracted from production Elementor CSS — `#CB3131` is unambiguously the brand red (112 occurrences in the home page CSS alone). - Note: no canonical brand SVG mark — `Insta-Profile.png` is a social-circle mark with the wordmark inset; for clean lockups the `logo-main.png` is the source of truth.