Blog Proposal & Documentation

Complete documentation of "Raw Thoughts" blog elements, design system, and technical architecture.

🎯 Concept & Vision

Brand Identity

  • Site Title: "Raw Thoughts"
  • Tagline: "My personal digital archive"
  • Author: Kazunari Okamoto
  • Purpose: Personal blog for sharing honest thoughts and ideas

Content Strategy

  • Blog: Personal reflections and general topics
  • Tech: Technology reviews and technical content
  • Journal: Daily thoughts and personal diary entries

🎨 Design System & Color Scheme

Typography

  • Primary Font: Atkinson (custom web font)
  • Fallback: sans-serif
  • Weights: 400 (regular), 700 (bold)

Color Palette

Primary Dark: #1F2937 (gray-900)
Primary Light: #FFFFFF (white)
Secondary: #D1D5DB (gray-300)
Accent: #2563EB (blue-600)
Custom: #d8dee9 (progWhite)

🧭 Navigation Structure

Primary Navigation

Blog
/blog
Tech
/tech
Journal
/journal
About
/about

URL Structure

  • / - Homepage with recent posts from all collections
  • /blog - Blog post listing page
  • /blog/[slug] - Individual blog posts
  • /tech - Tech content listing page
  • /tech/[slug] - Individual tech posts
  • /journal - Journal entries listing page
  • /journal/[slug] - Individual journal entries
  • /about - About page
  • /proposal - This documentation page

📐 Layout Wireframes

Homepage Layout

Header: Site Title + Navigation (blog, tech, journal, about)
Hero Section:
Kazunari Okamoto
Personal blog tagline
Recent Posts Section:
Post 1 - Title + Date
Post 2 - Title + Date
Post 3 - Title + Date

Content Collection Pages

Header: Site Title + Navigation
Collection Title: Blog / Tech / Journal
Post Listings:
Post Title
Publication Date
Post description or excerpt

Individual Post Layout

Header: Site Title + Navigation
Post Title
Publication Date

Post content with full prose styling...

Support for images, code blocks, quotes, etc.

⚙️ Technical Architecture

Framework & Build

  • Framework: Astro
  • Styling: Tailwind CSS
  • Content: Astro Content Collections
  • File Format: Markdown/MDX

Content Management

  • Collections: blog, tech, journal
  • Schema Validation: Zod with type safety
  • Frontmatter: title, description, pubDate, heroImage
  • Dynamic Routing: [...slug].astro patterns

📋 Content Schema

Post Frontmatter Structure

---
title: string (required)
description: string (required)
pubDate: date (required)
updatedDate: date (optional)
heroImage: image (optional)
---

Available Collections

  • blog: Personal thoughts and general topics
  • tech: Technology reviews and technical content
  • journal: Daily reflections and personal entries

🚀 Features & Functionality

Current Features

  • ✅ Responsive design
  • ✅ Dark header with light content
  • ✅ Multiple content collections
  • ✅ Type-safe content schema
  • ✅ RSS feed generation
  • ✅ Automatic sitemap
  • ✅ Custom typography
  • ✅ Code syntax highlighting

Content Types Support

  • ✅ Markdown formatting
  • ✅ MDX components
  • ✅ Image optimization
  • ✅ Code blocks with highlighting
  • ✅ Blockquotes
  • ✅ Tables
  • ✅ Typography utilities

📍 Verification Link

Direct access to this proposal page:

carznari.com/proposal

This page contains all the requested documentation including concept, color scheme, navigation diagram, and layout wireframes for the "Raw Thoughts" blog prototype.