Branding Colors Updgrade #269
Description
Blog Design System Integration - Josh Comeau Inspired
📋 Overview
Implement a modern, professional blog design system inspired by Josh W. Comeau's blog, integrating our brand colors and improving readability across all blog posts.
Documentation: Complete specification available in attached files
Estimated Time: 8-10 hours (full) or 2-3 hours (minimal viable)
Priority: High - Enhances professional portfolio presentation
🎯 Objectives
- Improve blog post readability (18px font, optimal line length)
- Integrate brand color palette throughout blog design
- Create reusable Astro components for blog posts
- Enhance code blocks with syntax highlighting
- Add professional polish (callouts, TOC, social sharing)
- Maintain existing functionality (view counter, analytics, SEO)
🎨 Brand Colors Integration
Update blog design to use our existing brand palette:
// From tailwind.config.cjs
brand: {
primary: "#122033", // Charcoal Navy - headings, body text
leaf: "#5CB85C", // Friendly Leaf Green - success, Vue tags
cyan: "#4BE3DF", // Soft Electric Cyan - links, interactive elements
silver: "#E6E9EC", // Gentle Silver - borders, structure
coral: "#FF6F61", // Warm Coral - CTAs, buttons, accents
}🏗️ Implementation Plan
Phase 1: Setup (30 minutes)
Update tailwind.config.cjs
Add design tokens to theme.extend:
fontSize: {
'blog-xs': '0.75rem',
'blog-sm': '0.875rem',
'blog-base': '1.125rem', // 18px - body text
'blog-lg': '1.25rem',
'blog-xl': '1.5rem',
'blog-2xl': '2rem', // 32px - h2
'blog-4xl': '3rem', // 48px - h1
},
lineHeight: {
'blog-tight': '1.25',
'blog-normal': '1.7',
'blog-relaxed': '1.8',
},
spacing: {
'blog-xs': '0.5rem',
'blog-sm': '1rem',
'blog-md': '1.5rem',
'blog-lg': '2.5rem',
'blog-xl': '4rem',
'blog-2xl': '6rem',
},
maxWidth: {
'blog-content': '720px',
'blog-wide': '1200px',
},
fontFamily: {
heading: ['Plus Jakarta Sans', 'Inter', 'sans-serif'],
body: ['Inter', 'system-ui', 'sans-serif'],
mono: ['Fira Code', 'Monaco', 'Courier New', 'monospace'],
},Add Google Fonts to src/layouts/Layout.astro
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@700;800&display=swap" rel="stylesheet">Create component directory
mkdir -p src/components/blogPhase 2: Create Components (2-3 hours)
Create the following components in src/components/blog/:
1. BlogHero.astro
Post header with title, metadata, and tags
2. BlogContent.astro
Content wrapper with typography styling
3. BlogFooter.astro
Author bio and social sharing
4. Callout.astro
Info/warning/success boxes for MDX
5. TableOfContents.astro
Auto-generated TOC from headings
See PORTFOLIO-BLOG-INTEGRATION.md lines 151-400 for complete component code.
Phase 3: Update Layout (1 hour)
Create/Update src/layouts/BlogPostLayout.astro
Import and use new blog components:
- BlogHero
- TableOfContents
- BlogContent wrapper
- BlogFooter
Update src/pages/blog/[...slug].astro
Use new BlogPostLayout and pass headings prop.
See PORTFOLIO-BLOG-INTEGRATION.md lines 550-600 for complete code.
Phase 4: Update Global Styles (1 hour)
Add to src/styles/global.css
Blog-specific utilities:
- Tag variations (default, vue, featured, etc.)
- Typography classes (.prose-blog)
- Heading styles (h2, h3, h4)
- Link styles with hover effects
- Code block styling
- List styling
- Blockquote styling
See PORTFOLIO-BLOG-INTEGRATION.md lines 600-700 for complete CSS.
Phase 5: Testing (1 hour)
Visual Testing
- Desktop (1920px, 1440px, 1024px)
- Tablet (768px)
- Mobile (375px, 414px)
- Font sizes correct (18px base)
- Colors applied correctly
- Spacing is generous (64px sections)
Functionality Testing
- TOC links work
- Share buttons work
- View counter works
- Reading time displays
- Code blocks render
Accessibility Testing
- WCAG AA contrast (14.5:1)
- Keyboard navigation
- Focus indicators
- Screen reader compatible
Phase 6: Content Migration (30 min per post)
Update existing MDX posts to use new components:
import Callout from '../../components/blog/Callout.astro';
<Callout type="info" title="💡 Quick Note">
Your content here
</Callout>✅ Acceptance Criteria
Design Quality
- Typography: 18px base, 1.7 line-height
- Colors: Brand palette throughout
- Spacing: 64px between sections
- Max-width: 720px for content
- Code blocks: Syntax highlighted
- Links: Proper hover states
Functionality
- View counter works
- Analytics works
- SEO maintained
- Share buttons work
- TOC generates
- Mobile responsive
Code Quality
- No TypeScript errors
- Build succeeds
- Components reusable
- Follows code style
Performance
- Lighthouse > 90
- Fonts optimized
- No layout shift
📚 Complete Documentation
Full specification available in:
Main Document: PORTFOLIO-BLOG-INTEGRATION.md (923 lines)
- Complete component code
- Step-by-step instructions
- Tailwind config updates
- Testing guide
Quick Start: QUICK-START.md
- 5-minute overview
- Implementation options
- Common issues
Color Guide: BRAND-COLORS-GUIDE.md
- Color usage guide
- Accessibility notes
- Component applications
Index: INDEX.md
- Package navigation
- File summary
🚀 Implementation Options
Option 1: Full (8-10 hours) ⭐ Recommended
Complete professional redesign with all components
Option 2: Minimal (2-3 hours)
Core components only, 80% visual improvement
Option 3: CSS-Only (1 hour)
Typography and color updates only
🎯 Success Metrics
- ✅ Increased time on page
- ✅ Lower bounce rate
- ✅ More social shares
- ✅ Better SEO rankings
- ✅ Professional portfolio presentation
📂 Files to Create/Modify
New Files
src/components/blog/
├── BlogHero.astro
├── BlogContent.astro
├── BlogFooter.astro
├── Callout.astro
└── TableOfContents.astro
Modified Files
tailwind.config.cjs
src/styles/global.css
src/layouts/Layout.astro (add fonts)
src/layouts/BlogPostLayout.astro
src/pages/blog/[...slug].astro
🔗 References
- Design Inspiration: https://joshwcomeau.com/
- Repository: https://github.com/Nerajno/portfolio_v3
- Live Site: https://developingdvlpr.com
- Documentation Package: See attached files
💡 Notes
- Maintain all existing integrations (Supabase, Clarity, Netlify)
- Typography changes only affect blog posts
- Brand colors already in config, just need application
- Follow "progress over perfection" philosophy