diff --git a/docs/research/design-philosophy.md b/docs/research/design-philosophy.md
index 4e3e277..a92fd39 100644
--- a/docs/research/design-philosophy.md
+++ b/docs/research/design-philosophy.md
@@ -71,6 +71,77 @@ Each preset targets a specific aesthetic/use case:
The principle: expose choices that are hard to get wrong, lock down choices that require design expertise.
+## Typography System
+
+### Type Scale Rationale
+
+We use the **Major Third (1.25) ratio** for our type scale. Common ratios and their use cases:
+
+| Ratio | Name | Best Use Case |
+|-------|------|---------------|
+| 1.125 | Major Second | Dense UIs, dashboards |
+| **1.25** | **Major Third** | **E-commerce (our choice)** |
+| 1.333 | Perfect Fourth | Editorial, content-heavy |
+| 1.5 | Perfect Fifth | High-contrast headlines |
+| 1.618 | Golden Ratio | Luxury, creative projects |
+
+Major Third provides sufficient hierarchy without oversized mobile headings.
+
+### Line-Height Guidelines
+
+Line-height follows an inverse relationship with font size—larger text needs tighter leading:
+
+| Context | Line-height |
+|---------|-------------|
+| Large headings (32px+) | 1.1–1.2 |
+| Subheadings (20–28px) | 1.2–1.3 |
+| Body text | 1.5–1.6 (WCAG minimum) |
+| Small text (<14px) | 1.4–1.5 |
+
+### Font Pairing Categories
+
+Our 7 typography presets draw from these research-backed pairing styles:
+
+| Style | Heading Font | Body Font | Use Case |
+|-------|-------------|-----------|----------|
+| Clean | Manrope | Inter | Default, versatile |
+| Editorial | Playfair Display | Raleway | Fashion, magazines |
+| Modern | Space Grotesk | Inter | Tech, contemporary |
+| Classic | Cormorant Garamond | Source Serif | Traditional, luxury |
+| Friendly | Fraunces | Work Sans | Playful, approachable |
+| Minimal | DM Sans | Source Serif | Ultra-clean |
+| Impulse | Raleway | Inter | Fashion editorial |
+
+**Key research finding**: Serif fonts increase perceived quality by 13% and reliability by 9% (Monotype/Neurons research). We use serifs for editorial and classic presets.
+
+### Spacing System
+
+We use an **8px baseline grid** (Material Design, iOS standard):
+- Most screen sizes divide evenly by 8
+- Scales cleanly to @1x, @2x, @3x resolutions
+- Reduces decisions to: 8, 16, 24, 32, 40, 48px
+
+Body text at 16px with 1.5 line-height = 24px (3 × 8), keeping text on the grid.
+
+## E-commerce Typography Patterns
+
+Research from Baymard Institute (200,000+ hours of UX testing):
+
+### Product Page Hierarchy
+- **Product title**: Largest text (20–28px), semi-bold to bold
+- **Price**: High prominence near Add to Cart, 4.5:1 minimum contrast
+- **CTA buttons**: Clean sans-serif, 14–16px, action verbs ("Add to basket")
+- **Body descriptions**: 16–18px, 1.5 line-height, structured with subheadings
+
+### Mobile Requirements
+- **Touch targets**: 44×44px minimum (WCAG AAA)
+- **Body text**: 16px minimum (prevents iOS input zoom)
+- **Avoid horizontal tabs**—27% of users overlook them
+
+### Scanning Patterns
+- **F-pattern** (product pages): Horizontal top, shorter line below, vertical down left
+- **Z-pattern** (landing pages): Top-left → top-right → diagonal → bottom-right
+
## Combination Count
With current options, the system offers:
diff --git a/docs/research/typography.md b/docs/research/typography.md
deleted file mode 100644
index ecb1625..0000000
--- a/docs/research/typography.md
+++ /dev/null
@@ -1,375 +0,0 @@
-# Professional typography systems for Tailwind e-commerce themes
-
-A well-designed typography system using modular scales, vertical rhythm, and constrained customization can transform an e-commerce shop from generic to polished. The key insight: **typography accounts for 95% of web design**, yet most theme builders expose the wrong controls—offering granular font size pickers when users actually need curated presets with automatic scaling. The most successful approach combines a **Major Third (1.25) type scale**, **8px baseline grid**, and **2-3 carefully paired Google Fonts** with preset-based theme customization that prevents design chaos while enabling brand expression.
-
-This report covers the complete technical foundation: mathematical type scales with CSS implementations, curated Google Font pairings across seven style categories, production-ready Tailwind configurations, DaisyUI integration patterns, and research-backed guidelines for building theme editors that balance freedom with quality outcomes.
-
----
-
-## Type scales create mathematical harmony across all text sizes
-
-Modular type scales use consistent mathematical ratios to generate font sizes, ensuring visual harmony without arbitrary decisions. Starting with a **16px base** (browser default), each size step multiplies by the chosen ratio.
-
-| Ratio | Name | Best use case |
-|-------|------|--------------|
-| 1.125 | Major Second | Dense UIs, dashboards, documentation |
-| **1.25** | **Major Third** | **Recommended default for e-commerce** |
-| 1.333 | Perfect Fourth | Editorial, content-heavy sites |
-| 1.414 | Augmented Fourth | Landing pages, marketing |
-| 1.5 | Perfect Fifth | High-contrast headlines |
-| 1.618 | Golden Ratio | Luxury brands, creative projects |
-
-The **Major Third (1.25)** strikes the ideal balance for e-commerce: sufficient hierarchy without oversized mobile headings. A full scale at this ratio: 12.8px → 16px → 20px → 25px → 31.25px → 39px → 48.8px.
-
-**Implementation principle**: Use larger ratios (1.333–1.5) on desktop and smaller ratios (1.125–1.25) on mobile. Fluid typography with `clamp()` handles this automatically:
-
-```css
---fs-heading: clamp(1.5rem, 1rem + 2vw, 2.5rem);
-```
-
----
-
-## Vertical rhythm and baseline grids enforce consistent spacing
-
-The **8-point grid system** (used by Material Design, iOS, and most design systems) creates visual consistency by constraining all spacing to multiples of 8px. Typography integrates with this grid through line-height alignment.
-
-**Why 8px works**: Most screen sizes divide evenly by 8, scaling cleanly to @1x, @2x, and @3x resolutions. It reduces decision-making to a finite set of options: 8, 16, 24, 32, 40, 48px.
-
-**Typography integration**: Base font of 16px with line-height 1.5 yields **24px line-height** (3 × 8), keeping text on the baseline grid. All margins and padding use 8px increments.
-
-```css
-:root {
- --rhythm: 0.5rem; /* 8px */
- --line-height-body: 1.5rem; /* 24px = 3 × rhythm */
-}
-
-body { font-size: 1rem; line-height: 1.5; }
-p { margin-bottom: 1rem; } /* 16px = 2 × rhythm */
-h2 { margin-bottom: 1.5rem; } /* 24px = 3 × rhythm */
-```
-
-**Practical approach**: Accept line-height-based rhythm rather than true baseline alignment—CSS centers text vertically within line-height, making pixel-perfect baseline grids impractical without complex padding offsets.
-
----
-
-## Line-height, measure, and letter-spacing have precise optimal values
-
-These three parameters have research-backed optimal ranges that should rarely need customization in a theme editor.
-
-**Line-height follows an inverse relationship with font size**—larger text needs tighter leading:
-
-| Context | Line-height | Example at 16px base |
-|---------|-------------|---------------------|
-| Large headings (32px+) | 1.1–1.2 | 35–38px |
-| Subheadings (20–28px) | 1.2–1.3 | 24–36px |
-| **Body text** | **1.5–1.6** | **24–26px** |
-| Small text (<14px) | 1.4–1.5 | 20–21px |
-
-WCAG accessibility requires **minimum 1.5 line-height** for body text. Always use unitless values (`line-height: 1.5`) so they scale proportionally.
-
-**Measure (line length)** should stay within **45–75 characters** for optimal readability, with 66 being ideal. Implementation:
-
-```css
-.prose { max-width: 65ch; }
-/* Or responsive: */
-.content { width: clamp(45ch, 90%, 75ch); }
-```
-
-**Letter-spacing guidelines**:
-- **Body text**: Leave default (font is optimized)
-- **ALL CAPS**: Add 5–12% spacing (`letter-spacing: 0.08em`)
-- **Large headings (32px+)**: Tighten slightly (`letter-spacing: -0.02em`)
-- **Small text (<14px)**: Widen slightly (`letter-spacing: 0.02em`)
-
----
-
-## Curated Google Font pairings for seven e-commerce styles
-
-Each pairing includes heading and body fonts with specific weights to load. These combinations feel distinctive while maintaining professional readability.
-
-### Minimal and modern (tech, sustainable goods, contemporary homeware)
-
-**Manrope (500, 600) + Inter (400, 500)** — Geometric precision meets exceptional screen readability. Both feature clean lines without quirks.
-
-**Plus Jakarta Sans (500, 600) + Literata (400, 400i)** — Newer, distinctive sans-serif with variable font support paired with a screen-optimized serif. Fresh but professional.
-
-**DM Sans (500, 700) + Source Serif Pro (400, 400i)** — Low-contrast geometric sans contrasts elegantly with refined serif. Ideal for design tools, premium stationery.
-
-### Warm and artisan (handmade goods, craft products, specialty food)
-
-**Cormorant Garamond (500, 600) + Proza Libre (400, 400i)** — Lavish Garamond revival with strong calligraphic feel pairs with humanist sans optimized for screens. Perfect for artisan ceramics, specialty coffee.
-
-**Calistoga (400) + IBM Plex Sans (400, 500)** — Rounded serifs with friendly sophistication. Excellent for bakeries, organic goods, candle shops.
-
-**Josefin Sans Light (300, 400) + Crimson Text (400, 400i, 600)** — Thin letterforms create an airy feel; classic serif adds professional warmth. Suits makeup, jewelry, wellness.
-
-### Bold and editorial (fashion, lifestyle brands)
-
-**Playfair Display (500, 700) + Raleway Light (300, 400)** — High-contrast delicate hairlines of Playfair with thin Raleway strokes. Classic fashion magazine aesthetic.
-
-**Instrument Serif + Instrument Sans (400, 500)** — Same-designer family creates cohesive editorial look with perfect built-in contrast. Art-forward brands, creative agencies.
-
-**DM Serif Display (400) + Poppins (300, 400)** — Beautiful calligraphic strokes with thin modern geometric sans. Fashion accessories, beauty products.
-
-### Playful and quirky (creative products, novelty gifts)
-
-**Fraunces (variable, 400–900) + Work Sans (400, 500)** — Four axes including "wonk" create vintage-inspired whimsy while maintaining professionalism. Variable font with softness, weight, and optical size controls.
-
-**Syne Bold (700) + Syne Regular (400)** — Footprint expands as weight increases for quirky but readable stand-out headlines. Music merchandise, creative agencies.
-
-**Dynapuff (variable) + Nunito (400, 600)** — Bold, playful, round font with soft rounded sans. Children's products, candy shops.
-
-### Luxury and elegant (high-end goods, premium products)
-
-**Cinzel (400, 500) + Fauna One (400)** — High-contrast Roman inscription inspiration conveys timeless authority. Fine jewelry, luxury watches.
-
-**Cormorant Garamond (400, 500) + Montserrat Light (300, 400)** — Elegant Garamond with clean urban sans creates sophisticated contrast. High-end cosmetics, luxury home decor.
-
-**Prata (400) + Manrope Light (300, 400)** — Contrasting thick/thin strokes convey elegance; light Manrope maintains delicacy. Premium skincare, designer accessories.
-
-### Vintage and retro (heritage brands, nostalgic products)
-
-**Libre Franklin (500, 600) + Libre Baskerville (400, 400i)** — American Gothic + Transitional pairing used for 100+ years. Evokes established, traditional authenticity.
-
-**Oswald (500, 600) + EB Garamond (400, 400i)** — Bold condensed sans (Franklin Gothic–inspired) with elegant Garamond. Vintage clothing, retro posters.
-
-**Rokkitt (400, 700) + Raleway (400, 500)** — Geometric slab serif (Egyptian style) with elegant sans. Heritage stationery, letterpress products.
-
-### Tech and futuristic (sci-fi prints, gadget accessories)
-
-**Space Grotesk (500, 700) + IBM Plex Mono (400, 500)** — Distinctive geometric sans with monospace body creates coding/tech aesthetic.
-
----
-
-## Variable fonts offer performance and flexibility advantages
-
-Variable fonts contain multiple styles in a single file, reducing HTTP requests and enabling precise weight control (e.g., font-weight: 450).
-
-| Font | Weight range | Other axes | Best for |
-|------|-------------|-----------|----------|
-| **Inter** | 100–900 | Optical size 14–32 | All-purpose workhorse |
-| **Roboto Flex** | 100–1000 | Width, grade, optical size | Maximum flexibility |
-| **Fraunces** | 100–900 | Soft, wonk, optical size | Playful brands |
-| **Outfit** | 100–900 | — | Modern headlines |
-| **DM Sans** | 100–1000 | Optical size 9–40 | Clean interfaces |
-
-**Request syntax** for Google Fonts variable fonts:
-```html
-
-```
-
----
-
-## Font loading strategies that protect performance
-
-**Recommended approach**: Use `font-display: swap` for headings (fastest text visibility) and `font-display: optional` for body text (prevents layout shifts if font fails to load).
-
-**Self-hosting now outperforms Google Fonts CDN** due to Chrome and Safari's cache partitioning (since 2020)—cross-site caching no longer works. Self-hosting reported PageSpeed improvements of 66 → 94 on mobile scores.
-
-**Performance checklist**:
-- Load only weights actually used (e.g., 400, 600 instead of full range)
-- Preconnect to font origins: ``
-- Use WOFF2 format only (30% smaller than WOFF)
-- Limit to 2–3 font families maximum
-- Preload critical above-fold fonts:
-```html
-
-```
-
----
-
-## Tailwind configuration for production typography systems
-
-Tailwind's fontSize config supports a tuple syntax for complete typographic definitions:
-
-```javascript
-// tailwind.config.js
-module.exports = {
- theme: {
- fontSize: {
- 'xs': ['0.75rem', { lineHeight: '1rem', letterSpacing: '0.025em' }],
- 'sm': ['0.875rem', { lineHeight: '1.25rem' }],
- 'base': ['1rem', { lineHeight: '1.5rem' }],
- 'lg': ['1.125rem', { lineHeight: '1.75rem' }],
- 'xl': ['1.25rem', { lineHeight: '1.75rem' }],
- '2xl': ['1.5rem', { lineHeight: '2rem', letterSpacing: '-0.01em' }],
- '3xl': ['1.875rem', { lineHeight: '2.25rem', letterSpacing: '-0.02em' }],
- '4xl': ['2.25rem', { lineHeight: '2.5rem', letterSpacing: '-0.02em' }],
- },
- spacing: {
- // 8px baseline grid
- '1': '0.5rem', // 8px
- '2': '1rem', // 16px
- '3': '1.5rem', // 24px
- '4': '2rem', // 32px
- '6': '3rem', // 48px
- },
- fontFamily: {
- sans: ['Inter', 'ui-sans-serif', 'system-ui'],
- display: ['Playfair Display', 'ui-serif', 'Georgia'],
- },
- },
-}
-```
-
-**Fluid typography in Tailwind** uses arbitrary values or custom config:
-
-```html
-
Fluid headline
-```
-
-Or extend the config:
-```javascript
-fontSize: {
- 'fluid-xl': 'clamp(1.5rem, 1rem + 2vw, 2.5rem)',
- 'fluid-display': 'clamp(2.5rem, 1.5rem + 4vw, 5rem)',
-}
-```
-
-**@tailwindcss/typography plugin** handles prose content with sensible defaults:
-
-```html
-
- {{ markdown }}
-
-```
-
-Override defaults in config:
-```javascript
-typography: {
- DEFAULT: {
- css: {
- maxWidth: '65ch',
- 'h1, h2, h3': { fontFamily: 'var(--font-display)' },
- a: { color: '#3182ce', '&:hover': { color: '#2c5282' } },
- },
- },
-},
-```
-
----
-
-## DaisyUI themes control colors while typography stays at Tailwind level
-
-**Critical distinction**: DaisyUI themes only control colors, border-radius, and effects—not typography. Font families, sizes, and spacing are configured in Tailwind, applying consistently across all DaisyUI themes.
-
-```css
-/* DaisyUI plugin configuration */
-@import "tailwindcss";
-@plugin "daisyui" {
- themes: light --default, dark --prefersdark;
-}
-
-/* Typography at Tailwind level (applies to all themes) */
-@theme {
- --font-display: "Playfair Display", serif;
- --font-body: "Inter", sans-serif;
-}
-```
-
-**Semantic color usage for text**: DaisyUI provides `base-content` for default text, `primary-content` for text on primary backgrounds, etc. Components auto-apply correct text colors (`btn-primary` uses `primary-content`).
-
-**Overriding component typography**:
-```css
-@layer components {
- .btn {
- text-transform: none; /* Remove default uppercase */
- font-weight: 500;
- letter-spacing: 0.01em;
- }
-}
-```
-
----
-
-## Theme editors should offer presets, not granular controls
-
-Research across Shopify, Squarespace, and Webflow reveals a clear pattern: the most successful theme systems use **constrained customization** that prevents design chaos.
-
-### Parameters to make user-configurable
-
-| Setting | Implementation | Why expose |
-|---------|---------------|-----------|
-| **Font pairing preset** | 5–10 curated combinations | Enables brand expression without typography expertise |
-| **Heading font family** | Dropdown of paired fonts | Primary brand identity signal |
-| **Body font family** | Dropdown of paired fonts | Readability preference |
-| **Font size scale** | Slider 90%–120% | Accessibility accommodation |
-| **Accent colors** | Color picker with presets | Brand customization |
-
-### Parameters to lock down (prevent user adjustment)
-
-| Setting | Locked value | Why restrict |
-|---------|-------------|-------------|
-| **Line-height ratios** | 1.5 body, 1.2 headings | Users break readability |
-| **Letter-spacing** | Preset per size | Technical, easy to ruin |
-| **Measure/line length** | 45–75ch | Readability science |
-| **Type scale ratio** | 1.25 | Mathematical harmony |
-| **Mobile scaling** | Automatic | Complex responsive logic |
-
-### The Shopify model (maximum constraints)
-
-Shopify exposes only **two font categories** (headings and body), a **single size slider** (100–150%), and no line-height or letter-spacing controls. Users select from a curated library of ~1,000 fonts. Result: hard to break, accessible to non-designers.
-
-### The Squarespace model (balanced approach)
-
-Squarespace offers **60+ Font Packs**—professionally curated heading/body pairs that guarantee aesthetic coherence. Users can also access individual controls (family, weight, size, line-height, letter-spacing) but the preset system handles most needs.
-
-### Recommended implementation for e-commerce themes
-
-1. **Offer 5–10 curated font pairing presets** covering different brand aesthetics
-2. **Allow 2 font category overrides** (heading + body) from a filtered quality list
-3. **Use range sliders with sensible limits** (size 90–120%, never expose line-height)
-4. **Provide real-time preview** before saving changes
-5. **Include accessibility validation** (contrast ratio warnings)
-6. **Group elements semantically** (all headings share one setting)
-
----
-
-## E-commerce typography patterns that increase conversions
-
-Research from Baymard Institute (200,000+ hours of UX testing) reveals specific typography patterns that improve shopping experiences.
-
-### Product page hierarchy
-
-- **Product title**: Largest text (20–28px), semi-bold to bold (600–700), first in visual hierarchy
-- **Price**: High prominence near Add to Cart, **4.5:1 minimum contrast**, consider showing price-per-unit (**74% of sites miss this**)
-- **CTA buttons**: Clean sans-serif, 14–16px, action verbs ("Add to Cart" outperforms "Submit")
-- **Body descriptions**: 16–18px, 1.5 line-height, structured with subheadings (**78% of sites don't use highlights format**)
-
-### Trust signals through typography
-
-Monotype/Neurons research found serif fonts increase **perceived quality by 13%** and **reliability by 9%**. For premium positioning:
-- Use serif fonts for headlines (Playfair Display, Cormorant Garamond)
-- Generous white space around text elements
-- Restrained design—avoid decorative excess
-- Limit to 2–3 fonts maximum (**4+ creates "cheap" perception**)
-
-### Mobile e-commerce requirements
-
-- **Touch targets**: 44×44px minimum for text links (WCAG AAA), 8px minimum spacing between targets
-- **Body text**: 16px minimum (prevents iOS input zoom)
-- **Avoid horizontal tabs on mobile**—27% of users overlook them entirely
-- Position price and CTA in natural thumb zone (bottom 2/3 of screen)
-
-### Scanning patterns inform layout
-
-**F-pattern** (product pages with descriptions): Users scan horizontally across top, then shorter horizontal line below, then vertically down left side. Place critical information (product name, price, CTAs) along these paths.
-
-**Z-pattern** (landing pages, minimal text): Top left → top right → diagonal to bottom left → bottom right. Position logo top-left, navigation top-right, primary CTA bottom-right.
-
----
-
-## Conclusion: A complete typography system for Tailwind e-commerce themes
-
-The optimal system combines:
-
-1. **Major Third (1.25) type scale** as the default, with automatic mobile scaling using `clamp()`
-2. **8px baseline grid** for all spacing, with line-heights aligned to 24px (1.5rem) for body text
-3. **2–3 Google Fonts** loaded as variable fonts with `font-display: swap`, self-hosted for performance
-4. **Tailwind configuration** with fontSize tuples including line-height and letter-spacing
-5. **DaisyUI for color theming** while typography remains at Tailwind level
-6. **Preset-based theme customization** offering curated font pairings rather than granular controls
-
-The research consensus is clear: typography parameters like line-height (1.5 body, 1.2 headings), measure (65ch), and letter-spacing should be **locked to optimal values**. User customization should focus on font pairing presets and size scaling within safe ranges—enabling brand expression without the risk of breaking readability or professional appearance.
-
-For print-on-demand shops specifically, the **Minimal/Modern** (Manrope + Inter) and **Playful/Quirky** (Fraunces + Work Sans) pairings offer the most versatility across product categories, while **Warm/Artisan** (Cormorant Garamond + Proza Libre) suits handmade goods and **Bold/Editorial** (Playfair Display + Raleway) elevates fashion-forward brands.
\ No newline at end of file