Allsup

As the lead developer of Allsup, a nationwide Social Security Disability Insurance (SSDI) representation company, I built and maintained their family of Umbraco-powered websites (Allsup.com, AllsupEmploymentServices.com, AllsupLLC.com) and created their Clarity Design System.

Clarity Design System. Built a full design system encompassing brand principles, guidelines, and 39 documented widgets, each with responsive previews (desktop, tablet, mobile), usage guidance, and syntax-highlighted code snippets. The design system pages are themselves editable in the same Umbraco CMS, and components automatically pull in realistic data so they look representative out of the box, while still allowing editors to override content for fully freeform pages.
Automatic Color Palette Extraction. Built a feature that dynamically reads CSS custom properties (e.g., --color-primary, --color-gradient1) from the active stylesheet at runtime and renders categorized color swatches with hex values, automatically separating primary colors, grey tones, secondary colors, and gradients. When the theme changes, the palette updates itself without any hardcoded values.
Multi-Brand Theming with Sass. Engineered a CSS custom property-based theming system compiled from Sass, allowing three distinct brands to share one widget library with completely different visual identities. A query string parameter swaps the stylesheet and the entire design system.
Custom Vanilla JS Widget Architecture. Widgets include interactive sliders, accordions, carousels, calculators, form validation, scroll animations, and lazy-loaded media.
WCAG 2.0 AA Accessibility. Built to meet WCAG 2.0 AA compliance standards across all three sites. PageSpeed Insights confirms 100/100 accessibility and 100/100 best practices on both mobile and desktop as a baseline.
Performance. The vanilla JS architecture (no framework overhead) and responsive image delivery (WebP with <picture> elements and multi-density srcset, all generated automatically when needed) contribute to exceptional Core Web Vitals across the board.
BEM CSS Methodology. Consistently applied Block-Element-Modifier naming across all 39 widgets for maintainable, collision-free styling that scales across a large team.
Comprehensive Brand Documentation. The design system covers typography, a custom SVG icon library with download buttons, illustrations, tone-of-voice guidelines per brand, and element state demos (normal, hover, focus).
SSDI Benefits Calculator. Built an interactive calculator widget with range sliders that estimates monthly SSDI payments based on birth year and average income, helping users understand their potential benefits.