From 6fb6f68998666a0b7a9f93b920a132677cddc5d0 Mon Sep 17 00:00:00 2001 From: Danny Date: Tue, 13 Jan 2026 08:23:36 -0600 Subject: [PATCH] feat: rebrand to Woolnoth with new color palette and typography Replace Tyndale AI branding with Woolnoth identity including: - New brand colors: Deep Navy (#24293e), Soft Light Grey (#f4f4f6), Cool Slate Blue (#5c6f91), and Burnt Coral Red (#e94f37) - Updated typography from Montserrat/Outfit to Inter/Plus Jakarta Sans - Add reusable Logo component for consistent branding - Update favicon and page title - Apply new color scheme across all components (chat, landing, pages) - Update CSS variables and Tailwind config for brand consistency Co-Authored-By: Claude Opus 4.5 --- index.html | 8 +- public/favicon.svg | 7 ++ src/components/chat/ChatInput.tsx | 10 +- src/components/chat/ChatMessage.tsx | 10 +- src/components/chat/ModeToggle.tsx | 12 +-- src/components/chat/TradingBackground.tsx | 10 +- src/components/chat/TyndaleBot.tsx | 23 ++--- src/components/landing/LandingFeatures.tsx | 10 +- src/components/landing/LandingFooter.tsx | 10 +- src/components/landing/LandingHero.tsx | 8 +- src/components/landing/LandingNavigation.tsx | 11 +- src/components/ui/Logo.tsx | 100 +++++++++++++++++++ src/index.css | 64 ++++++------ src/pages/ChatPage.tsx | 2 +- src/pages/TyndalePage.tsx | 12 +-- tailwind.config.ts | 19 ++-- 16 files changed, 214 insertions(+), 102 deletions(-) create mode 100644 public/favicon.svg create mode 100644 src/components/ui/Logo.tsx diff --git a/index.html b/index.html index c9405dc..debad52 100644 --- a/index.html +++ b/index.html @@ -2,14 +2,14 @@ - + - Tyndale AI - Algorithmic Trading Intelligence + Woolnoth - Algorithmic Trading Intelligence - + - +
diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..0fce7d0 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx index 0979521..add9017 100644 --- a/src/components/chat/ChatInput.tsx +++ b/src/components/chat/ChatInput.tsx @@ -30,13 +30,13 @@ const ChatInput = ({ onSend, disabled, mode, placeholder = 'Ask a question...' } } const modeFocusColors = { - general: 'focus-visible:ring-blue-500', - strategy: 'focus-visible:ring-purple-500', + general: 'focus-visible:ring-brand-slate', + strategy: 'focus-visible:ring-brand-coral', } const modeButtonColors = { - general: 'bg-blue-500 hover:bg-blue-600', - strategy: 'bg-purple-500 hover:bg-purple-600', + general: 'bg-brand-slate hover:bg-brand-slate/80', + strategy: 'bg-brand-coral hover:bg-brand-coral/80', } return ( @@ -48,7 +48,7 @@ const ChatInput = ({ onSend, disabled, mode, placeholder = 'Ask a question...' } placeholder={placeholder} disabled={disabled} className={cn( - 'flex-1 bg-slate-700 border-slate-600 text-white placeholder:text-slate-400', + 'flex-1 bg-brand-navy/50 border-brand-slate/30 text-white placeholder:text-brand-grey/50', modeFocusColors[mode] )} /> diff --git a/src/components/chat/ChatMessage.tsx b/src/components/chat/ChatMessage.tsx index 818b5a6..fbef44e 100644 --- a/src/components/chat/ChatMessage.tsx +++ b/src/components/chat/ChatMessage.tsx @@ -14,11 +14,11 @@ const ChatMessage = ({ message, mode }: ChatMessageProps) => { const modeColors = { general: { - userBg: 'bg-blue-600 border-blue-500/30', + userBg: 'bg-brand-slate border-brand-slate/30', userText: 'text-white', }, strategy: { - userBg: 'bg-purple-600 border-purple-500/30', + userBg: 'bg-brand-coral border-brand-coral/30', userText: 'text-white', }, } @@ -28,7 +28,7 @@ const ChatMessage = ({ message, mode }: ChatMessageProps) => { return (
{!isUser && ( -
+
)} @@ -38,7 +38,7 @@ const ChatMessage = ({ message, mode }: ChatMessageProps) => { 'max-w-[80%] rounded-2xl px-4 py-3 border', isUser ? `${colors.userBg} ${colors.userText}` - : 'bg-slate-700 text-white border-slate-600' + : 'bg-brand-navy/50 text-white border-brand-slate/30' )} > {isUser ? ( @@ -53,7 +53,7 @@ const ChatMessage = ({ message, mode }: ChatMessageProps) => {
{isUser && ( -
+
)} diff --git a/src/components/chat/ModeToggle.tsx b/src/components/chat/ModeToggle.tsx index 8ce26b0..ef432aa 100644 --- a/src/components/chat/ModeToggle.tsx +++ b/src/components/chat/ModeToggle.tsx @@ -23,15 +23,15 @@ const ModeToggle = ({ mode, onToggle, disabled }: ModeToggleProps) => { const modeConfig = { general: { label: 'General Assistant', - bg: 'bg-blue-500/20 border-blue-500/40', - text: 'text-blue-400', - hover: 'hover:bg-blue-500/30', + bg: 'bg-brand-slate/20 border-brand-slate/40', + text: 'text-brand-grey', + hover: 'hover:bg-brand-slate/30', }, strategy: { label: 'Strategy Analysis', - bg: 'bg-purple-500/20 border-purple-500/40', - text: 'text-purple-400', - hover: 'hover:bg-purple-500/30', + bg: 'bg-brand-coral/20 border-brand-coral/40', + text: 'text-brand-coral', + hover: 'hover:bg-brand-coral/30', }, } diff --git a/src/components/chat/TradingBackground.tsx b/src/components/chat/TradingBackground.tsx index 26815bc..9c8421c 100644 --- a/src/components/chat/TradingBackground.tsx +++ b/src/components/chat/TradingBackground.tsx @@ -102,7 +102,7 @@ const TradingBackground = () => { { { { {/* Floating gradient orbs */} -
-
+
+
) } diff --git a/src/components/chat/TyndaleBot.tsx b/src/components/chat/TyndaleBot.tsx index 28c39ed..1bea11e 100644 --- a/src/components/chat/TyndaleBot.tsx +++ b/src/components/chat/TyndaleBot.tsx @@ -9,6 +9,7 @@ import { ScrollArea } from '@/components/ui/scroll-area' import { cn } from '@/lib/utils' import { Link } from 'react-router-dom' import { ArrowLeft } from 'lucide-react' +import Logo from '@/components/ui/Logo' const TyndaleBot = () => { const [mode, setMode] = useState('general') @@ -43,16 +44,14 @@ const TyndaleBot = () => { return (
-
+
{/* Header */} -
+
- + -

- Woolnoth, LLC -

+
@@ -66,7 +65,7 @@ const TyndaleBot = () => {

{mode === 'general' ? 'General Trading Assistant' : 'Strategy Analysis'}

-

+

{mode === 'general' ? 'Ask me anything about trading concepts, market conditions, or terminology.' : 'Let\'s analyze your algorithmic strategies, backtest results, and risk metrics.'} @@ -82,26 +81,26 @@ const TyndaleBot = () => { {/* Loading indicator */} {isLoading && (

-
+
@@ -113,7 +112,7 @@ const TyndaleBot = () => { {/* Input */} -
+
{ return ( -
+
-

+

Powerful Features

-

+

Everything you need to make informed trading decisions with AI assistance

@@ -40,11 +40,11 @@ const LandingFeatures = () => { style={{animationDelay: `${index * 0.1}s`}} > -
+
{feature.title} - + {feature.description} diff --git a/src/components/landing/LandingFooter.tsx b/src/components/landing/LandingFooter.tsx index 030292e..987269f 100644 --- a/src/components/landing/LandingFooter.tsx +++ b/src/components/landing/LandingFooter.tsx @@ -1,12 +1,12 @@ +import Logo from '@/components/ui/Logo' + const LandingFooter = () => { return ( -