agency studio boutique minimal design independent minimal
Agency Studio
Minimalist boutique design studio with full-width project showcases, text-only team section, and intentional whitespace.
minimal Responsive
Live Preview
Sections
navbarheroworkstudioapproachcontactfooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mono Studio</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<style>
body {
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
color: #171717;
background: #fafaf9;
}
/* Brand tokens */
:root {
--ws-color-accent: oklch(0.45 0.18 33); /* burned orange / orange-700 */
--ws-color-accent-hover: oklch(0.39 0.18 33); /* orange-800 */
--ws-color-surface: oklch(0.98 0.005 75); /* warm stone #fafaf9 */
--ws-color-border: oklch(0.90 0.005 75); /* #e5e5e5 */
--ws-color-muted: oklch(0.66 0.005 75); /* #a3a3a3 */
--ws-color-subtle: oklch(0.56 0.005 75); /* #525252 */
}
/* underline-draw snippet */
.underline-draw {
--underline-color: currentColor;
--underline-speed: 0.3s;
display: inline;
padding-bottom: 0.0625rem;
background: linear-gradient(to right, var(--underline-color) 0%, var(--underline-color) 98%);
background-size: 0 1px;
background-repeat: no-repeat;
background-position: left 98%;
transition: background-size var(--underline-speed) ease;
text-decoration: none;
}
.underline-draw:hover,
.underline-draw:focus-visible {
background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
.underline-draw { transition: none; }
}
/* Template-specific helpers */
.serif {
font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;
}
.accent-hover:hover {
color: #c2410c;
}
</style>
</head>
<body class="antialiased">
<!-- ===================== -->
<!-- NAVBAR -->
<!-- ===================== -->
<nav class="ws-navbar fixed top-0 inset-x-0 z-50" style="background: rgba(250,250,249,0.92); backdrop-filter: blur(8px);" aria-label="Main navigation">
<div class="max-w-6xl mx-auto flex items-center justify-between px-6 sm:px-8 py-5">
<a href="#" class="serif text-lg font-bold tracking-tight">Mono Studio</a>
<ul class="flex items-center gap-6 sm:gap-8 text-sm" style="color: #737373;">
<li><a href="#work" class="transition-colors hover:text-neutral-900">Work</a></li>
<li><a href="#studio" class="transition-colors hover:text-neutral-900">Studio</a></li>
<li><a href="#contact" class="transition-colors accent-hover">Say Hello</a></li>
</ul>
</div>
</nav>
<!-- ===================== -->
<!-- HERO -->
<!-- ===================== -->
<header class="ws-hero min-h-screen flex flex-col items-center justify-center px-6 relative">
<h1 class="serif text-4xl sm:text-6xl md:text-7xl lg:text-[5.5rem] font-normal text-center leading-[1.1] tracking-tight max-w-4xl">
We design things<br />
that matter.
</h1>
<!-- Scroll indicator -->
<div class="absolute bottom-10 left-1/2 -translate-x-1/2" aria-hidden="true">
<svg class="w-4 h-4 animate-bounce" style="color: #a3a3a3;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</div>
</header>
<!-- ===================== -->
<!-- SELECTED WORK -->
<!-- ===================== -->
<section id="work" class="ws-cards px-6 sm:px-8 pt-20 pb-24 md:pt-28 md:pb-32 max-w-6xl mx-auto" aria-labelledby="work-heading">
<h2 id="work-heading" class="text-xs tracking-[0.2em] uppercase mb-20" style="color: #a3a3a3;">
Selected Work
</h2>
<!-- Project 01 — image right -->
<article class="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-10 items-center mb-4">
<div class="md:col-span-5 order-2 md:order-1 py-8">
<span class="text-xs font-mono" style="color: #a3a3a3;">01</span>
<h3 class="serif text-2xl sm:text-3xl mt-3 mb-1">
<a href="#" class="underline-draw">Norde Architects</a>
</h3>
<p class="text-sm mt-3" style="color: #a3a3a3;">
<span>Brand Identity</span>
<span class="mx-2">/</span>
<span>Norde AG</span>
<span class="mx-2">/</span>
<span>2025</span>
</p>
</div>
<div class="md:col-span-7 order-1 md:order-2">
<div class="aspect-[16/10] rounded-sm" style="background-color: #fef3c7;"></div>
</div>
</article>
<div class="border-t" style="border-color: #e5e5e5;"></div>
<!-- Project 02 — image left -->
<article class="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-10 items-center mb-4">
<div class="md:col-span-7">
<div class="aspect-[16/10] rounded-sm" style="background-color: #e5e5e5;"></div>
</div>
<div class="md:col-span-5 py-8">
<span class="text-xs font-mono" style="color: #a3a3a3;">02</span>
<h3 class="serif text-2xl sm:text-3xl mt-3 mb-1">
<a href="#" class="underline-draw">Sable Magazine</a>
</h3>
<p class="text-sm mt-3" style="color: #a3a3a3;">
<span>Editorial Design</span>
<span class="mx-2">/</span>
<span>Sable Media</span>
<span class="mx-2">/</span>
<span>2025</span>
</p>
</div>
</article>
<div class="border-t" style="border-color: #e5e5e5;"></div>
<!-- Project 03 — image right -->
<article class="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-10 items-center">
<div class="md:col-span-5 order-2 md:order-1 py-8">
<span class="text-xs font-mono" style="color: #a3a3a3;">03</span>
<h3 class="serif text-2xl sm:text-3xl mt-3 mb-1">
<a href="#" class="underline-draw">Kanso Finance</a>
</h3>
<p class="text-sm mt-3" style="color: #a3a3a3;">
<span>Digital Product</span>
<span class="mx-2">/</span>
<span>Kanso GmbH</span>
<span class="mx-2">/</span>
<span>2024</span>
</p>
</div>
<div class="md:col-span-7 order-1 md:order-2">
<div class="aspect-[16/10] rounded-sm" style="background-color: #d6d3d1;"></div>
</div>
</article>
</section>
<!-- ===================== -->
<!-- STUDIO -->
<!-- ===================== -->
<section id="studio" class="px-6 sm:px-8 py-24 md:py-32 max-w-6xl mx-auto" aria-labelledby="studio-heading">
<h2 id="studio-heading" class="text-xs tracking-[0.2em] uppercase mb-20" style="color: #a3a3a3;">
Studio
</h2>
<p class="serif text-2xl sm:text-3xl md:text-4xl leading-snug max-w-2xl mb-24">
Small team. Big ideas.<br />
No bullshit.
</p>
<p class="text-base leading-relaxed max-w-xl mb-20" style="color: #525252;">
Mono is a design studio of three. We work with founders, studios, and cultural
institutions who care about craft. We say no more than we say yes, because the work
only works when we believe in it too.
</p>
<!-- Team -->
<div class="border-t" style="border-color: #e5e5e5;">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-8 py-7 border-b" style="border-color: #e5e5e5;">
<p class="serif text-lg">Jonas Seidel</p>
<p class="text-sm" style="color: #a3a3a3;">Creative Director</p>
<p class="text-sm" style="color: #525252;">Believes every pixel is a decision.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-8 py-7 border-b" style="border-color: #e5e5e5;">
<p class="serif text-lg">Mara Klein</p>
<p class="text-sm" style="color: #a3a3a3;">Design Lead</p>
<p class="text-sm" style="color: #525252;">Makes the complex feel effortless.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-8 py-7 border-b" style="border-color: #e5e5e5;">
<p class="serif text-lg">Tom Richter</p>
<p class="text-sm" style="color: #a3a3a3;">Developer</p>
<p class="text-sm" style="color: #525252;">Turns concepts into things that work.</p>
</div>
</div>
</section>
<!-- ===================== -->
<!-- APPROACH -->
<!-- ===================== -->
<section class="ws-steps px-6 sm:px-8 py-24 md:py-32 max-w-6xl mx-auto" aria-labelledby="approach-heading">
<h2 id="approach-heading" class="text-xs tracking-[0.2em] uppercase mb-20" style="color: #a3a3a3;">
Approach
</h2>
<div class="max-w-2xl">
<!-- Principle 01 -->
<div class="mb-20">
<span class="text-xs font-mono" style="color: #a3a3a3;">01</span>
<h3 class="serif text-2xl sm:text-3xl mt-3 mb-5">Listen first</h3>
<p class="leading-relaxed" style="color: #525252;">
We don't start with mockups. We start with questions. Understanding your problem
is the only way to solve it right. Most of the work happens before we open Figma.
</p>
</div>
<!-- Principle 02 -->
<div class="mb-20">
<span class="text-xs font-mono" style="color: #a3a3a3;">02</span>
<h3 class="serif text-2xl sm:text-3xl mt-3 mb-5">Less but better</h3>
<p class="leading-relaxed" style="color: #525252;">
Every element earns its place. We remove until only the essential remains.
Good design is as little design as possible. If it doesn't serve a purpose,
it doesn't ship.
</p>
</div>
<!-- Principle 03 -->
<div>
<span class="text-xs font-mono" style="color: #a3a3a3;">03</span>
<h3 class="serif text-2xl sm:text-3xl mt-3 mb-5">Ship it</h3>
<p class="leading-relaxed" style="color: #525252;">
Perfection is a myth we don't subscribe to. We believe in momentum, iteration,
and getting real work into the world where it can make a difference. Done is
better than perfect — but done well is better than both.
</p>
</div>
</div>
</section>
<!-- ===================== -->
<!-- CONTACT -->
<!-- ===================== -->
<section id="contact" class="ws-contact px-6 sm:px-8 py-24 md:py-32 max-w-6xl mx-auto" aria-labelledby="contact-heading">
<h2 id="contact-heading" class="serif text-5xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tight mb-16">
Say Hello
</h2>
<a href="mailto:hello@monostudio.de"
class="serif text-xl sm:text-2xl md:text-3xl underline-draw accent-hover transition-colors">
hello@monostudio.de
</a>
<div class="flex gap-6 mt-12 text-sm" style="color: #a3a3a3;">
<a href="#" class="transition-colors accent-hover">Instagram</a>
<a href="#" class="transition-colors accent-hover">Dribbble</a>
</div>
<p class="text-sm mt-12" style="color: #a3a3a3;">Based in Hamburg</p>
</section>
<!-- ===================== -->
<!-- FOOTER -->
<!-- ===================== -->
<footer class="ws-footer px-6 sm:px-8 py-10 border-t" style="border-color: #e5e5e5;">
<p class="text-center text-xs" style="color: #a3a3a3;">© 2026 Mono Studio</p>
</footer>
</body>
</html>
Boutique studio template that proves less is more. Monochrome, serif headlines, extreme whitespace. The design itself is the portfolio piece.