Build a modern, vibrant landing page for Alex Carter Studio, a portfolio website
for Alex Carter, a freelance creative specializing in graphic design, photography,
and writing. The target audience includes clients seeking bold, professional
creative services. The message should emphasize creativity and professionalism
through a lively aesthetic and clean, structured layout—without using images. Use a
split-screen design, relying on typography, color, and interactive elements to
convey the brand’s identity.
🎨 Color Palette
Left Background: Soft Cream #FFF5E1 (or a subtle gradient: #FFF5E1 to #F8E8D5)
Right Background: Deep Teal #1A3C34
Text (Dark Section): Soft Cream #FFF5E1
Text (Light Section): Deep Teal #1A3C34
CTA Button: Bright Coral #FF6F61 (text: #FFFFFF)
Accent: Sunny Yellow #FFC107 (for hover effects or subtle highlights)
📐 Design Principles
Layout:
Split-Screen: Left side for introductory messaging; right side for navigation, CTA,
and footer links.
CTA Placement: Fixed "View My Work" button at the top-right of the dark section.
Alignment: Vertically center content on both sides with balanced whitespace.
Divider: Add a subtle vertical line (e.g., #D3C8A5, 1px) between sections for
clarity.
Typography:
Headline: Serif font (e.g., Playfair Display), bold, large (text-5xl or text-6xl).
Body Text: Sans-serif font (e.g., Poppins), regular weight (text-base), line height
leading-relaxed.
Spacing: Apply tracking-wide for a creative, open feel.
Spacing:
Padding: px-6 to px-10, py-12 per section.
Margins: mt-6 between elements, gap-6 for navigation links.
Footer: Use space-y-2 for vertical spacing.
🧩 UI Details
Left Side (Intro Section):
Background: Soft Cream #FFF5E1 or a gradient for depth.
Headline: “Creativity That Speaks” (italicize "Speaks" for emphasis).
Body Text:
“I’m Alex Carter, a freelance creative specializing in graphic design, photography,
and writing. My work blends bold ideas with professional execution to bring your
vision to life.”
Accent: Optionally, add a stylized text element (e.g., “Bold. Unique. Yours.”) in
Sunny Yellow #FFC107 below the body text.
Right Side (Navigation & CTA):
Background: Deep Teal #1A3C34.
Navigation: Top-left corner, horizontal links: “WORK”, “ABOUT”, “BLOG” (all caps,
Poppins, text-sm, tracking-wider).
Hover effect: Links turn Sunny Yellow #FFC107 with a transition-all duration-300.
CTA Button: Fixed top-right, Bright Coral #FF6F61, text “View My Work” (px-4 py-2,
rounded-md).
Hover effect: Darken to #E65A50 with a slight scale increase (hover:scale-105).
Tagline: Below navigation, “Ready to create something extraordinary?” (Playfair
Display, text-xl).
Subtext: “Let’s collaborate to craft compelling visual stories.” (Poppins, text-
base).
Footer: Bottom-right, vertical stack:
text
Collapse
Wrap
Copy
Email
LinkedIn
Instagram
Dribbble
©2025 Alex Carter Studio • All Rights Reserved
Text in Soft Cream #FFF5E1, text-sm.
Accessibility & UX:
Contrast: Ensure text meets WCAG AA standards (e.g., #1A3C34 on #FFF5E1 has a 9.5:1
ratio).
Structure: Use semantic HTML (e.g., <header>, <nav>, <main>, <footer>).
Interactivity: Smooth scrolling for navigation; subtle transitions for hover
effects.
Responsiveness: Test across devices, stacking sections vertically on mobile with
adjusted font sizes.
