Bauhaus Editorial Design Secrets: The Full Process of My Personal Website from Concept to Launch

Most personal creative websites look identical. Dark background, gradient glow blobs, frosted glass cards, generous border-radius on everything, and some variety of blue-purple "tech energy" lighting effect. This template has practically become the default uniform for "AI creator portfolios." I had one of these sites. It looked fine. But every time I opened it, there was a hollow feeling I couldn't quite name. The problem wasn't that it was ugly. The problem was that it was silent . Design should be a creator's first sentence of self-introduction. But template-driven sites don't say anything about you — they say "I installed a popular UI library." So when I set out to redesign WindFlash AI, I started from a more fundamental question: What if a French editorial design master and a German Bauhaus master collaborated on this website? What would they build? This sounds like a thought experiment for its own sake. But it produced a complete and coherent design logic — a logic I've come to call Bauhaus Editorial . --- Why Bauhaus? The Bauhaus was a school of art and industrial design founded in Weimar, Germany in 1919. It survived only fourteen years before the Nazis shut it down in 1933. In those fourteen years, it permanently altered the visual language of the twentieth century and beyond. Its central proposition was radical in its simplicity: form follows function . But most people misunderstand what that means in practice. They assume Bauhaus equals "minimalism," equals "less is more," equals "strip away all decoration." That's only half right. The true spirit of Bauhaus was making logic visible . The grid wasn't a tool for "aligning elements" — it was the skeleton of information structure, something to be felt and perceived by the reader. Typographic weight wasn't for "distinguishing headings from body text" — it was the externalization of meaning hierarchy. Geometric shapes weren't decoration — they were the language of spatial relationships. In other words, Bauhaus designers never asked "does this look good?" They asked: "does this visual decision hold up logically?" That question has been useful to me ever since I first encountered it. --- Why French Editorial Design? Pure Bauhaus, applied literally to a screen, can feel cold. Industrial. Functionally unimpeachable but lacking something — tension . The French editorial design tradition gave me the answer. Particularly the mid-twentieth century visual language established at magazines like Harper's Bazaar and Vogue Paris , and most notably the aesthetic codified by art director Alexey Brodovitch. Brodovitch served as art director at Harper's Bazaar for twenty-five years and essentially invented the visual grammar of the modern fashion magazine. His spreads weren't layouts where text and image coexisted — they were arenas where text and image were in dialogue, or even tension with each other. Enormous headlines deliberately broke out of the column grid. White space was allocated in quantities that seemed wasteful but felt essential. Dates, numbers, and editorial details were typeset in monospaced fonts in the margins, like footnotes to the visual experience itself. None of these decisions were made because they "looked good." They were made to create reading rhythm and visual weight — to control where the eye moves and where it pauses. That is the kind of voice I wanted. --- The Swiss International Style: Grid as Belief System The third influence is the Swiss International Typographic Style — also called the International Style — which emerged from Zurich and Basel in the 1950s and 60s and remains one of the dominant grammars of graphic design today. Its most famous practitioner is Josef Müller-Brockmann, whose book Grid Systems in Graphic Design has shaped generations of designers. His conviction: the grid is not a tool. It is a worldview . The Swiss grid is precise and mathematical. It divides the page into modules, and every element snaps strictly to module boundaries. Visual flow and information hierarchy are communicated through position and scale — not through color or ornament. In WindFlash AI's design, this influence shows up in several places: the asymmetric two-column layout of the Hero section (the ratio between the content area and the index column is calculated, not guessed); the thin ruled lines between sections; and the numerically-indexed section headers ( 01 —— GALLERY —— ) with lines that extend the full width of the container. These lines aren't "nice dividers." They are the grid logic made visible. --- Three Traditions, One Screen Bauhaus structural logic. French editorial tension and white space. Swiss grid precision. Putting these together on a screen presents an immediate challenge: all three traditions were born in print . And print and screen are fundamentally different media. Print is static, physical, has weight and texture. Screen is luminous, dynamic, infinitely scrollable. So the core design problem became: how do you recreate the feel of print editorial design on a glowing dark screen? My answer came down to four principles: typographic weight contrast, editorial numeralism, geometric anchoring, and disciplined color . --- Typography: A Conversation in Weight The entire site uses two typefaces. Headings use Space Grotesk ; body text uses DM Sans . Space Grotesk is a geometric sans-serif with strong Bauhaus DNA. Its letterforms are constructed geometrically, without the calligraphic qualities of humanist typefaces. But it deliberately preserves certain irregularities — the single-story lowercase a , for instance — that keep it from feeling mechanical. This was exactly what I needed: industrial but not robotic . The more significant typographic decision was weight. The Hero headline — "Wind" and "Flash" — uses radically different weights for the two words: Wind — font-weight: 300 (ultra-light) Flash — font-weight: 700 (bold) This extreme weight contrast within a single typeface is a classic move in print design. It generates visual impact purely through stroke thickness — no color, no special effects. Just the ratio of black to white within the letterforms, creating tension between two words that otherwise share the same DNA. Accompanying this weight contrast is a color distinction: Flash is rendered in a linear gradient from bright amber to deep copper ( #F0C040 → #D98018 → #B86010 ), while "Wind" sits in a low-contrast white ( white/70 ). This is designed to evoke the quality of metallic foil stamping on a printed cover — one word "selected" for emphasis, the other receding into the background. --- The Offset: Breaking Symmetry Deliberately "Wind" and "Flash" are not left-aligned with each other. "Flash" is offset significantly to the right — on a large screen, by approximately 224 pixels. This decision comes from French editorial tradition: deliberately break symmetry to manufacture a moment of hesitation . Symmetry is stable. But stability means predictability, and predictability means the eye slides past without pausing. An offset interrupts the automatic reading rhythm and forces the eye to stop briefly — to perceive the relationship between the two words rather than simply consuming them as a unit. In Brodovitch's spreads, this kind of "visual obstacle" appears constantly. Oversized letterforms breaking out of the column grid, photographs and text crossing into each other's territory — always motivated by the same instinct: don't let the reader get too comfortable . Between the two words sits a 32-pixel amber rule, offset by the same margin as "Flash." This line serves a dual function: it's a visual "breath pause" between two contrasting energies (soft/hard, light/heavy), and it's a symbolic boundary separating them. The offset value itself went through several iterations. Starting conservatively (around 24px, barely perceptible), it grew through successive rounds of testing until landing at clamp(6rem, 18vw, 14rem) — approximately 96px on mobile, 224px on large screens. The threshold I was looking for: large enough that the eye unambiguously perceives the two words as related-but-separate, not large enough to feel arbitrary or broken. Sometimes design needs you to push further than feels comfortable, then step back one step. --- Color: Printing Ink on Dark Paper The site's background is a very dark near-black ( #09090B ), not pure black. This distinction matters: pure black on screen creates aggressive contrast that reads as stark and digital. Deep near-black has the quality of unexposed film stock — a richness and depth that pure black lacks. All text avoids pure white, using opacity-modulated white at different levels according to information hierarchy: Primary headlines: white/70 (present, but not glaring) Body text: white/60 Secondary information: white/40 Metadata and annotations: white/20 This cascading opacity system maintains a monochromatic feel while creating clear information hierarchy. The reference is newspaper printing — where hierarchy is established through typeface size and weight rather than color differentiation. The only actual color in the system is amber gold ( amber ) — used for emphasis, active link states, and key UI elements. This color choice was inspired by metallic foil printing on vintage magazine covers : in darkness, it has a warm, weighted luminosity that reads as precious. Not the cool digital blue of typical tech design, but something warmer, handmade-feeling, with physical association. The specific amber gradient was calibrated carefully. An initial attempt using pure #FFD700 looked cheap — flat, like painted yellow, not like metal. The final gradient ( #F0C040 → #D98018 → #B86010 ) moves from near-platinum at the top to red-copper at the bottom, mimicking how actual metallic materials reflect raking light. This gives it a subtle material quality that flat color cannot achieve. --- The Masthead: An Editor's Metadata Bar At the top of the Hero section sits a dense, quiet Masthead bar: DIGITAL CREATIVE LAB · WINDFLASH AI · MMXXVI —— MMXXVI is 2026 in Roman numerals. The choice of Roman numerals isn't aesthetic nostalgia — it's about the visual weight of time . Roman numerals read slower than Arabic numerals. They carry archival gravity, a sense of permanence. They align with the overall "unhurried" quality of the design. The typeface is monospaced, fully uppercase, with wide letter-spacing. This treatment is drawn directly from print editorial design: the copyright lines on magazine title pages, the chapter headers inside books, the running heads on journal pages — small, quiet, tracking wide, announcing "this is metadata, not content." The Masthead sits at very low contrast ( white/25 ), nearly absorbed into the background. You have to spend a moment on the page before you notice it. This is intentional: it's a detail for careful readers, not a piece of information for scanners. --- Geometric Anchors: Structure in the Background The Hero background contains two nearly-invisible geometric elements: concentric circles and corner marks. The concentric circles (multiple rings at border border-white/5 opacity) are anchored to the right side of the composition. This is an homage to Bauhaus geometric vocabulary — the circle was considered the purest form in the Bauhaus system, representing completeness and infinite continuity. At near-zero opacity, they exist like watermarks in the visual field, creating spatial depth and recession against the strong foreground typography. The small right-angle marks at the corners derive from a very specific print reference: crop marks . In commercial printing, these marks appear at the corners of the print sheet to guide the bindery on where to cut. They are production artifacts — never meant to appear in the final printed piece. Including them in a digital design is a deliberate reference to print craft and production. It also functions as a subtle signal: this page was carefully composed . --- Section Headers: Editorial Chapter Markers Every content section uses a header formatted like this: 01 —— GALLERY ———————————————————— The numerical index ( 01 , 02 …) references magazine tables of contents. The em-dash rule extends from the section label across to the edge of the container — functioning as a strong horizontal anchor that pulls the eye from the left edge to the right, establishing a sense of horizontal order and intentionality. The section label itself is typeset in monospaced, fully uppercase, with extreme letter-spacing ( 0.4em ). This is a standard technique with small monospaced type: when a word is too small to establish visual presence through size alone, wide tracking allows it to occupy horizontal space and register despite its small scale. These section headers communicate no information that the reader doesn't already have — GALLERY is a simple word. Their function is structural: to establish rhythm for the page, the way bar lines establish meter in musical notation. A reader scrolling through the page senses the architecture without consciously analyzing it. --- What I Discovered Along the Way Several unexpected decisions in this project turned out to be among my favorites. The weight 300 problem. Space Grotesk defaults to loading weights 400–700 via Google Fonts. When I decided to use weight 300 for "Wind," I found the page reverting to browser default — the font-light class had no effect because the data for that weight simply wasn't loaded. This was a useful reminder: typographic decisions and font loading configuration must be considered together. If you choose a weight, you must confirm it's available in every rendering environment. The fix was explicit: add wght@300 to the Google Fonts URL. Simple, but easy to miss. Iterating the offset. When I first introduced the horizontal stagger between "Wind" and "Flash," the offset was small — around 24px, barely noticeable. Through testing, I pushed it progressively larger until reaching clamp(6rem, 18vw, 14rem) . The key threshold: large enough that the eye unambiguously reads the two words as related-but-separate rather than "something seems slightly off." Design sometimes needs to go further than comfortable before it reads clearly. Subtlety is a virtue, but insufficiency is not subtlety — it's ambiguity. Calibrating the amber. The first amber I tried was a flat #FFD700 . On the dark background it looked like painted yellow — cheap, no material quality. The final gradient took several passes to land on the right arc: a top that approaches platinum, a bottom that deepens into red-copper. The directional movement through the gradient — light to dark, cool to warm — mimics how metallic surfaces behave under directional light. On screen, this gives the text a subtle materiality that flat color fundamentally cannot achieve. --- The Underlying Principle I want to say something that doesn't fit neatly into a "technical article." Throughout this entire design process, the tools I used were unremarkable: Tailwind CSS, React, some inline styles. No Figma prototype. No design system. No Storybook component library. What actually determined the outcome wasn't the tooling. It was that before I touched a single class name, I knew what I wanted — a specific voice, a specific visual logic — and I could articulate it clearly enough to make decisions against it. The concept of "Bauhaus Editorial" gave me a reference frame for every concrete decision: Does this choice hold up within this logic? Is the weight contrast strong enough? Is this line communicating structure or just filling space? Does this color have a logical justification, or do I just "kind of like it"? With a reference frame, design becomes an act of argument rather than an act of guessing. I'm not a professional visual designer. I'm a developer who cares about design. But I increasingly believe that the most useful part of design education isn't learning which software to use — it's accumulating enough visual references. Reading enough books. Looking at enough well-designed things. And actively asking: why does this work? That question is what this project was built on. --- An Honest Disclaimer This design is not finished. It continues to evolve. Some sections of the site still lag behind the design language established in the Hero — the inner pages use a simpler approach that doesn't yet fully carry the editorial grammar developed at the top level. Getting a consistent visual language across an entire product is always harder than getting it right in one showcase section. That gap is part of the record too. Design vision always runs ahead of implementation. The direction is set; the work of following it through is ongoing. If you have questions about any specific decision in this design, or you're working through a similar problem on your own project, I'd be glad to hear from you. --- WindFlash AI is a bilingual AI creative lab. This article was written as part of an ongoing series documenting the design and build process behind the site.