Color Palette

All colors as CSS custom properties under --ft-* prefix. Extracted from Franklin Templeton production CSS.

Primary Blue (pc1)

#f0f6ff

100

#ddeaff

200

#adc2ff

300

#85a3ff

400

#6188ff

500

#3769ff

600

#1446e1

700

#002eb8

800

#001e62

900

#000f3d

950

#00081f

Neutral (nc1)

#ffffff

#F4F5F5

100

#ECEDEE

200

#D4D5D8

300

#BCBDC3

400

#9EA1A8

500

#737680

600

#686B73

700

#5C5E66

800

#484A51

900

#38393E

950

#212121

Purple (sc1)

#f5f2fd

100

#EEE9FC

200

#D7C9F8

300

#C0AAF3

400

#9F7DED

500

#6730E3

600

#571EDC

700

#4C1AC1

800

#3E159D

900

#2C0F70

950

#1E0A4C

Teal (sc2)

#edfafa

100

#e1f7f7

200

#c0efec

300

#72dbd5

400

#00d6c8

500

#00bfb3

600

#00ada2

700

#00998f

800

#008077

900

#005c56

950

#00423e

Magenta (sc3)

#faf1fd

100

#f7e8fc

200

#eecdf9

300

#e3acf6

400

#d683f1

500

#c042ea

600

#b623e7

700

#a417d3

800

#8112a5

900

#5d0d77

Red / Crimson (sc4)

#FFF5F8

100

#FFE5ED

200

#FFCCDA

300

#FFA8C1

400

#FF7AA0

500

#FF0F52

600

#EB0042

700

#CC003A

800

#AD0031

900

#750021

Orange (sc5)

#FFEFEB

100

#FFDFD6

200

#FFBFAD

300

#FF9F85

400

#FF7F5C

500

#FF6035

600

#F53500

700

#B82800

800

#7A1B00

900

#3D0D00

Semantic Colors

Success 50

#DEFEDD

Success 500

#0A8750

Success 800

#065903

Warning 50

#FFFCF0

Warning 500

#FFCE00

Warning 800

#665200

Error 50

#FFF0F0

Error 500

#D70000

Error 800

#8F0000

Star

#F7BC00

Chart Colors

Chart 0

#002EB8

Chart 1

#00ADA2

Chart 2

#FF6035

Chart 3

#6730E3

Chart 4

#9EA1A8

Chart 5

#B623E7

Chart 6

#6188FF

Chart 7

#005C56

Chart 8

#9F7DED

Chart 9

#B82800

Chart 10

#737680

Chart 11

#ADC2FF

Gradients

Primary

--ft-gradient-primary

Primary Extended

--ft-gradient-primary-extended

Light

--ft-gradient-light

Purple

--ft-gradient-purple

Teal

--ft-gradient-teal

Bar (Blue-to-Teal)

--ft-gradient-bar

Typography

Font: TT Commons Pro loaded from cdn.franklintempleton.com. Weights: 400 (Regular), 700 (Bold). Italic available.

Font Sizes

--ft-font-size-5xl
48px / 3remThe quick brown fox

--ft-font-size-4xl
36px / 2.25remThe quick brown fox

--ft-font-size-3xl
30px / 1.875remThe quick brown fox

--ft-font-size-2xl
24px / 1.5remThe quick brown fox

--ft-font-size-xl
20px / 1.25remThe quick brown fox

--ft-font-size-lg
18px / 1.125remThe quick brown fox

--ft-font-size-base
16px / 1remThe quick brown fox

--ft-font-size-sm
14px / 0.875remThe quick brown fox

--ft-font-size-xs
12px / 0.75remThe quick brown fox

Font Weights

400 RegularFranklin Templeton Investments

400 ItalicFranklin Templeton Investments

700 BoldFranklin Templeton Investments

Line Heights

--ft-line-height-tight
1.2Tight line height for headings and large display text that needs compact vertical rhythm.

--ft-line-height-snug
1.375Snug line height for subheadings and medium-sized text blocks.

--ft-line-height-base
1.5Base line height for body text and general paragraph content throughout the site.

--ft-line-height-loose
1.75Loose line height for small text and legal disclaimers that benefit from extra breathing room.

Spacing, Shadows & Radii

4px base unit spacing scale, elevation shadows, and border radius tokens.

Spacing Scale

--ft-space-0-5 (2px)

--ft-space-1 (4px)

--ft-space-2 (8px)

--ft-space-3 (12px)

--ft-space-4 (16px)

--ft-space-5 (20px)

--ft-space-6 (24px)

--ft-space-8 (32px)

--ft-space-10 (40px)

--ft-space-12 (48px)

--ft-space-16 (64px)

--ft-space-20 (80px)

Shadows

--ft-shadow-sm

--ft-shadow-card

--ft-shadow-md

--ft-shadow-lg

Border Radii

sm (4px)

md (8px)

lg (16px)

xl (24px)

full (pill)

Layout

Container (max-width: 1272px), responsive grid, flex utilities, card wrapper, and divider.

Grid (2-column)

Column 1

Column 2

Grid (3-column)

Column 1

Column 2

Column 3

Grid (4-column)

Col 1

Col 2

Col 3

Col 4

Card & Card Shadow

ft-card

Default card with border and padding.

ft-card ft-card--shadow

Shadow card variant with elevation.

Components

23 self-contained components in src/design-system/components/. Each uses only --ft-* tokens and .ft-* BEM classes.

Gradient Bar

components/gradient-bar.css

<div class="ft-gradient-bar"></div>

Header (Two-Part)

components/header.css

Dark blue utility bar (bg-pc1-800, 63px) + white main nav with logo, bold nav links, search icon, and Sign In pill button.

US - Individual Investor About Us Contact Us

<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="#">Link</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="/">...</a>
        <nav class="ft-header__nav">
          <a class="ft-header__nav-link" href="#">Link</a>
        </nav>
        <div class="ft-header__actions">
          <a class="ft-header__search" href="#">...</a>
          <a class="ft-header__signin" href="#">Sign In</a>
        </div>
      </div>
    </div>
  </div>
</header>

Hero Banner

components/hero-banner.css

Default (Navy)

Hero Banner Title

Subtitle or description text goes here.

Light variant

Light Hero Banner

For secondary pages with lighter styling.

<section class="ft-hero">
  <div class="ft-container">
    <h1 class="ft-hero__title">Page Title</h1>
    <p class="ft-hero__subtitle">Description text</p>
  </div>
</section>

<!-- Variants: ft-hero--primary, ft-hero--light -->

Fund Hero

components/fund-hero.css + gradient-bar.css

Light background with dark blue text (pc1-800), decorative gradient SVG behind right side, gradient bar at top. Sidebar card for Popular Documents.

Multi-Asset

FKIQX Franklin Income Fund

<section class="ft-fund-hero">
  <div class="ft-gradient-bar"></div>
  <div class="ft-fund-hero__body">
    <div class="ft-fund-hero__decor"><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">
            <select>...</select>
            <span class="ft-badge ft-badge--outline-dark">Multi-Asset</span>
          </div>
          <h1 class="ft-fund-hero__title">
            <span class="ft-fund-hero__ticker">FKIQX</span>
            <span class="ft-fund-hero__name">Franklin Income Fund</span>
          </h1>
          <ul class="ft-fund-hero__highlights">...</ul>
        </div>
        <div class="ft-fund-hero__sidebar">
          <div class="ft-fund-hero__card">...</div>
        </div>
      </div>
    </div>
  </div>
</section>

Sticky Nav (Pill Tabs)

components/sticky-nav.css

Light blue (bg-pc1-50) bar with pill-shaped navigation links. Active pill has bg-pc1-500 (blue) text-nc1-0 (white). Shows condensed fund title when sticky.

<nav class="ft-sticky-nav" id="sticky-nav">
  <div class="ft-sticky-nav__title">
    <div class="ft-container">
      <p>Fund Name - Class A - TICKER</p>
    </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="#section">Overview</a></li>
      <li><a class="ft-sticky-nav__pill" href="#section">Performance</a></li>
    </ul>
  </div>
</nav>

Curved Section

components/curved-section.css

Light blue (bg-pc1-50) background sections with large rounded corners (up to 8rem). Used behind stat cards, pricing charts, etc.

Section Title

Supporting text or links.

Content goes here on light blue curved background...

<section class="ft-curved-section">
  <div class="ft-container">
    <h2 class="ft-section-title">Pricing</h2>
    <p class="ft-section-meta">As of 01/31/2025</p>
    ...content...
  </div>
</section>

<!-- Variants -->
<section class="ft-curved-section ft-curved-section--alt">...</section>
<section class="ft-curved-section ft-curved-section--both">...</section>

Product Summary Bar

Page-specific (inline CSS)

Dark navy (bg-pc1-800) stats bar with curved top-right corner (5rem mobile, 7rem desktop). Sits between the hero and sticky nav. Extends to the left edge via a ::before pseudo-element. Used for key at-a-glance metrics.

NAV

$2.56

As of 02/04/2026

YTD Total Returns

3.72%

As of 02/04/2026

Total Net Assets

$77.25B

As of 12/31/2025

<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 class="product-summary__item">
        <div class="product-summary__label">Total Net Assets</div>
        <div class="product-summary__value">$77.25B</div>
        <div class="product-summary__date">As of 12/31/2025</div>
      </div>
    </div>
  </div>
</div>

<!-- Required page-specific CSS classes:
  .product-summary        - flex container, bg primary-800, curved top-right
  .product-summary__label - stat label (white, slightly transparent)
  .product-summary__value - stat value (bold, large)
  .product-summary__date  - date footnote (small, muted)
  .product-summary::before - extends dark bg to left viewport edge
-->

Button

components/button.css

Variants

Sizes

<button class="ft-btn ft-btn--primary">Primary</button>
<button class="ft-btn ft-btn--secondary">Secondary</button>
<button class="ft-btn ft-btn--ghost">Ghost</button>
<button class="ft-btn ft-btn--primary ft-btn--sm">Small</button>
<button class="ft-btn ft-btn--primary ft-btn--lg">Large</button>

Badge

components/badge.css

Default Primary Success Error Purple Outline

<span class="ft-badge">Default</span>
<span class="ft-badge ft-badge--primary">Primary</span>
<span class="ft-badge ft-badge--outline">Outline</span>

Breadcrumbs

components/breadcrumbs.css

<nav class="ft-breadcrumbs" aria-label="Breadcrumb">
  <ol class="ft-breadcrumbs__list">
    <li class="ft-breadcrumbs__item"><a href="#">Home</a></li>
    <li class="ft-breadcrumbs__item ft-breadcrumbs__item--active">Current</li>
  </ol>
</nav>

Tabs

components/tabs.css

Default (Rounded top)

Overview content area.

Performance content area.

Portfolio content area.

Underline variant

Underline tab content.

Second tab content.

Third tab content.

<div class="ft-tabs">
  <div class="ft-tabs__list" role="tablist">
    <button class="ft-tabs__tab ft-tabs__tab--active" data-tab="id1">Tab</button>
    <button class="ft-tabs__tab" data-tab="id2">Tab</button>
  </div>
  <div class="ft-tabs__border"></div>
  <div class="ft-tabs__panel ft-tabs__panel--active" data-panel="id1">...</div>
  <div class="ft-tabs__panel" data-panel="id2">...</div>
</div>

<!-- Underline variant: add ft-tabs--underline -->

Stat Card

components/stat-card.css

Bordered (default)

NAV $2.56 As of 01/31/2025

YTD Return +3.58% +$0.01 (0.39%)

Expense Ratio 0.71% Net

Shadow variant

Total Net Assets $77.25B

Distribution Rate 5.20%

30-Day SEC Yield 3.16%

Horizontal variant (fund facts)

Fund Inception 08/31/1948

Benchmark MSCI ACWI

CUSIP 35-227-101-7

<div class="ft-stat-card ft-stat-card--bordered">
  <span class="ft-stat-card__label">NAV</span>
  <span class="ft-stat-card__value">$2.56</span>
  <span class="ft-stat-card__meta">As of date</span>
</div>

<!-- Variants: --bordered, --shadow, --highlight, --horizontal -->
<!-- Value mods: --positive, --negative, --lg -->

Data Table

components/data-table.css

Striped variant

Metric	Fund	Benchmark
Alpha	5.87	—
Beta	0.68	1.00
Sharpe Ratio	0.32	-0.52
Std Deviation	10.36	11.54

Compact variant

Period	1 Yr	3 Yr	5 Yr	10 Yr
With Sales Charge	7.96%	7.84%	6.84%	7.06%
Without Sales Charge	12.18%	9.17%	7.64%	7.46%

<div class="ft-data-table ft-data-table--striped">
  <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">0.00</td>
    </tr></tbody>
  </table>
</div>

<!-- Variants: --striped, --compact, --card -->

Progress Bar

components/progress-bar.css

<div class="ft-progress">
  <div class="ft-progress__header">
    <span class="ft-progress__label">Fixed Income</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>

<!-- Color variants: ft-progress__fill--0 through --5 -->

Select

components/select.css

Share Class

Small

Inline:

<div class="ft-select">
  <label class="ft-select__label">Share Class</label>
  <div class="ft-select__wrapper">
    <select class="ft-select__input">
      <option>Class A</option>
    </select>
  </div>
</div>

<!-- Variants: --sm, --inline -->

Rating (Stars)

components/rating.css

★ ★ ★ ★ ★ 5 Stars

★ ★ ★ ★ ★ 3 Stars

<div class="ft-rating" aria-label="5 out of 5 stars">
  <span class="ft-rating__star ft-rating__star--filled">&#9733;</span>
  <span class="ft-rating__star ft-rating__star--filled">&#9733;</span>
  <span class="ft-rating__star ft-rating__star--filled">&#9733;</span>
  <span class="ft-rating__star ft-rating__star--filled">&#9733;</span>
  <span class="ft-rating__star ft-rating__star--filled">&#9733;</span>
  <span class="ft-rating__label">Morningstar Rating</span>
</div>

Accordion

components/accordion.css

What is the fund's investment objective? ▾

What are the main risks? ▾

What is the minimum investment? ▾

<div class="ft-accordion">
  <button class="ft-accordion__trigger" aria-expanded="false">
    <span class="ft-accordion__title">Question</span>
    <span class="ft-accordion__icon">&#9662;</span>
  </button>
  <div class="ft-accordion__content" hidden>
    <div class="ft-accordion__body">Answer</div>
  </div>
</div>

Manager Card

components/manager-card.css

Edward D. Perks, CFA

Managed Fund Since 2002

Brendan Circle, CFA

Managed Fund Since 2019

Todd Brighton, CFA

Managed Fund Since 2017

<div class="ft-manager">
  <img class="ft-manager__photo" src="photo.webp" alt="Name" />
  <div class="ft-manager__info">
    <h4 class="ft-manager__name">Edward D. Perks, CFA</h4>
    <p class="ft-manager__role">Managed Fund Since 2002</p>
  </div>
</div>

Document Link

components/document-link.css

ProspectusPDF · 1.2 MB Fact SheetPDF · 845 KB Annual ReportPDF · 3.1 MB

<a class="ft-doc-link" href="#">
  <span class="ft-doc-link__icon"><svg>...</svg></span>
  <span class="ft-doc-link__text">
    <span class="ft-doc-link__title">Prospectus</span>
    <span class="ft-doc-link__meta">PDF &middot; 1.2 MB</span>
  </span>
</a>

Icon

components/icon.css

Inline SVG icon sizing and color utilities. All icons use viewBox="0 0 24 24" and inherit stroke from currentColor.

Sizes

--xs (12)

--sm (16)

default (20)

--md (24)

--lg (32)

--xl (48)

--2xl (56)

Colors

--primary

--muted

--dark

--inherit

Icon Library

user

users

dollar

check-circle

building

grid

factory

home

flask

graduation

map-pin

globe

lock

mail

briefcase

<!-- Default size (20px), primary color -->
<svg class="ft-icon ft-icon--primary" viewBox="0 0 24 24">
  <circle cx="11" cy="11" r="8"/>
  <line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>

<!-- Large (32px), muted color -->
<svg class="ft-icon ft-icon--lg ft-icon--muted" viewBox="0 0 24 24">...</svg>

<!-- Sizes: --xs (12) | --sm (16) | default (20) | --md (24) | --lg (32) | --xl (48) | --2xl (56) -->
<!-- Colors: --primary | --muted | --dark | --inherit -->

Timeline

components/timeline.css

Vertical timeline for milestones, history, or events. Each item has a dot marker, year label, and description.

1947

Rupert H. Johnson, Sr. opens Franklin Distributors, Inc. in New York City, selling shares of Franklin Custodian Funds.

1973

Company renamed Franklin Resources, Inc. and listed on the New York Stock Exchange.

1992

Acquisition of Templeton, Galbraith & Hansberger creates a global investment powerhouse.

2020

Acquisition of Legg Mason brings together two industry leaders, expanding specialist investment manager capabilities.

2025

Franklin Templeton manages over $1.5 trillion in assets with a global footprint across 30+ countries.

<div class="ft-timeline">
  <div class="ft-timeline__item">
    <div class="ft-timeline__dot"></div>
    <div class="ft-timeline__year">1947</div>
    <div class="ft-timeline__text">Milestone description...</div>
  </div>
  <div class="ft-timeline__item">
    <div class="ft-timeline__dot"></div>
    <div class="ft-timeline__year">2025</div>
    <div class="ft-timeline__text">Another milestone...</div>
  </div>
</div>

Insight Card

components/insight-card.css

Category + Authors variant (Royce-style)

Market Perspective

Small-Cap Premier Quality Strategy: 4Q25 Update and Outlook

Lauren Romeo, Steven McBoyle

Investment Focus

Royce Small-Cap Total Return: 4Q25 Update

Miles Lewis, Joe Hintz

Market Perspective

The Royce Roundtable: Small-Caps Looking Strong in 2026

Chris Clark, Francis Gannon

Date + Description variant (Putnam-style)

January 8, 2026

US Equities in 2026: What could go right?

2025 is ending with a range of worries for the stock market. But it’s important to also recognize what could go right.

December 10, 2025

Earnings growth is key for sustained market gains

While market volatility and uncertainties are possible, we see encouraging trends for equities.

August 14, 2025

Venezuela: Oil and gas optionality is large

The pathway from reserves to reliable exports runs through governance, contracts, and sustained capital investment.

<div class="ft-insight-grid">
  <div class="ft-insight-card">
    <img class="ft-insight-card__img" src="..." alt="..." />
    <div class="ft-insight-card__body">
      <span class="ft-insight-card__category ft-insight-card__category--perspective">Category</span>
      <h3 class="ft-insight-card__title"><a href="#">Title</a></h3>
      <p class="ft-insight-card__authors">Author names</p>
    </div>
  </div>
</div>

<!-- Link variant with date + description -->
<div class="ft-insight-grid">
  <a class="ft-insight-card ft-insight-card--link" href="#">
    <img class="ft-insight-card__img" src="..." alt="..." />
    <div class="ft-insight-card__body">
      <p class="ft-insight-card__date">January 8, 2026</p>
      <h3 class="ft-insight-card__title">Title</h3>
      <p class="ft-insight-card__desc">Description text</p>
    </div>
  </a>
</div>

Disclaimer

components/disclaimer.css

All investments involve risks, including possible loss of principal. Past performance does not guarantee future results. The fund's share price and yield will be affected by interest rate movements.

<div class="ft-disclaimer ft-disclaimer--bordered">
  <p class="ft-disclaimer__text">Disclaimer text...</p>
</div>

Footer

components/footer.css

Design System Kitchen Sink

Color Palette

Primary Blue (pc1)

Neutral (nc1)

Purple (sc1)

Teal (sc2)

Magenta (sc3)

Red / Crimson (sc4)

Orange (sc5)

Semantic Colors

Chart Colors

Gradients

Typography

Font Sizes

Font Weights

Line Heights

Spacing, Shadows & Radii

Spacing Scale

Shadows

Border Radii

Layout

Grid (2-column)

Grid (3-column)

Grid (4-column)

Card & Card Shadow

Components

Gradient Bar

Header (Two-Part)

Hero Banner

Hero Banner Title

Light Hero Banner

Fund Hero

FKIQX Franklin Income Fund

Sticky Nav (Pill Tabs)

Curved Section

Section Title

Product Summary Bar

Button

Badge

Breadcrumbs

Tabs

Stat Card

Data Table

Progress Bar

Select

Rating (Stars)

Accordion

Manager Card

Edward D. Perks, CFA

Brendan Circle, CFA

Todd Brighton, CFA

Document Link

Icon

Timeline

Insight Card

Small-Cap Premier Quality Strategy: 4Q25 Update and Outlook

Royce Small-Cap Total Return: 4Q25 Update

The Royce Roundtable: Small-Caps Looking Strong in 2026

US Equities in 2026: What could go right?

Earnings growth is key for sustained market gains

Venezuela: Oil and gas optionality is large

Disclaimer

Footer