Here's a style guide for the website, focusing on typography, color scheme, and overall style: Typography: Primary Font (for headings and emphasis): Font: Montserrat Weights: 600 (semi-bold) for main headings, 500 (medium) for subheadings Sizes: H1: 36px H2: 28px H3: 24px H4: 20px Secondary Font (for body text): Font: Open Sans Weight: 400 (regular) Size: 16px for body text, 14px for smaller elements Color Scheme: Primary Colors: Deep Blue: #1A3A6E (for headers, important buttons) Gold: #FFCC00 (for accents, highlights) Deep Blue Gold Light Blue Charcoal Gray Secondary Colors: Light Blue: #E6F3FF (for backgrounds, cards) Charcoal Gray: #333333 (for main text) Accent Colors: Green: #00A86B (for success messages, positive indicators) Red: #D64045 (for warnings, error messages) Neutral Colors: White: #FFFFFF (for backgrounds) Light Gray: #F5F5F5 (for alternate backgrounds) Medium Gray: #CCCCCC (for borders, dividers) Deep Blue Gold Light Blue Charcoal Gray Styles: Buttons: Primary: Deep Blue background, white text, slight rounded corners (4px radius) Secondary: White background, Deep Blue border and text Hover effect: 10% darker shade of the button color Cards: White background Light shadow (0px 4px 6px rgba(0, 0, 0, 0.1)) Rounded corners (8px radius) Forms: Input fields: Light gray background, dark gray text Labels: Charcoal gray, Open Sans font Focus state: Gold outline Navigation: Transparent background Deep Blue text for menu items Gold underline for active/hover states Course Listings: Grid layout with cards Course thumbnail, title (Montserrat), brief description (Open Sans) Progress bar in Green for enrolled courses Icons: Use a consistent icon set (e.g., Font Awesome) Color: Deep Blue or Gold depending on importance Tables: Alternating row colors: White and Light Blue Header: Deep Blue background, white text Borders: Medium Gray Testimonials: Italicized quote text Gold quotation marks Circular avatar for testimonial author Call-to-Action Sections: Deep Blue background White text Gold accents for important elements Footer: Dark background (Charcoal Gray) Light text (White or Light Gray) Gold accents for links and social media icons This style guide provides a professional and trustworthy look that's appropriate for a financial training website. The deep blue conveys stability and professionalism, while the gold adds a touch of prestige. The clean typography and consistent use of colors and styles will ensure a cohesive and user-friendly experience across the site.
