CSS Zen Garden
A demonstration of what can be accomplished through pure CSS design.
Overview
CSS Zen Garden is a worldwide design challenge that demonstrates the beauty and potential of CSS.
Participants are given a fixed HTML file and must create completely different designs using only CSS.
In this project, I explored two distinct architectural styles — Classicism and Brutalism — translating their unique characteristics into digital design.
The goal was to showcase how visual atmosphere and storytelling can be conveyed without touching the underlying HTML, relying purely on styling.
Process
1. Research
I started by researching both Classicism and Brutalism.
For Classicism, I studied symmetry, balance, and ornamental details, while for Brutalism, I focused on raw, unpolished structures, strong materials like concrete, and a sense of honesty in form.
This research laid the conceptual groundwork, helping me define visual keywords for each style:
simple, balanced, harmonious for Classicism and
raw, bold, utilitarian for Brutalism.
2. Sketches & Wireframes
Based on my research, I created mood boards and found inspiration in different photos. I focused on maintaining the same HTML structure but dramatically altering the visual experience through careful CSS choices.
3. Design & Prototyping
I moved into prototyping directly in the browser, using pure HTML and CSS without external frameworks. Key techniques I used include:
- Advanced CSS Grid and Flexbox layouts
- Use of pseudo-elements (::before and ::after) for decorative accents
4. Final Result
The final result consists of two distinct visual themes:
- Classicism: Featuring elegant serif fonts, balanced grids, pastel color schemes, and ornamental elements that evoke a sense of tradition and refinement.
- Brutalism: Using strong sans-serif fonts, monochromatic and grayscale tones, blocky layouts, and a minimalistic, raw feeling that aligns with the Brutalist philosophy.
This project not only improved my CSS skills but also deepened my understanding of how design principles can be abstracted and communicated digitally.
Gallery
