Design Systems Handoff

Everything you need to navigate, maintain, and continue the design system work across all Demandcast brands.

It's been a privilege building alongside such an incredible team. The talent, heart, and drive you all bring to the work every day made this the kind of place where great things happen. I'm grateful for every bit of it.

From: Reese To: Jenny + Team Date: October 15, 2026 Brands: 9 total

Active Projects

Major workstreams with their current status, what's been completed, and what remains.

Dudley Utility Services (DUS)

Complete

Full design system with 7 foundation docs, 3 voice docs, 24 components, brand book v3.0, and 12-slide progress deck. Deployed and walkthrough shared with team.

  • Website live on Vercel (DNS migration pending)
  • Business card template finalized (Option C "Split Panel")
  • Electric Transmission service page built
  • Sep 3: Favicon, SEO meta/OG tags, timeline reduction, HubSpot form swap
Live Site Brand Book Progress Deck Demandcast/dudley-utility-services

Demandcast Brand + Website

In Progress

Brand system v1.1.0 built (Futura font, broadcast arc motif, monochromatic blue). Website draft v1 deployed with hero, deliverables grid, logo wall, and wave animations.

  • Brand repo pushed to GitHub (Demandcast/demandcast-shelf)
  • Client tracker dashboard live and functional
  • DNS migration to Vercel blocked on DNS access
  • Needs: Jenny's direction on content strategy and social cadence
Website v1 Client Tracker Demandcast/demandcast-shelf

A Path of Care

In Progress

Social media skill built with 6 layout variants, 4 service line colors, and 5 SVG logos. Website (Webflow) has spam protection configured. Full brand system not yet started.

  • Social skill: ~/.claude/skills/path-of-care-social/
  • reCAPTCHA v2 Invisible live on Webflow forms (Sep 4)
  • Tally.so embed on /contact needs separate spam setup
  • Content pillars need to be scheduled
Website (Webflow) ~/.claude/skills/path-of-care-social/

Operating Layer Podcast

Complete

Benali podcast sub-brand. Identity built: Patina accent (#58968c), Hanken Grotesk, strata motif. Brand guide and episode materials deployed.

  • Cover art: 3000x3000px with hard-left wordmark and strata lines
  • Guest photo treatment: desaturated gradient-map (shadows to ground, highlights to bone)
  • Endorsement line: "A Benali podcast" always present
Brand Guide Episode Materials Demandcast/operating-layer

Land Department Branding

Early Stage

Mood board and design direction exploration with Ara and Alex. Connection to existing DLC brand spec TBD.

  • GTD project: Workdesk-OS/gtd/projects/land-department-branding/
  • Needs: visual direction decision, asset inventory
gtd/projects/land-department-branding/

Brand Design Systems (Umbrella)

Ongoing

Main mandate: build comprehensive design system repos for every brand. DUS is the gold standard; other brands need upgrading from monolith SKILL.md to full DUS-format repos.

  • Brand scaffold tool built to automate system generation
  • DLC, DS, DIHS have skill specs but need full repo upgrades
  • Cash Flow Contractor, Experience Builders not started
gtd/projects/brand-design-systems/ /Users/reese/brand-scaffold/

Brand Systems Status

Current state of each brand's design system. DUS is the reference implementation; all others should follow its structure.

DUS-format means: foundation docs (color, type, spacing, surfaces, shadows, core.css, tokens.json), voice docs (tone, vocabulary, copy-patterns), components library, brand book HTML, CLAUDE.md, and learnings.md.
Brand Status What Exists Primary Color Font Next Step
DUS Complete Full DUS-format repo, brand book, deck, website Lato Domain migration (needs DNS access)
Demandcast Complete Brand repo v1.1.0, client tracker Futura Maintenance only
DLC Scaffolded DUS-format repo (31 files), SKILL.md + brand spec + snippets Lato Add logos, fill voice docs, customize components
Dudley Staffing Scaffolded DUS-format repo (31 files), SKILL.md + brand spec Lato Add logos, fill voice docs, customize components
Path of Care Social Only Social media skill (6 layouts, 5 logos) Lato Build full brand system
Operating Layer Complete Brand guide + episode materials deployed Hanken Grotesk Maintenance only

Live Deployments

All Vercel deployments and live sites. Vercel team: demandcast.

Project URL Vercel Project Last Deploy Notes
DUS Website dudley-utility-services.vercel.app dudley-utility-services Sep 3, 2026 DNS migration pending for real domain
DUS Brand Book dus-brand.vercel.app dus-brand Aug 2026 Also hosts progress deck at /dus-progress-deck.html
DUS Electric Transmission .../pages/electric-transmission.html dudley-utility-services Aug 6, 2026 TOC highlighting, scroll reveals, two-column layout
Demandcast Website v1 demandcast-ver-1.vercel.app demandcast-ver-1 Aug 14, 2026 Auto-connected to GitHub repo
Client Tracker demandcast-dashboard-demandcast.vercel.app demandcast-dashboard Aug 15, 2026 12 clients, checklists, GitHub integration
Operating Layer Guide operating-layer-deploy.vercel.app — Aug 2026 Podcast brand guide
Operating Layer Episodes operating-layer.vercel.app — Aug 2026 Episode materials
Path of Care apathofcare.net N/A (Webflow) Sep 4, 2026 Webflow-hosted, reCAPTCHA enabled

Claude Code Skills

Custom skills that power brand-aware design work inside Claude Code. Invoke with /skill-name.

Important: Brand skills (DLC, DS, DIHS) should NOT be auto-invoked; only use when explicitly working on that brand. The brand router at ~/.claude/rules/brand-router.md handles automatic detection.
dudley-land-company Active

Purpose

Complete brand identity for Dudley Land Company. Covers logos, colors (green #41BE48 accent), Lato typography, spacing, voice, components, and canvas rules.

Key Rules

  • Square corners everywhere (border-radius: 0)
  • Mandatory pattern: eyebrow, green divider, H2 on every section
  • Green is accent only, never large fills

Location

~/.claude/skills/dudley-land-company/SKILL.md (44KB)
Brand spec: ~/.claude/brands/dudley/spec.md
Design system repo: Demandcast/dudley-land-company-brand

dudley-staffing Active

Purpose

Brand identity for Dudley Staffing. Blue #2563EB accent, Navy #1E3A8A dark. Lato font (700/400 only, no 900). Pill-shaped buttons, gradient direction rules.

Key Rules

  • Gradient direction matters: logo sits on Navy (dark) end
  • Blue on Navy = FAIL contrast (2:1), never combine
  • Rounded cards (16px), not square like DLC

Location

~/.claude/skills/dudley-staffing/SKILL.md (53KB)
Brand spec: ~/.claude/brands/dudley-staffing/spec.md
Design system repo: Demandcast/dudley-staffing-brand

dudley-in-house-services Active

Purpose

Brand identity for DIHS. Blue #2F94D1 accent on a white-dominant light brand. Lato font (700/400). Blue structural bars, rounded cards (12px default).

Key Rules

  • White is the primary background (light brand)
  • No Dudley Green ever, distinct from DLC
  • No hexagonal shapes (those are DLC)
  • Max 3 colors per composition

Location

~/.claude/skills/dudley-in-house-services/SKILL.md (49KB)
Brand spec: ~/.claude/brands/dudley-in-house-services/spec.md

path-of-care-social Active

Purpose

Social media graphic generator for A Path of Care. Outputs self-contained HTML for browser screenshot. 4 service lines with distinct colors.

Service Lines

  • Home Health: #AC1D40 (crimson)
  • Hospice: #EF8B22 (orange)
  • Preferred Pathways: #862C91 (purple)
  • Parent brand: #00AEEF (light blue)

Layouts

6 variants: A (Logo Card), B (Split), C (Bold Statement), D (Photo Feature), E (CTA), F (Carousel Cover). All use Lato 900/400, organic curved white panels, one large border-radius corner.

Location

~/.claude/skills/path-of-care-social/ — SKILL.md + learnings.md + logos/

podcast-brand-system Active

Purpose

Orchestration skill for building complete podcast brand systems from intake through delivery. 6-phase workflow coordinating with the Brand Scaffold tool.

Phases

  • INTAKE — 20 questions across 5 categories
  • EXPLORE — Competitive audit, mood directions
  • FOUNDATION — Run scaffold in podcast mode
  • IDENTITY — Cover art (3000x3000px), thumbnail testing
  • TEMPLATES — Customize scaffold components
  • DELIVERY — Brand book, GitHub repo, dashboard update

Location

~/.claude/skills/podcast-brand-system/ — SKILL.md + learnings.md + templates/

frontend-slides Active

Purpose

Create zero-dependency, animation-rich HTML presentations. Supports building from scratch or converting PowerPoint. 12 curated style presets.

Key Rules

  • Every slide = 100vh (no scrolling)
  • Must include full viewport-base.css
  • Use clamp() for all font sizes
  • Google Fonts only

Location

~/.claude/skills/frontend-slides/ — SKILL.md + html-template.md + viewport-base.css + animation-patterns.md + STYLE_PRESETS.md

design-principles Active

Purpose

Universal visual design principles for any design task. Covers 13 graphic design principles, Gestalt psychology, UX usability heuristics, anti-patterns, and a 12-point pre-finalization checklist.

Location

~/.claude/skills/design-principles/SKILL.md (17KB)

impeccable + 14 Sub-Skills System

Purpose

Master design system for all UI/frontend work. Entry point for design, critique, audit, polish, animate, shape, and more. The 14 sub-skills (adapt, audit, animate, bolder, clarify, colorize, critique, delight, distill, layout, optimize, overdrive, polish, quieter) are symlinked from ~/.agents/skills/.

Location

All symlinked in ~/.claude/skills/ pointing to ~/.agents/skills/

ss (Screenshot) Active

Purpose

Grabs the most recent screenshots and acts on them. Invoke with /ss. Supports: explain, fix, recreate, freeform instructions.

Screenshot Folder

Google Drive > Shared drives > Claude Code Projects > Reese > Screenshots

Location

~/.claude/skills/ss/SKILL.md

Tools & Automation

Reusable tooling built to accelerate brand system creation.

Brand Scaffold Tool

Ready

Node.js script (~2,570 lines, zero dependencies) that generates complete design system repos from a JSON config. Supports two modes:

  • Website mode (default): 28 files, 5 components, 2 templates, foundation/voice docs
  • Podcast mode: 27 files, 4 components, 2 templates, podcast-specific docs

Usage:

  • node scaffold.js brand.config.json [--output dir] [--force]
  • Example config: brand.config.example.json
/Users/reese/brand-scaffold/scaffold.js Demandcast/brand-scaffold

Client Tracker Dashboard

Deployed

Single-file HTML/CSS/JS dashboard tracking 12 Demandcast clients (8 website + 4 podcast) with status checklists, GitHub repo integration, and scaffold config generator.

  • Click-to-cycle status (unknown, pass, warn, fail)
  • localStorage persistence (key: demandcast-dashboard-v4)
  • Export/import JSON for backup
  • Skills & Tools sections with tailored checklists
Live Dashboard Demandcast/demandcast-dashboard

DUS Business Card Template

Finalized

Option C "Split Panel" design, ready for Vistaprint. The HTML template generates print-ready PNG files for both front and back.

  • Front: 38% teal gradient panel (logo only) + 62% white panel (name, title, green divider, contact items with teal SVG icons)
  • Back: Teal-to-green gradient, white logo (170px), 5 services listed at 900 weight / 18px
  • Services on back: Transmission | Distribution | Fiber Optic | Water Utility | Gas Utility

How to Make a New Card

  1. Open dus-brand/templates/business-card.html in a code editor
  2. Find the name, title, email, phone, and address fields in the HTML and replace with the new employee's info
  3. Phone format: dashes only, no parentheses (e.g. 832-888-7238). For two numbers: (O) 620-912-4196 | (C) 620-357-1212
  4. Open the file in Chrome
  5. The page has a built-in export script. Click #only-1 (front) or #only-2 (back) to isolate each side
  6. Use Chrome's print/screenshot or headless export:
    chrome --headless --screenshot --window-size=1050,600 --force-device-scale-factor=3 file.html
    This produces a 3150x1800px PNG (900 DPI at 3.5"x2")
  7. Upload both PNGs to Vistaprint, select "Soft Touch Rounded Corners"

Cards Already Made

  • Garrett Gill (EVP - Utilities), 817 Avenue A, Katy, TX 77493
  • Savannah Cano (Regional Director - Utilities), same address
dus-brand/templates/business-card.html Demandcast/dudley-utility-services

Brand Router (Auto-Detection)

Active

Rule file that automatically detects brand context from keywords and loads the correct spec + learnings before any output. Covers DLC, DS, DIHS, and Benali.

  • Reads: spec.md, learnings.md, snippets/, tokens.json
  • Appends corrections to learnings.md after each session
~/.claude/rules/brand-router.md ~/.claude/brands/

GitHub Repositories

All repos are in the Demandcast GitHub organization.

Repo What It Is Status
Demandcast/dudley-utility-services DUS full website + brand system (gold standard) Active
Demandcast/demandcast-shelf Demandcast brand system v1.1.0 Active
Demandcast/demandcast-website-draft Demandcast website v1 (auto-deploys to Vercel) Active
Demandcast/demandcast-dashboard Client tracker dashboard Active
Demandcast/operating-layer Operating Layer podcast brand + episodes Active
Demandcast/brand-scaffold Brand scaffold generator tool Active
Demandcast/a-path-of-care Path of Care content skills (blog + social pillars) — needs improvement Needs Work
Demandcast/dudley-land-company-brand DLC design system (scaffolded, needs logos + voice docs + component customization) Scaffolded
Demandcast/dudley-staffing-brand Dudley Staffing design system (scaffolded, needs logos + voice docs + component customization) Scaffolded

Pending Work

Items that still need attention, ordered roughly by priority.

Blocked / Waiting

Blocked
  • DUS domain migration to Webflow: Need DNS access from DUS team to point real domain to Webflow

Content & Deliverables

Upcoming
  • DUS service pages: Jenny to send content for design — build out remaining service pages
  • Nov/Dec social pillars for APOC: Plan and schedule Path of Care social content for November and December
  • Client tracker dashboard: Continue building out — UX improvements, accessibility, checklist updates

Polish & Improvements

Nice to Have
  • Client tracker UX: Click-to-cycle discoverability (P1), keyboard accessibility (P1)
  • Email signature generator: Universal/customizable version for all clients

Workflow & Conventions

How things work, key patterns, and things to know when continuing this work.

How Brand Systems Are Structured

DUS-Format (Gold Standard)

  • Foundation docs: color.md, typography.md, spacing.md, surfaces.md, shadows-radii.md, core.css, tokens.json
  • Voice docs: tone.md, vocabulary.md, copy-patterns.md
  • Components: Individual HTML/CSS for each component (10 core + compositions + inspiration-driven)
  • Brand book: index.html (browser-viewable design system reference)
  • CLAUDE.md: Instructions for Claude Code when working in the repo
  • learnings.md: Corrections log that prevents repeat mistakes (format: [YYYY-MM-DD] What was wrong, what's right)

How to Build a New Brand System

  1. Create a JSON config file (see brand.config.example.json)
  2. Run: node /Users/reese/brand-scaffold/scaffold.js config.json --output ./output-dir
  3. Customize generated files with actual brand assets and rules
  4. Build brand book (index.html)
  5. Push to GitHub under Demandcast/ org
  6. Deploy brand book to Vercel
Claude Code Integration

Key Files

  • ~/.claude/CLAUDE.md: Global rules (never auto-commit, never push without permission, read before edit)
  • ~/.claude/rules/brand-router.md: Auto-detects brand context and loads specs
  • ~/.claude/skills/: All skills (7 local + 19 symlinked from ~/.agents/skills/)
  • ~/.claude/brands/: Brand specs, learnings, snippets, tokens
  • ~/.claude/projects/*/memory/MEMORY.md: Per-project persistent memory

How Brand Detection Works

When Claude detects brand keywords (e.g. "DLC", "Dudley Staffing"), the brand router automatically reads the spec, learnings, snippets, and tokens before generating any output. Corrections are appended to learnings.md after each session.

Export Patterns

HTML to PNG (Social Media, Business Cards)

  • Build as self-contained HTML with fixed pixel dimensions
  • Open in Chrome, use headless capture: --force-device-scale-factor=3 for print quality
  • For transparent backgrounds: --default-background-color=00000000 (8-char hex RGBA)

HTML to PDF

  • Never use background-clip: text (gradient text) or box-shadow in print; they break in Chrome PDF
  • Print PDF uses beforeprint auto-print-mode
  • Digital PDF uses a temp file with beforeprint disabled but @media print layout rules kept

Presentations

  • Use frontend-slides skill to generate a single HTML file
  • Deploy to Vercel for sharing, or export PDF via Chrome
Common DUS Design Rules

These are the most frequently referenced DUS-specific rules (full details in dus-brand/learnings.md):

  • Corners: Cards/panels use straight corners (border-radius: 0) + plat-sheet corner ticks. Buttons = 6px. Pills = 999px.
  • Green rule: NEVER darken --green-500 to --green-700 for contrast. Brand consistency overrides WCAG on green elements.
  • Stat-row dividers: Green 2.5px (--green-500), not white hairline
  • Logos: Constrain by height only, width: auto; object-fit: contain; display: block
  • Dark sections: Horizontal teal-to-green sweep, not diagonal
  • Button colors: Primary = Dudley Green, Accent = DUS Teal
  • Icons: Remix Icon (remixicon.com), filled with DUS gradient
Key Contacts & Roles
  • Jenny: Day-to-day lead, content decisions, design direction, 1-on-1s
  • Khalil: Available for high-level direction, requested email signature generator and scaffold tool
  • Julie: Admin contact for employee details, office addresses
  • Ara & Alex: Land Department branding project stakeholders
  • Yvette: Path of Care analytics (needs bot filter + leads section flagging)

Organizational Context

  • GitHub org: Demandcast
  • Vercel team: demandcast
  • Reese transferred from Benali to Demandcast (Sep 2026)
File Locations Quick Reference

Brand Specs & Assets

  • DLC: ~/.claude/brands/dudley/
  • DS: ~/.claude/brands/dudley-staffing/
  • DIHS: ~/.claude/brands/dudley-in-house-services/
  • Benali: ~/.claude/brands/benali/
  • DUS repo: /tmp/dudley-utility-services (or Demandcast GitHub)

Skills

  • All skills: ~/.claude/skills/
  • Shared skills source: ~/.agents/skills/

Tools

  • Scaffold: /Users/reese/brand-scaffold/scaffold.js
  • Dashboard: /tmp/demandcast-dashboard/index.html

GTD Projects

  • Active: Workdesk-OS/gtd/projects/
  • Archived: Workdesk-OS/gtd/archive/projects/

Obsidian Vault

  • Root: ~/Library/Mobile Documents/iCloud~md~obsidian/Documents
  • WorkDesk OS: Workdesk-OS/ (config, projects, GTD)