Ten Talents — Website

The real Ten Talents site: a community and financial-education business. MVP pages (built per the approved Rebrand Architecture, Sep 2026): index · about · education · community · contact · legal — all Class A (education/community) content; no broker mentions, no invented numbers.

The original fictional "Ten Talents Bank" demonstration site is preserved, clearly labelled, under /prototype/ — it remains the design-system reference and records the brand's visual origin. Nothing was deleted.

Design (Heritage, Oct 2026)

The ten live pages use assets/css/heritage.css: midnight navy, ivory and antique gold; Cormorant Garamond headings with Inter text; hairline rules, small-caps labels and slow fades. The engraved line art in assets/img/heritage/ is generated by python3 assets/img/heritage/_generate.py. A framed .plate holds artwork today; swap its <img> for a photograph (class="photo") when one is available. assets/css/styles.css stays for the /prototype/ pages only.

Academy (/academy/)

The structured-learning app: legal gate, onboarding questionnaire, the four education tracks as lessons with quizzes (70% pass, module locking, best score kept), glossary, certificates, and a membership paywall. Money Foundations is Track 1, matching education.html. Single file, no build step; progress lives in the browser. It is a prototype: no accounts, no payments (the membership buttons unlock content locally), two written lessons and one quiz so far.

The academy uses the site palette and the hand-and-coin mark, but sets type in Libre Caslon Display / Source Sans 3 rather than the site's Playfair / Inter. Whether the site moves to the Caslon set is a separate decision.

---

The Ten Talents Bank — Website (design prototype, now in /prototype/)

A multi-page marketing site for a fictional private investment bank. Dark, gold-accented luxury aesthetic with elegant, performant animations.

Open it

No build step, no dependencies. Just open index.html in any browser. (For Google Fonts and the demo imagery to load, an internet connection is needed; everything else works fully offline.)

open index.html        # macOS

Pages

File	Purpose
index.html	Home — hero, parable, solutions, approach, stats, insights, testimonial, CTA
solutions.html	The six service lines and who they're for
about.html	Brand story (Parable of the Talents), principles, leadership
insights.html	Article grid + featured piece + newsletter sign-up
contact.html	Enquiry form + office details
portal.html	Client-login teaser + illustrative dashboard preview

Brand voice & assets

• Taglines — "The bank for the future" (hero) · "Investment made easy" (eyebrow/sub-line)
• Tone — warm, human, accessible: wealth-building for everyday people, families and founders (premium look, friendly voice)
• Logo — your real artwork is used site-wide (your supplied files, background color-keyed to transparent):
  • assets/img/logo-hand-gold.png — your hand-and-coin (£€$) primary mark, recoloured to brand gold → used in every header/footer and as the favicon
  • assets/img/logo-ttb-real.png — your TTB coin-stack mark (transparent), alternate
  • assets/img/logo-ttb-full.png — full TTB lockup incl. "TTB" wordmark (transparent)
  • Source: (THE) TEN TALENTS BANK.PNG (cream original) + TTB.docx. SVG files are earlier recreations kept only as fallbacks.
  • The original cream hand-logo uses dark slate line art; for the dark site it's recoloured to gold. For a light section, use the original PNG as-is.

Structure

tentalents-bank/
├── index.html  solutions.html  about.html  insights.html  contact.html
└── assets/
    ├── css/styles.css   # full design system (tokens, components, responsive)
    └── js/main.js       # nav, scroll reveal, counters, parallax, forms

Design system

• Palette — #011936 navy · #2E2E3A charcoal · #4C5B61 slate · #EFEBCE ivory · #EDB671 gold
• Type — Playfair Display (headlines) · Inter (body)
• Tagline — Investment made easy
• Founding principle — the Parable of the Talents

Animations (all GPU-friendly + accessible)

• Scroll-reveal via IntersectionObserver (transform/opacity only)
• Animated stat counters
• Pointer parallax on hero orbs (fine-pointer devices only)
• Sticky header transition + scroll progress bar
• Respects prefers-reduced-motion — all motion disables for users who opt out

Notes for going live

• Replace Unsplash demo images with licensed brand photography (use srcset/WebP).
• Wire the two forms (data-demo) to a real backend or service (Formspree, etc.).
• Swap the placeholder SVG mark for the final logo asset.
• Update phone/email/addresses and the regulatory/legal footer text.
• Add a real favicon set and Open Graph/social share images.