US - Individual Investor About Us Contact Us

Design System Demo

Demonstrating how modern AI tooling can standardize the Franklin Templeton brand into a reusable design system for rapidly building on-brand microsites.

Phase 1

Initial Design

The base design foundation used as the original source of truth for this methodology.

View Page
Phase 2

Design Tokens

Complete catalog of extracted design tokens (colors, typography, spacing) and all reusable components with live demos and copyable HTML snippets.

View Page
Phase 3

Claude Code Commands

Four custom slash commands that teach Claude the design system — /redesign, /create-page, /add-component, and /design-system — constraining AI generation to on-brand output.

View Page

Sample Sites

The following sites were built with AI using this design system.
Royce Investment Partners
Small-Cap Equity Specialist Manager

Small-cap specialists since 1972 — latest insights, fund strategies, news, and company overview.
Clarion Partners
Real Estate Specialist Manager

$73.7B AUM real estate platform — strategies, property types, company timeline, and office locations.
Putnam Investments
Active Equity Investment Manager

US$162.3B AUM active equity platform — CIO message, featured products, leadership team photos, and equity insights.
geniant
AI Redesign Experience Design

geniant.com redesigned with the FT design system — hero, expertise pillars, case studies, services accordion, and pull quote.