agency creative portfolio design-studio editorial creative
Agency Creative
Editorial-style creative agency page with oversized typography, portfolio grid, and bold black-white-violet palette.
creative Responsive Vanilla JS
Live Preview
Sections
navbarheroportfolioaboutservicestestimonialcontactfooter
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>Forma Studio — Design & Brand Agency</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>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
body { font-family: 'Inter', sans-serif; }
/* Brand tokens */
:root {
--ws-color-accent: oklch(0.44 0.24 292); /* violet-600 */
--ws-color-accent-hover: oklch(0.38 0.24 292); /* violet-700 */
--ws-color-accent-subtle: oklch(0.95 0.05 292); /* violet-100 */
--ws-color-accent-muted: oklch(0.72 0.17 292); /* violet-400 */
}
/* underline-draw snippet */
.underline-draw {
--underline-color: currentColor;
--underline-speed: 0.25s;
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; }
}
/* hover-lift snippet */
.hover-lift {
--lift-distance: -6px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.2);
--lift-duration: 0.35s;
transition:
transform var(--lift-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow var(--lift-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
/* Template-specific helpers */
.blend-overlay { mix-blend-mode: difference; }
</style>
</head>
<body class="bg-white text-neutral-900 antialiased">
<!-- Navbar -->
<nav class="ws-navbar fixed top-0 inset-x-0 z-50 bg-white/90 backdrop-blur-sm border-b border-neutral-100" aria-label="Main navigation">
<div class="max-w-7xl mx-auto flex items-center justify-between px-6 py-4">
<a href="#" class="text-xl font-extrabold tracking-tight">Forma<span class="text-violet-600">.</span></a>
<ul class="hidden md:flex items-center gap-8 text-sm font-medium text-neutral-500">
<li><a href="#work" class="underline-draw pb-1 hover:text-neutral-900 transition-colors">Work</a></li>
<li><a href="#about" class="underline-draw pb-1 hover:text-neutral-900 transition-colors">About</a></li>
<li><a href="#services" class="underline-draw pb-1 hover:text-neutral-900 transition-colors">Services</a></li>
<li><a href="#contact" class="underline-draw pb-1 hover:text-neutral-900 transition-colors">Contact</a></li>
</ul>
<a href="#contact" class="hidden md:inline-flex items-center gap-2 bg-neutral-900 text-white text-sm font-medium px-5 py-2.5 rounded-full hover:bg-violet-600 transition-colors">
Start a project
</a>
<button id="menu-toggle" class="md:hidden p-2 -mr-2" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden border-t border-neutral-100 bg-white px-6 pb-6 pt-4">
<ul class="flex flex-col gap-4 text-base font-medium text-neutral-700">
<li><a href="#work" class="block py-1">Work</a></li>
<li><a href="#about" class="block py-1">About</a></li>
<li><a href="#services" class="block py-1">Services</a></li>
<li><a href="#contact" class="block py-1">Contact</a></li>
</ul>
<a href="#contact" class="mt-4 block text-center bg-neutral-900 text-white text-sm font-medium px-5 py-2.5 rounded-full">
Start a project
</a>
</div>
</nav>
<!-- Hero -->
<header class="ws-hero min-h-screen flex flex-col justify-end px-6 pb-16 pt-32 md:pt-24 max-w-7xl mx-auto">
<div class="grid md:grid-cols-12 gap-6 items-end">
<div class="md:col-span-8">
<p class="text-violet-600 font-medium text-sm tracking-widest uppercase mb-6">Design & Brand Studio</p>
<h1 class="text-5xl sm:text-7xl lg:text-[6.5rem] font-black leading-[0.9] tracking-tighter text-neutral-900">
We craft brands<br/>
<span class="text-neutral-300">that refuse to</span><br/>
blend in<span class="text-violet-600">.</span>
</h1>
</div>
<div class="md:col-span-4 md:pb-2">
<p class="text-neutral-500 text-lg leading-relaxed max-w-sm">
Forma Studio is a multidisciplinary design agency shaping identities, interfaces, and experiences for ambitious brands.
</p>
<a href="#work" class="inline-flex items-center gap-2 mt-6 text-sm font-semibold text-neutral-900 hover:text-violet-600 transition-colors group">
View selected work
<svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
</svg>
</a>
</div>
</div>
<div class="w-full h-px bg-neutral-200 mt-12"></div>
</header>
<!-- Work / Portfolio -->
<section id="work" class="ws-cards px-6 py-24 max-w-7xl mx-auto" aria-labelledby="work-heading">
<div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-16">
<h2 id="work-heading" class="text-4xl md:text-5xl font-extrabold tracking-tight">Selected work</h2>
<p class="text-neutral-400 text-sm font-medium tracking-widest uppercase">2023 — 2026</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<!-- Project 1 — large -->
<article class="hover-lift group cursor-pointer">
<div class="aspect-[4/3] rounded-2xl bg-violet-600 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-violet-500/50 to-transparent"></div>
<span class="absolute top-4 left-4 text-xs font-semibold bg-white/90 text-neutral-900 px-3 py-1 rounded-full">Brand Identity</span>
</div>
<h3 class="mt-4 text-lg font-bold group-hover:text-violet-600 transition-colors">Norde Architects</h3>
<p class="text-neutral-500 text-sm mt-1">Full rebrand, visual system, and digital presence for a Nordic architecture firm.</p>
</article>
<!-- Project 2 — large -->
<article class="hover-lift group cursor-pointer">
<div class="aspect-[4/3] rounded-2xl bg-neutral-900 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-tr from-neutral-800/60 to-transparent"></div>
<span class="absolute top-4 left-4 text-xs font-semibold bg-white/90 text-neutral-900 px-3 py-1 rounded-full">Web Design</span>
</div>
<h3 class="mt-4 text-lg font-bold group-hover:text-violet-600 transition-colors">Luminary Health</h3>
<p class="text-neutral-500 text-sm mt-1">E-commerce platform and packaging design for a wellness startup.</p>
</article>
<!-- Project 3 -->
<article class="hover-lift group cursor-pointer">
<div class="aspect-[4/3] rounded-2xl bg-amber-400 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-bl from-amber-300/40 to-transparent"></div>
<span class="absolute top-4 left-4 text-xs font-semibold bg-white/90 text-neutral-900 px-3 py-1 rounded-full">Art Direction</span>
</div>
<h3 class="mt-4 text-lg font-bold group-hover:text-violet-600 transition-colors">Sable Magazine</h3>
<p class="text-neutral-500 text-sm mt-1">Art direction and editorial layout for a culture and fashion quarterly.</p>
</article>
<!-- Project 4 -->
<article class="hover-lift group cursor-pointer">
<div class="aspect-[4/3] rounded-2xl bg-emerald-500 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-400/40 to-transparent"></div>
<span class="absolute top-4 left-4 text-xs font-semibold bg-white/90 text-neutral-900 px-3 py-1 rounded-full">Digital Product</span>
</div>
<h3 class="mt-4 text-lg font-bold group-hover:text-violet-600 transition-colors">Kanso Finance</h3>
<p class="text-neutral-500 text-sm mt-1">Mobile banking app with a calm, human-centered interface.</p>
</article>
<!-- Project 5 — wide -->
<article class="md:col-span-2 hover-lift group cursor-pointer">
<div class="aspect-[21/9] rounded-2xl bg-neutral-200 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-neutral-300/40 to-transparent"></div>
<span class="absolute top-4 left-4 text-xs font-semibold bg-white/90 text-neutral-900 px-3 py-1 rounded-full">Campaign</span>
</div>
<h3 class="mt-4 text-lg font-bold group-hover:text-violet-600 transition-colors">Parallel Festival 2025</h3>
<p class="text-neutral-500 text-sm mt-1">Visual identity, campaign materials, and wayfinding for a 3-day design festival in Berlin.</p>
</article>
</div>
</section>
<!-- About -->
<section id="about" class="bg-neutral-950 text-white px-6 py-24" aria-labelledby="about-heading">
<div class="max-w-7xl mx-auto grid md:grid-cols-12 gap-12 md:gap-16 items-center">
<div class="md:col-span-5">
<div class="aspect-[3/4] rounded-2xl bg-neutral-800 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-t from-neutral-950/60 to-transparent"></div>
<div class="absolute bottom-6 left-6">
<p class="text-white/50 text-xs tracking-widest uppercase">Est. 2019</p>
<p class="text-white text-sm font-medium mt-1">Berlin · Lisbon</p>
</div>
</div>
</div>
<div class="md:col-span-7">
<h2 id="about-heading" class="text-4xl md:text-5xl font-extrabold tracking-tight mb-8">
Design is how<br/>we think<span class="text-violet-400">.</span>
</h2>
<div class="space-y-5 text-neutral-400 text-lg leading-relaxed max-w-xl">
<p>
Forma is a team of twelve designers, strategists, and developers who believe great brands
emerge at the intersection of clarity and courage.
</p>
<p>
We work with founders and creative directors who want to build something that stands on its own
— not something that follows the last trend deck. Every project starts with strategy and ends
with craft down to the last pixel.
</p>
</div>
<div class="ws-stats flex gap-12 mt-12">
<div>
<p class="text-3xl font-extrabold text-white">80+</p>
<p class="text-sm text-neutral-500 mt-1">Projects delivered</p>
</div>
<div>
<p class="text-3xl font-extrabold text-white">12</p>
<p class="text-sm text-neutral-500 mt-1">Team members</p>
</div>
<div>
<p class="text-3xl font-extrabold text-white">6</p>
<p class="text-sm text-neutral-500 mt-1">Years in business</p>
</div>
</div>
</div>
</div>
</section>
<!-- Services -->
<section id="services" class="ws-features px-6 py-24 max-w-7xl mx-auto" aria-labelledby="services-heading">
<div class="grid md:grid-cols-12 gap-12">
<div class="md:col-span-4">
<h2 id="services-heading" class="text-4xl md:text-5xl font-extrabold tracking-tight sticky top-28">
What we<br/>do<span class="text-violet-600">.</span>
</h2>
</div>
<div class="md:col-span-8">
<ul class="divide-y divide-neutral-200" role="list">
<li class="py-8 group">
<div class="flex items-start gap-6">
<span class="flex-shrink-0 w-10 h-10 rounded-full bg-violet-100 text-violet-600 flex items-center justify-center font-bold text-sm" aria-hidden="true">01</span>
<div>
<h3 class="text-xl font-bold group-hover:text-violet-600 transition-colors">Brand Strategy & Identity</h3>
<p class="text-neutral-500 mt-2 leading-relaxed max-w-lg">Naming, positioning, visual identity systems, brand guidelines. We define who you are before designing how you look.</p>
</div>
</div>
</li>
<li class="py-8 group">
<div class="flex items-start gap-6">
<span class="flex-shrink-0 w-10 h-10 rounded-full bg-violet-100 text-violet-600 flex items-center justify-center font-bold text-sm" aria-hidden="true">02</span>
<div>
<h3 class="text-xl font-bold group-hover:text-violet-600 transition-colors">Web & Digital Design</h3>
<p class="text-neutral-500 mt-2 leading-relaxed max-w-lg">Marketing sites, product interfaces, design systems. Responsive, fast, built to convert and delight.</p>
</div>
</div>
</li>
<li class="py-8 group">
<div class="flex items-start gap-6">
<span class="flex-shrink-0 w-10 h-10 rounded-full bg-violet-100 text-violet-600 flex items-center justify-center font-bold text-sm" aria-hidden="true">03</span>
<div>
<h3 class="text-xl font-bold group-hover:text-violet-600 transition-colors">Art Direction & Campaigns</h3>
<p class="text-neutral-500 mt-2 leading-relaxed max-w-lg">Photo shoots, video direction, campaign concepts. We translate brand strategy into visual storytelling.</p>
</div>
</div>
</li>
<li class="py-8 group">
<div class="flex items-start gap-6">
<span class="flex-shrink-0 w-10 h-10 rounded-full bg-violet-100 text-violet-600 flex items-center justify-center font-bold text-sm" aria-hidden="true">04</span>
<div>
<h3 class="text-xl font-bold group-hover:text-violet-600 transition-colors">Motion & Interaction</h3>
<p class="text-neutral-500 mt-2 leading-relaxed max-w-lg">Micro-interactions, page transitions, animated brand elements. Motion that serves purpose, not decoration.</p>
</div>
</div>
</li>
<li class="py-8 group">
<div class="flex items-start gap-6">
<span class="flex-shrink-0 w-10 h-10 rounded-full bg-violet-100 text-violet-600 flex items-center justify-center font-bold text-sm" aria-hidden="true">05</span>
<div>
<h3 class="text-xl font-bold group-hover:text-violet-600 transition-colors">Packaging & Print</h3>
<p class="text-neutral-500 mt-2 leading-relaxed max-w-lg">Product packaging, editorial design, environmental graphics. Tangible extensions of your digital brand.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- Testimonial -->
<section class="ws-testimonials bg-neutral-50 px-6 py-24" aria-labelledby="testimonial-heading">
<div class="max-w-4xl mx-auto text-center">
<h2 id="testimonial-heading" class="sr-only">Client testimonial</h2>
<svg class="w-10 h-10 text-violet-300 mx-auto mb-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"/>
</svg>
<blockquote>
<p class="text-2xl sm:text-3xl md:text-4xl font-bold leading-snug tracking-tight text-neutral-900">
Forma didn't just redesign our brand — they gave us the confidence to show up differently.
The work speaks before we do.
</p>
</blockquote>
<figcaption class="mt-8">
<p class="font-semibold text-neutral-900">Lena Mertens</p>
<p class="text-neutral-500 text-sm mt-1">Co-founder, Norde Architects</p>
</figcaption>
</div>
</section>
<!-- Contact -->
<section id="contact" class="ws-contact px-6 py-24 max-w-7xl mx-auto" aria-labelledby="contact-heading">
<div class="grid md:grid-cols-12 gap-12 md:gap-16">
<div class="md:col-span-5">
<h2 id="contact-heading" class="text-4xl md:text-5xl font-extrabold tracking-tight">
Let's make<br/>something<span class="text-violet-600">.</span>
</h2>
<p class="text-neutral-500 text-lg mt-6 leading-relaxed max-w-sm">
Have a project in mind? We'd love to hear about it. Drop us a line and we'll get back to you within 24 hours.
</p>
<div class="mt-8 space-y-3 text-sm text-neutral-500">
<p><span class="font-medium text-neutral-900">Email</span><br/>hello@formastudio.de</p>
<p><span class="font-medium text-neutral-900">Location</span><br/>Berlin, Germany · Lisbon, Portugal</p>
</div>
</div>
<div class="md:col-span-7">
<form class="ws-forms space-y-6" aria-label="Contact form">
<div class="grid sm:grid-cols-2 gap-6">
<div>
<label for="name" class="block text-sm font-medium text-neutral-700 mb-2">Name</label>
<input type="text" id="name" name="name" required
class="w-full border border-neutral-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition placeholder:text-neutral-400"
placeholder="Your name" />
</div>
<div>
<label for="email" class="block text-sm font-medium text-neutral-700 mb-2">Email</label>
<input type="email" id="email" name="email" required
class="w-full border border-neutral-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition placeholder:text-neutral-400"
placeholder="you@company.com" />
</div>
</div>
<div>
<label for="project" class="block text-sm font-medium text-neutral-700 mb-2">Project type</label>
<select id="project" name="project"
class="w-full border border-neutral-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition text-neutral-700">
<option value="" disabled selected>Select a service</option>
<option>Brand Identity</option>
<option>Web Design</option>
<option>Art Direction</option>
<option>Motion & Interaction</option>
<option>Packaging & Print</option>
<option>Something else</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium text-neutral-700 mb-2">Tell us about your project</label>
<textarea id="message" name="message" rows="5" required
class="w-full border border-neutral-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition placeholder:text-neutral-400 resize-none"
placeholder="Budget, timeline, goals..."></textarea>
</div>
<button type="submit"
class="bg-neutral-900 text-white font-medium text-sm px-8 py-3 rounded-full hover:bg-violet-600 transition-colors">
Send message
</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer border-t border-neutral-200 px-6 py-12 bg-white">
<div class="max-w-7xl mx-auto grid sm:grid-cols-2 md:grid-cols-4 gap-8">
<div>
<p class="text-xl font-extrabold tracking-tight">Forma<span class="text-violet-600">.</span></p>
<p class="text-neutral-500 text-sm mt-2 leading-relaxed">Design studio for brands that want to matter.</p>
</div>
<div>
<h3 class="text-sm font-semibold text-neutral-900 mb-3">Studio</h3>
<ul class="space-y-2 text-sm text-neutral-500" role="list">
<li><a href="#work" class="hover:text-neutral-900 transition-colors">Work</a></li>
<li><a href="#about" class="hover:text-neutral-900 transition-colors">About</a></li>
<li><a href="#services" class="hover:text-neutral-900 transition-colors">Services</a></li>
<li><a href="#contact" class="hover:text-neutral-900 transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-neutral-900 mb-3">Connect</h3>
<ul class="space-y-2 text-sm text-neutral-500" role="list">
<li><a href="#" class="hover:text-neutral-900 transition-colors">Instagram</a></li>
<li><a href="#" class="hover:text-neutral-900 transition-colors">Dribbble</a></li>
<li><a href="#" class="hover:text-neutral-900 transition-colors">LinkedIn</a></li>
<li><a href="#" class="hover:text-neutral-900 transition-colors">Twitter / X</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-neutral-900 mb-3">Legal</h3>
<ul class="space-y-2 text-sm text-neutral-500" role="list">
<li><a href="#" class="hover:text-neutral-900 transition-colors">Privacy Policy</a></li>
<li><a href="#" class="hover:text-neutral-900 transition-colors">Imprint</a></li>
</ul>
</div>
</div>
<div class="max-w-7xl mx-auto mt-12 pt-8 border-t border-neutral-100 flex flex-col sm:flex-row justify-between items-center gap-4">
<p class="text-xs text-neutral-400">© 2026 Forma Studio. All rights reserved.</p>
<p class="text-xs text-neutral-400">Made with intention in Berlin.</p>
</div>
</footer>
<!-- Mobile menu toggle -->
<script>
const toggle = document.getElementById('menu-toggle');
const menu = document.getElementById('mobile-menu');
toggle.addEventListener('click', () => {
const open = !menu.classList.contains('hidden');
menu.classList.toggle('hidden');
toggle.setAttribute('aria-expanded', String(!open));
});
// Close menu on link click
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
toggle.setAttribute('aria-expanded', 'false');
});
});
</script>
</body>
</html>
Bold creative agency template with editorial design sensibility. Black-white base with violet accents creates a sophisticated, gallery-like presence.