Spaces:
Runtime error
Runtime error
Commit
·
e92353b
1
Parent(s):
7ec8434
task: adds 11 missing designs
Browse files- src/data/designs/027/metadata.json +46 -0
- src/data/designs/080/metadata.json +46 -0
- src/data/designs/102/metadata.json +46 -0
- src/data/designs/111/metadata.json +46 -0
- src/data/designs/117/metadata.json +46 -0
- src/data/designs/145/metadata.json +46 -0
- src/data/designs/148/metadata.json +46 -0
- src/data/designs/163/metadata.json +45 -0
- src/data/designs/189/metadata.json +46 -0
- src/data/designs/194/metadata.json +46 -0
- src/data/designs/198/metadata.json +46 -0
src/data/designs/027/metadata.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"id": "027",
|
| 3 |
+
"url": "https://www.csszengarden.com/027",
|
| 4 |
+
"css_url": "https://www.csszengarden.com/027/027.css",
|
| 5 |
+
"title": "Gothica",
|
| 6 |
+
"author": "Patrick H. Lauke aka redux",
|
| 7 |
+
"description": {
|
| 8 |
+
"summary": "A minimalist web design showcasing the principles of CSS Zen Garden with a monochromatic textural header and structured content layout that balances functionality with aesthetic restraint.",
|
| 9 |
+
"visual_style": "The design employs a zen-inspired aesthetic with textural stone imagery in the header and clean typographic hierarchy throughout the content area, framed by subtle patterned backgrounds.",
|
| 10 |
+
"emotional_impact": "Creates a serene, contemplative atmosphere through the use of stone textures, balanced white space, and structured information presentation.",
|
| 11 |
+
"compositional_elements": "Features a horizontal header with textural imagery, structured content area with clear section delineations, and sidebar navigation elements arranged in a hierarchical grid."
|
| 12 |
+
},
|
| 13 |
+
"artistic_context": {
|
| 14 |
+
"style_influences": "Minimalism, Japanese zen aesthetics, early web standards movement",
|
| 15 |
+
"visual_metaphors": "Stone garden textures suggesting meditation, structured layout resembling a path or journey"
|
| 16 |
+
},
|
| 17 |
+
"categories": [
|
| 18 |
+
"minimalist",
|
| 19 |
+
"structured",
|
| 20 |
+
"textural",
|
| 21 |
+
"monochromatic",
|
| 22 |
+
"grid-based",
|
| 23 |
+
"zen-inspired"
|
| 24 |
+
],
|
| 25 |
+
"visual_characteristics": [
|
| 26 |
+
"stone-textured header",
|
| 27 |
+
"high-contrast typography",
|
| 28 |
+
"bordered content modules",
|
| 29 |
+
"subtle pattern background",
|
| 30 |
+
"hierarchical navigation",
|
| 31 |
+
"horizontal rule dividers"
|
| 32 |
+
],
|
| 33 |
+
"design_principles": {
|
| 34 |
+
"primary_principles": [
|
| 35 |
+
"hierarchy",
|
| 36 |
+
"contrast",
|
| 37 |
+
"balance",
|
| 38 |
+
"unity"
|
| 39 |
+
],
|
| 40 |
+
"visual_techniques": [
|
| 41 |
+
"textural background",
|
| 42 |
+
"modular layout",
|
| 43 |
+
"typographic scale"
|
| 44 |
+
]
|
| 45 |
+
}
|
| 46 |
+
}
|
src/data/designs/080/metadata.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"id": "080",
|
| 3 |
+
"url": "https://www.csszengarden.com/080",
|
| 4 |
+
"css_url": "https://www.csszengarden.com/080/080.css",
|
| 5 |
+
"title": "Zen Pool",
|
| 6 |
+
"author": "Clinton Barth",
|
| 7 |
+
"description": {
|
| 8 |
+
"summary": "A serene web design featuring a calm blue water-droplet header that contrasts with structured content blocks in varying shades of blue below",
|
| 9 |
+
"visual_style": "The design employs a structured column layout with distinct color-coded sections that create a harmonious rhythm between header elements and content areas",
|
| 10 |
+
"emotional_impact": "The water droplet imagery paired with the cool blue color palette evokes tranquility and clarity, reinforcing the meditation and zen concepts visually",
|
| 11 |
+
"compositional_elements": "A clear hierarchy is established through color-blocking, with a prominent header image, followed by alternating light and dark blue content sections that guide the eye vertically down the page"
|
| 12 |
+
},
|
| 13 |
+
"artistic_context": {
|
| 14 |
+
"style_influences": "Minimalist web design, early 2000s CSS demonstration sites, nature-inspired digital aesthetics",
|
| 15 |
+
"visual_metaphors": "Water droplets suggesting clarity and purity, structured boxes implying organization and mindfulness"
|
| 16 |
+
},
|
| 17 |
+
"categories": [
|
| 18 |
+
"structured",
|
| 19 |
+
"blue-monochrome",
|
| 20 |
+
"grid-based",
|
| 21 |
+
"nature-inspired",
|
| 22 |
+
"minimalist",
|
| 23 |
+
"educational"
|
| 24 |
+
],
|
| 25 |
+
"visual_characteristics": [
|
| 26 |
+
"water-droplet texture",
|
| 27 |
+
"color-blocked layout",
|
| 28 |
+
"hierarchical navigation",
|
| 29 |
+
"columnar organization",
|
| 30 |
+
"text-heavy content",
|
| 31 |
+
"high-contrast headers"
|
| 32 |
+
],
|
| 33 |
+
"design_principles": {
|
| 34 |
+
"primary_principles": [
|
| 35 |
+
"contrast",
|
| 36 |
+
"hierarchy",
|
| 37 |
+
"repetition",
|
| 38 |
+
"alignment"
|
| 39 |
+
],
|
| 40 |
+
"visual_techniques": [
|
| 41 |
+
"color blocking",
|
| 42 |
+
"textural header",
|
| 43 |
+
"consistent spacing"
|
| 44 |
+
]
|
| 45 |
+
}
|
| 46 |
+
}
|
src/data/designs/102/metadata.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"id": 102,
|
| 3 |
+
"url": "https://www.csszengarden.com/102",
|
| 4 |
+
"css_url": "https://www.csszengarden.com/102/102.css",
|
| 5 |
+
"title": "Revolution!",
|
| 6 |
+
"author": "David Hellsing",
|
| 7 |
+
"description": {
|
| 8 |
+
"summary": "A bold, visually striking design featuring a rich red and black color scheme with gold accents, abstract geometric elements, and decorative floral motifs creating a dramatic Eastern-inspired aesthetic.",
|
| 9 |
+
"visual_style": "The design combines ornate decorative elements with structured layout, creating tension between organic curves and rigid geometry against a textured background.",
|
| 10 |
+
"emotional_impact": "The intense color palette of deep reds and blacks evokes a sense of drama and contemplation, while the gold elements add a touch of reverence and enlightenment.",
|
| 11 |
+
"compositional_elements": "The design features a two-column layout with a decorative header area showcasing abstract golden geometric shapes and floral ornaments against a dark textured background."
|
| 12 |
+
},
|
| 13 |
+
"artistic_context": {
|
| 14 |
+
"style_influences": "Asian calligraphy, Constructivist geometry, Eastern ornamental patterns, Gothic texture",
|
| 15 |
+
"visual_metaphors": "Balance between structure and nature, tradition meeting modernity, path to enlightenment"
|
| 16 |
+
},
|
| 17 |
+
"categories": [
|
| 18 |
+
"ornamental",
|
| 19 |
+
"high-contrast",
|
| 20 |
+
"eastern-inspired",
|
| 21 |
+
"structured",
|
| 22 |
+
"dramatic",
|
| 23 |
+
"textural"
|
| 24 |
+
],
|
| 25 |
+
"visual_characteristics": [
|
| 26 |
+
"rich-red-background",
|
| 27 |
+
"geometric-abstractions",
|
| 28 |
+
"floral-ornaments",
|
| 29 |
+
"gold-accents",
|
| 30 |
+
"textured-surfaces",
|
| 31 |
+
"two-column-layout"
|
| 32 |
+
],
|
| 33 |
+
"design_principles": {
|
| 34 |
+
"primary_principles": [
|
| 35 |
+
"contrast",
|
| 36 |
+
"hierarchy",
|
| 37 |
+
"rhythm",
|
| 38 |
+
"balance"
|
| 39 |
+
],
|
| 40 |
+
"visual_techniques": [
|
| 41 |
+
"layering",
|
| 42 |
+
"textural variation",
|
| 43 |
+
"negative space"
|
| 44 |
+
]
|
| 45 |
+
}
|
| 46 |
+
}
|
src/data/designs/111/metadata.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"id": 111,
|
| 3 |
+
"url": "https://www.csszengarden.com/111",
|
| 4 |
+
"css_url": "https://www.csszengarden.com/111/111.css",
|
| 5 |
+
"title": "Gruener Entwurf",
|
| 6 |
+
"author": "Hannah F. Liesong",
|
| 7 |
+
"description": {
|
| 8 |
+
"summary": "A richly textured web design with a lush deep green botanical background supporting an elegant layout with gold script typography and a parchment-like central content area.",
|
| 9 |
+
"visual_style": "The design employs a classic garden-inspired aesthetic with organic textures contrasting against structured layout elements, creating a harmonious balance between natural and formal elements.",
|
| 10 |
+
"emotional_impact": "The deep green backdrop evokes a sense of tranquility and natural harmony, while the elegant script typography suggests sophistication and timelessness.",
|
| 11 |
+
"compositional_elements": "A horizontal arrangement with a prominent header area flowing into a centralized content panel with multiple columns of information, framed by textural elements and subtle navigation links."
|
| 12 |
+
},
|
| 13 |
+
"artistic_context": {
|
| 14 |
+
"style_influences": "Classic manuscript design, botanical illustration traditions, and elegant web design from the early 2000s era",
|
| 15 |
+
"visual_metaphors": "Garden cultivation as visual knowledge growth, manuscript as repository of wisdom, natural textures suggesting organic development"
|
| 16 |
+
},
|
| 17 |
+
"categories": [
|
| 18 |
+
"elegant",
|
| 19 |
+
"textural",
|
| 20 |
+
"botanical",
|
| 21 |
+
"classical",
|
| 22 |
+
"structured",
|
| 23 |
+
"ornate"
|
| 24 |
+
],
|
| 25 |
+
"visual_characteristics": [
|
| 26 |
+
"textured-background",
|
| 27 |
+
"script-typography",
|
| 28 |
+
"green-gold-palette",
|
| 29 |
+
"column-layout",
|
| 30 |
+
"parchment-elements",
|
| 31 |
+
"contrasting-type-treatments"
|
| 32 |
+
],
|
| 33 |
+
"design_principles": {
|
| 34 |
+
"primary_principles": [
|
| 35 |
+
"contrast",
|
| 36 |
+
"hierarchy",
|
| 37 |
+
"balance",
|
| 38 |
+
"unity"
|
| 39 |
+
],
|
| 40 |
+
"visual_techniques": [
|
| 41 |
+
"texture layering",
|
| 42 |
+
"typographic scaling",
|
| 43 |
+
"color harmony"
|
| 44 |
+
]
|
| 45 |
+
}
|
| 46 |
+
}
|
src/data/designs/117/metadata.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"id": 117,
|
| 3 |
+
"url": "https://www.csszengarden.com/117",
|
| 4 |
+
"css_url": "https://www.csszengarden.com/117/117.css",
|
| 5 |
+
"title": "Brushwood",
|
| 6 |
+
"author": "Katrin Zieger",
|
| 7 |
+
"description": {
|
| 8 |
+
"summary": "A nature-inspired website design with an earthy green palette and bamboo accents, creating a serene digital garden atmosphere for showcasing CSS design capabilities.",
|
| 9 |
+
"visual_style": "The design employs organic textures and natural elements within a structured grid system, balancing rustic charm with technical organization.",
|
| 10 |
+
"emotional_impact": "The earthy tones and botanical imagery evoke a sense of calm contemplation and growth, reinforced by the zen garden metaphor.",
|
| 11 |
+
"compositional_elements": "Three-column layout with textured borders, cream parchment-like content area, and hierarchical text blocks organized in clearly defined sections."
|
| 12 |
+
},
|
| 13 |
+
"artistic_context": {
|
| 14 |
+
"style_influences": "Japanese zen gardens, natural minimalism, tactile papercraft, organic web design",
|
| 15 |
+
"visual_metaphors": "Garden as digital cultivation, bamboo as flexible structure, path to enlightenment"
|
| 16 |
+
},
|
| 17 |
+
"categories": [
|
| 18 |
+
"nature-inspired",
|
| 19 |
+
"textural",
|
| 20 |
+
"minimalist",
|
| 21 |
+
"organic",
|
| 22 |
+
"structured",
|
| 23 |
+
"earthy"
|
| 24 |
+
],
|
| 25 |
+
"visual_characteristics": [
|
| 26 |
+
"bamboo texture",
|
| 27 |
+
"parchment-like panels",
|
| 28 |
+
"earth-tone palette",
|
| 29 |
+
"hierarchical typography",
|
| 30 |
+
"natural borders",
|
| 31 |
+
"column structure"
|
| 32 |
+
],
|
| 33 |
+
"design_principles": {
|
| 34 |
+
"primary_principles": [
|
| 35 |
+
"contrast",
|
| 36 |
+
"hierarchy",
|
| 37 |
+
"unity",
|
| 38 |
+
"balance"
|
| 39 |
+
],
|
| 40 |
+
"visual_techniques": [
|
| 41 |
+
"textural layering",
|
| 42 |
+
"organic framing",
|
| 43 |
+
"tonal harmony"
|
| 44 |
+
]
|
| 45 |
+
}
|
| 46 |
+
}
|
src/data/designs/145/metadata.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"id": 145,
|
| 3 |
+
"url": "https://www.csszengarden.com/145",
|
| 4 |
+
"css_url": "https://www.csszengarden.com/145/145.css",
|
| 5 |
+
"title": "Paravion",
|
| 6 |
+
"author": "Emiliano Pennisi",
|
| 7 |
+
"description": {
|
| 8 |
+
"summary": "A nostalgic web design featuring a vintage postal aesthetic combined with structured informational content, creating a unique blend of retro charm and digital functionality.",
|
| 9 |
+
"visual_style": "The design employs a postal mail metaphor with air mail border elements, postage stamps, and postmarks, juxtaposed against a structured navigation system and content areas.",
|
| 10 |
+
"emotional_impact": "Evokes nostalgia through warm colors and vintage postal elements while maintaining a sense of organization and clarity through structured layout.",
|
| 11 |
+
"compositional_elements": "Features a central envelope/postcard visual as the header, with a three-column layout beneath: a narrow navigation menu, main content area, and complementary sidebar."
|
| 12 |
+
},
|
| 13 |
+
"artistic_context": {
|
| 14 |
+
"style_influences": "Mail art, vintage postal design, traditional web navigation systems, early 2000s web design conventions",
|
| 15 |
+
"visual_metaphors": "Communication as mail delivery, design as journey, digital enlightenment through traditional practice"
|
| 16 |
+
},
|
| 17 |
+
"categories": [
|
| 18 |
+
"nostalgic",
|
| 19 |
+
"postal-themed",
|
| 20 |
+
"structured",
|
| 21 |
+
"educational",
|
| 22 |
+
"warm-toned",
|
| 23 |
+
"vintage"
|
| 24 |
+
],
|
| 25 |
+
"visual_characteristics": [
|
| 26 |
+
"airmail border stripes",
|
| 27 |
+
"warm wood-tone background",
|
| 28 |
+
"multi-column layout",
|
| 29 |
+
"vintage postmarks",
|
| 30 |
+
"hierarchical navigation",
|
| 31 |
+
"section headings with decorative elements"
|
| 32 |
+
],
|
| 33 |
+
"design_principles": {
|
| 34 |
+
"primary_principles": [
|
| 35 |
+
"hierarchy",
|
| 36 |
+
"contrast",
|
| 37 |
+
"metaphor",
|
| 38 |
+
"repetition"
|
| 39 |
+
],
|
| 40 |
+
"visual_techniques": [
|
| 41 |
+
"framing",
|
| 42 |
+
"color blocking",
|
| 43 |
+
"visual anchoring"
|
| 44 |
+
]
|
| 45 |
+
}
|
| 46 |
+
}
|
src/data/designs/148/metadata.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"id": 148,
|
| 3 |
+
"url": "https://www.csszengarden.com/148",
|
| 4 |
+
"css_url": "https://www.csszengarden.com/148/148.css",
|
| 5 |
+
"title": "Museum",
|
| 6 |
+
"author": "Samuel Marin",
|
| 7 |
+
"description": {
|
| 8 |
+
"summary": "A minimalist virtual exhibition space displaying information about CSS Zen Garden through a series of framed text panels in a 3D gallery environment",
|
| 9 |
+
"visual_style": "The design adopts a stark, monochromatic approach with a virtual gallery aesthetic, featuring white walls, gray wooden flooring, and framed text panels that create an exhibition-like experience",
|
| 10 |
+
"emotional_impact": "The space evokes a contemplative, museum-like atmosphere through its sparse, orderly presentation and grayscale color scheme",
|
| 11 |
+
"compositional_elements": "The layout creates a vertical scrolling journey through several gallery rooms, each containing framed informational displays with small silhouette figures providing scale"
|
| 12 |
+
},
|
| 13 |
+
"artistic_context": {
|
| 14 |
+
"style_influences": "Virtual exhibition spaces, digital galleries, architectural visualization, minimalist design",
|
| 15 |
+
"visual_metaphors": "Physical gallery as information architecture, visitors as users navigating information, framed text as art objects"
|
| 16 |
+
},
|
| 17 |
+
"categories": [
|
| 18 |
+
"minimalist",
|
| 19 |
+
"architectural",
|
| 20 |
+
"monochromatic",
|
| 21 |
+
"exhibition-style",
|
| 22 |
+
"spatial",
|
| 23 |
+
"instructional"
|
| 24 |
+
],
|
| 25 |
+
"visual_characteristics": [
|
| 26 |
+
"3D perspective",
|
| 27 |
+
"silhouette figures",
|
| 28 |
+
"framed panels",
|
| 29 |
+
"wood-textured floors",
|
| 30 |
+
"recessed lighting",
|
| 31 |
+
"sidebar navigation"
|
| 32 |
+
],
|
| 33 |
+
"design_principles": {
|
| 34 |
+
"primary_principles": [
|
| 35 |
+
"hierarchy",
|
| 36 |
+
"repetition",
|
| 37 |
+
"contrast",
|
| 38 |
+
"spatial organization"
|
| 39 |
+
],
|
| 40 |
+
"visual_techniques": [
|
| 41 |
+
"perspective depth",
|
| 42 |
+
"scale figures",
|
| 43 |
+
"framing elements"
|
| 44 |
+
]
|
| 45 |
+
}
|
| 46 |
+
}
|
src/data/designs/163/metadata.json
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"id": 163,
|
| 3 |
+
"url": "https://www.csszengarden.com/163",
|
| 4 |
+
"css_url": "https://www.csszengarden.com/163/163.css",
|
| 5 |
+
"title": "Like the Sea",
|
| 6 |
+
"author": "Lars Daum",
|
| 7 |
+
"description": {
|
| 8 |
+
"summary": "A tranquil, nature-inspired web design leveraging seashell imagery and soft textural elements to create a serene, meditative experience that evokes Japanese zen aesthetics",
|
| 9 |
+
"visual_style": "The design employs a soft, neutral color palette with organic elements, creating a harmonious balance between structured content and natural motifs",
|
| 10 |
+
"emotional_impact": "The visual composition evokes calm and contemplation through its spacious layout, subtle textures, and natural imagery",
|
| 11 |
+
"compositional_elements": "A well-structured two-column layout with decorative shells and botanical illustrations framing content areas, creating a sense of peaceful organization"
|
| 12 |
+
},
|
| 13 |
+
"artistic_context": {
|
| 14 |
+
"style_influences": "Japanese zen garden aesthetics, minimalist web design, natural material textures",
|
| 15 |
+
"visual_metaphors": "Seashells as symbols of natural beauty and simplicity, botanical silhouettes suggesting growth and harmony"
|
| 16 |
+
},
|
| 17 |
+
"categories": [
|
| 18 |
+
"natural",
|
| 19 |
+
"minimalist",
|
| 20 |
+
"textural",
|
| 21 |
+
"organic",
|
| 22 |
+
"structured"
|
| 23 |
+
],
|
| 24 |
+
"visual_characteristics": [
|
| 25 |
+
"seashell imagery",
|
| 26 |
+
"muted color palette",
|
| 27 |
+
"decorative borders",
|
| 28 |
+
"botanical illustrations",
|
| 29 |
+
"textured background",
|
| 30 |
+
"handwritten-style typography"
|
| 31 |
+
],
|
| 32 |
+
"design_principles": {
|
| 33 |
+
"primary_principles": [
|
| 34 |
+
"balance",
|
| 35 |
+
"harmony",
|
| 36 |
+
"rhythm",
|
| 37 |
+
"contrast"
|
| 38 |
+
],
|
| 39 |
+
"visual_techniques": [
|
| 40 |
+
"natural texturing",
|
| 41 |
+
"framing elements",
|
| 42 |
+
"hierarchical typography"
|
| 43 |
+
]
|
| 44 |
+
}
|
| 45 |
+
}
|
src/data/designs/189/metadata.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"id": 189,
|
| 3 |
+
"url": "https://www.csszengarden.com/189",
|
| 4 |
+
"css_url": "https://www.csszengarden.com/189/189.css",
|
| 5 |
+
"title": "Mozart",
|
| 6 |
+
"author": "Andrew Brundle",
|
| 7 |
+
"description": {
|
| 8 |
+
"summary": "A richly textured, ornate website design that blends classical aesthetics with web design principles through a dark gold and black color scheme, musical motifs, and structured information hierarchy.",
|
| 9 |
+
"visual_style": "The design employs a baroque-inspired aesthetic with ornate gold decorative elements, musical notation, and historical imagery against a dark background, creating a sense of antiquity and artistic refinement.",
|
| 10 |
+
"emotional_impact": "The design evokes a sense of reverence and nostalgia, blending the formality of classical music with the warm richness of gold tones to create an atmosphere of artistic heritage.",
|
| 11 |
+
"compositional_elements": "A vertical layout with clearly defined sections separated by decorative musical notation bars, featuring a two-column structure with main content on the left and navigation elements on the right."
|
| 12 |
+
},
|
| 13 |
+
"artistic_context": {
|
| 14 |
+
"style_influences": "Baroque ornamentation, classical music iconography, illuminated manuscript traditions, vintage parchment textures",
|
| 15 |
+
"visual_metaphors": "Musical composition as design structure, golden illumination as enlightenment, ancient scrolls as knowledge repositories"
|
| 16 |
+
},
|
| 17 |
+
"categories": [
|
| 18 |
+
"ornate",
|
| 19 |
+
"baroque",
|
| 20 |
+
"vintage",
|
| 21 |
+
"textural",
|
| 22 |
+
"themed",
|
| 23 |
+
"high-contrast"
|
| 24 |
+
],
|
| 25 |
+
"visual_characteristics": [
|
| 26 |
+
"gold-black color scheme",
|
| 27 |
+
"musical notation motifs",
|
| 28 |
+
"decorative dividers",
|
| 29 |
+
"historical imagery",
|
| 30 |
+
"textured backgrounds",
|
| 31 |
+
"ornamental typography"
|
| 32 |
+
],
|
| 33 |
+
"design_principles": {
|
| 34 |
+
"primary_principles": [
|
| 35 |
+
"contrast",
|
| 36 |
+
"repetition",
|
| 37 |
+
"hierarchy",
|
| 38 |
+
"thematic consistency"
|
| 39 |
+
],
|
| 40 |
+
"visual_techniques": [
|
| 41 |
+
"textural layering",
|
| 42 |
+
"decorative framing",
|
| 43 |
+
"historical referencing"
|
| 44 |
+
]
|
| 45 |
+
}
|
| 46 |
+
}
|
src/data/designs/194/metadata.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"id": 194,
|
| 3 |
+
"url": "https://www.csszengarden.com/194",
|
| 4 |
+
"css_url": "https://www.csszengarden.com/194/194.css",
|
| 5 |
+
"title": "Dark Rose",
|
| 6 |
+
"author": "Rose Fu",
|
| 7 |
+
"description": {
|
| 8 |
+
"summary": "An elegant, minimalist web design that evokes traditional manuscript aesthetics while presenting structured content in a serene, organized layout.",
|
| 9 |
+
"visual_style": "The design employs a refined parchment-like aesthetic with subtle textures, decorative elements, and layered paper effects to create a contemplative, scholarly atmosphere.",
|
| 10 |
+
"emotional_impact": "The muted color palette and balanced composition evoke tranquility and mindfulness, reinforced by the delicate floral element that adds an organic touch to the structured layout.",
|
| 11 |
+
"compositional_elements": "The design utilizes a clear vertical hierarchy with distinct content sections, subtle borders, and thoughtful spacing that guides the viewer's eye naturally through the information."
|
| 12 |
+
},
|
| 13 |
+
"artistic_context": {
|
| 14 |
+
"style_influences": "Traditional manuscript design, Eastern minimalism, vintage document aesthetics, botanical illustration",
|
| 15 |
+
"visual_metaphors": "Layered paper as knowledge accumulation, floral element as natural growth and refinement, scroll-like presentation suggesting ancient wisdom"
|
| 16 |
+
},
|
| 17 |
+
"categories": [
|
| 18 |
+
"minimalist",
|
| 19 |
+
"vintage-inspired",
|
| 20 |
+
"elegant",
|
| 21 |
+
"textural",
|
| 22 |
+
"grid-based",
|
| 23 |
+
"manuscript"
|
| 24 |
+
],
|
| 25 |
+
"visual_characteristics": [
|
| 26 |
+
"layered-paper effect",
|
| 27 |
+
"muted earth tones",
|
| 28 |
+
"botanical accent",
|
| 29 |
+
"typographic hierarchy",
|
| 30 |
+
"textured backgrounds",
|
| 31 |
+
"decorative borders"
|
| 32 |
+
],
|
| 33 |
+
"design_principles": {
|
| 34 |
+
"primary_principles": [
|
| 35 |
+
"balance",
|
| 36 |
+
"hierarchy",
|
| 37 |
+
"contrast",
|
| 38 |
+
"harmony"
|
| 39 |
+
],
|
| 40 |
+
"visual_techniques": [
|
| 41 |
+
"layering",
|
| 42 |
+
"textural depth",
|
| 43 |
+
"negative space"
|
| 44 |
+
]
|
| 45 |
+
}
|
| 46 |
+
}
|
src/data/designs/198/metadata.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"id": 198,
|
| 3 |
+
"url": "https://www.csszengarden.com/198",
|
| 4 |
+
"css_url": "https://www.csszengarden.com/198/198.css",
|
| 5 |
+
"title": "The Original",
|
| 6 |
+
"author": "Joachim Shotter",
|
| 7 |
+
"description": {
|
| 8 |
+
"summary": "A dramatic dark website design with strong grunge aesthetics, featuring distressed typography and a stark black background with high contrast white and red textual elements.",
|
| 9 |
+
"visual_style": "The design employs a gritty, industrial aesthetic with heavily distressed typography and textural elements against a deep black background, creating a raw, edgy visual experience.",
|
| 10 |
+
"emotional_impact": "The dark, high-contrast composition evokes an underground, rebellious atmosphere with an intense, almost confrontational energy tempered by structured information hierarchy.",
|
| 11 |
+
"compositional_elements": "The layout presents a clear two-column structure with distressed headings and red accent elements creating visual punctuation throughout the vertical scroll design."
|
| 12 |
+
},
|
| 13 |
+
"artistic_context": {
|
| 14 |
+
"style_influences": "Industrial design, grunge typography, digital decay aesthetics, zen minimalism contrasted with chaotic texture",
|
| 15 |
+
"visual_metaphors": "Digital erosion, rebellion against clean design, controlled chaos, technological weathering"
|
| 16 |
+
},
|
| 17 |
+
"categories": [
|
| 18 |
+
"grunge",
|
| 19 |
+
"industrial",
|
| 20 |
+
"high-contrast",
|
| 21 |
+
"minimalist",
|
| 22 |
+
"textural",
|
| 23 |
+
"dark-themed"
|
| 24 |
+
],
|
| 25 |
+
"visual_characteristics": [
|
| 26 |
+
"distressed-typography",
|
| 27 |
+
"black-background",
|
| 28 |
+
"red-accents",
|
| 29 |
+
"textural-overlays",
|
| 30 |
+
"two-column-layout",
|
| 31 |
+
"angular-elements"
|
| 32 |
+
],
|
| 33 |
+
"design_principles": {
|
| 34 |
+
"primary_principles": [
|
| 35 |
+
"contrast",
|
| 36 |
+
"hierarchy",
|
| 37 |
+
"repetition",
|
| 38 |
+
"texture"
|
| 39 |
+
],
|
| 40 |
+
"visual_techniques": [
|
| 41 |
+
"distressing",
|
| 42 |
+
"layering",
|
| 43 |
+
"typographic-scaling"
|
| 44 |
+
]
|
| 45 |
+
}
|
| 46 |
+
}
|