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 faviconassets/img/logo-ttb-real.png — your TTB coin-stack mark (transparent), alternateassets/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.
