Overview
These four commands encode the full Franklin Templeton design system — tokens, components, layout patterns, and critical design rules — into prompts that constrain AI generation to on-brand output. Instead of relying on Claude’s general knowledge, each command injects the exact CSS classes, HTML structure, and design constraints needed for the task.
The result: any developer (or AI agent) using these commands will produce pages that match the design system perfectly — correct two-part header, proper token usage, right component classes, and all the critical patterns like dark-text-on-light hero sections and pill-shaped sticky nav tabs.
4
Commands
23
Components Covered
60+
Design Tokens
/redesign
Takes an existing website and recreates it using the Franklin Templeton design system, preserving all meaningful content while replacing the source's styling with FT design tokens and components. Supports both local HTML files from the sample/ directory and live URLs.
Arguments: [page-name] [source] (e.g., royce sample/Royce/...html or test-page https://example.com)
.claude/commands/redesign.md
# /redesign — Redesign an existing site with the FT Design System
Take an existing website and recreate it using the Franklin Templeton design system, preserving all meaningful content while replacing the source’s styling with FT design tokens and components.
**Arguments:** $ARGUMENTS (format: `[page-name] [source]` where source is a `sample/` HTML file path or a URL)
## Source Input
The source can be:
- **Local file** — a saved HTML file in the `sample/` directory (e.g., `sample/Royce/Royce Investment Partners _ Small-Cap Specialists.html`)
- **URL** — a live website URL to fetch and analyze (e.g., `https://www.royceinvest.com`)
Read the source and extract all meaningful content before generating the page.
## Step-by-Step Workflow
### Step 1: Content Extraction
Read the source and identify all content categories:
| Category | What to extract |
|----------|----------------|
| **Brand** | Company/fund name, tagline, ticker symbols, logo text |
| **Navigation** | Primary nav items, utility links, CTAs |
| **Hero** | Headline, subheadline, key highlights, sidebar card content |
| **Stats** | Key metrics (NAV, returns, AUM, inception date, etc.) with dates |
| **People** | Names, titles, credentials, tenure, photos (note URLs) |
| **Products** | Fund names, tickers, descriptions, performance data, categories |
| **Editorial** | CIO messages, investment insights, philosophy statements, approach descriptions |
| **History** | Timeline events, milestones, founding dates |
| **Resources** | Documents, downloads, links, contact info |
| **Legal** | Disclaimers, disclosures, important information |
### Step 2: Section Planning
Create a mapping table from source content to FT design system patterns:
```
Source Content → FT DS Pattern
—————————————————————
Brand hero area → ft-fund-hero (ticker + name + highlights)
Key metrics bar → product-summary (dark navy stats bar)
Section navigation → ft-sticky-nav (pill tabs)
Data tables → ft-data-table (--striped, --compact)
Team/people section → ft-manager (photo cards in ft-grid--3)
Document downloads → ft-doc-link (icon + title + meta)
Accordion content → ft-accordion (trigger + content)
Feature cards → ft-stat-card or ft-card
Timeline/history → ft-timeline
Legal/disclaimers → ft-disclaimer (--bordered)
```
### Step 3: Generate the Page
Generate the page at `pages/[page-name]/index.html` with this required structure:
1. **`<head>`** — All DS CSS links (tokens, base, layout, utilities, every component CSS file used)
2. **`<style>`** — Page-specific CSS using only `--ft-*` tokens (product-summary bar, custom layouts)
3. **Header** — Two-part `ft-header` (utility bar + main nav)
4. **Fund Hero** — `ft-fund-hero` with gradient bar, decorative SVG, ticker/name/highlights, sidebar card
5. **Product Summary Bar** — Dark navy stats bar with curved top-right corner (if the source has key metrics)
6. **Sticky Nav** — `ft-sticky-nav` with pill tabs matching the page sections + mobile dropdown
7. **Main content** — `page-section` blocks with `ft-container`, using DS components for all content
8. **Disclaimer** — `ft-disclaimer--bordered` for legal/disclosure text
9. **Footer** — Full `ft-footer` with logo, columns, social links, legal
10. **Scripts** — `<script type="module" src="/src/main.js"></script>`
### Step 4: Register in Vite Config
Add the new page to `vite.config.js` → `rollupOptions.input`:
```js
'pages/[page-name]': resolve(__dirname, 'pages/[page-name]/index.html'),
```
## Content Mapping Rules
### Hero
- Use the source’s primary brand name as `ft-fund-hero__ticker` (bold, large)
- Use the source’s tagline or description as `ft-fund-hero__name` (regular weight, large)
- Extract 2–4 key highlights for `ft-fund-hero__highlights` (bullet list with bold lead-ins)
- Sidebar card: quick links, key facts, or CTA content
### Product Summary Bar
- Extract 3–5 key metrics (AUM, inception, returns, NAV, etc.)
- Use `product-summary__label` / `__value` / `__date` structure
- Include page-specific CSS for the bar (bg primary-800, curved top-right corner, `::before` pseudo-element)
### Sticky Nav
- Create one pill per major content section
- Match section `id` attributes to pill `href` values
- Include mobile dropdown with same options
- First pill gets `ft-sticky-nav__pill--active`
### Data Handling
- Preserve exact numbers, dates, percentages from the source
- Use "As of [DATE]" format for dated values
- Apply `ft-data-table__td--positive` / `--negative` for returns
- Use `ft-stat-card__value--positive` / `--negative` for colored values
## Page-Specific CSS Pattern
When adding page-specific styles, use this pattern in the `<style>` block:
```css
/* Page-specific: [page-name] */
.product-summary {
background: var(--ft-primary-800);
border-radius: 0 5rem 0 0;
/* ... uses only --ft-* tokens */
}
@media (min-width: 1024px) {
.product-summary {
border-radius: 0 7rem 0 0;
}
}
```
All values must reference `--ft-*` tokens. No hardcoded colors, spacing, or fonts.
## Reference Pages
Study these pages for patterns and structure:
- `pages/royce/index.html` — Royce Investment Partners reskin (source: `sample/Royce/`)
- `pages/putnam/index.html` — Putnam Investments reskin (source: `sample/Putnam/`)
- `pages/clarion-partners/index.html` — Clarion Partners specialist manager page
- `pages/fund-detail/index.html` — Canonical FT fund detail page with all patterns
## Rules
1. **Preserve ALL meaningful content** — Every piece of text, data point, name, date, and metric from the source must appear in the output. Do not summarize or omit content.
2. **Discard source styling completely** — Ignore all CSS classes, colors, fonts, and layout from the source. Only use FT design system tokens and components.
3. **MUST use the two-part header** — Never use a single-part header. Dark navy utility bar + white main nav.
4. **MUST use `ft-container`** — All content sections must be wrapped in `<div class="ft-container">`.
5. **MUST use only DS components** — Only use `.ft-*` classes defined in `src/design-system/components/`. Available (23): header, footer, breadcrumbs, tabs, stat-card, data-table, button, badge, accordion, select, rating, document-link, disclaimer, hero-banner, gradient-bar, fund-hero, sticky-nav, curved-section, progress-bar, manager-card, timeline, icon, insight-card.
6. **MUST use only DS tokens** — Only use `--ft-*` custom properties for colors, spacing, typography, shadows, radii.
7. **NO hardcoded values** — Never write raw hex colors, pixel sizes for spacing, or font names. Always reference tokens.
8. **NO inline styles** except for data-driven values (chart paths, dynamic widths, progress bar fills).
9. **Fund hero has DARK TEXT on LIGHT background** — Text color is `primary-800` (dark navy). NOT white text on dark background.
10. **Product summary bar is page-specific CSS** — Dark navy bg with curved top-right corner, `::before` pseudo-element extending left.
11. **Content sections on WHITE background** — Use `.page-section` with border-top separators. Use `ft-curved-section` sparingly.
12. **Add to vite.config.js** — Register the new page entry in the Vite config’s `rollupOptions.input`.
13. **Include favicon and main.js** — `<link rel="icon" type="image/png" href="/favicon.png" />` and `<script type="module" src="/src/main.js"></script>`./create-page
Generates a complete new HTML page using the Franklin Templeton design system. Provides a full page template with the two-part header, fund hero, product summary bar, sticky nav, content sections, and footer — plus all critical design pattern rules.
Arguments: [page-name] [description]
.claude/commands/create-page.md
# /create-page — Generate a new FT Design System page
Create a complete new HTML page using the Franklin Templeton design system.
**Arguments:** $ARGUMENTS (format: `[page-name] [description]`)
## Page Template
Generate the page at `pages/[page-name]/index.html` with this structure:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>[Page Title] | Franklin Templeton</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Design System CSS — include ALL of these -->
<link rel="stylesheet" href="/src/design-system/tokens.css" />
<link rel="stylesheet" href="/src/design-system/base.css" />
<link rel="stylesheet" href="/src/design-system/layout.css" />
<link rel="stylesheet" href="/src/design-system/utilities.css" />
<link rel="stylesheet" href="/src/design-system/components/header.css" />
<link rel="stylesheet" href="/src/design-system/components/footer.css" />
<link rel="stylesheet" href="/src/design-system/components/gradient-bar.css" />
<link rel="stylesheet" href="/src/design-system/components/fund-hero.css" />
<link rel="stylesheet" href="/src/design-system/components/sticky-nav.css" />
<link rel="stylesheet" href="/src/design-system/components/curved-section.css" />
<link rel="stylesheet" href="/src/design-system/components/stat-card.css" />
<link rel="stylesheet" href="/src/design-system/components/data-table.css" />
<link rel="stylesheet" href="/src/design-system/components/button.css" />
<link rel="stylesheet" href="/src/design-system/components/badge.css" />
<link rel="stylesheet" href="/src/design-system/components/accordion.css" />
<link rel="stylesheet" href="/src/design-system/components/select.css" />
<link rel="stylesheet" href="/src/design-system/components/rating.css" />
<link rel="stylesheet" href="/src/design-system/components/document-link.css" />
<link rel="stylesheet" href="/src/design-system/components/disclaimer.css" />
<link rel="stylesheet" href="/src/design-system/components/hero-banner.css" />
<link rel="stylesheet" href="/src/design-system/components/progress-bar.css" />
<link rel="stylesheet" href="/src/design-system/components/manager-card.css" />
<link rel="stylesheet" href="/src/design-system/components/breadcrumbs.css" />
<link rel="stylesheet" href="/src/design-system/components/tabs.css" />
</head>
<body>
<!-- HEADER — Two-part: Utility Bar + Main Nav -->
<header class="ft-header">
<div class="ft-header__utility">
<div class="ft-container">
<div class="ft-header__utility-inner">
<span class="ft-header__role">US - Individual Investor</span>
<a class="ft-header__utility-link" href="#">About Us</a>
<a class="ft-header__utility-link" href="#">Contact Us</a>
</div>
</div>
</div>
<div class="ft-header__main">
<div class="ft-container">
<div class="ft-header__main-inner">
<a class="ft-header__logo" href="/">
<img src="/assets/images/ft-logo-header.webp" alt="Franklin Templeton" />
</a>
<nav class="ft-header__nav">
<a class="ft-header__nav-link" href="/pages/fund-detail/">Fund Detail</a>
<a class="ft-header__nav-link" href="/pages/kitchen-sink/">Kitchen Sink</a>
<a class="ft-header__nav-link" href="/pages/royce/">Royce</a>
</nav>
<div class="ft-header__actions">
<a class="ft-header__search" href="#" aria-label="Search">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</a>
<a class="ft-header__signin" href="#">Sign In</a>
</div>
</div>
</div>
</div>
</header>
<!-- FUND HERO (for product/detail pages) -->
<section class="ft-fund-hero">
<div class="ft-gradient-bar"></div>
<div class="ft-fund-hero__body">
<div class="ft-fund-hero__decor"><!-- decorative SVG --></div>
<div class="ft-container">
<div class="ft-fund-hero__grid">
<div class="ft-fund-hero__main">
<!-- meta badges, title (ticker + name), highlights list -->
</div>
<div class="ft-fund-hero__sidebar">
<div class="ft-fund-hero__card"><!-- sidebar card --></div>
</div>
</div>
</div>
</div>
</section>
<!-- PRODUCT SUMMARY BAR (dark navy stats) -->
<div style="overflow: hidden;">
<div class="ft-container">
<div class="product-summary">
<div class="product-summary__item">
<div class="product-summary__label">Label</div>
<div class="product-summary__value">Value</div>
<div class="product-summary__date">As of DATE</div>
</div>
</div>
</div>
</div>
<!-- STICKY NAV -->
<nav class="ft-sticky-nav" id="sticky-nav">
<div class="ft-sticky-nav__mobile">
<div class="ft-container">
<div class="ft-select">
<div class="ft-select__wrapper">
<select class="ft-select__input" aria-label="Page Navigation" id="sticky-nav-mobile">
<option value="section1" selected>Section 1</option>
<option value="section2">Section 2</option>
</select>
</div>
</div>
</div>
</div>
<div class="ft-container">
<ul class="ft-sticky-nav__list">
<li><a class="ft-sticky-nav__pill ft-sticky-nav__pill--active" href="#section1">Section 1</a></li>
<li><a class="ft-sticky-nav__pill" href="#section2">Section 2</a></li>
</ul>
</div>
</nav>
<main>
<section class="page-section" id="section1">
<div class="ft-container">
<h2 class="ft-section-title">Section Title</h2>
<!-- content -->
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="ft-footer">
<div class="ft-container">
<div class="ft-footer__logo">
<img src="/assets/images/ft-logo-footer.webp" alt="Franklin Templeton" />
</div>
<p class="ft-footer__disclaimer">This website is intended for residents of the United States.</p>
<div class="ft-footer__columns">
<div class="ft-footer__col">
<h4 class="ft-footer__heading">Column</h4>
<ul class="ft-footer__links"><li><a href="#">Link</a></li></ul>
</div>
</div>
<div class="ft-footer__social">
<a class="ft-footer__social-link" href="#" aria-label="LinkedIn"><img src="/assets/icons/linkedin.svg" alt="LinkedIn" /></a>
<a class="ft-footer__social-link" href="#" aria-label="X (Twitter)"><img src="/assets/icons/x-twitter.svg" alt="X" /></a>
<a class="ft-footer__social-link" href="#" aria-label="YouTube"><img src="/assets/icons/youtube.svg" alt="YouTube" /></a>
</div>
<div class="ft-footer__bottom">
<p class="ft-footer__copyright">Copyright © 2026 Franklin Templeton. All Rights Reserved.</p>
<div class="ft-footer__legal">
<a href="#">Privacy Notice</a>
<a href="#">Terms of Use</a>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/main.js"></script>
</body>
</html>
```
## Critical Design Patterns
### Header is TWO-PART (never single-part)
- **Utility bar** (`ft-header__utility`): Dark navy bg, 63px, hidden on mobile. Contains role text + utility links.
- **Main nav** (`ft-header__main`): White bg, 72px (56px mobile). Contains logo, bold nav links, search icon with blue border, Sign In pill button.
### Fund Hero has DARK TEXT on LIGHT background
- Text color is `primary-800` (dark navy) — NOT white text on dark background.
- Decorative gradient SVG sits behind the right side of the hero.
- Two-column grid: main content (2fr) + sidebar card (1fr).
### Product Summary Bar is DARK NAVY with curved corner
- Background: `primary-800`, border-radius: `0 5rem 0 0` (7rem on desktop).
- White text stats (label, value, date) aligned flex-start.
- `::before` extends the dark bg to the left viewport edge.
- Sits between hero and sticky nav.
### Sticky Nav has PILL-shaped tabs with BACKDROP BLUR
- Semi-transparent `primary-50` bg (0.85 opacity) + `backdrop-filter: blur(12px)`.
- Sticks below header: `top: 8.4375rem` desktop (135px = 63px + 72px), `top: 3.5rem` mobile.
- Active pill: `primary-500` bg, white text, `rounded-full`.
- Mobile: pills hidden, replaced by select dropdown.
### Content Sections on WHITE background
- Use plain sections with `padding: var(--ft-space-10) 0` — NOT curved sections for every section.
- Separate sections with `border-top: 1px solid var(--ft-neutral-100)` between siblings.
- `ft-curved-section` should ONLY be used when you specifically want a light blue curved background block.
## Rules
1. **MUST use the two-part header** — Never use a single-part header. Copy the exact HTML from the template above.
2. **MUST use `ft-container`** — All content sections must be wrapped in `<div class="ft-container">`.
3. **MUST use only DS components** — Only use `.ft-*` classes defined in `src/design-system/components/`. Available (20): header, footer, breadcrumbs, tabs, stat-card, data-table, button, badge, accordion, select, rating, document-link, disclaimer, hero-banner, gradient-bar, fund-hero, sticky-nav, curved-section, progress-bar, manager-card.
4. **MUST use only DS tokens** — Only use `--ft-*` custom properties for colors, spacing, typography, shadows, radii.
5. **NO hardcoded values** — Never write raw hex colors, pixel sizes for spacing, or font names. Always reference tokens.
6. **NO inline styles** except for data-driven values (chart paths, dynamic widths, progress bar fills).
7. **Add to vite.config.js** — Register the new page entry in the Vite config’s `rollupOptions.input`.
8. **Include favicon** — `<link rel="icon" type="image/png" href="/favicon.png" />`.
9. **Include main.js** — `<script type="module" src="/src/main.js"></script>` before `</body>`.
## Reference
- `pages/fund-detail/index.html` — Complete product page (hero, product summary, sticky nav, all section types)
- `pages/royce/index.html` — Complete brand reskin (same patterns, different content)
- `pages/kitchen-sink/index.html` — All components with HTML snippets/add-component
Inserts a Franklin Templeton design system component into an existing page. Provides copy-paste HTML templates for all 20+ components with exact class names, variants, and usage notes.
Arguments: [component-name] (e.g., header, fund-hero, sticky-nav)
.claude/commands/add-component.md
# /add-component — Insert a design system component
Insert a Franklin Templeton design system component into an existing page.
**Argument:** $ARGUMENTS (component name, e.g., `header`, `fund-hero`, `sticky-nav`, `product-summary`)
## Available Components & Templates
---
### header
**TWO-PART structure — dark utility bar + white main nav. NEVER use a single-part header.**
```html
<header class="ft-header">
<div class="ft-header__utility">
<div class="ft-container">
<div class="ft-header__utility-inner">
<span class="ft-header__role">US - Individual Investor</span>
<a class="ft-header__utility-link" href="#">About Us</a>
<a class="ft-header__utility-link" href="#">Contact Us</a>
</div>
</div>
</div>
<div class="ft-header__main">
<div class="ft-container">
<div class="ft-header__main-inner">
<a class="ft-header__logo" href="/">
<img src="/assets/images/ft-logo-header.webp" alt="Franklin Templeton" />
</a>
<nav class="ft-header__nav">
<a class="ft-header__nav-link" href="/pages/fund-detail/">Fund Detail</a>
<a class="ft-header__nav-link" href="/pages/kitchen-sink/">Kitchen Sink</a>
<a class="ft-header__nav-link" href="/pages/royce/">Royce</a>
</nav>
<div class="ft-header__actions">
<a class="ft-header__search" href="#" aria-label="Search">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</a>
<a class="ft-header__signin" href="#">Sign In</a>
</div>
</div>
</div>
</div>
</header>
```
Utility bar: dark navy (primary-800), 63px, hidden <1024px. Main nav: white, 72px (56px mobile).
CSS: `components/header.css` | Classes: `ft-header__utility`, `ft-header__main`, `ft-header__nav-link--active`, `ft-header__search`, `ft-header__signin`
---
### footer
```html
<footer class="ft-footer">
<div class="ft-container">
<div class="ft-footer__logo">
<img src="/assets/images/ft-logo-footer.webp" alt="Franklin Templeton" />
</div>
<p class="ft-footer__disclaimer">This website is intended for residents of the United States.</p>
<div class="ft-footer__columns">
<div class="ft-footer__col">
<h4 class="ft-footer__heading">Column</h4>
<ul class="ft-footer__links"><li><a href="#">Link</a></li></ul>
</div>
</div>
<div class="ft-footer__social">
<a class="ft-footer__social-link" href="#" aria-label="LinkedIn"><img src="/assets/icons/linkedin.svg" alt="LinkedIn" /></a>
<a class="ft-footer__social-link" href="#" aria-label="X (Twitter)"><img src="/assets/icons/x-twitter.svg" alt="X" /></a>
<a class="ft-footer__social-link" href="#" aria-label="YouTube"><img src="/assets/icons/youtube.svg" alt="YouTube" /></a>
</div>
<div class="ft-footer__bottom">
<p class="ft-footer__copyright">Copyright © 2026 Franklin Templeton. All Rights Reserved.</p>
<div class="ft-footer__legal">
<a href="#">Privacy Notice</a>
<a href="#">Terms of Use</a>
</div>
</div>
</div>
</footer>
```
CSS: `components/footer.css` | Dark bg (neutral-900), white text
---
### gradient-bar
```html
<div class="ft-gradient-bar"></div>
```
8px tall blue-to-teal gradient strip. Placed at the top of the fund hero section.
CSS: `components/gradient-bar.css`
---
### fund-hero
**DARK TEXT on LIGHT background — NOT white text on dark. Decorative gradient SVG behind right side.**
```html
<section class="ft-fund-hero">
<div class="ft-gradient-bar"></div>
<div class="ft-fund-hero__body">
<div class="ft-fund-hero__decor">
<svg viewBox="0 0 653 524" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- decorative gradient SVG -->
</svg>
</div>
<div class="ft-container">
<div class="ft-fund-hero__grid">
<div class="ft-fund-hero__main">
<div class="ft-fund-hero__meta">
<span class="ft-badge ft-badge--outline-dark">Category</span>
</div>
<h1 class="ft-fund-hero__title">
<span class="ft-fund-hero__ticker">TICKER</span>
<span class="ft-fund-hero__name">Fund Name</span>
</h1>
<ul class="ft-fund-hero__highlights">
<li><strong>Key point.</strong> Supporting detail.</li>
</ul>
</div>
<div class="ft-fund-hero__sidebar">
<div class="ft-fund-hero__card">
<h2 class="ft-fund-hero__card-title">Card Title</h2>
<ul class="ft-fund-hero__card-list">
<li><a href="#">Link item</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
```
CSS: `components/fund-hero.css` + `components/gradient-bar.css`
Title: `primary-800`. Ticker: bold, responsive 2xl→4xl. Name: regular weight, 2xl→5xl. Highlights: teal bullets. Sidebar card: white, lg shadow.
---
### product-summary
**Dark navy stats bar with curved top-right corner. Page-specific CSS (not a DS component file).**
```html
<div style="overflow: hidden;">
<div class="ft-container">
<div class="product-summary">
<div class="product-summary__item">
<div class="product-summary__label">NAV</div>
<div class="product-summary__value">$2.56</div>
<div class="product-summary__date">As of 02/04/2026</div>
</div>
<div class="product-summary__item">
<div class="product-summary__label">YTD Total Returns</div>
<div class="product-summary__value">3.72%</div>
<div class="product-summary__date">As of 02/04/2026</div>
</div>
</div>
</div>
</div>
```
Requires page-specific CSS: `.product-summary` (bg primary-800, flex, curved top-right 5rem/7rem), `.product-summary__label/value/date`, `::before` pseudo-element to extend bg left. See `pages/fund-detail/index.html` for the full CSS.
---
### sticky-nav
```html
<nav class="ft-sticky-nav" id="sticky-nav">
<div class="ft-sticky-nav__mobile">
<div class="ft-container">
<div class="ft-select">
<div class="ft-select__wrapper">
<select class="ft-select__input" aria-label="Page Navigation" id="sticky-nav-mobile">
<option value="section1" selected>Section 1</option>
<option value="section2">Section 2</option>
</select>
</div>
</div>
</div>
</div>
<div class="ft-container">
<ul class="ft-sticky-nav__list">
<li><a class="ft-sticky-nav__pill ft-sticky-nav__pill--active" href="#section1">Section 1</a></li>
<li><a class="ft-sticky-nav__pill" href="#section2">Section 2</a></li>
</ul>
</div>
</nav>
```
CSS: `components/sticky-nav.css` | Frosted glass bg, pill-shaped tabs, sticks below header. JS: `initStickyNav()` + `initStickyNavPills()` in `src/main.js`.
---
### curved-section
```html
<section class="ft-curved-section">
<div class="ft-container">
<h2 class="ft-section-title">Section Title</h2>
<p class="ft-section-meta">Supporting text.</p>
</div>
</section>
```
Variants: `ft-curved-section--alt` (top-left corner), `ft-curved-section--both` (both corners)
CSS: `components/curved-section.css` | Light blue bg (primary-50). **Use sparingly.**
---
### breadcrumbs
```html
<nav class="ft-breadcrumbs" aria-label="Breadcrumb">
<div class="ft-container">
<ol class="ft-breadcrumbs__list">
<li class="ft-breadcrumbs__item"><a href="/">Home</a></li>
<li class="ft-breadcrumbs__item ft-breadcrumbs__item--active" aria-current="page">Current</li>
</ol>
</div>
</nav>
```
CSS: `components/breadcrumbs.css`
---
### tabs
```html
<div class="ft-tabs">
<div class="ft-tabs__list" role="tablist">
<button class="ft-tabs__tab ft-tabs__tab--active" role="tab" aria-selected="true" data-tab="tab1">Tab 1</button>
<button class="ft-tabs__tab" role="tab" aria-selected="false" data-tab="tab2">Tab 2</button>
</div>
<div class="ft-tabs__panel ft-tabs__panel--active" role="tabpanel" data-panel="tab1">Content 1</div>
<div class="ft-tabs__panel" role="tabpanel" data-panel="tab2" hidden>Content 2</div>
</div>
```
CSS: `components/tabs.css` | JS: Tab switching handled by `src/main.js`
---
### stat-card
```html
<div class="ft-stat-card ft-stat-card--bordered">
<span class="ft-stat-card__label">LABEL</span>
<span class="ft-stat-card__value">VALUE</span>
<span class="ft-stat-card__meta">As of DATE</span>
</div>
```
Variants: `--bordered`, `--highlight` | Value modifiers: `__value--positive`, `__value--negative`
CSS: `components/stat-card.css`
---
### data-table
```html
<div class="ft-data-table">
<table class="ft-data-table__table">
<thead>
<tr>
<th class="ft-data-table__th">Header</th>
<th class="ft-data-table__th ft-data-table__th--right">Value</th>
</tr>
</thead>
<tbody>
<tr class="ft-data-table__row">
<td class="ft-data-table__td">Data</td>
<td class="ft-data-table__td ft-data-table__td--right ft-data-table__td--bold">Value</td>
</tr>
</tbody>
</table>
</div>
```
Variants: `--striped`, `--compact` | Cell modifiers: `--right`, `--bold`, `--positive`, `--negative`
CSS: `components/data-table.css`
---
### button
```html
<button class="ft-btn ft-btn--primary">Label</button>
<a class="ft-btn ft-btn--outline" href="#">Link Button</a>
```
Variants: `--primary`, `--secondary`, `--ghost`, `--outline` | Sizes: `--sm`, `--lg`
CSS: `components/button.css`
---
### badge
```html
<span class="ft-badge ft-badge--primary">Label</span>
```
Variants: `--primary`, `--success`, `--error`, `--purple`, `--outline`, `--outline-dark`
CSS: `components/badge.css` | `--outline-dark` is for badges on light backgrounds (dark border/text)
---
### accordion
```html
<div class="ft-accordion">
<button class="ft-accordion__trigger" aria-expanded="false">
<span class="ft-accordion__title">Title</span>
<span class="ft-accordion__icon">▾</span>
</button>
<div class="ft-accordion__content" hidden>
<div class="ft-accordion__body">Content</div>
</div>
</div>
```
CSS: `components/accordion.css` | JS: Toggle handled by `src/main.js`
---
### select
```html
<div class="ft-select">
<label class="ft-select__label">Label</label>
<div class="ft-select__wrapper">
<select class="ft-select__input">
<option>Option 1</option>
</select>
</div>
</div>
```
Variants: `--sm`, `--inline`
CSS: `components/select.css`
---
### rating
```html
<div class="ft-rating" aria-label="3 out of 5 stars">
<span class="ft-rating__star ft-rating__star--filled">★</span>
<span class="ft-rating__star ft-rating__star--filled">★</span>
<span class="ft-rating__star ft-rating__star--filled">★</span>
<span class="ft-rating__star">★</span>
<span class="ft-rating__star">★</span>
<span class="ft-rating__label">Morningstar</span>
</div>
```
CSS: `components/rating.css`
---
### document-link
```html
<a class="ft-doc-link" href="#">
<span class="ft-doc-link__icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 9V3.5L18.5 9H13zM6 20V4h5v7h7v9H6z"/></svg></span>
<span class="ft-doc-link__text">
<span class="ft-doc-link__title">Document Name</span>
<span class="ft-doc-link__meta">Description or file type</span>
</span>
</a>
```
CSS: `components/document-link.css`
---
### disclaimer
```html
<div class="ft-disclaimer ft-disclaimer--bordered">
<h3 style="font-size: var(--ft-font-size-base); font-weight: var(--ft-font-weight-bold); margin-bottom: var(--ft-space-4);">Important Information</h3>
<p class="ft-disclaimer__text">Disclaimer text...</p>
</div>
```
Variants: `--bordered`
CSS: `components/disclaimer.css`
---
### hero-banner
**Simple hero for non-product pages (landing pages, etc.).**
```html
<section class="ft-hero">
<div class="ft-container">
<h1 class="ft-hero__title">Title</h1>
<p class="ft-hero__subtitle">Subtitle</p>
</div>
</section>
```
Variants: `ft-hero--primary`, `ft-hero--light`
CSS: `components/hero-banner.css`
---
### progress-bar
```html
<div class="ft-progress">
<div class="ft-progress__header">
<span class="ft-progress__label">Category</span>
<span class="ft-progress__value">49.40%</span>
</div>
<div class="ft-progress__track">
<div class="ft-progress__fill ft-progress__fill--0" style="width: 49.4%;"></div>
</div>
</div>
```
Fill color variants: `--0` through `--5` (uses chart color palette)
CSS: `components/progress-bar.css`
---
### manager-card
```html
<div class="ft-manager">
<img class="ft-manager__photo" src="/assets/images/name.webp" alt="Name" />
<div class="ft-manager__info">
<h4 class="ft-manager__name">Full Name, CFA®</h4>
<p class="ft-manager__role">Title / Since Year</p>
</div>
</div>
```
Photo: 64px circle. Wrap in `.ft-card` for bordered card treatment.
CSS: `components/manager-card.css`
---
## Rules
1. **Only use `.ft-*` classes** — Never invent custom class names for standard patterns.
2. **Only use `--ft-*` tokens** — Never hardcode colors, spacing, or fonts.
3. **Match existing patterns** — Reference `pages/fund-detail/index.html` and `pages/royce/index.html` for real-world usage.
4. **Ensure CSS is linked** — The component’s CSS file must be included in the page `<head>`.
5. **Header is always two-part** — utility bar + main nav. Never simplify to a single bar.
6. **Fund hero has dark text on light bg** — Never reverse this to white text on dark bg.
7. **Product summary bar** uses page-specific CSS — it’s not a standalone DS component file./design-system
Complete reference for the FT design system: tokens, components, layout, utilities, and conventions. The most comprehensive command — provides full color scales, typography tokens, spacing system, all component classes with variants, layout helpers, utility classes, and naming conventions.
Arguments: [topic] (optional — e.g., colors, typography, spacing, components)
.claude/commands/design-system.md
# /design-system — Franklin Templeton Design System Reference
Complete reference for the FT design system: tokens, components, layout, utilities, and conventions.
**Query:** $ARGUMENTS (optional — specify a topic like `colors`, `typography`, `spacing`, `components`, `layout`, `utilities`, or a specific component name)
---
## Design Tokens (`src/design-system/tokens.css`)
All tokens use the `--ft-` prefix. **Never hardcode values — always reference tokens.**
### Color Scales
#### Primary Blue (pc1)
| Token | Hex | Usage |
|-------|-----|-------|
| `--ft-primary-50` | `#f0f6ff` | Light blue backgrounds (sticky nav, curved sections) |
| `--ft-primary-100` | `#ddeaff` | Hover backgrounds, light tints |
| `--ft-primary-200` | `#adc2ff` | Light accent, gradient endpoints |
| `--ft-primary-300` | `#85a3ff` | — |
| `--ft-primary-400` | `#6188ff` | — |
| `--ft-primary-500` | `#3769ff` | **Primary brand blue** — links, active states, buttons, active pills |
| `--ft-primary-600` | `#1446e1` | Gradient midpoint |
| `--ft-primary-700` | `#002eb8` | Dark accent, chart color 0 |
| `--ft-primary-800` | `#001e62` | **Dark navy** — utility bar bg, product summary bg, hero text, section titles |
| `--ft-primary-900` | `#000f3d` | Darkest navy, overlay base |
| `--ft-primary-950` | `#00081f` | Near-black navy |
#### Neutral (nc1)
| Token | Hex | Usage |
|-------|-----|-------|
| `--ft-neutral-0` | `#ffffff` | White backgrounds, cards |
| `--ft-neutral-50` | `#F4F5F5` | Very light gray backgrounds |
| `--ft-neutral-100` | `#ECEDEE` | Borders between sections, dividers |
| `--ft-neutral-200` | `#D4D5D8` | Card borders, table borders |
| `--ft-neutral-300` | `#BCBDC3` | — |
| `--ft-neutral-400` | `#9EA1A8` | — |
| `--ft-neutral-500` | `#737680` | Muted text, labels, meta text |
| `--ft-neutral-600` | `#686B73` | — |
| `--ft-neutral-700` | `#5C5E66` | Secondary text |
| `--ft-neutral-800` | `#484A51` | — |
| `--ft-neutral-900` | `#38393E` | Footer background |
| `--ft-neutral-950` | `#212121` | Primary body text, headings |
#### Purple (sc1)
| Token | Hex |
|-------|-----|
| `--ft-purple-50` | `#f5f2fd` |
| `--ft-purple-100` – `--ft-purple-400` | `#EEE9FC` → `#9F7DED` |
| `--ft-purple-500` | `#6730E3` — accent purple, badges, charts |
| `--ft-purple-600` – `--ft-purple-950` | `#571EDC` → `#1E0A4C` |
#### Teal (sc2)
| Token | Hex |
|-------|-----|
| `--ft-teal-50` | `#edfafa` |
| `--ft-teal-500` | `#00bfb3` — gradient endpoints |
| `--ft-teal-600` | `#00ada2` — accent teal, charts |
| `--ft-teal-800` | `#008077` |
#### Magenta (sc3)
| Token | Hex |
|-------|-----|
| `--ft-magenta-500` | `#c042ea` |
| Full scale: 50–900 | `#faf1fd` → `#5d0d77` |
#### Red/Crimson (sc4)
| Token | Hex |
|-------|-----|
| `--ft-red-500` | `#FF0F52` |
| Full scale: 50–900 | `#FFF5F8` → `#750021` |
#### Orange (sc5)
| Token | Hex |
|-------|-----|
| `--ft-orange-500` | `#FF6035` |
| Full scale: 50–900 | `#FFEFEB` → `#3D0D00` |
### Semantic Colors
| Token | Hex | Usage |
|-------|-----|-------|
| `--ft-success-50` | `#DEFEDD` | Success background |
| `--ft-success-500` | `#0A8750` | Positive values, success text |
| `--ft-success-800` | `#065903` | Dark success |
| `--ft-warning-50` | `#FFFCF0` | Warning background |
| `--ft-warning-500` | `#FFCE00` | Warnings |
| `--ft-warning-800` | `#665200` | Dark warning |
| `--ft-error-50` | `#FFF0F0` | Error background |
| `--ft-error-400` | `#F87171` | Light error |
| `--ft-error-500` | `#D70000` | Negative values, error text |
| `--ft-error-800` | `#8F0000` | Dark error |
| `--ft-star` | `#F7BC00` | Star ratings (Morningstar) |
### Chart Colors
| Token | Hex | Note |
|-------|-----|------|
| `--ft-chart-0` | `#002EB8` | Primary series (dark blue) |
| `--ft-chart-1` | `#00ADA2` | Teal series |
| `--ft-chart-2` | `#FF6035` | Orange series |
| `--ft-chart-3` | `#6730e3` | Purple series |
| `--ft-chart-4` | `#9EA1A8` | Gray series |
| `--ft-chart-5` | `#B623E7` | Magenta series |
| `--ft-chart-6` – `--ft-chart-11` | Various | Extended palette |
| `--ft-benchmark-0` | `#3769FF` | Primary benchmark |
| `--ft-benchmark-1` | `#009E94` | Secondary benchmark |
| `--ft-benchmark-2` | `#8F8F8F` | Tertiary benchmark |
### Gradients
| Token | Value | Usage |
|-------|-------|-------|
| `--ft-gradient-primary` | `linear-gradient(135.6deg, #001E62, #1446E1)` | Dark navy-to-blue gradient |
| `--ft-gradient-primary-extended` | `linear-gradient(135.6deg, #001E62, #1446E1, #ADC2FF)` | Extended three-stop gradient |
| `--ft-gradient-light` | `linear-gradient(135.6deg, #ADC2FF, #DDEAFF)` | Light blue gradient |
| `--ft-gradient-purple` | `linear-gradient(135.6deg, #001E62, #6730E3)` | Navy-to-purple |
| `--ft-gradient-teal` | `linear-gradient(135.6deg, #002EB8, #008077)` | Blue-to-teal |
| `--ft-gradient-bar` | `linear-gradient(to right, #3769ff, #00bfb3)` | Gradient bar strip (blue→teal) |
### Overlays
| Token | Value |
|-------|-------|
| `--ft-overlay-white-10/20/50` | `rgba(255,255,255, 0.1/0.2/0.5)` |
| `--ft-overlay-black-10/20` | `rgba(0,0,0, 0.1/0.2)` |
| `--ft-overlay-dark-10/20` | `rgba(0,15,61, 0.1/0.2)` — navy-tinted overlays |
---
### Typography
| Token | Value | Px Equivalent |
|-------|-------|---------------|
| `--ft-font-family` | `"TT Commons Pro", Arial, Helvetica, sans-serif` | — |
| `--ft-font-weight-regular` | `400` | Normal body text |
| `--ft-font-weight-medium` | `500` | Semi-bold labels |
| `--ft-font-weight-bold` | `700` | Headings, emphasis |
| `--ft-font-size-xs` | `0.75rem` | 12px |
| `--ft-font-size-sm` | `0.875rem` | 14px |
| `--ft-font-size-base` | `1rem` | 16px |
| `--ft-font-size-lg` | `1.125rem` | 18px |
| `--ft-font-size-xl` | `1.25rem` | 20px |
| `--ft-font-size-2xl` | `1.5rem` | 24px |
| `--ft-font-size-3xl` | `1.875rem` | 30px |
| `--ft-font-size-4xl` | `2.25rem` | 36px |
| `--ft-font-size-5xl` | `3rem` | 48px |
| `--ft-font-size-6xl` | `3.75rem` | 60px |
| `--ft-line-height-tight` | `1.2` | Headings |
| `--ft-line-height-snug` | `1.375` | Subheadings |
| `--ft-line-height-base` | `1.5` | Body text |
| `--ft-line-height-loose` | `1.75` | Spacious text |
### Spacing (4px base unit)
| Token | Value | Px |
|-------|-------|----|
| `--ft-space-0` | `0` | 0 |
| `--ft-space-0-5` | `0.125rem` | 2px |
| `--ft-space-1` | `0.25rem` | 4px |
| `--ft-space-2` | `0.5rem` | 8px |
| `--ft-space-3` | `0.75rem` | 12px |
| `--ft-space-4` | `1rem` | 16px |
| `--ft-space-5` | `1.25rem` | 20px |
| `--ft-space-6` | `1.5rem` | 24px |
| `--ft-space-8` | `2rem` | 32px |
| `--ft-space-10` | `2.5rem` | 40px |
| `--ft-space-12` | `3rem` | 48px |
| `--ft-space-16` | `4rem` | 64px |
| `--ft-space-20` | `5rem` | 80px |
### Border Radius
| Token | Value | Px | Usage |
|-------|-------|----|-------|
| `--ft-radius-sm` | `0.25rem` | 4px | Buttons, badges |
| `--ft-radius-md` | `0.5rem` | 8px | Cards, inputs |
| `--ft-radius-lg` | `1rem` | 16px | Large cards |
| `--ft-radius-xl` | `1.5rem` | 24px | Hero cards |
| `--ft-radius-2xl` | `4rem` | 64px | Curved section corners |
| `--ft-radius-3xl` | `8rem` | 128px | Large curved sections |
| `--ft-radius-full` | `9999px` | — | Pills, avatars |
### Shadows
| Token | Value | Usage |
|-------|-------|-------|
| `--ft-shadow-sm` | `0 1px 2px rgba(0,15,61,0.04)` | Subtle elevation |
| `--ft-shadow-md` | `0 2px 8px rgba(0,15,61,0.08)` | Cards, dropdowns |
| `--ft-shadow-lg` | `0 4px 16px rgba(0,15,61,0.12)` | Hero sidebar card, modals |
| `--ft-shadow-card` | `0 1px 3px …, 0 1px 2px …` | Default card shadow |
### Transitions
| Token | Value |
|-------|-------|
| `--ft-transition-fast` | `150ms ease` |
| `--ft-transition-base` | `250ms ease` |
| `--ft-transition-slow` | `400ms ease` |
### Breakpoints (media queries — not custom properties)
| Name | Width | Usage |
|------|-------|-------|
| sm | `640px` | Small tablets |
| md | `768px` | Tablets |
| lg | `1024px` | Desktop / header utility bar breakpoint |
| xl | `1272px` | Max container width |
| 2xl | `1536px` | Wide screens |
| 3xl | `1920px` | Ultra-wide |
---
## Component Inventory (20 components)
All CSS files are in `src/design-system/components/`. All classes use `.ft-` prefix with BEM naming.
| # | Component | CSS File | Key Classes | Variants/Modifiers |
|---|-----------|----------|-------------|-------------------|
| 1 | **Header** | `header.css` | `.ft-header`, `__utility`, `__utility-inner`, `__main`, `__main-inner`, `__logo`, `__nav`, `__nav-link`, `__actions`, `__search`, `__signin`, `__role`, `__utility-link` | `__nav-link--active` |
| 2 | **Footer** | `footer.css` | `.ft-footer`, `__logo`, `__disclaimer`, `__columns`, `__col`, `__heading`, `__links`, `__social`, `__social-link`, `__bottom`, `__copyright`, `__legal` | — |
| 3 | **Gradient Bar** | `gradient-bar.css` | `.ft-gradient-bar` | — |
| 4 | **Fund Hero** | `fund-hero.css` | `.ft-fund-hero`, `__body`, `__decor`, `__grid`, `__main`, `__meta`, `__title`, `__ticker`, `__name`, `__highlights`, `__sidebar`, `__card`, `__card-title`, `__card-list` | — |
| 5 | **Sticky Nav** | `sticky-nav.css` | `.ft-sticky-nav`, `__mobile`, `__list`, `__pill`, `__title` | `--stuck`, `__pill--active` |
| 6 | **Curved Section** | `curved-section.css` | `.ft-curved-section` | `--alt` (top-left), `--both` (both corners) |
| 7 | **Breadcrumbs** | `breadcrumbs.css` | `.ft-breadcrumbs`, `__list`, `__item` | `__item--active` |
| 8 | **Tabs** | `tabs.css` | `.ft-tabs`, `__list`, `__tab`, `__panel` | `__tab--active`, `__panel--active` |
| 9 | **Stat Card** | `stat-card.css` | `.ft-stat-card`, `__label`, `__value`, `__meta` | `--bordered`, `--highlight`, `__value--positive`, `__value--negative` |
| 10 | **Data Table** | `data-table.css` | `.ft-data-table`, `__table`, `__th`, `__row`, `__td` | `--striped`, `--compact`, `__th--right`, `__td--right`, `__td--bold`, `__td--positive`, `__td--negative` |
| 11 | **Button** | `button.css` | `.ft-btn` | `--primary`, `--secondary`, `--ghost`, `--outline`, `--sm`, `--lg` |
| 12 | **Badge** | `badge.css` | `.ft-badge` | `--primary`, `--success`, `--error`, `--purple`, `--outline`, `--outline-dark` |
| 13 | **Accordion** | `accordion.css` | `.ft-accordion`, `__trigger`, `__title`, `__icon`, `__content`, `__body` | — |
| 14 | **Select** | `select.css` | `.ft-select`, `__label`, `__wrapper`, `__input` | `--sm`, `--inline` |
| 15 | **Rating** | `rating.css` | `.ft-rating`, `__star`, `__label` | `__star--filled` |
| 16 | **Document Link** | `document-link.css` | `.ft-doc-link`, `__icon`, `__text`, `__title`, `__meta` | — |
| 17 | **Disclaimer** | `disclaimer.css` | `.ft-disclaimer`, `__text` | `--bordered` |
| 18 | **Hero Banner** | `hero-banner.css` | `.ft-hero`, `__title`, `__subtitle` | `--primary`, `--light` |
| 19 | **Progress Bar** | `progress-bar.css` | `.ft-progress`, `__header`, `__label`, `__value`, `__track`, `__fill` | `__fill--0` through `__fill--5` (chart color palette) |
| 20 | **Manager Card** | `manager-card.css` | `.ft-manager`, `__photo`, `__info`, `__name`, `__role` | — |
### Page-Specific Component (not in DS files)
**Product Summary Bar** — Dark navy stats bar with curved top-right corner. Defined as page-specific `<style>` in `pages/fund-detail/index.html` and `pages/royce/index.html`.
| Class | Purpose |
|-------|---------|
| `.product-summary` | Container — bg `primary-800`, flex, curved `border-radius: 0 5rem 0 0` (7rem desktop) |
| `.product-summary__item` | Individual stat group |
| `.product-summary__label` | Stat label (white, small) |
| `.product-summary__value` | Stat value (white, bold, large) |
| `.product-summary__date` | Date line (white, small, opacity 0.7) |
| `::before` pseudo | Extends dark bg to left viewport edge |
---
## Layout Classes (`src/design-system/layout.css`)
### Container
| Class | Purpose |
|-------|---------|
| `.ft-container` | Centered, max-width 1272px, horizontal padding `space-6` |
| `.ft-container--fluid` | Full-width container (no max-width) |
### Section Spacing
| Class | Padding |
|-------|---------|
| `.ft-section` | `space-10` (40px) top/bottom |
| `.ft-section--sm` | `space-6` (24px) top/bottom |
| `.ft-section--lg` | `space-16` (64px) top/bottom |
### Grid
| Class | Columns | Responsive |
|-------|---------|------------|
| `.ft-grid` | Base grid, `gap: space-6` | — |
| `.ft-grid--2` | 2 columns | 1 col below 768px |
| `.ft-grid--3` | 3 columns | 2 col 768–1023px, 1 col below 768px |
| `.ft-grid--4` | 4 columns | 2 col 768–1023px, 1 col below 768px |
### Flex
| Class | Effect |
|-------|--------|
| `.ft-flex` | `display: flex` |
| `.ft-flex--wrap` | `flex-wrap: wrap` |
| `.ft-flex--center` | Center both axes |
| `.ft-flex--between` | `justify-content: space-between` |
| `.ft-flex--align-center` | `align-items: center` |
| `.ft-flex--gap-2/4/6/8` | Gap using spacing tokens |
### Other Layout
| Class | Purpose |
|-------|---------|
| `.ft-divider` | 1px neutral-200 horizontal rule, margin `space-6` |
| `.ft-card` | White bg, neutral-200 border, radius-md, padding `space-6` |
| `.ft-card--shadow` | Shadow-md, no border |
---
## Utility Classes (`src/design-system/utilities.css`)
### Text
| Class | Property |
|-------|----------|
| `.ft-text-left/center/right` | `text-align` |
| `.ft-text-xs` through `.ft-text-4xl` | `font-size` (maps to tokens) |
| `.ft-font-regular/medium/bold` | `font-weight` |
| `.ft-text-primary` | `color: primary-500` |
| `.ft-text-navy` | `color: primary-900` |
| `.ft-text-muted` | `color: neutral-500` |
| `.ft-text-success` | `color: success` |
| `.ft-text-error` | `color: error` |
| `.ft-text-white` | `color: neutral-0` |
### Background
| Class | Color |
|-------|-------|
| `.ft-bg-white` | `neutral-0` |
| `.ft-bg-light` | `neutral-100` |
| `.ft-bg-navy` | `primary-900` |
| `.ft-bg-primary` | `primary-500` |
### Spacing
| Class | Property |
|-------|----------|
| `.ft-mt-0/2/4/6/8` | `margin-top` |
| `.ft-mb-0/2/4/6/8` | `margin-bottom` |
| `.ft-p-4/6/8` | `padding` (all sides) |
| `.ft-py-4/6/8` | `padding-top` + `padding-bottom` |
| `.ft-px-4/6` | `padding-left` + `padding-right` |
### Display
| Class | Effect |
|-------|--------|
| `.ft-hidden` | `display: none` |
| `.ft-block` | `display: block` |
| `.ft-inline` | `display: inline` |
| `.ft-inline-block` | `display: inline-block` |
| `.ft-sr-only` | Visually hidden, accessible to screen readers |
---
## Common Page-Level Classes
These appear in page HTML (not DS component files):
| Class | Usage |
|-------|-------|
| `.ft-section-title` | Section heading (`font-size: 2xl`, `font-weight: bold`, `color: primary-800`) |
| `.ft-section-meta` | Section subtitle/description text |
| `.page-section` | Content section with `padding: space-10 0`, `border-top` between siblings |
---
## Interactive Components (JS)
`src/main.js` initializes these automatically on `DOMContentLoaded`:
| Function | Trigger | Behavior |
|----------|---------|----------|
| `initTabs()` | `[data-tab]` buttons | Shows/hides `[data-panel]` content |
| `initAccordions()` | `.ft-accordion__trigger` | Toggles `aria-expanded` and `hidden` |
| `initCopyButtons()` | `.copy-btn` | Copies sibling `<code>` content to clipboard |
| `initStickyNav()` | `#sticky-nav` | Adds `--stuck` class on scroll past hero |
| `initStickyNavPills()` | `.ft-sticky-nav__pill` | Highlights active pill based on scroll position |
---
## Naming Conventions
- **Components:** `.ft-component__element--modifier` (BEM with `ft-` prefix)
- **Tokens:** `--ft-{category}-{scale}` (e.g., `--ft-primary-500`, `--ft-space-4`)
- **Utilities:** `.ft-{property}-{value}` (e.g., `.ft-text-center`, `.ft-mt-4`)
- **Layout:** `.ft-{pattern}` (e.g., `.ft-container`, `.ft-grid--3`)
## File Structure
```
src/design-system/
├── tokens.css # All CSS custom properties
├── base.css # Reset, @font-face (TT Commons Pro from FT CDN), body defaults
├── layout.css # Container, grid, flex, card, divider
├── utilities.css # Text, spacing, display, color helpers
┘── components/
├── header.css
├── footer.css
├── gradient-bar.css
├── fund-hero.css
├── sticky-nav.css
├── curved-section.css
├── breadcrumbs.css
├── tabs.css
├── stat-card.css
├── data-table.css
├── button.css
├── badge.css
├── accordion.css
├── select.css
├── rating.css
├── document-link.css
├── disclaimer.css
├── hero-banner.css
├── progress-bar.css
┘── manager-card.css
```
## Rules
1. **Only use `--ft-*` tokens** — Never hardcode hex colors, pixel sizes, or font names.
2. **Only use `.ft-*` classes** — Never invent custom class names for standard patterns.
3. **Header is always two-part** — Dark navy utility bar + white main nav. Never simplify to a single bar.
4. **Fund hero has dark text on light bg** — `primary-800` text. Never reverse to white-on-dark.
5. **Product summary bar is page-specific CSS** — Not a standalone DS component file. Dark navy bg with curved top-right corner.
6. **Curved sections used sparingly** — Only for intentional light blue background blocks, NOT for every content section.
7. **Content sections on white bg** — Use `.page-section` with border-top separators between siblings.
8. **Reference existing pages** — `pages/fund-detail/index.html` and `pages/royce/index.html` are the canonical examples.
These Claude Code commands are part of the FT Design System Demo project. They are intended for use with Claude Code CLI to generate on-brand Franklin Templeton pages and components. The commands reference design tokens and component patterns defined in this project's src/design-system/ directory.