01
Stable foundation
Semantic HTML, keyboard access, responsive layout, and performance remain fixed.
Art history to web system
Choose a movement. Convert its logic into a working interface.
This studio treats art history as a source of rules, not a costume library. It converts composition, typography, color, rhythm, and hierarchy into reusable web-design decisions.
Mucha is the first deep connection: his framed compositions and repeated visual grammar become responsive tokens, layout rules, and interface behavior.
02
Historical grammar
Each movement changes proportion, type, color, border, rhythm, and compositional logic.
03
Web output
The result includes a live preview, design rules, CSS tokens, and starter markup.
BUILD ENVIRONMENT / INPUT
Select the visual grammar.
Selected interpretation
Translate Mucha's framed compositions, halos, botanical rhythm, lettering zones, and controlled abundance into a web system without copying a specific artwork.
Read why Mucha was designing systemsWebsite brief
LIVE OUTPUT / RESPONSIVE PREVIEW
Applied system: Mucha / Art Nouveau
Cultural space / New season
A slower place for ambitious ideas.
A members' house, studio, and cultural programme designed for people who want work and life to feel more connected.
Enter the houseDESIGN SYSTEM / RULES
The style becomes decisions your team can reuse.
Framed central composition with a clear typographic base
- 01Use an ornamental frame to establish hierarchy, not as a decorative afterthought.
- 02Place one strong circular motif behind the primary subject or message.
- 03Keep copy in explicit zones so abundance never damages readability.
- 04Repeat botanical curves, muted mineral colors, and fine rules across components.
Starter output
CSS tokens plus semantic markup
:root {
--art-bg: #efe3c4;
--art-surface: #fbf3dc;
--art-text: #243b35;
--art-accent: #a8463f;
--art-accent-2: #66784b;
--art-accent-3: #66784b;
--art-line: #8a663b;
--art-radius: 2.5rem;
--art-shadow: 0 28px 70px rgba(79, 55, 28, 0.22);
--art-display: Georgia, 'Times New Roman', serif;
--art-body: Arial, Helvetica, sans-serif;
}
.art-history-page {
color: var(--art-text);
background: var(--art-bg);
font-family: var(--art-body);
}
.art-history-page h1 {
font-family: var(--art-display);
}
/* Framed central composition with a clear typographic base */
<section class="art-history-page" data-movement="mucha">
<p>Aster House</p>
<h1>A slower place for ambitious ideas.</h1>
<p>A members' house, studio, and cultural programme designed for people who want work and life to feel more connected.</p>
<a href="#enter">Enter the house</a>
</section>From prototype to production
The next step is not imitation. It is an authored design system with historical intelligence.
HAAM can turn one of these directions into a complete responsive product identity, component system, and production website while keeping the source logic visible.