Demos

Connected Design System

A scroll-driven deck telling the whole CDS story — Figma variable to rendered pixel — dogfooded from real CDS layout, utilities and components.

Responsive typography

A fluid, clamp()-based typescale POC — replacing breakpoint-bound title snapping with one continuous curve, with a per-brand scale analysis and a container-query vision.

Coarse-pointer mode

Two ways to make CDS screens work for gloved hands, compared on a MANOS forklift screen with what each costs.

Grid — N-up

A wide, dogfooded playground for the .tng-grid is-{n}-up modifiers — resize the viewport and watch each variant ramp from stacked to N columns at the design-owned breakpoints.

Grid — Carousel

Spike: carousels on the new 12-column grid. Design's off-grid 11/12 peek vs on-grid margin-peek, both responsive 1 → 2 → 4 n-up. Grid columns shown via .tng-debug; native scroll-snap; count-indicator controls.

Unicode Tests

A rendering smoke test — exercises each brand font against broad sweeps of Unicode ranges (Hebrew, symbols and more) so missing-glyph regressions show up at a glance.

Legacy grid — Bootstrap columns

The AEM Bootstrap row/column grid re-applied inside .tng-legacy-apply — a simplified dealer-cards-and-map layout that exercises the responsive col-lg-* tiers restored in apply.css.