howdy-jekyll-theme 1.0.0

data/_layouts/post.html

@@ -0,0 +1,76 @@
+---
+layout: default
+---
+
+<section class="two-column">
+  <div class="left-section">
+    <div class="left-container">
+      <div class="image-wrapper">
+        <div class="hero-content">
+          {% include hero-carousel.html %}
+          <div class="logo-overlay">{% include logo.html %}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="right-section">
+    <div class="content-wrapper">
+      {% include navigation.html %}
+      <div class="content-area">
+        {% if page.category or page.date %}
+          <div class="detail-meta">
+            {% if page.category %}
+              <span class="post-category category-{{ page.category | downcase }}">{{ page.category }}</span>
+            {% endif %}
+            {% if page.date %}
+              <span class="detail-date">{{ page.date | date: "%b %d, %Y" }}</span>
+            {% endif %}
+            {% if site.reading_time %}
+              {% assign words = content | number_of_words %}
+              {% assign read_time = words | divided_by: 200 | at_least: 1 %}
+              <span class="detail-read-time">{{ read_time }} min read</span>
+            {% endif %}
+          </div>
+        {% endif %}
+
+        <h1>{{ page.title }}</h1>
+
+        {% if site.table_of_contents.enabled and page.table_of_contents != false %}
+          {% include toc.html content=content min_heading=site.table_of_contents.min_heading max_heading=site.table_of_contents.max_heading %}
+        {% endif %}
+
+        <div class="detail-content">
+          {{ content }}
+        </div>
+
+        {% include share-buttons.html %}
+
+        <!-- Post navigation -->
+        {% if page.previous.url or page.next.url %}
+          <div class="detail-nav detail-nav-post">
+            {% if page.previous.url %}
+              <a href="{{ page.previous.url | relative_url }}" class="btn btn-secondary">
+                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" class="btn-arrow">
+                  <path d="M9 3L4 8L9 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span class="btn-label">{{ page.previous.title }}</span>
+              </a>
+            {% endif %}
+            {% if page.next.url %}
+              <a href="{{ page.next.url | relative_url }}" class="btn btn-secondary post-nav-next">
+                <span class="btn-label">{{ page.next.title }}</span>
+                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" class="btn-arrow">
+                  <path d="M7 3L12 8L7 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </a>
+            {% endif %}
+          </div>
+        {% endif %}
+
+        {% include newsletter.html %}
+        {% include comments.html %}
+      </div>
+    </div>
+  </div>
+</section>

data/_layouts/project.html

@@ -0,0 +1,61 @@
+---
+layout: default
+---
+
+<section class="two-column">
+  <div class="left-section">
+    <div class="left-container">
+      <div class="image-wrapper">
+        <div class="hero-content">
+          {% include hero-carousel.html %}
+          <div class="logo-overlay">{% include logo.html %}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="right-section">
+    <div class="content-wrapper">
+      {% include navigation.html %}
+      <div class="content-area">
+        {% if page.category or page.year %}
+          <div class="detail-meta">
+            {% if page.category %}
+              <span class="project-category">{{ page.category }}</span>
+            {% endif %}
+            {% if page.year %}
+              <span class="detail-year">{{ page.year }}</span>
+            {% endif %}
+          </div>
+        {% endif %}
+
+        <h1>{{ page.title }}</h1>
+
+        {% if page.subtitle %}
+          <p class="body-large detail-subtitle">{{ page.subtitle }}</p>
+        {% endif %}
+
+        <div class="detail-content">
+          {{ content }}
+        </div>
+
+          <div class="detail-nav detail-nav-project">
+            <a href="{{ '/projects' | relative_url }}" class="btn btn-secondary">
+              <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" class="btn-arrow">
+                <path d="M9 3L4 8L9 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Back to Projects
+            </a>
+            {% if page.next %}
+            <a href="{{ page.next.url | relative_url }}" class="btn btn-secondary project-nav-next">
+              <span class="btn-label">{{ page.next.title }}</span>
+              <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" class="btn-arrow">
+                <path d="M7 3L12 8L7 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </a>
+            {% endif %}
+          </div>
+      </div>
+    </div>
+  </div>
+</section>

data/_plugins/sort_projects.rb

@@ -0,0 +1,6 @@
+Jekyll::Hooks.register :site, :post_read do |site|
+  projects = site.collections['projects']
+  if projects.metadata['sort_reverse']
+    projects.docs.reverse!
+  end
+end

data/_plugins/user_colors.rb

@@ -0,0 +1,68 @@
+# Generates _sass/_user-colors.scss from site.colors config
+# This allows users to override theme colors via _config.yml
+
+Jekyll::Hooks.register :site, :after_init do |site|
+  colors = site.config["colors"] || {}
+  colors = {} unless colors.is_a?(Hash)
+  dark = colors["dark"] || {}
+  dark = {} unless dark.is_a?(Hash)
+
+  # Map config keys to CSS variable names
+  var_map = {
+    "text_primary" => "--howdy-text-primary",
+    "text_secondary" => "--howdy-text-secondary",
+    "text_muted" => "--howdy-text-muted",
+    "text_red" => "--howdy-text-red",
+    "bg_light_gray" => "--howdy-bg-light-gray",
+    "bg_white" => "--howdy-bg-white",
+    "bg_dark_gray" => "--howdy-bg-dark-gray",
+    "bg_cream" => "--howdy-bg-cream",
+    "bg_semi_white" => "--howdy-bg-semi-white",
+    "bg_green_tint" => "--howdy-bg-green-tint",
+    "bg_red_tint" => "--howdy-bg-red-tint",
+    "bg_orange_tint" => "--howdy-bg-orange-tint",
+    "bg_blue_tint" => "--howdy-bg-blue-tint",
+    "bg_purple_tint" => "--howdy-bg-purple-tint",
+    "accent_green" => "--howdy-accent-green",
+    "accent_orange" => "--howdy-accent-orange",
+    "accent_blue" => "--howdy-accent-blue",
+    "accent_purple" => "--howdy-accent-purple",
+    "border" => "--howdy-border",
+  }
+
+  sass_dir = File.join(site.source, "_sass")
+  output_path = File.join(sass_dir, "_user-colors.scss")
+
+  lines = ["// Auto-generated from site.colors in _config.yml — do not edit"]
+
+  # Light mode overrides (grouped into single :root block)
+  light_props = []
+  var_map.each do |key, var|
+    val = colors[key]
+    light_props << "  #{var}: #{val};" if val
+  end
+
+  if light_props.any?
+    lines << ""
+    lines << ":root {"
+    lines.concat(light_props)
+    lines << "}"
+  end
+
+  # Dark mode overrides (grouped into single html.dark-mode block)
+  dark_props = []
+  var_map.each do |key, var|
+    val = dark[key]
+    dark_props << "  #{var}: #{val};" if val
+  end
+
+  if dark_props.any?
+    lines << ""
+    lines << "html.dark-mode, html.dark-mode body, html.dark-mode .main-container {"
+    lines.concat(dark_props)
+    lines << "}"
+  end
+
+  lines << ""
+  File.write(output_path, lines.join("\n"))
+end

data/_posts/2026-01-01-beyond-pixels.md

@@ -0,0 +1,21 @@
+---
+layout: post
+title: "Beyond Pixels: Thinking in Systems"
+date: 2026-01-01
+category: "Inspiration"
+image: /assets/illustrations/presentation.svg
+---
+
+The best product designers I know don't think in screens. They think in systems: the invisible structures that hold everything together.
+
+## What Systems Thinking Looks Like
+
+**Everything is connected.** A change to the spacing scale affects every component. A new color token ripples through every state. Understanding these connections is what separates senior designers from juniors.
+
+**Design the edges, not just the happy path.** What happens when there's no data? When the API fails? When the user has 200 items instead of 3? The happy path is 10% of the work.
+
+**Constraints are your friend.** The most creative solutions emerge from the tightest constraints. Limited color palette? Fewer components? Tighter timeline? Good. Now you have to make real decisions.
+
+<!--more-->
+
+The goal isn't to design every screen perfectly. It's to design a system that makes it impossible to build a bad screen.

data/_posts/2026-01-02-collaboration.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: "The Art of Design Collaboration"
+date: 2026-01-02
+category: "Inspiration"
+image: /assets/illustrations/video-call.svg
+---
+
+Great design doesn't happen in a vacuum. It emerges from collaboration: the messy, iterative, sometimes uncomfortable process of working with people who think differently than you.
+
+## Working with Engineers
+
+The best designer-engineer relationships are partnerships, not handoffs. When engineers are involved early, they catch edge cases you missed and suggest technical approaches that unlock new design possibilities.
+
+## Working with Product
+
+Product managers and designers often have tension: PMs want to ship fast, designers want to get it right. The secret is shared context. When both sides understand the user problem equally, the debate shifts from "what should we build?" to "how do we solve this best?"
+
+## Working with Researchers
+
+Research isn't a phase. It's a practice. Embed researchers in your team, not in a separate org. The closer research is to design decisions, the more impact it has.
+
+<!--more-->
+
+Collaboration isn't about consensus. It's about building something together that none of you could have built alone.

data/_posts/2026-01-03-design-feeling.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: "Design Is a Feeling"
+date: 2026-01-03
+category: "Inspiration"
+image: /assets/illustrations/mobile-shopping.svg
+---
+
+The most memorable products aren't remembered for their features. They're remembered for how they made you feel.
+
+## Emotional Design
+
+**Delight is earned, not manufactured.** Confetti animations and micro-interactions are nice, but real delight comes from a product that understands you and makes you feel capable.
+
+**Friction has a purpose.** Not all friction is bad. A confirmation dialog before deleting something important isn't a UX problem; it's a safety feature. The question is whether the friction is intentional or accidental.
+
+**Trust is built in moments.** Every time a product does what you expect, trust increases. Every time it surprises you negatively, trust decreases. You're always building or destroying trust.
+
+## The Feeling of Good Design
+
+Good design feels like the product was made for you. It anticipates your needs, respects your time, and doesn't make you think about the interface. You just do what you came to do.
+
+<!--more-->
+
+If your user finishes a task and thinks "that was nice," you've done okay. If they finish and don't think about it at all, you've done great.

data/_posts/2026-01-04-finding-inspiration.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: "Finding Design Inspiration in the Real World"
+date: 2026-01-04
+category: "Inspiration"
+image: /assets/illustrations/online-shopping.svg
+---
+
+The best product design ideas don't come from Dribbble. They come from paying attention to how people interact with the world.
+
+## Where I Look
+
+**Physical products.** How does a well-designed door handle communicate its function? That's affordance. The same principles apply to digital interfaces.
+
+**Transit systems.** Wayfinding, information hierarchy, and real-time feedback. Airports and train stations solve many of the same UX problems we do.
+
+**Restaurants.** Menu design is information architecture. The pacing of a meal is user flow. The check-out experience is conversion optimization.
+
+## Building an Inspiration Habit
+
+Keep a running document of things that work well. Not screenshots, but observations. "The elevator lobby had three lights showing which car was closest. Simple, effective, reduced anxiety." That's a design pattern waiting to be applied.
+
+<!--more-->
+
+Inspiration isn't something you find. It's something you notice. And you notice things you're looking for.

data/_posts/2026-01-05-freebies.md

@@ -0,0 +1,35 @@
+---
+layout: post
+title: "Free Resources for Product Designers"
+date: 2026-01-05
+category: "Freebies"
+image: /assets/illustrations/podcast.svg
+---
+
+A curated collection of tools, templates, and resources that every product designer should have in their toolkit.
+
+## Figma Community Files
+
+**Design System Starter** A minimal but complete design system with tokens, components, and documentation pages.
+
+**Accessibility Checklist** A ready-to-use checklist for WCAG 2.1 AA compliance, embedded directly in your Figma files.
+
+**AI Design Patterns Library** A collection of common AI interaction patterns: progressive disclosure, confidence indicators, draft states, and suggested prompts.
+
+## Reading List
+
+- *Thinking in Systems* by Donella Meadows
+- *The Design of Everyday Things* by Don Norman
+- *About Face* by Alan Cooper
+- *Refactoring UI* by Adam Wathan & Steve Schoger
+
+## Tools
+
+- **Figma** Design and prototyping
+- **FigJam** Whiteboarding and collaboration
+- **Stark** Accessibility testing
+- **LottieFiles** Animation library
+
+<!--more-->
+
+The best resources are the ones you actually use. Pick two, master them, then expand.

data/_posts/2026-01-06-ux-research-methods.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: "UX Research Methods That Actually Work"
+date: 2026-01-06
+category: "Tutorials"
+image: /assets/illustrations/task-management.svg
+---
+
+Not all research is created equal. After years of trial and error, these are the methods I return to again and again.
+
+## The Three I Use Most
+
+**Contextual inquiry.** Watch people use your product in their actual environment. Not a usability lab, but their desk, their phone, their commute. You'll learn more in 30 minutes of observation than 10 hours of interviews.
+
+**Task analysis.** Break down a user goal into its component steps. Then ask: which steps can be eliminated? Which can be automated? Which are creating unnecessary cognitive load?
+
+**Diary studies.** Have users log their experiences over a week or two. Patterns emerge that single-session research misses entirely.
+
+## What I've Stopped Doing
+
+**A/B testing for big decisions.** A/B tests optimize local maxima. They tell you whether a green button beats a blue one. They don't tell you whether you're solving the right problem.
+
+<!--more-->
+
+Research isn't about validating your ideas. It's about discovering what you didn't know you didn't know.

data/_posts/2026-01-07-color-theory.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: "The Psychology of Color in Interfaces"
+date: 2026-01-07
+category: "Inspiration"
+image: /assets/illustrations/tasks-complete.svg
+---
+
+Color in product design isn't about aesthetics. It's about information architecture. Your color system is a map: it tells users where they are, what's important, and what actions are available.
+
+## Building a Color System
+
+**Start with semantics.** Name your colors by their purpose, not their appearance. `--color-success`, `--color-error`, `--color-warning`. This makes your system resilient to rebranding.
+
+**Limit your palette.** Three primary colors, three semantic colors, and a grayscale scale. That's enough for 95% of interfaces.
+
+**Dark mode isn't an inversion.** You need to rethink contrast, saturation, and elevation. Shadows don't work in dark mode. Use overlays instead.
+
+## The Green Problem
+
+Green means success, go, and positive change. But in financial contexts, green means money going up. In environmental contexts, it means sustainability. Context matters.
+
+<!--more-->
+
+The best color system is the one that tells a consistent story across every surface. When users see a color, they should know exactly what it means.

data/_posts/2026-01-08-responsive-design.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: "Responsive Design Beyond Breakpoints"
+date: 2026-01-08
+category: "Tutorials"
+image: /assets/illustrations/friends-taking-selfie.svg
+---
+
+Responsive design isn't about choosing breakpoints. It's about building layouts that flow naturally across any viewport.
+
+## The Fluid Approach
+
+**Use `clamp()` for typography.** `clamp(1rem, 2vw + 0.5rem, 1.5rem)` gives you smooth scaling between min and max sizes without media queries.
+
+**Flex and Grid are your foundation.** Stop setting fixed widths. Let content determine the layout, and use `minmax()` and `auto-fit` to handle the edges.
+
+**Test on real devices.** Browser resize isn't enough. Touch targets, hover states, and scrolling behavior differ fundamentally between input methods.
+
+## What I've Changed My Mind About
+
+I used to design mobile-first and scale up. Now I design content-first: start with the information hierarchy, then let the layout adapt. Mobile and desktop are just different ways of consuming the same structure.
+
+<!--more-->
+
+The best responsive designs don't feel responsive. They feel like they were made exactly for the screen you're holding.

data/_posts/2026-01-09-web-performance.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: "Performance Is a Feature"
+date: 2026-01-09
+category: "Tutorials"
+image: /assets/illustrations/meeting.svg
+---
+
+Users don't forgive slow products. No amount of beautiful design can compensate for an interface that feels sluggish. Performance isn't an engineering concern; it's a design concern.
+
+## The Perception of Speed
+
+What users feel isn't the same as what actually happens. A 200ms perceived delay feels instant. A 500ms delay feels noticeable. Anything over 1 second feels broken.
+
+**Optimistic UI.** Update the interface immediately, then confirm with the server. This makes products feel instant even when they're not.
+
+**Skeleton screens.** Better than spinners because they show the user what's coming, reducing perceived wait time.
+
+## Design Decisions That Impact Performance
+
+Every image, every animation, every custom font you add costs something. The question isn't "can we afford this?" It's "is this worth the trade-off?"
+
+<!--more-->
+
+The fastest interface is the one that doesn't load at all. Progressive enhancement means your core experience works before your enhancements arrive.

data/_posts/2026-01-10-mobile-first.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: "Mobile-First Is Dead. Content-First Lives On."
+date: 2026-01-10
+category: "Tutorials"
+image: /assets/illustrations/love-animals.svg
+---
+
+The mobile-first movement served its purpose, but it's an outdated heuristic for a world where users fluidly move between devices, screens, and input methods.
+
+## The Problem with Mobile-First
+
+Starting with the smallest screen forces you to prioritize, which is good. But it also forces you to design for constraints that may not exist on other surfaces, leading to experiences that feel compromised rather than adapted.
+
+## Content-First Design
+
+Start with the information. What is the user trying to accomplish? What data do they need? What decisions do they need to make? Then let the layout serve the content, not the device.
+
+**Information hierarchy is device-agnostic.** A user's need to understand their data doesn't change between mobile and desktop. Only the presentation changes.
+
+**Interaction patterns adapt.** Touch vs. mouse, portrait vs. landscape, single-task vs. multi-window. These are interaction concerns, not content concerns.
+
+<!--more-->
+
+Don't design for a screen size. Design for a human need, then let the interface adapt.

data/_posts/2026-04-15-crafting-visual-hierarchy.md

@@ -0,0 +1,27 @@
+---
+layout: post
+title: "The Case for Visual Hierarchy"
+date: 2026-04-15
+category: "Tutorials"
+image: /assets/illustrations/travel-booking-hotel.svg
+---
+
+Every interface is a conversation between the product and the user. Visual hierarchy is how you control what gets said first, what gets emphasized, and what stays quiet.
+
+## The Four Levers
+
+**Size.** Larger elements attract attention first. But size alone is blunt. Use it sparingly.
+
+**Weight.** Bold text creates emphasis without changing the spatial layout. It's the most surgical tool in your hierarchy toolkit.
+
+**Color.** High-contrast colors draw the eye. Muted tones recede. Use color to signal importance, not decoration.
+
+**Spacing.** White space is the most underused hierarchy tool. More space around an element makes it feel more important. Less space groups related items together.
+
+## Common Mistakes
+
+Making everything important makes nothing important. If every element is bold, large, and colorful, you've created noise, not hierarchy.
+
+<!--more-->
+
+Good hierarchy doesn't need to be explained. Users should instinctively know where to look and what to do next. If you have to tell them, the hierarchy has failed.

data/_posts/2026-04-16-building-design-systems.md

@@ -0,0 +1,27 @@
+---
+layout: post
+title: "Building Design Systems That Scale"
+date: 2026-04-16
+category: "Tutorials"
+image: /assets/illustrations/presentation.svg
+---
+
+A design system isn't a Figma file with components. It's a living agreement between design and engineering about how products should be built.
+
+## The Architecture
+
+**Tokens are the foundation.** Colors, spacing, typography scales, radii, shadows: these are your primitives. Everything else is composed from them.
+
+**Primitives are simple components.** Buttons, inputs, badges. They map directly to HTML elements and are consumed by patterns.
+
+**Patterns solve recurring problems.** Form layouts, data tables, empty states. These are where design system maturity really shows.
+
+**Product components are custom.** Not everything belongs in the system. Your unique product features should be built on top of the system, not inside it.
+
+## What I've Learned
+
+The biggest mistake teams make is over-building the system before anyone uses it. Start with what hurts the most. If everyone is building their own button, start there.
+
+<!--more-->
+
+The best design system I've ever worked on started with three tokens and a button. Everything else grew from actual need, not hypothetical completeness.

data/_posts/2026-04-18-accessibility-matters.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: "Accessibility Is a Design Constraint, Not a Feature"
+date: 2026-04-18
+category: "Freebies"
+image: /assets/illustrations/mobile-shopping.svg
+---
+
+Too often, accessibility gets treated as a checklist item at the end of a project. "We'll add alt text later." "Let's check contrast before launch." This approach guarantees mediocrity.
+
+## Accessibility from Day One
+
+When you design with accessibility as a constraint from the start, you end up with better products for everyone. Curb cuts were designed for wheelchair users, yet everyone benefits.
+
+**Color isn't information.** Never rely on color alone to convey meaning. Pair color with icons, labels, or patterns. Your red/green status indicators are meaningless to 8% of men.
+
+**Keyboard-first thinking.** Design every interaction to work without a mouse. This forces you to think about focus states, tab order, and logical grouping. It improves the experience for everyone.
+
+## The Business Case
+
+Accessible products reach more users. They perform better in search. They're more resilient to edge cases. And they avoid legal risk. There is no scenario where ignoring accessibility is the right call.
+
+<!--more-->
+
+If you're designing a product that isn't accessible to everyone, you're not designing a product. You're designing an exclusion.

data/_posts/2026-04-19-motion-design.md

@@ -0,0 +1,29 @@
+---
+layout: post
+title: "Designing with Motion"
+date: 2026-04-19
+category: "Inspiration"
+image: /assets/illustrations/online-shopping.svg
+---
+
+Motion in product design serves a purpose: it communicates relationships, directs attention, and makes interactions feel natural. When done well, users don't notice it. When done poorly, everything feels broken.
+
+## The Rules I Follow
+
+**Duration.** Transitions should be between 150ms and 300ms. Under 150ms feels jarring. Over 300ms feels sluggish. Page transitions can go to 400ms.
+
+**Easing.** Linear motion feels robotic. Use `cubic-bezier(0.22, 1, 0.36, 1)` for entrances; it feels natural and responsive. For exits, ease-out is your friend.
+
+**Transform, not layout.** Always animate `transform` and `opacity`. Never animate `width`, `height`, `margin`, or `padding`. They trigger layout recalculation and feel choppy.
+
+## Where Motion Matters Most
+
+**State changes.** When a card expands into a detail view, the transition should maintain spatial continuity. Shared element transitions make this possible.
+
+**Loading states.** Replace spinners with skeleton screens that mimic the actual content structure. Add a subtle shimmer: not too bright, not too fast.
+
+**Feedback.** Micro-interactions like button presses, toggle switches, and checkboxes should provide tactile confirmation of the action.
+
+<!--more-->
+
+Motion is the glue between interface states. Without it, your product feels like a series of disconnected snapshots. With it, everything flows.

data/_posts/2026-04-20-typography-basics.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: "Typography in Product Design"
+date: 2026-04-20
+category: "Tutorials"
+image: /assets/illustrations/podcast.svg
+---
+
+Typography in product design isn't about choosing beautiful typefaces. It's about building a system that scales across every surface, supports multiple languages, and remains readable at every density.
+
+## The Product Designer's Typographic System
+
+**Scale, not sizes.** Use a modular scale with defined ratios. I prefer 1.25 (major third) for dense interfaces and 1.333 (perfect fourth) for content-heavy pages.
+
+**Weights over families.** A single well-chosen type family with 5-7 weights gives you more flexibility than switching between families. DM Sans, Inter, and SF Pro are workhorses for a reason.
+
+**Line length matters.** 60-75 characters per line is the sweet spot for readability. In dense dashboards, you might go shorter, but never below 40.
+
+## Dark Mode Considerations
+
+Text in dark mode isn't just inverted white-on-black. Reduce contrast slightly to prevent eye strain. I use `#E5E5E5` on `#1A1A1A` instead of pure white on pure black.
+
+<!--more-->
+
+The best typography system is the one users never notice. When reading feels effortless, the system is working.