Merge pull request #3 from Technologic101/dev

.gitignore

@@ -22,3 +22,6 @@ dist/
 .ipynb_checkpoints
 
 .chainlit/cache
+
+data_collection/scraped_designs
+data_collection/analyses

data_collection/analyze_designs.py

@@ -5,17 +5,36 @@ import asyncio
 import base64
 from openai import AsyncOpenAI
 from dotenv import load_dotenv
+from anthropic import AsyncAnthropic
+from .prompts import get_prompt
 
 load_dotenv()
+client = AsyncAnthropic(api_key=os.getenv("ANTHROPIC_API_KEY"))
 
-VISION_MODEL = "gpt-4o-2024-08-06"
+VISION_MODEL = "claude-3-7-sonnet-20250219"
 
-client = AsyncOpenAI()
-
-async def analyze_screenshot(design_id: str, design_path: Path):
-    """Analyze screenshots and return description, categories, and visual characteristics"""
+async def analyze_screenshot(design_id: str, design_path: Path, detailed: bool = True, output_path: Path = None):
+    """
+    Analyze screenshots and return description, categories, and visual characteristics
+    
+    Args:
+        design_id (str): ID of the design to analyze
+        design_path (Path): Path to the design's source files
+        detailed (bool): Whether to use detailed or core analysis prompt
+        output_path (Path): Path to save analysis results. If None, uses analyses/default
+    
+    Returns:
+        tuple: (design_id, description, categories, visual_characteristics)
+    """
     try:
-        # Check files exist
+        # Use output_path if provided, otherwise use default analyses path
+        save_path = output_path or Path("analyses/default")
+        
+        # Ensure output directory exists
+        if not save_path.exists():
+            save_path.mkdir(parents=True, exist_ok=True)
+            
+        # Check source files exist
         metadata_path = design_path / "metadata.json"
         desktop_img = design_path / "screenshot_desktop.png"
         mobile_img = design_path / "screenshot_mobile.png"
@@ -40,82 +59,79 @@ async def analyze_screenshot(design_id: str, design_path: Path):
         
         print(f"Analyzing design {design_id}...")
         
-        # Get response first
-        response = await client.chat.completions.create(
+        # Get response using specified detail level
+        response = await client.messages.create(
             model=VISION_MODEL,
-            messages=[
-                {
-                    "role": "system",
-                    "content": """You are an expert graphic designer analyzing print and web designs for aesthetics, functionality, audience appeal, and potential applications.
-                    
-                    The design should be considered from a visual standpoint. Use chain of thought to consider color palette, visual layout, typography, artistic style, mood, and potential applications.
-                    Consider gradients, texture, background effects, and the use of images.
-                    
-                    Treat all text content as placeholder Lorem Ipsum.
-                    
-                    Provide analysis in clean JSON format with these exact keys:
+            max_tokens=8000 if detailed else 4000,  # More tokens for detailed analysis
+            system=get_prompt(detailed=detailed),
+            messages=[{
+                "role": "user",
+                "content": [
                     {
-                        "description": "A one-paragraph summary highlighting exceptional features of the design",
-                        "categories": ["category1", "category2"],
-                        "visual_characteristics": ["characteristic1", "characteristic2"]
-                    }
-                    Provide 4-6 categories and 4-6 visual characteristics most relevant to the style and feel of the design. Do not reference css or web design directly because this analysis is primarily about design. These lists should describe the design to another LLM that will use this data to generate a UI.
-                    """
-                },
-                {
-                    "role": "user",
-                    "content": [
-                        {
-                            "type": "text",
-                            "text": "Analyze this visual design. Output only the JSON object."
-                        },
-                        {
-                            "type": "image_url",
-                            "image_url": {
-                                "url": f"data:image/png;base64,{desktop_base64}",
-                                "detail": "high"
-                            }
-                        },
-                        {
-                            "type": "image_url",
-                            "image_url": {
-                                "url": f"data:image/png;base64,{mobile_base64}",
-                                "detail": "high"
-                            }
+                        "type": "text",
+                        "text": "Analyze this visual design. Output only the JSON object."
+                    },
+                    {
+                        "type": "image",
+                        "source": {
+                            "type": "base64",
+                            "media_type": "image/png",
+                            "data": desktop_base64
+                        }
+                    },
+                    {
+                        "type": "image",
+                        "source": {
+                            "type": "base64",
+                            "media_type": "image/png",
+                            "data": mobile_base64
                         }
-                    ]
-                }
-            ],
-            max_tokens=1000
+                    }
+                ]
+            }]
         )
         
-        # Then get the content
-        response_content = response.choices[0].message.content.strip()
+        response_content = response.content[0].text
         
-        # Ensure the response is not empty
         if not response_content:
             print(f"Empty response for design {design_id}")
             return design_id, None, None, None
         
         # Extract JSON content from markdown code block
         if "```json" in response_content:
-            # Remove the ```json prefix and ``` suffix
             response_content = response_content.split("```json")[1].split("```")[0].strip()
         
-        # Parse the JSON response
         try:
             analysis = json.loads(response_content)
             
-            # Update metadata with all fields
-            metadata.update(analysis)
+            # Create design-specific directory in output path
+            design_output_path = save_path / design_id
+            design_output_path.mkdir(parents=True, exist_ok=True)
             
-            # Save updated metadata
-            with open(metadata_path, "w") as f:
-                json.dump(metadata, f, indent=2)
+            # Save metadata.json inside the design folder
+            output_metadata_path = design_output_path / "metadata.json"
+            
+            # Save analysis to output path
+            with open(output_metadata_path, "w") as f:
+                json.dump(analysis, f, indent=2)
             
             print(f"Successfully analyzed design {design_id}")
-            # Return visual_characteristics as fourth element
-            return design_id, analysis["description"], analysis["categories"], analysis["visual_characteristics"]
+            
+            # Return appropriate fields based on detail level
+            if detailed:
+                return (
+                    design_id,
+                    analysis["description"]["summary"],
+                    analysis["categories"],
+                    analysis["visual_characteristics"]
+                )
+            else:
+                return (
+                    design_id,
+                    analysis["description"],
+                    analysis["categories"],
+                    analysis["visual_characteristics"]
+                )
             
         except json.JSONDecodeError as e:
             print(f"Error parsing JSON response for design {design_id}: {str(e)}")
@@ -125,6 +141,108 @@ async def analyze_screenshot(design_id: str, design_path: Path):
         print(f"Error processing design {design_id}: {str(e)}")
         return design_id, None, None, None
 
+async def attribute_designs():
+    """
+    Process scraped designs to extract title and author from CSS comments.
+    Adds these attributes to the existing metadata.json files.
+    Skips designs that already have both title and author.
+    """
+    designs_dir = Path("scraped_designs")
+    
+    if not designs_dir.exists():
+        print("Scraped designs directory not found!")
+        return
+    
+    # Get all design directories
+    design_dirs = [d for d in designs_dir.iterdir() if d.is_dir()]
+    
+    if not design_dirs:
+        print("No design directories found!")
+        return
+    
+    print(f"Found {len(design_dirs)} designs to check")
+    
+    processed = 0
+    skipped = 0
+    failed = 0
+    
+    for design_dir in design_dirs:
+        try:
+            # Check for required files
+            css_path = design_dir / "style.css"
+            metadata_path = design_dir / "metadata.json"
+            
+            if not all(f.exists() for f in [css_path, metadata_path]):
+                print(f"Missing required files for design {design_dir.name}")
+                failed += 1
+                continue
+            
+            # Check existing metadata
+            with open(metadata_path, "r") as f:
+                metadata = json.load(f)
+            
+            # Skip if both title and author already exist and aren't default values
+            if (metadata.get("title") and metadata.get("author") and 
+                metadata["title"] != "Untitled" and metadata["author"] != "Unknown"):
+                print(f"Skipping design {design_dir.name} - already attributed")
+                skipped += 1
+                continue
+            
+            # Read CSS file
+            with open(css_path, "r", encoding="utf-8") as f:
+                css_content = f.read()
+            
+            # Extract title and author using Claude
+            response = await client.messages.create(
+                model="claude-3-haiku-20240307",
+                max_tokens=100,
+                system="You are a helpful assistant that extracts title and author information from CSS comments. Return ONLY a JSON object with 'title' and 'author' fields, nothing else.",
+                messages=[{
+                    "role": "user",
+                    "content": f"Extract the title and author from these CSS comments. Return only the JSON object, no markdown:\n\n{css_content}"
+                }]
+            )
+            
+            # Get response text and clean it up
+            response_text = response.content[0].text.strip()
+            
+            # Remove markdown formatting if present
+            if "```json" in response_text:
+                response_text = response_text.split("```json")[1].split("```")[0].strip()
+            elif "```" in response_text:
+                response_text = response_text.split("```")[1].strip()
+                
+            try:
+                attribution = json.loads(response_text)
+            except json.JSONDecodeError:
+                print(f"Failed to parse JSON for design {design_dir.name}. Response was:")
+                print(response_text)
+            
+            # Update metadata
+            metadata.update({
+                "title": attribution.get("title", "Untitled"),
+                "author": attribution.get("author", "Unknown")
+            })
+            
+            # Save updated metadata
+            with open(metadata_path, "w") as f:
+                json.dump(metadata, f, indent=2)
+            
+            print(f"Successfully attributed design {design_dir.name}")
+            print(f"Title: {attribution.get('title', 'Untitled')}")
+            print(f"Author: {attribution.get('author', 'Unknown')}\n")
+            processed += 1
+            
+        except Exception as e:
+            print(f"Error processing design {design_dir.name}: {str(e)}")
+            failed += 1
+    
+    print("\nAttribution complete!")
+    print(f"Processed: {processed}")
+    print(f"Skipped: {skipped}")
+    print(f"Failed: {failed}")
+    print(f"Total: {len(design_dirs)}")
+
 async def main():
     designs_dir = Path("designs")
     

data_collection/prompts.py

@@ -0,0 +1,106 @@
+"""
+Prompt templates for design analysis using different levels of detail.
+Each template is optimized for Claude 3.7 Sonnet's visual processing capabilities.
+"""
+
+DETAILED_ANALYSIS_PROMPT = """You are an expert design analyst with deep knowledge of visual design, aesthetics, and human perception. Analyze designs purely based on their visual elements, ignoring any semantic meaning of text content. Treat all text as abstract typographic elements.
+
+IMPORTANT: Base all analysis ONLY on what you can see in the visual design. Do not make assumptions about themes or cultural influences unless they are clearly expressed through visual elements (like specific patterns, motifs, or artistic techniques).
+
+For each design, perform a detailed visual analysis considering:
+1. Visual Composition & Hierarchy
+   - Layout structure and flow
+   - Balance and white space
+   - Focal points and emphasis
+   - Visual weight distribution
+
+2. Color & Atmosphere
+   - Color palette and relationships
+   - Value contrast and harmony
+   - Light and shadow effects
+   - Color temperature and mood
+
+3. Typography & Text Treatment
+   - Font styles as visual elements
+   - Typographic scale and contrast
+   - Text block shapes and rhythm
+   - Integration with other design elements
+
+4. Texture & Depth
+   - Surface treatments and patterns
+   - Layering and dimensionality
+   - Material and tactile suggestions
+   - Visual texture relationships
+
+5. Artistic Elements
+   - Visual style and aesthetic approach
+   - Decorative elements and motifs
+   - Pattern language and repetition
+   - Visual symbolism (based only on visible elements)
+
+IMPORTANT: Categories should be concise, single-word descriptors or hyphenated pairs that a designer would use to tag or classify the design. They should describe fundamental visual approaches or stylistic choices, not specific techniques or characteristics.
+
+Provide analysis in the following JSON format:
+{
+    "description": {
+        "summary": "A compelling overview focusing on distinctive visual features and artistic approach",
+        "visual_style": "Analysis of the design's aesthetic language and artistic execution",
+        "emotional_impact": "Description of the mood and atmosphere created by visual elements",
+        "compositional_elements": "Analysis of how visual elements work together spatially"
+    },
+    "artistic_context": {
+        "style_influences": "Only visual styles clearly evidenced by specific visual elements",
+        "visual_metaphors": "Abstract concepts suggested by the visual treatment alone"
+    },
+    "categories": [
+        "4-6 single-word or hyphenated design classifications",
+        "Examples: artistic, professional, futuristic, geometric, typographic, high-contrast, grid-based"
+    ],
+    "visual_characteristics": [
+        "4-6 specific visual techniques or elements",
+        "Concrete, observable visual attributes"
+    ],
+    "design_principles": {
+        "primary_principles": ["3-4 key design principles exemplified"],
+        "visual_techniques": ["2-3 specific execution methods"]
+    }
+}"""
+
+CORE_ANALYSIS_PROMPT = """You are an expert design analyst. Analyze the visual design purely based on visual elements, ignoring any semantic meaning of text content. Treat all text as abstract typographic elements.
+
+IMPORTANT: Base all analysis ONLY on what you can see in the visual design. Categories should be concise, single-word descriptors or hyphenated pairs that a designer would use to tag the design. Focus on fundamental visual approaches, not specific techniques.
+
+Consider:
+1. Overall composition and visual hierarchy
+2. Color relationships and atmosphere
+3. Typography as visual element
+4. Texture and depth
+5. Artistic style (based only on visible elements)
+
+Provide analysis in the following JSON format:
+{
+    "description": "A concise summary highlighting distinctive visual features",
+    "categories": [
+        "4-5 single-word or hyphenated design classifications"
+    ],
+    "visual_characteristics": [
+        "4-5 specific visual techniques or elements"
+    ],
+    "artistic_style": {
+        "influences": ["2-3 clearly evident visual style influences"],
+        "techniques": ["2-3 observable visual techniques"]
+    }
+}"""
+
+def get_prompt(detailed: bool = True) -> str:
+    """
+    Returns the appropriate prompt template based on the desired detail level.
+    
+    Args:
+        detailed (bool): If True, returns the detailed analysis prompt.
+                        If False, returns the core analysis prompt.
+    
+    Returns:
+        str: The selected prompt template
+    """
+    return DETAILED_ANALYSIS_PROMPT if detailed else CORE_ANALYSIS_PROMPT 

data_collection/scraper.py

@@ -31,27 +31,25 @@ async def take_screenshot(url, directory):
         browser = await p.chromium.launch()
         
         # Desktop screenshot (1920px width)
-        page = await browser.new_page(viewport={'width': 1920, 'height': 1080})
+        page = await browser.new_page(viewport={'width': 1600, 'height': 1080})
         await page.goto(url)
         # Wait for network to be idle (no requests for at least 500ms)
-        await page.wait_for_load_state()
-        
-        # Additional wait to ensure any animations/transitions complete
-        #await page.wait_for_timeout(2000)  # 2 second delay
+        await page.wait_for_load_state("networkidle")
+        # Add a significant delay to ensure background images are loaded
+        await page.wait_for_timeout(3000)
         
         # Get full height
         height = await page.evaluate('document.body.scrollHeight')
-        await page.set_viewport_size({'width': 1920, 'height': int(height)})
+        await page.set_viewport_size({'width': 1600, 'height': int(height)})
         await page.screenshot(path=f"{directory}/screenshot_desktop.png", full_page=True)
         
         # Mobile screenshot (480px width)
         page = await browser.new_page(viewport={'width': 480, 'height': 1080})
         await page.goto(url)
         # Wait for network to be idle (no requests for at least 500ms)
-        await page.wait_for_load_state()
-        
-        # Additional wait to ensure any animations/transitions complete
-        #await page.wait_for_timeout(2000)  # 2 second delay
+        await page.wait_for_load_state("networkidle")
+        # Add a significant delay to ensure background images are loaded
+        await page.wait_for_timeout(2000)
         
         # Get full height
         height = await page.evaluate('document.body.scrollHeight')

pyproject.toml

@@ -37,6 +37,8 @@ dependencies = [
     "matplotlib>=3.10.0",
     "accelerate>=0.26.0",
     "nest-asyncio>=1.6.0",
+    "anthropic>=0.49.0",
+    "langchain-anthropic>=0.3.10",
 ]
 
 [build-system]

src/app.py

@@ -1,19 +1,6 @@
 import chainlit as cl
-from langchain_openai import AsyncChatOpenAI
 from langchain_core.messages import HumanMessage, SystemMessage
-from chains.design_rag import DesignRAG
-
-# Initialize components
-design_rag = DesignRAG()
-
-llm = AsyncChatOpenAI(
-    model="gpt-4o-mini",
-    temperature=0,
-    streaming=True,
-    callbacks=[cl.LangchainCallbackHandler()]
-)
-
-conversation_history = []
+from graph import graph
 
 # System message focused on design analysis
 SYSTEM_MESSAGE = """You are a helpful design assistant that finds and explains design examples.
@@ -23,43 +10,45 @@ For every user message, analyze their design preferences and requirements, consi
 3. Layout and structural needs
 4. Key visual elements
 5. Intended audience and user experience
-
-First briefly explain how you understand their requirements, then show the closest match."""
+"""
 
 @cl.on_chat_start
 async def init():
+    # Store the graph in the user session
+    cl.user_session.set("graph", graph)
     
-    # init conversation history for each user
-    cl.user_session.set("conversation_history", [
-        SystemMessage(content=SYSTEM_MESSAGE)
-    ])
+    # Initialize conversation state with system message
+    initial_state = {
+        "messages": [SystemMessage(content=SYSTEM_MESSAGE)]
+    }
+    cl.user_session.set("state", initial_state)
     
     # Send welcome message
     await cl.Message(content="Welcome to ImagineUI! I'm here to help you design beautiful and functional user interfaces. What kind of design are you looking for?").send()
 
 @cl.on_message
 async def main(message: cl.Message):
-    conversation_history = cl.user_session.get("conversation_history")
-    # Add user message to history
-    conversation_history.append(HumanMessage(content=message.content))
+    # Get the graph from the user session
+    graph = cl.user_session.get("graph")
+    
+    # Get current state
+    state = cl.user_session.get("state")
     
-    # Get LLM's analysis of requirements
-    analysis = await llm.ainvoke(conversation_history)
+    # Add the new user message to the state
+    state["messages"].append(HumanMessage(content=message.content))
     
-    # Get best design example based on full conversation
-    designs = await design_rag.query_similar_designs(
-        [msg.content for msg in conversation_history],
-        num_examples=1
-    )
+    # Process message through the graph
+    result = await graph.ainvoke(state)
+    print("Here's the result: ", result)
     
-    # Combine analysis with designs
-    response = f"{analysis.content}\n\nHere is the best match from the zen garden:\n\n{designs}"
+    # Update state with the result
+    state["messages"].extend(result["messages"])
     
-    # Add assistant's response to history
-    conversation_history.append(SystemMessage(content=response))
+    # Extract the last assistant message for display
+    last_message = result["messages"][-1].content
     
     # Send response to user
-    await cl.Message(content=response).send()
+    await cl.Message(content=last_message).send()
 
 if __name__ == "__main__":
-    cl.run() 
+    cl.run()

src/data/designs/001/metadata.json

@@ -2,19 +2,45 @@
   "id": "001",
   "url": "https://www.csszengarden.com/001",
   "css_url": "https://www.csszengarden.com/001/001.css",
-  "description": "The Zen Garden design exemplifies a serene and elegant layout featuring muted color tones and delicate floral watermark accents, reflecting a harmonious balance between text and design. The asymmetrical placement and soft gradients complement the main content, while a clean and sophisticated typeface enhances readability, setting a contemplative mood.",
+  "title": "Tranquille",
+  "author": "Dave Shea",
+  "description": {
+    "summary": "A serene web design that combines Eastern aesthetic elements with minimalist layout principles, featuring soft colors and symbolic imagery like lotus flowers and a traditional torii gate.",
+    "visual_style": "The design employs a calm, light aesthetic with subtle watercolor-like backgrounds and symbolic Eastern elements creating a balanced, harmonious composition.",
+    "emotional_impact": "The visual elements evoke tranquility and contemplation through the use of soft colors, ample white space, and delicate natural imagery.",
+    "compositional_elements": "The layout is structured with a central content area flanked by decorative side elements, creating a framed, balanced composition with clear visual hierarchy."
+  },
+  "artistic_context": {
+    "style_influences": "Japanese minimalism, traditional Eastern art, watercolor painting techniques",
+    "visual_metaphors": "Serenity, balance, enlightenment, natural harmony"
+  },
   "categories": [
-    "web aesthetics",
-    "minimalist design",
-    "zen aesthetics",
-    "typography focus",
-    "serene theme"
+    "minimalist",
+    "eastern-inspired",
+    "elegant",
+    "structured",
+    "harmonious",
+    "zen-aesthetic"
   ],
   "visual_characteristics": [
-    "muted color palette",
-    "asymmetrical layout",
-    "floral accents",
-    "elegant typography",
-    "soft gradients"
-  ]
+    "pastel-palette",
+    "symbolic-imagery",
+    "balanced-composition",
+    "negative-space",
+    "typographic-hierarchy",
+    "watercolor-effects"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "balance",
+      "harmony",
+      "contrast",
+      "hierarchy"
+    ],
+    "visual_techniques": [
+      "framing",
+      "symbolic imagery",
+      "tonal gradation"
+    ]
+  }
 }

src/data/designs/001/style.css

@@ -1,207 +0,0 @@
-/* css Zen Garden default style - 'Tranquille' by Dave Shea - http://www.mezzoblue.com/ */
-/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */
-/* All associated graphics copyright 2003, Dave Shea */
-/* Added: May 7th, 2003 */
-
-
-/* IMPORTANT */
-/* This design is not a template. You may not reproduce it elsewhere without the 
-   designer's written permission. However, feel free to study the CSS and use 
-   techniques you learn from it elsewhere. */
-
-
-/* The Zen Garden default was the first I put together, and almost didn't make the cut. I briefly flirted with using
-    'Salmon Cream Cheese' as the main style for the Garden, but switched back to this one before launch.
-
-    All graphics in this design were illustrated by me in Photoshop. Google Image Search provided inspiration for
-    some of the elements. I did a bit of research on Kanji to come up with the characters on the top left. Anyone who
-    can read that will most likely tell you it makes no sense, but the best I could do was putting together the
-    characters for 'beginning' 'complete' and 'skill' to roughly say something like 'we're breaking fresh ground.'
-
-    It's a stretch. */
-
-
-/* basic elements */
-html {
-	margin: 0;
-	padding: 0;
-	}
-body { 
-	font: 75% georgia, sans-serif;
-	line-height: 1.88889;
-	color: #555753; 
-	background: #fff url(blossoms.jpg) no-repeat bottom right; 
-	margin: 0; 
-	padding: 0;
-	}
-p { 
-	margin-top: 0; 
-	text-align: justify;
-	}
-h3 { 
-	font: italic normal 1.4em georgia, sans-serif;
-	letter-spacing: 1px; 
-	margin-bottom: 0; 
-	color: #7D775C;
-	}
-a:link { 
-	font-weight: bold; 
-	text-decoration: none; 
-	color: #B7A5DF;
-	}
-a:visited { 
-	font-weight: bold; 
-	text-decoration: none; 
-	color: #D4CDDC;
-	}
-a:hover, a:focus, a:active { 
-	text-decoration: underline; 
-	color: #9685BA;
-	}
-abbr {
-	border-bottom: none;
-	}
-
-
-/* specific divs */
-.page-wrapper { 
-	background: url(zen-bg.jpg) no-repeat top left; 
-	padding: 0 175px 0 110px;  
-	margin: 0; 
-	position: relative;
-	}
-
-.intro { 
-	min-width: 470px;
-	width: 100%;
-	}
-
-header h1 { 
-	background: transparent url(h1.gif) no-repeat top left;
-	margin-top: 10px;
-	display: block;
-	width: 219px;
-	height: 87px;
-	float: left;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-header h2 { 
-	background: transparent url(h2.gif) no-repeat top left; 
-	margin-top: 58px; 
-	margin-bottom: 40px; 
-	width: 200px; 
-	height: 18px; 
-	float: right;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-header {
-	padding-top: 20px;
-	height: 87px;
-}
-
-.summary {
-	clear: both; 
-	margin: 20px 20px 20px 10px; 
-	width: 160px; 
-	float: left;
-	}
-.summary p {
-	font: italic 1.1em/2.2 georgia; 
-	text-align: center;
-	}
-
-.preamble {
-	clear: right; 
-	padding: 0px 10px 0 10px;
-	}
-.supporting {	
-	padding-left: 10px; 
-	margin-bottom: 40px;
-	}
-
-footer { 
-	text-align: center; 
-	}
-footer a:link, footer a:visited { 
-	margin-right: 20px; 
-	}
-
-.sidebar {
-	margin-left: 600px; 
-	position: absolute; 
-	top: 0; 
-	right: 0;
-	}
-.sidebar .wrapper { 
-	font: 10px verdana, sans-serif; 
-	background: transparent url(paper-bg.jpg) top left repeat-y; 
-	padding: 10px; 
-	margin-top: 150px; 
-	width: 130px; 
-	}
-.sidebar h3.select { 
-	background: transparent url(h3.gif) no-repeat top left; 
-	margin: 10px 0 5px 0; 
-	width: 97px; 
-	height: 16px; 
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar h3.archives { 
-	background: transparent url(h5.gif) no-repeat top left; 
-	margin: 25px 0 5px 0; 
-	width:57px; 
-	height: 14px; 
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar h3.resources { 
-	background: transparent url(h6.gif) no-repeat top left; 
-	margin: 25px 0 5px 0; 
-	width:63px; 
-	height: 10px; 
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-
-
-.sidebar ul {
-	margin: 0;
-	padding: 0;
-	}
-.sidebar li {
-	line-height: 1.3em; 
-	background: transparent url(cr1.gif) no-repeat top center; 
-	display: block; 
-	padding-top: 5px; 
-	margin-bottom: 5px;
-	list-style-type: none;
-	}
-.sidebar li a:link {
-	color: #988F5E;
-	}
-.sidebar li a:visited {
-	color: #B3AE94;
-	}
-
-
-.extra1 {
-	background: transparent url(cr2.gif) top left no-repeat; 
-	position: absolute; 
-	top: 40px; 
-	right: 0; 
-	width: 148px; 
-	height: 110px;
-	}

src/data/designs/002/metadata.json

@@ -2,17 +2,45 @@
   "id": "002",
   "url": "https://www.csszengarden.com/002",
   "css_url": "https://www.csszengarden.com/002/002.css",
-  "description": "The design embodies a serene and focused aesthetic with a soft, warm color scheme and straightforward typography. A prominent header creates an inviting entry point, while the balanced layout effectively organizes the content. Subtle shadows and borders provide depth, enhancing visual appeal without overwhelming the viewer.",
+  "title": "Salmon Cream Cheese",
+  "author": "Dave Shea",
+  "description": {
+    "summary": "A serene, minimalist web design featuring a soft peach color palette with an Eastern aesthetic influence, centered around a garden photograph that serves as a focal point.",
+    "visual_style": "The design employs a clean, structured layout with a delicate balance between textual content and visual elements, creating a sense of tranquility through organized simplicity.",
+    "emotional_impact": "The warm peachy tones combined with the garden imagery evoke feelings of calm, harmony, and natural beauty, reinforcing the zen philosophy suggested by the design.",
+    "compositional_elements": "A clear vertical hierarchy divides the page into distinct functional zones, with a prominent header, a central showcase area featuring natural imagery, and an organized content section with well-defined typographic rhythm."
+  },
+  "artistic_context": {
+    "style_influences": "Eastern minimalism, Japanese design principles, web-centric modernism",
+    "visual_metaphors": "Garden as structure, simplicity as clarity, natural harmony as design philosophy"
+  },
   "categories": [
-    "Web Design",
-    "Minimalism",
-    "Typography",
-    "Navigation"
+    "minimalist",
+    "zen-inspired",
+    "structured",
+    "monochromatic",
+    "educational",
+    "grid-based"
   ],
   "visual_characteristics": [
-    "Warm color palette",
-    "Minimalistic layout",
-    "Simplicity",
-    "Balanced whitespace"
-  ]
+    "soft-peach palette",
+    "hierarchical typography",
+    "clean whitespace",
+    "natural photography",
+    "horizontal sectioning",
+    "muted contrast"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "balance",
+      "harmony",
+      "simplicity",
+      "hierarchy"
+    ],
+    "visual_techniques": [
+      "color monochrome",
+      "structured layout",
+      "typographic contrast"
+    ]
+  }
 }

src/data/designs/002/style.css

@@ -1,225 +0,0 @@
-/* css Zen Garden submission 002 - 'Salmon Cream Cheese' by Dave Shea - http://www.mezzoblue.com/ */
-/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
-/* All associated graphics copyright 2003, Dave Shea */
-/* Added: May 7th, 2003 */
-
-
-/* IMPORTANT */
-/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
-/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
-/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
-
-
-/* If you're familiar with the life cycle of salmon, you'll know that at the end of their lives they fight their way upstream to
-    the rivers where they were born, to spawn and then die. Growing up close to one of these so-called 'salmon runs', I
-    once had a class field trip to the river for the afternoon to learn about the process. The funny thing about a bunch of
-    dead salmon is that they stink. Quite bad. The second worst memory of that day was the smell of the fish.
-
-    The worst memory of the day was opening my lunch to find my considerate mother had packed bagels. With, as you
-    have guessed by now, salmon cream cheese. I rarely hear the word 'salmon' anymore without the 'cream cheese'
-    playing in my head as an afterthought. Hence, this style is Salmon Cream Cheese. */
-
-
-/* basic elements */
-body {
-	font: 11px/14px verdana, sans-serif;
-	color: #AD7C77;
-	background: #FFD7C4 url(/002/bg1.gif) top left repeat-x;
-	padding: 65px 0px 0px 224px;
-	margin: 0px;
-	}
-p {
-	font: 11px/14px verdana, sans-serif;
-	text-align: justify;
-	margin-top: 0px;
-	}
-h3 {
-	font: bold 16px 'arial narrow', sans-serif;
-	text-transform: lowercase;
-	margin-bottom: 0px;
-	}
-abbr {
-	border-bottom: dotted 1px #B27F66;
-	}
-a:link {
-	font-weight: bold;
-	text-decoration: none;
-	color: #E98376;
-	}
-a:visited {
-	font-weight: bold;
-	text-decoration: none;
-	color: #AD7C77;
-	}
-a:active, a:hover {
-	text-decoration: underline;
-	}
-
-
-/* specific divs */
-
-
-/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
-header {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 770px;
-	}
-header h1 {
-	background: transparent url(/002/h1.gif) no-repeat top left;
-	width: 258px;
-	height: 61px;
-	float: left;
-	margin: 1px 0px 0px 3px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-header h2 {
-	background: transparent url(/002/h2.gif) no-repeat top left;
-	width: 206px;
-	height: 28px;
-	float: right;
-	margin: 22px 15px 0px 0px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-
-/* sets up our floating area on the right. Kind of a hack, since there's a physical separation between
-	two divs, filled in by tricky margins and compensated for with tricky padding, but it seems to hold up okay. */
-.intro {
-	background: #FFC5A9 url(/002/bg2.gif) top left repeat-x;
-	}
-.preamble {
-	padding: 0px 40px 0px 40px;
-	}
-.preamble p:nth-child(4) {
-	margin-bottom: 0px;
-	}
-.supporting {
-	background-color: #FFC5A9;
-	margin: 0px;
-	padding: 0px 40px 0px 40px;
-	}
-.supporting .explanation h3 {
-	margin-top: 0px;
-	padding-top: 20px;
-	}
-
-.summary {
-	padding-top: 47px;
-	}
-
-.summary p:first-child {
-	width: 430px;
-	height: 195px;
-	background: transparent url(/002/splash.jpg) top left no-repeat;
-	padding: 182px 0px 0px 10px;
-	position: absolute;
-	top: 93px;
-	left: 244px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.summary p:last-child {
-	font-size: 9px;
-	line-height: 22px;
-	text-align: left;
-	color: #B27F66;
-	background-color: #FFD7C4;
-	display: block;
-	border: solid 1px #FFBEA1;
-	padding: 40px 15px 0px 419px;
-	margin: 0px 10px 0px 40px;
-	height: 140px;
-	}
-.summary p:last-child a:link {	
-	color: #B27F66;
-	}
-
-footer {
-	text-align: right;
-	border-top: solid 1px #FFCDB5;
-	padding-top: 10px;
-	}
-footer a:link, footer a:visited {
-	padding: 2px 6px 2px 6px;
-	}
-footer a:hover {
-	background-color: #FFD7BF;
-	text-decoration: none;
-	}
-
-
-.sidebar {
-	background: transparent url(/002/cr1.gif) bottom right no-repeat;
-	padding-bottom: 76px;
-	position: absolute;
-	top: 65px;
-	left: 0px;
-	}
-.sidebar .wrapper {
-	padding: 40px 0px 10px 0px;
-	width: 200px;
-	}
-.sidebar .wrapper h3.select {
-	background: transparent url(/002/h3.gif) no-repeat top left;
-	width: 195px;
-	height: 21px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar .wrapper h3.favorites{
-	background: transparent url(/002/h4.gif) no-repeat top left;
-	width: 195px;
-	height: 21px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar .wrapper h3.archives{
-	background: transparent url(/002/h5.gif) no-repeat top left;
-	width: 195px;
-	height: 21px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar .wrapper h3.resources{
-	background: transparent url(/002/h6.gif) no-repeat top left;
-	width: 195px;
-	height: 21px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar .iL, .sidebar li {
-	font-size:	10px;
-	line-height: 2.5ex;
-	display: block;
-	padding: 2px 0px 0px 25px;
-	margin-bottom: 5px;
-	}
-.sidebar .zen-resources li {
-	margin-bottom: 0px;
-	}
-
-.sidebar ul {
-	margin: 0px;
-	padding: 0px;
-	}
-
-.sidebar li {
-	list-style-type: none;
-	}

src/data/designs/003/metadata.json

@@ -2,19 +2,45 @@
   "id": "003",
   "url": "https://www.csszengarden.com/003",
   "css_url": "https://www.csszengarden.com/003/003.css",
-  "description": "This design features a serene and calming aesthetic, employing a monochromatic blue-gray color palette that evokes a sense of tranquility. The layout is structured and organized, with a notable emphasis on clean typography and spaciousness. Each section is clearly delineated, contributing to an overall coherent and harmonious visual experience, while the soft textures in the background enhance the serene mood.",
+  "title": "Stormweather",
+  "author": "Dave Shea",
+  "description": {
+    "summary": "A serene, minimalist web design with a blue-gray color scheme featuring a structured layout with photographic elements and clean typography, creating a sense of calm and order.",
+    "visual_style": "The design employs a zen-inspired aesthetic with ample white space, framed photographic thumbnails, and carefully structured text blocks within a soothing color environment.",
+    "emotional_impact": "The soft color palette, spacious layout, and nature imagery evoke tranquility and contemplation, reinforced by the balanced typography and gentle visual hierarchy.",
+    "compositional_elements": "Three equally-sized photographic thumbnails serve as focal points above neatly organized text columns, all contained within a subtle blue-tinted frame that creates unified visual harmony."
+  },
+  "artistic_context": {
+    "style_influences": "Minimalism, Japanese aesthetic principles, modernist typography, digital photography",
+    "visual_metaphors": "Garden path, mist, water reflections, journey, enlightenment"
+  },
   "categories": [
-    "minimalism",
-    "typography",
-    "print design",
-    "web interface",
-    "aesthetic design"
+    "minimalist",
+    "structured",
+    "grid-based",
+    "photographic",
+    "serene",
+    "monochromatic"
   ],
   "visual_characteristics": [
-    "monochromatic palette",
-    "serene mood",
-    "structured layout",
-    "clean typography",
-    "spaciousness"
-  ]
+    "blue-gray palette",
+    "framed imagery",
+    "white space",
+    "photographic elements",
+    "structured columns",
+    "subtle texture"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "balance",
+      "hierarchy",
+      "unity",
+      "contrast"
+    ],
+    "visual_techniques": [
+      "framing",
+      "grid layout",
+      "tonal harmony"
+    ]
+  }
 }

src/data/designs/003/style.css

@@ -1,228 +0,0 @@
-/* css Zen Garden submission 003 - 'Stormweather' by Dave Shea - http://www.mezzoblue.com/ */
-/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
-/* All associated graphics copyright 2003, Dave Shea */
-/* Added: May 7th, 2003 */
-
-
-/* IMPORTANT */
-/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
-/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
-/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
-
-
-/* Credit to Phillipe Wittenbergh at http://www.l-c-n.com/ for Mac testing */
-
-/* The photos in this design come from my digital library. All were taken in Vancouver, BC. The car is on the
-    Granville St. Bridge, the leaves are West 6th Ave, and the snow/tree is West 10th Ave. Guess which
-    part of town I live in...
-
-    I'm still rather fond of this design. I'm glad Phillipe was able to iron out the various CSS bugs */
-
-
-/* basic elements */
-body {
-	font: 11px/15px georgia, serif;
-	text-align: center;
-	color: #fff;
-	background: #748A9B url(bg2.gif) 0 0 repeat-y;
-	margin: 0px;
-	}
-p {
-	/*font: 11px/15px georgia, serif;*/
-	text-align: justify;
-	margin-top: 0;
-	}
-h3 {
-	font: bold 14px georgia, serif;
-	text-transform: lowercase;
-	margin-bottom: 0;
-	}
-abbr { 
-	border-bottom: dotted 1px #fff; 
-	}
-a:link { 
-	font-weight: bold; 
-	text-decoration: underline; 
-	color: #A7D3F6;
-	}
-a:visited {
-	font-weight: bold;
-	text-decoration: underline;
-	color: #D1E9FC;
-	}
-a:active, a:hover {
-	text-decoration: underline;
-	color: #fff;
-	}
-
-
-/* specific divs */
-
-.page-wrapper {
-	background: #849AA9 url(bg1.gif) top left repeat-y;
-	text-align: left;
-	width: 750px; margin: 0px auto;
-	position: relative;
-	} 
-.supporting {
-	/*position: relative; top: -120px;*/
-	padding: 0px 40px 0px 0;
-	/*clear:right;*/
-	float:right;
-	width:430px;
-	}
-
-/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
-header h1 {
-	background: transparent url(h1.jpg) no-repeat top left;
-	width: 750px;
-	height: 142px;
-	margin: 0px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-header h2 {
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-
-.summary { 
-	width: 685px; 
-	margin: 0px auto; 
-	position: relative; 
-	top: -50px;
-	}
-html>body .summary {
-	margin-top:-50px; 
-	top: 0;
-	}
-.summary p:first-child {
-	font-size: 1px;
-	color: white;
-	background: transparent url(panel1-2.jpg) no-repeat top left;
-	width: 449px; 
-	padding: 10px 0px 0px 5px; float: left; 
-	height: 268px; 
-	voice-family: "\"}\""; 
-	voice-family:inherit;
-	height: 258px; 
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.summary p:last-child {
-	color: #7593A7;
-	background: transparent url(panel3.jpg) no-repeat 0 0;
-	padding: 90px 45px 0px 45px;
-	float: right; 
-	width: 214px;
-	height: 338px; 
-	voice-family: "\"}\""; 
-	voice-family:inherit;
-	width: 124px;
-	height: 178px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.summary p:last-child a:link, .summary p:last-child a:visited {
-	color: #7593A7;
-	}
-.summary p:last-child a:hover {
-	color: #85ABC5;
-	}
-
-.preamble { 
-	/*position: relative; top: -120px; */
-	padding: 0px 0px 70px 33px; 
-	margin: 0px 0 20px 0px; 
-	width: 210px;
-	float: left;
-	background: transparent url(tag.gif) 50% 100% no-repeat;
-	}
-.preamble h2 { 
-	font: bold 14px georgia, serif; 
-	margin-top: 0px;
-	padding: 0px;
-	}
-.preamble p {
-	font: italic 12px/20px georgia, serif;
-	}
-
-footer {
-	text-align: right;
-	clear: both;
-	}
-footer a {
-	font-weight: normal;
-	text-decoration: none;
-	margin-right: 10px;
-	border: solid 1px #859BAA;
-	padding: 6px;
-	}
-footer a:hover {
-	color: #7E868D;
-	background-color: #fff;
-	border-right: solid 1px #6F818D;
-	border-bottom: solid 1px #6F818D;
-	}
-
-.design-selection {
-	position: absolute;
-	top: 15px;
-	left: 0px;
-	padding-left: 350px;
-	margin: 0px auto;
-	width: 730px;
-	voice-family: "\"}\"";
-	voice-family:inherit;
-	width: 380px;
-	}
-.sidebar h3 {
-	display: inline;
-	margin-right: 5px;
-	}
-
-.sidebar ul {
-	margin: 0px;
-	padding: 0px;
-	}
-.sidebar li {
-	font-size: 10px;
-	margin-right: 5px;
-	list-style-type: none;
-	display: inline;
-	}
-.sidebar li a {
-	font-weight: normal;
-	}
-
-.design-selection h3 {
-	font: bold 11px georgia;
-	letter-spacing: -1px;
-	}
-.design-selection li {
-	font: 11px/12px georgia;
-	letter-spacing: -1px;
-	color: #758C9B;
-	}
-.design-selection li a:link, .design-selection li a:visited {
-	font-weight: normal;
-	color: #fff;
-	text-decoration: none;
-	}
-.design-selection li a:hover {
-	color: #D1E9FC;
-	text-decoration: underline;
-	}
-
-.zen-resources, .design-archives, #lfavorites {
-	padding: 0px 40px 0px 266px;
-	clear: both;
-	/*position: relative; top: -20px;*/
-	}

src/data/designs/004/metadata.json

@@ -2,19 +2,45 @@
   "id": "004",
   "url": "https://www.csszengarden.com/004",
   "css_url": "https://www.csszengarden.com/004/004.css",
-  "description": "The design features a structured layout with a calming blue and white color scheme that conveys clarity and modernity. The large, fluid background image adds a touch of elegance, while the clear typography and organized sections contribute to the aesthetic appeal. Highlighted text links in green and orange draw attention, creating a dynamic yet harmonious look.",
+  "title": "css Zen Garden submission 004 - 'arch4.20'",
+  "author": "Dave Shea",
+  "description": {
+    "summary": "A structured web design demonstration page showcasing CSS capabilities with a clean, professional layout and architectural imagery header",
+    "visual_style": "The design employs a functional, minimalist approach with clear typographic hierarchy and a deep blue-teal color scheme that creates a professional, academic atmosphere",
+    "emotional_impact": "The design evokes a sense of organized tranquility and technical authority through its structured layout and cool color palette",
+    "compositional_elements": "The page features a horizontal architectural header image, a prominent title area, and a multi-column content structure with clear section divisions and sidebar navigation"
+  },
+  "artistic_context": {
+    "style_influences": "Web standards movement, functional minimalism, academic documentation design",
+    "visual_metaphors": "Architecture as structure, garden as growth and cultivation, path/road as journey"
+  },
   "categories": [
-    "Modern",
-    "Web Design",
-    "Instructional",
-    "Clean",
-    "Professional"
+    "functional",
+    "minimalist",
+    "structured",
+    "educational",
+    "grid-based",
+    "technical"
   ],
   "visual_characteristics": [
-    "Blue and White Palette",
-    "Fluid Background Image",
-    "Clear Typography",
-    "Highlighted Text Links",
-    "Structured Layout"
-  ]
+    "blue-teal color scheme",
+    "architectural header imagery",
+    "hierarchical typography",
+    "clear section divisions",
+    "sidebar navigation",
+    "multi-column layout"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "hierarchy",
+      "contrast",
+      "readability",
+      "organization"
+    ],
+    "visual_techniques": [
+      "color blocking",
+      "typographic scaling",
+      "white space management"
+    ]
+  }
 }

src/data/designs/004/style.css

@@ -1,192 +0,0 @@
-/* css Zen Garden submission 004 - 'arch4.20' by Dave Shea - http://www.mezzoblue.com/ */
-/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
-/* All associated graphics copyright 2003, Dave Shea */
-/* Added: May 7th, 2003 */
-
-
-/* IMPORTANT */
-/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
-/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
-/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
-
-
-/* The photo was taken inside the Vancouver Public Library. It has been mentioned the colours have a vaguely
-    MetaFilter-like feel. I suppose they do... Unintentional. */
-
-
-/* basic elements */
-body {
-	font: 11px tahoma, verdana, sans-serif;
-	color: #fff;
-	background: #005D87 url(bg1.gif) top left repeat-x;
-	margin: 0px;
-	}
-p {
-	font: 11px/14px verdana, sans-serif;
-	text-align: justify;
-	margin-top: 0px;
-	}
-h3 {
-	font: bold 13px verdana, sans-serif;
-	margin-bottom: 0px;
-	}
-abbr {
-	border-bottom: dotted 1px #fff;
-	}
-a:link {
-	font-weight: bold;
-	text-decoration: none;
-	color: #8AF44F;
-	}
-a:visited {
-	font-weight: bold;
-	text-decoration: none;
-	color: #55AB26;
-	}
-a:active, a:hover {
-	color: #8AF44F;
-	text-decoration: underline;
-	}
-
-/* specific divs */
-.preamble {
-	padding: 0px 180px 0px 25px;
-	}
-.supporting {
-	padding: 0px 180px 0px 25px;
-	}
-
-header {
-	width: 100%;
-	height: 217px;
-	background: #fff url(cr1.jpg) top left no-repeat;
-	margin-top: 47px;
-	}
-header h1 {
-	background: transparent url(h1.gif) no-repeat top left;
-	width: 296px;
-	height: 46px;
-	position: absolute;
-	top: 185px;
-	right: 10px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-header h2 {
-	background: transparent url(h2.gif) no-repeat top left;
-	width: 229px;
-	height: 16px;
-	position: absolute;
-	top: 230px;
-	right: 12px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-
-.summary p:first-child {
-	font: 11px tahoma, verdana, sans-serif;
-	line-height: 18px;
-	color: #7799AC;
-	background-color: #fff;
-	padding: 2px;
-	position: absolute;
-	top: 65px;
-	right: 10px;
-	width: 150px;
-	}
-.summary p:last-child {
-	font: 10px tahoma, verdana, sans-serif;
-	color: #7799AC;
-	position: absolute;
-	top: 32px;
-	right: 5px;
-	}
-.summary p:last-child a:link, .summary p:last-child a:visited {
-	color: #7799AC;
-	text-decoration: underline;
-	}
-.summary p:last-child a:active, .summary p:last-child a:hover {
-	color: #8AF44F;
-	}
-
-.sidebar{
-	font: 11px tahoma, verdana, sans-serif;
-	line-height: 18px;
-	color: #7799AC;
-	position: absolute;
-	top: 285px;
-	right: 0px;
-	width: 150px;
-	}
-.sidebar .wrapper h3.select {
-	background: transparent url(h3.gif) no-repeat top left;
-	width: 157px;
-	height: 14px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar .wrapper h3.favorites{
-	background: transparent url(h5.gif) no-repeat top left;
-	width: 157px;
-	height: 14px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar .wrapper h3.archives{
-	background: transparent url(h6.gif) no-repeat top left;
-	width: 157px;
-	height: 14px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar .wrapper h3.resources{
-	background: transparent url(h4.gif) no-repeat top left;
-	width: 157px;
-	height: 14px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar li {
-	font-size: 10px;
-	line-height: 2.5ex;
-	display: block;
-	padding: 2px 10px 0px 0px;
-	margin-bottom: 5px;
-	}
-.sidebar .zen-resources li {
-	margin-bottom: 0px;
-	}
-
-.sidebar ul {
-	margin: 0px;
-	padding: 0px;
-	}
-
-.sidebar li {
-	list-style-type: none;
-	}
-
-
-footer {
-	text-align: right; border-top: solid 1px #1E5E82;
-	padding-top: 10px;
-	}
-footer a:link, footer a:visited {
-	padding: 2px 6px 2px 6px;
-	}
-footer a:hover {
-	background: transparent url(bg2.gif) top left repeat-x;
-	text-decoration: none;
-	}

src/data/designs/005/metadata.json

@@ -2,17 +2,45 @@
   "id": "005",
   "url": "https://www.csszengarden.com/005",
   "css_url": "https://www.csszengarden.com/005/005.css",
-  "description": "This design features a creative and eclectic layout with an abstract artistic background showcasing vintage red and black tones. The main heading is presented in a graceful cursive font, adding a touch of elegance. The layout uses a mix of serif and sans-serif fonts, creating a dynamic textual experience. The asymmetrical composition and overlapping elements demonstrate a bold, experimental design approach.",
+  "title": "css Zen Garden submission 005 - 'Blood Lust'",
+  "author": "Dave Shea",
+  "description": {
+    "summary": "A deliberately chaotic yet structured web design featuring an experimental aesthetic with bold red washes against a grid background, integrating calligraphic script with technical typography.",
+    "visual_style": "The design employs a tension between structured technical elements and organic, painterly splashes creating a rebellious yet purposeful aesthetic.",
+    "emotional_impact": "Creates a sense of controlled chaos and artistic rebellion, suggesting both creative freedom and technical discipline.",
+    "compositional_elements": "Navigation elements frame the left side while content flows across the center and right, with dramatic red ink-like splashes overlaying a dotted grid background."
+  },
+  "artistic_context": {
+    "style_influences": "Japanese calligraphy, deconstructivist design, digital grunge aesthetic, modernist typography",
+    "visual_metaphors": "Zen garden as ordered chaos, splashes of ink as creative disruption, grid as structural foundation"
+  },
   "categories": [
-    "abstract",
     "experimental",
-    "vintage",
-    "typography-focused"
+    "deconstructivist",
+    "juxtaposed",
+    "high-contrast",
+    "calligraphic",
+    "grid-based"
   ],
   "visual_characteristics": [
-    "asymmetrical layout",
-    "cursive typography",
-    "red and black color palette",
-    "textured background"
-  ]
+    "red ink splashes",
+    "dotted background grid",
+    "multi-column layout",
+    "script typography",
+    "layered elements",
+    "monospaced text"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "contrast",
+      "hierarchy",
+      "tension",
+      "asymmetry"
+    ],
+    "visual_techniques": [
+      "overlay",
+      "typographic contrast",
+      "negative space"
+    ]
+  }
 }

src/data/designs/005/style.css

@@ -1,220 +0,0 @@
-/* css Zen Garden submission 005 - 'Blood Lust' by Dave Shea - http://www.mezzoblue.com/ */
-/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
-/* All associated graphics copyright 2003, Dave Shea */
-/* Added: May 7th, 2003 */
-
-
-/* IMPORTANT */
-/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
-/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
-/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
-
-
-/* love it or hate it. This one is one of my favourites because I don't generally design this way. It reaches into the past
-    for a vaguely Futurist style, complete with duotone for that screenprint feel, combined with modern GIF 
-    patterned-dithering to really mess with tradition.
-
-    You may find it challenging, silly, visually stimulating, or a mess. I didn't do it for you, I did it for me. */
-
-
-/* basic elements */
-body {
-	font: 12px/13px courier, monospace;
-	color: #000;
-	background-color: #fff;
-	margin: 0px;
-	}
-p {
-	font: 12px/13px courier, monospace;
-	text-align: justify;
-	}
-h3 {
-	font:bold 14px courier, monospace;
-	letter-spacing: 1px;
-	margin-bottom: 0px;
-	color: #000;
-	}
-a:link {
-	font-weight: bold;
-	text-decoration: underline;
-	color: #FF4F3E;
-	}
-a:visited {
-	font-weight: bold;
-	text-decoration: underline;
-	color: #FF4F3E;
-	}
-a:hover, a:active {
-	text-decoration: underline;
-	color: #000;
-	}
-abbr {
-	border-bottom: none;
-	}
-
-
-/* specific divs */
-.page-wrapper {
-	background: #fff url(bloodlust.gif) no-repeat top left;
-	margin: 50px 0px 0px 0px;
-	padding: 150px 0px 0px 200px;
-	}
-
-/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
-header h1 {
-	background: transparent url(h1.gif) no-repeat top left;
-	margin-top: 10px;
-	width: 461px;
-	height: 116px;
-	position: absolute;
-	top: 20px;
-	left: 305px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-header h2 {
-	background: transparent url(h2.gif) no-repeat top left;
-	width: 253px;
-	height: 34px;
-	position: absolute;
-	top: 150px;
-	left: 216px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-
-
-.summary p:first-child {
-	font: 400 18px/16px 'arial black', sans-serif;
-	text-align: right;
-	width: 340px;
-	float: left;
-	margin: 40px 20px 20px 0px;
-	}
-.summary p:last-child {
-	font: 9px verdana, sans-serif;
-	text-align: left;
-	line-height: 24px;
-	width: 295px;
-	position: absolute;
-	top: 20px;
-	left: 25px;
-	}
-.preamble {
-	width: 170px;
-	float: right;
-	margin-top: 50px;
-	clear: left;
-	position: relative;
-	top: -270px;
-	}
-.preamble h3 {
-	font: bold 12pt/10pt 'trebuchet ms', sans-serif;
-	text-align: right;
-	}
-.preamble p {
-	font: bold 10pt/11pt arial, sans-serif;
-	text-align: right;
-	}
-.supporting {
-	clear: left;
-	}
-.explanation h3 {
-	font: bold 18px courier, monospace;
-	}
-.explanation p:nth-child(2) {
-	font: 18px courier, monospace;
-	line-height: 5ex;
-	}
-.explanation p:nth-child(3) {
-	font: 11px/16px courier, monospace;
-	width: 220px;
-	float: left;
-	margin-right: 10px;
-	}
-.explanation p:nth-child(4) {
-	font: 14px/14px courier, monospace;
-	margin-top: 30px;
-	}
-
-.participation h3 {
-	background: transparent url(h3.gif) no-repeat top left;
-	width: 174px;
-	height: 66px;
-	margin: 0px;
-	float: left;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.participation p:nth-child(2):first-line {
-	font: 16px 'arial black', sans-serif;
-	}
-.participation p:nth-child(3) {
-	line-height: 16px;
-	text-align: right;
-	float: left;
-	width: 200px;
-	margin: 0px 5px 15px 0px;
-	}
-.participation p:nth-child(4) {
-	font-family: arial, sans-serif;
-	}
-
-.benefits h3 {
-	background: transparent url(h4.gif) no-repeat top left;
-	width: 107px;
-	height: 26px;
-	margin: 0px;
-	float: left;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-
-
-.requirements h3 {
-	font: bold 18px 'arial black', sans-serif;
-	clear: left;
-	float: right;
-	}
-.requirements p:nth-child(2) {
-	font: bold 11px/16px trebuchet ms, sans-serif;
-	float: left;
-	width: 300px;
-	margin-right: 10px;
-	}
-.requirements p:nth-child(4) {
-	font: 12px/11px arial, sans-serif;
-	}
-
-.sidebar {
-	position: absolute;
-	top: 0px;
-	left: 20px;
-	}
-.sidebar .wrapper {
-	font: 12px courier, monospace;
-	padding: 10px;
-	margin-top: 115px;
-	width: 130px;
-	}
-
-.sidebar li {
-	line-height: 2.5ex;
-	display: block;
-	padding-top: 5px;
-	margin-bottom: 5px;
-	list-style-type: none;
-	}
-
-.sidebar ul {
-	margin: 0px;
-	padding: 0px;
-	}

src/data/designs/006/metadata.json

@@ -2,19 +2,45 @@
   "id": "006",
   "url": "https://www.csszengarden.com/006",
   "css_url": "https://www.csszengarden.com/006/006.css",
-  "description": "The design employs a minimalist and structured layout with a focus on typographic hierarchy and a cohesive color scheme of blue and orange accents. The simple background and strategic use of whitespace enhance readability while guiding the viewer\u2019s attention effectively.",
+  "title": "Wicked Grove",
+  "author": "D. Keith Robinson",
+  "description": {
+    "summary": "A serene web design that blends natural imagery with structured content, creating a harmonious balance between organic and digital elements",
+    "visual_style": "The design employs a tranquil blue gradient background paired with a natural green foliage canopy, creating a zen-like digital environment that invites exploration",
+    "emotional_impact": "Evokes a sense of calm contemplation through the combination of natural imagery and orderly content presentation",
+    "compositional_elements": "Three-column layout with natural imagery framing the top, clear content blocks with distinct typographic hierarchy, and accented navigation elements in vibrant red"
+  },
+  "artistic_context": {
+    "style_influences": "Digital minimalism, natural-digital fusion, information architecture",
+    "visual_metaphors": "Garden as knowledge cultivation, natural canopy as shelter for digital content"
+  },
   "categories": [
-    "minimalism",
-    "typography",
-    "color contrast",
-    "web design inspiration",
-    "clean layout"
+    "nature-inspired",
+    "columnar",
+    "structured",
+    "educational",
+    "minimalist",
+    "gradient-based"
   ],
   "visual_characteristics": [
-    "blue color palette",
-    "structured typography",
-    "use of whitespace",
-    "orange accent highlights",
-    "simple background"
-  ]
+    "blue-gradient background",
+    "green canopy frame",
+    "three-column layout",
+    "high-contrast typography",
+    "color-coded navigation",
+    "bordered content areas"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "contrast",
+      "hierarchy",
+      "balance",
+      "framing"
+    ],
+    "visual_techniques": [
+      "natural framing",
+      "color blocking",
+      "typographic contrast"
+    ]
+  }
 }

src/data/designs/006/style.css

@@ -1,198 +0,0 @@
-/* css Zen Garden submission 006 - 'Wicked Grove' by D. Keith Robinson, http://www.7nights.com/asterisk/ */
-/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
-/* All associated graphics copyright 2003, D. Keith Robinson */
-
-
-/* IMPORTANT */
-/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
-/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
-/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
-
-
-/* basic elements */
-body { 
-	font: 10pt/14pt "Trebuchet MS", sans-serif; 
-	color: #000033; 
-	background: #69f;
-	margin: 0px; 
-	}
-p { 
-	font: 10pt/16pt "Trebuchet MS", sans-serif; 
-	margin-top: 0px; 
-	text-align: justify;
-	}
-h3 {
-	font: bold normal 12pt "Trebuchet MS", sans-serif;
-	letter-spacing: 3px;
-	margin-bottom: 2px;
-	color: #333333;
-	text-align: left;
-	}
-a:link { 
-	font-weight: bold; 
-	text-decoration: none; 
-	color: #FF6600;
-	}
-a:visited { 
-	font-weight: bold; 
-	text-decoration: none; 
-	color: #CC0000;
-	}
-a:hover, a:active { 
-	text-decoration: underline; 
-	color: #FF6600;
-	}
-
-
-/* specific divs */
-.page-wrapper { 
-	background: #9cf url(trees.jpg) no-repeat left top; 
-	padding: 200px 0px 0px 0px;  
-	margin: 0px auto; 
-	width:800px;
-	border-left: 2px dashed #fff;
-	border-right: 2px dashed #fff;
-	}
-
-header { 
-	margin-bottom: 10px;
-	}
-
-/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
-header h1 { 
-	background: transparent; 
-	margin-top: -180px; 
-	width: 500px; 
-	height: 87px; 
-	float: left;
-	color:#fff;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-header h2 { 
-	background: transparent url(tag.gif) no-repeat top left; 
-	width: 300px; 
-	margin-top:-60px;
-	margin-left:-190px;
-	height: 100px; 
-	float: right;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-
-.summary {
-	width: 130px;
-	float: left;
-	padding:5px;
-	margin-right:15px;
-	background:#0099FF;
-	
-	}
-.summary p {
-	font: bold 8pt/12pt verdana, sans-serif; 
-	text-align:right;
-	color:#fff;
-	}
-	
-.summary a:link { 
-	font-weight: bold; 
-	text-decoration: none; 
-	color: #003;
-	}
-.summary a:visited { 
-	font-weight: bold; 
-	text-decoration: none; 
-	color: #006;
-	}
-.summary a:hover, .summary a:active { 
-	text-decoration: underline; 
-	color: #FF6600;
-	}
-	
-.preamble, #supporting text, .explanation, .participation, .benefits, .requirements {
-	padding: 0px 170px 0px 30px;
-}
-
-footer { 
-	text-align: center; 
-	}
-footer a:link, footer a:visited { 
-	margin-right: 20px; 
-	}
-
-.sidebar {
-    background: transparent url(menu.gif) top left no-repeat; 
-	position: absolute;
-	top: 0px;
-	padding: 15px; 
-	margin-top: 200px; 
-	margin-left: 650px;
-	width: 130px; 
-	}
-	
-.sidebar .wrapper { 
-	font: 10px verdana, sans-serif;
-	padding-top:35px; 
-	}
-.sidebar h3.select { 
-	background: transparent url(select.gif) top left no-repeat;  
-	width: 130px; 
-	height: 25px; 
-	margin-left:-8px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar h3.archives { 
-	background: transparent url(archives.gif) top left no-repeat;  
-	width: 130px; 
-	height: 25px; 
-	margin-left:-8px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar h3.resources { 
-	background: transparent url(resources.gif) top left no-repeat;  
-	width: 130px; 
-	height: 25px; 
-	margin-left:-8px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-
-.sidebar ul {
-	margin: 0px;
-	padding: 0px;
-	}
-.sidebar li {
-	line-height: 2.5ex; 
-	background: transparent; 
-	display: block; 
-	padding-top: 5px; 
-	margin-bottom: 5px;
-	list-style-type: none;
-	}
-.sidebar li a:link { 
-	color: #FF3300;
-	}
-.sidebar li a:visited {
-	color: #FF0000;
-	}
-
-.extra1 { 
-	background: transparent;
-	position: absolute; 
-	top: 40px; 
-	right: 0px; 
-	width: 148px; 
-	height: 110px; 
-	}

src/data/designs/007/metadata.json

@@ -2,19 +2,45 @@
   "id": "007",
   "url": "https://www.csszengarden.com/007",
   "css_url": "https://www.csszengarden.com/007/007.css",
-  "description": "This zen-themed design artfully combines minimalist visuals with grayscale imagery and bold typography, evoking a calm, introspective mood. The subtle overlay of an elegant black-and-white nature image with flowing lines adds depth, while the use of orange accents in the text enhances readability and attention. The overall layout is spacious and neatly sectioned, contributing to an organized and serene visual experience.",
+  "title": "deep thought",
+  "author": "Jason Estes",
+  "description": {
+    "summary": "A minimalist, elegant web design that combines Eastern aesthetic influences with a monochromatic color scheme, creating a serene digital space that emphasizes typographic hierarchy and thoughtful negative space.",
+    "visual_style": "The design employs a Zen-inspired aesthetic with calligraphic headings, strategic placement of red accent elements, and a grayscale background featuring subtle water imagery that creates depth and tranquility.",
+    "emotional_impact": "The composition evokes a sense of calm contemplation through its balanced structure, measured spacing, and contrast between dark background and light typography.",
+    "compositional_elements": "Vertical navigation strips frame the content, while decorative Asian-inspired red emblems serve as visual anchors, creating rhythm across the structured layout."
+  },
+  "artistic_context": {
+    "style_influences": "Japanese minimalism, calligraphic traditions, monastic simplicity",
+    "visual_metaphors": "Water ripples as transformation, stone path as journey, emptiness as potential"
+  },
   "categories": [
-    "Zen",
-    "Minimalist",
-    "Typography",
-    "Nature",
-    "Grayscale"
+    "minimalist",
+    "eastern-inspired",
+    "monochromatic",
+    "typographic",
+    "structured",
+    "contemplative"
   ],
   "visual_characteristics": [
-    "Minimalist layout",
-    "Grayscale theme",
-    "Highlight color accents",
-    "Nature-inspired imagery",
-    "Bold typography"
-  ]
+    "vertical-alignment",
+    "high-contrast",
+    "red-accents",
+    "water-imagery",
+    "calligraphic-headings",
+    "grid-based"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "balance",
+      "contrast",
+      "rhythm",
+      "hierarchy"
+    ],
+    "visual_techniques": [
+      "negative space",
+      "tonal contrast",
+      "symbolic accents"
+    ]
+  }
 }

src/data/designs/007/style.css

@@ -1,276 +0,0 @@
-/* css Zen Garden submission 007 - 'deep thought' by Jason Estes, http://www.bewb.org/ */
-/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
-/* All associated graphics copyright 2003, Jason Estes */
-
-
-/* IMPORTANT */
-/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
-/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
-/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
-
-
-/* basic elements */
-body#css-zen-garden { 
-	background-color:#424242;
-	font-size:75%;
-	font-family:arial, verdana, sans-serif;
-	margin:0;
-	padding:0;
-	color:#fff;
-	background-image:url(background.jpg);
-	background-repeat:no-repeat;
-	background-position:150px 50px;
-	}
-
-a:link { 
-	color:#FF9638;
-		background-color:transparent;
-	}
-a:visited { 
-		color:#FF9638;
-		background-color:transparent;
-	}
-a:hover, a:active { 
-		color:#FF9638;
-		background-color:transparent;
-	}
-/* specific divs */
-
-
-/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
-header h1 {
-	margin:10px 15px;
-	background-image:url(logo.gif);
-	height:83px; 
-	background-color:transparent;
-	width:480px;
-	background-repeat:no-repeat;
-	background-position:top right;
-	color:#000;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-header h2 { 
-	display:none;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.summary {
-	display:block;
-	}
-.summary p:first-child {
-display:none;
-	}
-.summary p:last-child {
- 	position:absolute;
-	top:0px;
-	left:300px;
-	padding:0;margin:0;
-	}
-.preamble {
-	border-top:1px solid #fff;
-	background-image:url(halfscreen-gray.gif);
-	width:250px;
-	margin-left:30px;
-	position:absolute;
-	top:18px;
-	right:10px;
-		}
-.preamble p{
-	margin:10px;
-	}
-.preamble h3{
-	font-style:oblique;
-	margin:10px;
-	}
-.supporting {
-	margin:350px auto 0 auto;
-	width:90%;
-	}
-.supporting div {
-	/*background-image:url(halfscreen-gray.gif);*/
-	border-top:1px solid #fff;
-	clear:both;
-	}
-
-.supporting p {
-	padding:5px 10px;
-	line-height:150%;
-	}
-.explanation h3{
-	float:left;
-	background-image:url(about.gif);
-	width:46px;
-	height:234px;
-	padding:0;
-	margin:0 10px 0px 0px;
-	border-right:1px solid white;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.explanation p{
-		margin:0px 0px 0px 43px;
-		}
-.supporting div.explanation {
-	margin:20px 10px 0 200px;
-	background:url(about_background.gif) no-repeat 100% 100%;
-	min-height:234px;
-	height:234px;
-	clear:none;
-	}
-.supporting .explanation[id] {
-	height:auto;
-	}
-.participation h3{
-	float:right;
-	background-image:url(participation.gif);
-	width:46px;
-	height:234px;
-	padding:0;
-	margin:0 0px 0px 10px;
-	border-left:1px solid white;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.supporting .participation {
-	margin:20px 200px 0 10px;
-	min-height:234px;
-	height:234px;
-	background:url(participation_back.gif) no-repeat 0 100%;
-	}
-.participation p{
-		margin:0px 43px 0px 0px;
-		}
-.supporting .participation[id] {
-	height:auto;
-	}
-.benefits h3{
-	float:left;
-	background-image:url(benefits.gif);
-	width:46px;
-	height:133px;
-	padding:0;
-	margin:0 10px 0px 0px;
-	border-right:1px solid white;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.benefits p{
-		margin:0px 0px 0px 43px;
-		}
-.supporting .benefits {
-	margin:20px 10px 0 200px;
-	min-height:133px;
-	height:133px;
-	background:url(benefits_back.gif) no-repeat 100% 100%;
-	}
-.supporting .benefits[id] {
-	height:auto;
-	}
-.requirements h3{
-	float:right;
-	background-image:url(Requirements.gif);
-	width:46px;
-	height:234px;
-	padding:0;
-	margin:0 0px 0px 10px;
-	border-left:1px solid white;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.requirements p{
-		margin:0px 43px 0px 0px;
-		}
-.supporting .requirements {
-	margin:20px 200px 30px 10px;
-	min-height:234px;
-	height:234px ;
-	background:url(requirements_back.gif) no-repeat 0 100%;
-	}
-.supporting .requirements[id] {
-	height:auto;
-	}
-.supporting footer { 
-	text-align:center;
-	padding-top:3px;
-	}
-footer a:link, footer a:visited { 
-	font-weight:bold;
-	text-decoration:none;
-	}
-.sidebar {
-	position:absolute;
-	top:98px;
-	left:30px;
-	width:198px;
-	}
-
-.sidebar h3.select { 
-	height:53px;
-	background-image:url(select.gif);
-	margin:0px;
-	padding:0px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar h3.archives { 
-	height:53px;
-	background-image:url(archives.gif);
-	margin:0px;
-	padding:0px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-.sidebar h3.resources { 
-	height:53px;
-	background-image:url(resources.gif);
-	margin:0px;
-	padding:0px;
-
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	}
-
-
-.sidebar ul {
-	margin: 0px;
-	padding: 0px;
-	}
-.sidebar li {
-	display:block;
-	background-image:url(halfscreen-gray.gif);
-	padding:3px;
-	margin:1px 0;
-	list-style-type: none;
-	}
-.sidebar li a:link, .sidebar li a:visited { 
-	color:#fff;
-	background-color:transparent;
-	}
-
-.extra1 { 
-	clear:both;
-	}
-abbr {
-	color:#FF9638;
-	background-color:transparent;
-	border:0;
-	cursor:help;
-	}

src/data/designs/008/metadata.json

@@ -2,19 +2,45 @@
   "id": "008",
   "url": "https://www.csszengarden.com/008",
   "css_url": "https://www.csszengarden.com/008/008.css",
-  "description": "This design features a striking use of vibrant red gradients complemented by an abstract, fiery artwork that creates a dynamic and futuristic aesthetic. The layout is well-structured, showcasing a clear hierarchy with text aligned within well-defined boxes, ensuring readability against the intense background. The typography is bold and modern, enhancing the overall edgy and creative theme of the design.",
+  "title": "RPM",
+  "author": "Bruno Cunha",
+  "description": {
+    "summary": "A bold, high-contrast web design featuring dynamic abstract imagery integrated with structured content blocks. The composition juxtaposes organic, flowing visual elements against rigid information architecture.",
+    "visual_style": "The design employs a striking industrial-digital aesthetic with abstract metallic forms and geometric patterns set against a vivid red background, creating a sense of technological energy.",
+    "emotional_impact": "The intense red palette and sharp angular elements evoke excitement, passion, and creative energy, suggesting innovation and avant-garde sensibilities.",
+    "compositional_elements": "A dramatic header with fractured metallic/glass-like objects occupies the upper portion, while structured content blocks below create an organized grid system that contrasts with the fluid header imagery."
+  },
+  "artistic_context": {
+    "style_influences": "Digital abstract art, techno-industrial design, Y2K-era web aesthetics, deconstructivist typography",
+    "visual_metaphors": "Shattering barriers, digital transformation, creative explosion, structured freedom"
+  },
   "categories": [
-    "abstract design",
-    "futuristic",
-    "vibrant",
-    "creative layout",
-    "typography"
+    "dynamic",
+    "industrial",
+    "high-contrast",
+    "grid-based",
+    "technical",
+    "avant-garde"
   ],
   "visual_characteristics": [
-    "vibrant red gradients",
-    "abstract artwork",
-    "clear text hierarchy",
-    "bold typography",
-    "dynamic aesthetic"
-  ]
+    "vibrant-red",
+    "metallic-textures",
+    "angular-forms",
+    "fractured-imagery",
+    "hierarchical-layout",
+    "boxed-content"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "contrast",
+      "hierarchy",
+      "rhythm",
+      "emphasis"
+    ],
+    "visual_techniques": [
+      "layering",
+      "color blocking",
+      "geometric abstraction"
+    ]
+  }
 }

src/data/designs/008/style.css

@@ -1,113 +0,0 @@
-/* css Zen Garden submission 008 - 'RPM' by Bruno Cunha, http://www.kaosboy.net/ */
-/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
-/* Main image from http://www.karborn.com/FinalV6Old/Series/RPM/RPMImages.htm */
-
-
-/* IMPORTANT */
-/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
-/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
-/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
-
-
-body {
-	background-image:url(bg.jpg);
-	background-color:#fff;
-	font-family:arial, sans serif;
-	font-size:11px;
-	line-height:15px;
-	color:#fff;
-	margin:0px;
-	}
-
-.page-wrapper {
-	margin-left:0px;
-	margin-top:0px;
-	padding:0px;
-	width:684px;
-	z-index:1;
-	}
-
-.intro {
-	width:275px;
-	position:absolute;
-	left:88px;
-	top:902px;
-	z-index:2;
-	}
-
-.supporting {
-	width:450px;
-	position:absolute;
-	left:411px;
-	top:535px;
-	z-index:2;
-	}
-.explanation, .participation, .requirements, .benefits, footer, .summary, .preamble, .design-selection, #lfavorites, .zen-resources, .design-archives {
-	padding:7px;
-	margin:5px;
-	border-left:1px solid #aaa;
-	border-top:1px solid #aaa;
-	border-right:1px solid #333;
-	border-bottom:1px solid #333;
-	background-image:url(transparent.gif);
-	}
-
-.sidebar .wrapper {
-	width:275px;
-	position:absolute;
-	left:88px;
-	top:1244px;
-	z-index:2;
-	}
-
-.extra1 {
-	background-image:url(tunami2.jpg);
-	position:absolute;
-	left:0px;
-	top:0px;
-	width:684px;
-	height:1515px;
-	z-index:1;
-	}
-header {
-	display:none;
-	}
-h3 {
-	font-family:arial, sans serif;
-	color:#fff;
-	font-size:11px;
-	font-weight:bold;
-	margin-top:3px;
-	margin-bottom:0px;
-	}
-p {
-	margin:6px;
-	}
-
-a {
-	color:#e2e2e2;
-	text-decoration:underline;
-	}
-a:link {
-	color:#e2e2e2;
-	text-decoration:underline;
-	}
-a:hover {
-	color:#fff;
-	font-weight:bold;
-	text-decoration:underline;
-	}
-a:visited {
-	color:#e2e2e2;
-	text-decoration:underline;
-	}
-
-
-	margin: 0px;
-	padding: 0px;
-	}
-
-.sidebar li {
-	list-style-type: none;
-	display: inline;
-	}

src/data/designs/009/metadata.json

@@ -2,19 +2,45 @@
   "id": "009",
   "url": "https://www.csszengarden.com/009",
   "css_url": "https://www.csszengarden.com/009/009.css",
-  "description": "This design features a clean and organized layout with a classic monochrome color palette, emphasizing the elegance of CSS design. It uses serif typography for a traditional feel, with strong visual separation of sections, enhancing readability. The design incorporates ornamental graphics at the top and bottom, adding a touch of sophistication. The ample use of whitespace contributes to a serene and uncluttered experience, inviting users to engage with the content.",
+  "title": "Dead or Alive",
+  "author": "Michael Pick",
+  "description": {
+    "summary": "A meticulously structured webpage design that combines elegant minimalism with traditional Eastern aesthetic influences, creating a harmonious balance between ornamental elements and functional typography.",
+    "visual_style": "The design employs a clean, structured layout with decorative borders framing a predominantly black and white content area, creating a sense of classical formality with subtle Eastern-inspired embellishments.",
+    "emotional_impact": "The visual elements evoke a sense of tranquility and contemplative focus, reinforced by the balanced composition and thoughtful spacing between content sections.",
+    "compositional_elements": "A symmetrical layout with a distinct header featuring an emblematic logo, bordered by decorative patterns, and organized content sections separated by horizontal dividers and consistent typographic treatments."
+  },
+  "artistic_context": {
+    "style_influences": "Japanese woodblock printing, Art Deco ornamentation, classical manuscript design, Eastern calligraphic traditions",
+    "visual_metaphors": "Zen garden structure, path of enlightenment, architectural blueprint, sacred scroll"
+  },
   "categories": [
-    "Web Design",
-    "Typography",
-    "Minimalism",
-    "Ornamental Design",
-    "Monochrome"
+    "minimalist",
+    "traditional",
+    "typographic",
+    "structured",
+    "ornamental",
+    "monochromatic"
   ],
   "visual_characteristics": [
-    "Serif Typography",
-    "Monochromatic Palette",
-    "Ornamental Graphics",
-    "Whitespace Usage",
-    "Classic Layout"
-  ]
+    "decorative borders",
+    "centered typography",
+    "high contrast",
+    "geometric patterns",
+    "horizontal dividers",
+    "hierarchical spacing"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "balance",
+      "hierarchy",
+      "rhythm",
+      "contrast"
+    ],
+    "visual_techniques": [
+      "framing",
+      "typographic scale",
+      "negative space"
+    ]
+  }
 }

src/data/designs/009/style.css

@@ -1,318 +0,0 @@
-/* css Zen Garden submission 009 - 'Dead or Alive' by Michael Pick, http://www.mikepick.com/ */
-/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
-/* All associated graphics copyright 2003, Michael Pick */
-
-
-/* IMPORTANT */
-/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
-/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
-/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
-
-
-/* basic elements */
-body {
-	color: #000;
-	background: #fff url(body-bg.png);
-	margin: 0px auto;
-	}
-
-p {
-	font: 12px/15px georgia, serif;
-	text-align: justify;
-	margin-top: 0;
-	}
-	
-a:link { 
-	font-weight: bold; 
-	text-decoration: none; 
-	color: #000;
-	}
-
-a:visited { 
-	font-weight: bold; 
-	text-decoration: none; 
-	color: #333;
-	}
-
-a:hover, a:active { 
-	text-decoration: underline; 
-	}
-	
-/* specific divs */
-
-.page-wrapper { 
-	background: url(frill-bg.png) repeat-x;
-	border-right: 1px solid #333;
-	width: 800px;
-	margin: 0px;
-	}
-	
-.intro { 
-	min-width: 470px;
-	}
-
-header { 
-	width: 280px;
-	float: left;
-	margin-top: 40px;
-	}
-	
-	h1 { 
-		background: transparent url(pageheader-bg.png) no-repeat; 
-		margin-left: 40px;
-		width: 240px; 
-		height: 220px; 
-
-		text-indent: 100%;
-		white-space: nowrap;
-		overflow: hidden;
-		}
-
-	h2 {
-		display: none;
-		}
-		
-.summary {
-	clear:both;
-	width: 280px; 
-	float: left;
-	margin-bottom: 20px;
-	}
-	
-	.summary p {
-		font-family: georgia, times, serif;
-		font-size: 10px;
-		text-transform: uppercase; 
-		text-align:center;
-		padding-left: 60px;
-		padding-right: 20px;
-		}
-		
-.preamble {
-	margin-left: 280px;
-	width: 460px;
-	padding-top: 90px;
-	}
-	
-	.preamble h3 {
-		background: transparent url(preamble.png) no-repeat; 
-		width: 460px; 
-		height: 70px;
-
-		text-indent: 100%;
-		white-space: nowrap;
-		overflow: hidden;
-		}
-		
-	.preamble a:link {
-		color: #600;
-		}
-		
-	.preamble p {
-		line-height: 150%;
-		}
-		
-.supporting {
-	margin-left: 0px;
-	}
-	
-	.supporting a:link {
-		color: #600;
-		}
-	
-.explanation {
-	margin-left: 280px;
-	width: 460px;
-	}
-	
-	.explanation h3 {
-		background: transparent url(sowhat.png) no-repeat; 
-		width: 460px; 
-		height: 50px;
-		margin-bottom: 20px;
-		
-		text-indent: 100%;
-		white-space: nowrap;
-		overflow: hidden;
-		}
-		
-	.explanation p {
-		line-height: 150%;
-		}
-	
-.participation {
-	width: 460px;
-	}
-	
-	.participation h3 {
-		background: transparent url(participation.png) no-repeat; 
-		width: 460px; 
-		height: 50px;
-		margin-bottom: 20px;
-
-		text-indent: 100%;
-		white-space: nowrap;
-		overflow: hidden;
-		}
-		
-	.participation p {
-		line-height: 150%;
-		}
-	
-.benefits {
-	width: 460px;
-	}
-	
-	.benefits h3 {
-		background: transparent url(benefits.png) no-repeat; 
-		width: 460px; 
-		height: 50px;
-		margin-bottom: 20px;
-
-		text-indent: 100%;
-		white-space: nowrap;
-		overflow: hidden;
-		}
-		
-	.benefits p {
-		line-height: 140%;
-		}
-	
-.requirements {
-	width: 460px;
-	}
-	
-	.requirements h3 {
-		background: transparent url(requirements.png) no-repeat; 
-		width: 460px; 
-		height: 50px;
-		margin-bottom: 20px;
-
-		text-indent: 100%;
-		white-space: nowrap;
-		overflow: hidden;
-		}
-		
-	.requirements p {
-		line-height: 140%;
-		}
-		
-footer {
-	margin-top: 40px;
-	background: transparent url(footer.png) repeat-x;
-	height: 58px;
-	width: 800px;
-	text-align: center;
-	margin-left: -280px;
-	}
-		
-.sidebar {
-	position: absolute; 
-	top: 28em;
-	left: 40px;
-	width: 240px;
-	}
-	
-.sidebar .wrapper { 
-	font: 10px georgia, times, serif;
-	text-transform: uppercase;
-	}
-	
-	.sidebar h3.select { 
-		background: transparent url(select.png) no-repeat top left; 
-		margin: 10px 0px 5px 0px; 
-		width: 240px; 
-		height: 50px;
-		margin-bottom: 10px;
-		}
-		
-	.design-selection {
-		padding-bottom: 20px;
-		}
-
-	.sidebar h3.select {
-		text-indent: 200%;
-		white-space: nowrap;
-		overflow: hidden;
-		}
-
-	.sidebar h3.archives { 
-		background: transparent url(archives.png) no-repeat top left; 
-		width: 240px; 
-		height: 50px;
-		margin-bottom: 10px;
-
-		text-indent: 200%;
-		white-space: nowrap;
-		overflow: hidden;
-		}
-
-	.sidebar h3.resources { 
-		background: transparent url(resources.png) no-repeat top left; 
-		width: 250px; 
-		height: 50px;
-		margin-bottom: 10px;
-
-		text-indent: 200%;
-		white-space: nowrap;
-		overflow: hidden;
-		}
-	
-
-	.sidebar ul {
-		margin: 0px;
-		padding: 0px;
-		}
-
-	.sidebar li {
-		line-height: 2.5ex; 
-		display: block;
-		text-align: center;
-		padding-top: 5px;
-		padding-left: 20px;
-		padding-right: 20px;
-		margin-bottom: 5px;
-		list-style-type: none;
-		}
-	
-	.sidebar li a:link { 
-		color: #000;
-		}
-	
-	.sidebar li a:visited {
-		color: #333;
-		}
-			
-.extra1 { 
-	background: transparent url(certified.png) top left no-repeat; 
-	position: absolute; 
-	top: 160px; 
-	left: 0px; 
-	width: 100px; 
-	height: 110px;
-	z-index: 0;
-	}
-	
-/* hidden from IE 5 mac */
-	
-@media all {
-	.explanation {
-		margin-left: 280px;
-		}
-		
-	.participation {
-		margin-left: 280px;
-		}
-		
-	.benefits {
-		margin-left: 280px;
-		}
-		
-	.requirements {
-		margin-left: 280px;
-		}
-		
-	footer {
-		margin-left: 0px;
-	}
-}

src/data/designs/010/metadata.json

@@ -2,19 +2,45 @@
   "id": "010",
   "url": "https://www.csszengarden.com/010",
   "css_url": "https://www.csszengarden.com/010/010.css",
-  "description": "The design utilizes a clean and structured layout with a neutral color palette, employing a sidebar for navigation and a main content area for information. The typography is clear and well-organized, enhancing readability, while subtle background textures add depth without distraction.",
+  "title": "A Garden Apart",
+  "author": "Dan Cederholm, http://www.simplebits.com/",
+  "description": {
+    "summary": "A serene, structured webpage design featuring a balanced two-column layout with a nature-inspired header and earthy color palette.",
+    "visual_style": "The design employs a minimalist aesthetic with organic zen elements, combining structured content with natural imagery to create visual harmony.",
+    "emotional_impact": "The calm, peaceful atmosphere evokes a sense of tranquility and clarity, reinforced by the subtle use of natural textures and muted colors.",
+    "compositional_elements": "A curving green header defines the top space, while content is organized in a clear left-right structure with consistent typographic hierarchy and ample whitespace."
+  },
+  "artistic_context": {
+    "style_influences": "Japanese zen garden aesthetics, minimalist web design, natural photography",
+    "visual_metaphors": "Stone pathway, bamboo simplicity, organic growth, enlightened clarity"
+  },
   "categories": [
-    "Web Design",
-    "Typography",
-    "Minimalist Design",
-    "Navigation Layout",
-    "Informational"
+    "minimalist",
+    "nature-inspired",
+    "structured",
+    "educational",
+    "two-column",
+    "zen-aesthetic"
   ],
   "visual_characteristics": [
-    "Neutral Colors",
-    "Structured Layout",
-    "Clear Typography",
-    "Sidebar Navigation",
-    "Subtle Textures"
-  ]
+    "curved header element",
+    "natural texture photography",
+    "earthy color palette",
+    "hierarchical typography",
+    "organized content blocks",
+    "balanced negative space"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "hierarchy",
+      "balance",
+      "harmony",
+      "simplicity"
+    ],
+    "visual_techniques": [
+      "textural contrast",
+      "color zoning",
+      "typographic rhythm"
+    ]
+  }
 }

src/data/designs/010/style.css

@@ -1,235 +0,0 @@
-/* css Zen Garden submission 010 - 'A Garden Apart' by Dan Cederholm, http://www.simplebits.com/ */
-/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
-/* All associated graphics copyright 2003, Dan Cederholm */
-
-
-/* IMPORTANT */
-/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
-/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
-/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
-
-
-body 
-	{ 
-		font-family: trebuchet ms, verdana, sans-serif;
-		font-size: 12px;
-		line-height: 1.5em; 
-		color: #333; 
-		background: #cccc99;
-		margin: 0;
-		padding: 0;
-		text-align: center;
-	}
-
-p 
-	{ 
-		margin-top: 0px; 
-	}
-	
-h3 
-	{ 
-		font: bold 140% trebuchet ms;
-		letter-spacing: -1px; 
-		margin-bottom: 0; 
-		color: #c96;
-	}
-	
-a:link 
-	{ 
-		text-decoration: none;
-		border-bottom: 1px dotted #369; 
-		color: #369;
-	}
-	
-a:visited 
-	{ 
-		text-decoration: none;
-		border-bottom: 1px dotted #369; 
-		color: #369;
-	}
-	
-a:hover, a:active 
-	{ 
-		text-decoration: none;
-		border-bottom: 1px solid #036; 
-		color: #036;
-	}
-
-/* ---( specific divs )----------------------------- */
-
-.page-wrapper 
-	{
-		position: relative;
-		background: #FFFBDF url(fade.gif) no-repeat 0 92px;
-		margin: 0 auto 10px auto;
-		border-left: 1px solid #000;
-		border-right: 1px solid #000;
-		border-bottom: 1px solid #000;
-		text-align: left;
- 		width: 800px;
-	}
-
-header
-	{
-		height: 92px;
-		background: url(top.gif) no-repeat top left;
-	}
-
-header h1
-	{ 
-		display: none;	
-	}
-	
-header h2 
-	{ 
-		position: absolute;
-		top: 110px;
-		left: 20px;
-		padding: 0;
-		margin: 0;
-		background: url(tagline.gif) no-repeat top left;
-		width: 528px;
-		height: 74px;
-
-		text-indent: 100%;
-		white-space: nowrap;
-		overflow: hidden;
-	}
-
-/* ---( quick summary)---------------------------- */
-
-.summary 
-	{
-		position: absolute;
-		top: 92px;
-		right: 0;
-		left: auto;
-		z-index: 2;
-		width: 298px; 
-  		voice-family: "\"}\""; 
-  		voice-family:inherit;
- 		width: 300px;
-	}
-
-html>body .summary
-	{
-  		width: 300px;
-	} 
-
-.summary p 
-	{
-		margin: 15px 15px 15px 15px; 
-		font-style: italic;
-		font-size: 140%; 
-		font-family: "trebuchet ms";
-		font-weight: bold;
-		line-height: 1.5em;
-		color: #444;
-	}
-
-.summary p:last-child 
-	{
-		font-style: normal;
-		font-weight: normal;
-		font-size: 100%;
-		margin-top: 0;
-	}
-
-.preamble 
-	{
-		margin: 104px 340px 0px 20px;
-	}
-	
-.supporting 
-	{
-		padding-left: 20px; 
-		margin: 0 350px 40px 0;
-	}
-
-footer 
-	{ 
-		border-top: 1px dotted #CDC4AC;
-		padding-top: 6px;
-		text-align: center;
-	}
-	
-footer a:link, footer a:visited 
-	{ 
-		margin-right: 6px;
-	}
-
-/* ---( right side nav)----------------------------- */
-
-.sidebar 
-	{
-		position: absolute; 
-		top: 92px; 
-		right: 0;
-		left: auto;
-		width: 300px;
-		padding: 0;
-		border-left: 1px solid #CDC4AC;
-		border-bottom: 1px solid #CDC4AC;
-		background: #E5E0D4 url(zen.gif) no-repeat;
-		z-index: 1;
-	}
-	
-.sidebar .wrapper 
-	{ 
-		margin: 190px 15px 15px 15px; 
-	}
-
-.sidebar h3
-	{
-		color: #635F57;
-		font-family: trebuchet ms;
-		font-size: 120%;
-		margin: 0 0 6px 0;
-		padding: 0;
-	}	
-	
-.sidebar ul
-	{
-		margin: 0px;
-		padding: 0px;
-	}
-.sidebar li
-	{
-		display: block; 
-		margin-bottom: 2px;
-		padding-left: 14px;
-		background: url(arrow.gif) no-repeat 0 5px;
-		list-style-type: none;
-	}
-	
-.sidebar li a:link
-	{ 
-		color: #c96;
-		border-bottom: none;
-	}
-	
-.sidebar li a:visited
-	{
-		color: #c96;
-		border-bottom: none;
-	}
-	
-.sidebar li a:hover
-	{
-		color: #963;
-	}
-
-
-
-
-.design-selection
-	{
-		padding: 12px 0 12px 0;
-		border-top: 1px dashed #CDC4AC;
-		border-bottom: 1px dashed #CDC4AC;
-	}
-	
-.zen-resources
-	{
-		margin-top: 12px;
-	}

src/data/designs/011/metadata.json

@@ -2,21 +2,45 @@
   "id": "011",
   "url": "https://www.csszengarden.com/011",
   "css_url": "https://www.csszengarden.com/011/011.css",
-  "description": "The design features a harmonious blend of text and imagery, utilizing a soft color palette with blue and orange highlights. The layout is structured yet fluid, encouraging readability and engagement. Elegant typography and an artistic illustration enhance the page's aesthetics, appealing to a design-conscious audience.",
+  "title": "css Zen Garden submission 011 - 'meliorism' by Brett J. Gilbert - www.paragraphic.co.uk",
+  "author": "Brett J. Gilbert",
+  "description": {
+    "summary": "A serene, nature-inspired web design showcasing an elegant blue botanical illustration against a soft gradient background, creating harmony between content and artistic elements.",
+    "visual_style": "The design employs a minimalist aesthetic with a prominent decorative illustration of a blue tree or branch as its focal point, balancing structured content columns with organic visual elements.",
+    "emotional_impact": "Evokes tranquility and contemplation through its gentle color palette and flowing botanical imagery, reinforcing the 'zen garden' concept while maintaining clarity of purpose.",
+    "compositional_elements": "Uses a multi-column layout with clear content hierarchy, where the central organic illustration serves as both divider and visual anchor between functional content areas."
+  },
+  "artistic_context": {
+    "style_influences": "Japanese watercolor, minimalist web design, natural illustration",
+    "visual_metaphors": "Growth, organic flow, digital tranquility, enlightenment"
+  },
   "categories": [
-    "Web Design",
-    "Typography",
-    "Graphic Design",
-    "Artistic Design",
-    "Minimalism",
-    "Usability"
+    "minimalist",
+    "nature-inspired",
+    "elegant",
+    "grid-based",
+    "monochromatic",
+    "harmonious"
   ],
   "visual_characteristics": [
-    "Soft Color Palette",
-    "Elegant Typography",
-    "Fluid Layout",
-    "Artistic Illustration",
-    "Text-Centric",
-    "Readability Focus"
-  ]
+    "blue-dominant palette",
+    "botanical illustration",
+    "multi-column layout",
+    "gradient header",
+    "typographic contrast",
+    "balanced white space"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "balance",
+      "harmony",
+      "hierarchy",
+      "contrast"
+    ],
+    "visual_techniques": [
+      "color harmony",
+      "negative space",
+      "focal illustration"
+    ]
+  }
 }