agency portfolio minimal clean zinc grid serif code design-studio freelancer minimal
Agency Precision
Clean minimal design agency site with grid background, serif-italic hero, numbered service cards, and syntax-highlighted code block.
minimal Responsive Animated
Live Preview
Sections
navbarheroservicesworkapproachprocesstestimonialctafooter
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Studio — Digital Design Agency</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap" rel="stylesheet" />
<style>
.grid-bg {
background-color: #fafafa;
background-image:
linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px),
linear-gradient(to right, rgba(0,0,0,0.045) 1px, transparent 1px);
background-size: 32px 32px;
}
.blur-orb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 700px;
height: 460px;
background: radial-gradient(ellipse, rgba(139,92,246,0.09) 0%, rgba(59,130,246,0.06) 50%, transparent 70%);
filter: blur(48px);
pointer-events: none;
}
.serif-italic {
font-family: 'Lora', Georgia, serif;
font-style: italic;
}
.service-card {
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}
.service-card .arrow-icon {
opacity: 0;
transform: translateX(-4px) translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.service-card:hover .arrow-icon {
opacity: 1;
transform: translateX(0) translateY(0);
}
.work-card .work-arrow {
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.work-card:hover .work-arrow {
background-color: #18181b;
border-color: #18181b;
}
.work-card .work-arrow svg {
transition: color 0.2s ease;
}
.work-card:hover .work-arrow svg {
color: #ffffff;
}
.code-block {
background: #18181b;
border-radius: 14px;
padding: 20px 24px 24px;
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: 12.5px;
line-height: 1.7;
}
.tok-k { color: #c084fc; }
.tok-s { color: #86efac; }
.tok-t { color: #67e8f9; }
.tok-f { color: #93c5fd; }
.tok-p { color: #a1a1aa; }
.tok-c { color: #52525b; font-style: italic; }
@media (prefers-reduced-motion: reduce) {
.service-card, .service-card .arrow-icon,
.work-card .work-arrow, .work-card .work-arrow svg { transition: none; }
}
</style>
</head>
<body class="bg-[#fafafa] text-zinc-800 antialiased">
<!-- Navigation -->
<header class="fixed top-0 inset-x-0 z-50 border-b border-zinc-200 bg-[#fafafa]/90 backdrop-blur-sm">
<nav class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
<a href="#" class="text-sm font-semibold text-zinc-900 tracking-tight">Studio</a>
<ul class="hidden md:flex items-center gap-7 text-sm text-zinc-500">
<li><a href="#services" class="hover:text-zinc-900 transition-colors">Services</a></li>
<li><a href="#work" class="hover:text-zinc-900 transition-colors">Work</a></li>
<li><a href="#process" class="hover:text-zinc-900 transition-colors">Process</a></li>
</ul>
<div class="flex items-center gap-3">
<a href="#" class="hidden md:block text-sm text-zinc-500 hover:text-zinc-900 transition-colors">Log in</a>
<a href="#contact" class="text-sm bg-zinc-900 text-white px-4 py-1.5 rounded-full hover:bg-zinc-700 transition-colors">Get started</a>
</div>
</nav>
</header>
<!-- Hero -->
<section class="grid-bg relative min-h-screen flex items-center justify-center overflow-hidden pt-14">
<div class="blur-orb" aria-hidden="true"></div>
<div class="relative z-10 max-w-4xl mx-auto px-6 text-center py-24">
<!-- Availability badge -->
<div class="inline-flex items-center gap-2 text-xs text-zinc-500 border border-zinc-200 rounded-full px-3 py-1.5 mb-10 bg-white/70 backdrop-blur-sm">
<span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" aria-hidden="true"></span>
Available for new projects
</div>
<!-- Heading -->
<h1 class="text-5xl sm:text-6xl lg:text-[72px] font-semibold text-zinc-900 leading-[1.06] tracking-tight mb-6">
Designing digital products<br>
with <span class="serif-italic font-normal">precision</span> and <span class="serif-italic font-normal">elegance</span>
</h1>
<p class="text-lg text-zinc-500 max-w-lg mx-auto mb-10 leading-relaxed">
We build pixel-perfect, scalable design systems that help teams ship faster without compromising on quality.
</p>
<!-- CTAs -->
<div class="flex items-center justify-center gap-3 flex-wrap">
<a href="#work" class="text-sm bg-zinc-900 text-white px-5 py-2.5 rounded-full hover:bg-zinc-700 transition-colors font-medium">View portfolio</a>
<a href="#contact" class="text-sm text-zinc-600 border border-zinc-200 bg-white/60 px-5 py-2.5 rounded-full hover:bg-white hover:border-zinc-300 transition-colors">Contact us</a>
</div>
<!-- Stats -->
<div class="flex items-center justify-center gap-10 mt-16 pt-10 border-t border-zinc-200/70">
<div class="text-center">
<div class="text-2xl font-semibold text-zinc-900 tabular-nums">47</div>
<div class="text-xs text-zinc-500 mt-0.5">Projects delivered</div>
</div>
<div class="w-px h-8 bg-zinc-200" aria-hidden="true"></div>
<div class="text-center">
<div class="text-2xl font-semibold text-zinc-900">6 yrs</div>
<div class="text-xs text-zinc-500 mt-0.5">In practice</div>
</div>
<div class="w-px h-8 bg-zinc-200" aria-hidden="true"></div>
<div class="text-center">
<div class="text-2xl font-semibold text-zinc-900 tabular-nums">98%</div>
<div class="text-xs text-zinc-500 mt-0.5">Client satisfaction</div>
</div>
</div>
</div>
<!-- Scroll hint -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1.5 text-zinc-400" aria-hidden="true">
<span class="text-[10px] tracking-widest uppercase">Scroll</span>
<svg class="w-4 h-4 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</div>
</section>
<!-- Services -->
<section id="services" class="max-w-6xl mx-auto px-6 py-24">
<div class="mb-12">
<p class="text-xs font-medium text-zinc-400 uppercase tracking-widest mb-3">Services</p>
<h2 class="text-3xl font-semibold text-zinc-900 leading-tight">
What we do <span class="serif-italic font-normal">best</span>
</h2>
</div>
<div class="grid md:grid-cols-3 gap-4">
<!-- Card 01 -->
<div class="service-card border border-zinc-200 rounded-2xl p-6 bg-[#fafafa]">
<div class="flex items-start justify-between mb-6">
<span class="text-xs font-medium text-zinc-400 tabular-nums">01</span>
<span class="arrow-icon text-zinc-400" aria-hidden="true">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/></svg>
</span>
</div>
<div class="w-9 h-9 rounded-xl border border-zinc-200 bg-white flex items-center justify-center mb-4">
<svg class="w-4 h-4 text-zinc-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
<rect x="3" y="3" width="7" height="7" rx="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/>
<rect x="14" y="14" width="7" height="7" rx="1.5"/>
</svg>
</div>
<h3 class="text-base font-semibold text-zinc-900 mb-2">Interface Design</h3>
<p class="text-sm text-zinc-500 leading-relaxed">Pixel-perfect UI components and layouts built to production standards in Figma, ready for developer handoff.</p>
</div>
<!-- Card 02 -->
<div class="service-card border border-zinc-200 rounded-2xl p-6 bg-[#fafafa]">
<div class="flex items-start justify-between mb-6">
<span class="text-xs font-medium text-zinc-400 tabular-nums">02</span>
<span class="arrow-icon text-zinc-400" aria-hidden="true">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/></svg>
</span>
</div>
<div class="w-9 h-9 rounded-xl border border-zinc-200 bg-white flex items-center justify-center mb-4">
<svg class="w-4 h-4 text-zinc-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
<path d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/>
</svg>
</div>
<h3 class="text-base font-semibold text-zinc-900 mb-2">Product Strategy</h3>
<p class="text-sm text-zinc-500 leading-relaxed">From early discovery to launch — we shape product thinking, information architecture, and growth frameworks.</p>
</div>
<!-- Card 03 -->
<div class="service-card border border-zinc-200 rounded-2xl p-6 bg-[#fafafa]">
<div class="flex items-start justify-between mb-6">
<span class="text-xs font-medium text-zinc-400 tabular-nums">03</span>
<span class="arrow-icon text-zinc-400" aria-hidden="true">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/></svg>
</span>
</div>
<div class="w-9 h-9 rounded-xl border border-zinc-200 bg-white flex items-center justify-center mb-4">
<svg class="w-4 h-4 text-zinc-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
<polyline points="16 18 22 12 16 6"/>
<polyline points="8 6 2 12 8 18"/>
</svg>
</div>
<h3 class="text-base font-semibold text-zinc-900 mb-2">Design Engineering</h3>
<p class="text-sm text-zinc-500 leading-relaxed">Production-quality code alongside your design. Tailwind, React, and component systems that developers love to work with.</p>
</div>
</div>
</section>
<!-- Selected Work -->
<section id="work" class="border-t border-zinc-200 bg-white py-24">
<div class="max-w-6xl mx-auto px-6">
<div class="flex items-end justify-between mb-12">
<div>
<p class="text-xs font-medium text-zinc-400 uppercase tracking-widest mb-3">Selected Work</p>
<h2 class="text-3xl font-semibold text-zinc-900 leading-tight">
Recent <span class="serif-italic font-normal">projects</span>
</h2>
</div>
<a href="#" class="hidden md:flex items-center gap-1.5 text-sm text-zinc-500 hover:text-zinc-900 transition-colors">
View all
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/></svg>
</a>
</div>
<div class="grid md:grid-cols-2 gap-4">
<!-- Project 01 -->
<div class="work-card group rounded-2xl overflow-hidden border border-zinc-200 cursor-pointer">
<div class="aspect-[4/3] bg-gradient-to-br from-violet-50 via-indigo-50 to-blue-50 relative flex items-center justify-center overflow-hidden">
<div class="w-64 bg-white rounded-xl shadow-xl border border-zinc-100 p-4 -rotate-1 group-hover:rotate-0 group-hover:scale-105 transition-all duration-500">
<div class="flex items-center gap-1.5 mb-3">
<div class="w-2 h-2 rounded-full bg-red-400" aria-hidden="true"></div>
<div class="w-2 h-2 rounded-full bg-yellow-400" aria-hidden="true"></div>
<div class="w-2 h-2 rounded-full bg-green-400" aria-hidden="true"></div>
</div>
<div class="space-y-2">
<div class="h-2 bg-zinc-100 rounded w-3/4"></div>
<div class="h-2 bg-zinc-100 rounded w-1/2"></div>
<div class="h-8 bg-gradient-to-r from-violet-100 to-indigo-100 rounded-lg mt-3"></div>
<div class="grid grid-cols-3 gap-1.5 mt-1">
<div class="h-12 bg-zinc-50 border border-zinc-100 rounded-lg"></div>
<div class="h-12 bg-zinc-50 border border-zinc-100 rounded-lg"></div>
<div class="h-12 bg-zinc-50 border border-zinc-100 rounded-lg"></div>
</div>
</div>
</div>
</div>
<div class="p-5 flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-zinc-900">Nucleus Dashboard</h3>
<p class="text-xs text-zinc-500 mt-0.5">SaaS · Product design · 2025</p>
</div>
<div class="work-arrow w-8 h-8 rounded-full border border-zinc-200 flex items-center justify-center flex-shrink-0">
<svg class="w-3.5 h-3.5 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/></svg>
</div>
</div>
</div>
<!-- Project 02 -->
<div class="work-card group rounded-2xl overflow-hidden border border-zinc-200 cursor-pointer">
<div class="aspect-[4/3] bg-gradient-to-br from-rose-50 via-orange-50 to-amber-50 relative flex items-center justify-center overflow-hidden">
<div class="w-64 bg-white rounded-xl shadow-xl border border-zinc-100 p-4 rotate-1 group-hover:rotate-0 group-hover:scale-105 transition-all duration-500">
<div class="flex items-center gap-1.5 mb-3">
<div class="w-2 h-2 rounded-full bg-red-400" aria-hidden="true"></div>
<div class="w-2 h-2 rounded-full bg-yellow-400" aria-hidden="true"></div>
<div class="w-2 h-2 rounded-full bg-green-400" aria-hidden="true"></div>
</div>
<div class="h-24 bg-gradient-to-br from-rose-100 to-orange-100 rounded-lg flex items-end px-3 pb-3 mb-2">
<div class="flex items-end gap-1">
<div class="w-3 h-8 bg-rose-300 rounded-sm"></div>
<div class="w-3 h-12 bg-rose-400 rounded-sm"></div>
<div class="w-3 h-6 bg-rose-300 rounded-sm"></div>
<div class="w-3 h-16 bg-rose-500 rounded-sm"></div>
<div class="w-3 h-10 bg-rose-400 rounded-sm"></div>
<div class="w-3 h-14 bg-rose-500 rounded-sm"></div>
<div class="w-3 h-9 bg-rose-300 rounded-sm"></div>
</div>
</div>
<div class="h-2 bg-zinc-100 rounded w-1/2 mb-1.5"></div>
<div class="h-2 bg-zinc-100 rounded w-2/3"></div>
</div>
</div>
<div class="p-5 flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-zinc-900">Forma Analytics</h3>
<p class="text-xs text-zinc-500 mt-0.5">Fintech · Design system · 2025</p>
</div>
<div class="work-arrow w-8 h-8 rounded-full border border-zinc-200 flex items-center justify-center flex-shrink-0">
<svg class="w-3.5 h-3.5 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/></svg>
</div>
</div>
</div>
<!-- Project 03 — wide -->
<div class="work-card group rounded-2xl overflow-hidden border border-zinc-200 cursor-pointer md:col-span-2">
<div class="h-56 bg-gradient-to-br from-emerald-50 via-teal-50 to-cyan-50 relative flex items-center justify-center overflow-hidden">
<div class="flex items-stretch gap-4 w-full max-w-lg px-8">
<!-- Sidebar mock -->
<div class="w-36 bg-white rounded-xl shadow-xl border border-zinc-100 p-3 flex-shrink-0">
<div class="h-2 bg-zinc-100 rounded w-3/4 mb-3"></div>
<div class="space-y-1.5">
<div class="h-6 bg-teal-50 border border-teal-100 rounded-md"></div>
<div class="h-6 bg-zinc-50 rounded-md"></div>
<div class="h-6 bg-zinc-50 rounded-md"></div>
<div class="h-6 bg-zinc-50 rounded-md"></div>
</div>
</div>
<!-- Content mock -->
<div class="flex-1 bg-white rounded-xl shadow-xl border border-zinc-100 p-3 group-hover:scale-[1.02] transition-transform duration-500">
<div class="h-2 bg-zinc-100 rounded w-1/3 mb-3"></div>
<div class="grid grid-cols-3 gap-2 mb-3">
<div class="h-10 bg-teal-50 border border-teal-100 rounded-lg"></div>
<div class="h-10 bg-zinc-50 rounded-lg"></div>
<div class="h-10 bg-zinc-50 rounded-lg"></div>
</div>
<div class="space-y-1.5">
<div class="h-2 bg-zinc-100 rounded"></div>
<div class="h-2 bg-zinc-100 rounded w-4/5"></div>
<div class="h-2 bg-zinc-100 rounded w-2/3"></div>
</div>
</div>
</div>
</div>
<div class="p-5 flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-zinc-900">Sage Platform</h3>
<p class="text-xs text-zinc-500 mt-0.5">EdTech · Full product design · 2026</p>
</div>
<div class="work-arrow w-8 h-8 rounded-full border border-zinc-200 flex items-center justify-center flex-shrink-0">
<svg class="w-3.5 h-3.5 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/></svg>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Approach / Code split -->
<section class="border-t border-zinc-200 bg-[#fafafa] py-24">
<div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
<div>
<p class="text-xs font-medium text-zinc-400 uppercase tracking-widest mb-3">Our approach</p>
<h2 class="text-3xl font-semibold text-zinc-900 leading-tight mb-5">
Design that ships.<br>
<span class="serif-italic font-normal">Code that scales.</span>
</h2>
<p class="text-zinc-500 leading-relaxed mb-8">
We don't hand over Figma files and wish you luck. Every project ends with clean, production-ready code following your team's conventions.
</p>
<ul class="space-y-3.5" role="list">
<li class="flex items-start gap-3 text-sm text-zinc-600">
<svg class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Atomic design system with documented tokens
</li>
<li class="flex items-start gap-3 text-sm text-zinc-600">
<svg class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Tailwind CSS + React component library
</li>
<li class="flex items-start gap-3 text-sm text-zinc-600">
<svg class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Accessibility-first from day one
</li>
<li class="flex items-start gap-3 text-sm text-zinc-600">
<svg class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Handoff docs your engineers will actually read
</li>
</ul>
</div>
<!-- Syntax-highlighted code block (zero JS) -->
<div class="code-block" role="figure" aria-label="Sample button component code">
<div class="flex items-center gap-1.5 mb-5">
<div class="w-2.5 h-2.5 rounded-full bg-red-400/80" aria-hidden="true"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-400/80" aria-hidden="true"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-400/80" aria-hidden="true"></div>
<span class="ml-2 text-xs text-zinc-500">button.tsx</span>
</div>
<pre class="overflow-x-auto text-[12.5px] leading-relaxed"><span class="tok-k">import</span> <span class="tok-k">type</span> <span class="tok-p">{</span> <span class="tok-t">ButtonHTMLAttributes</span> <span class="tok-p">}</span> <span class="tok-k">from</span> <span class="tok-s">"react"</span><span class="tok-p">;</span>
<span class="tok-k">interface</span> <span class="tok-t">ButtonProps</span>
<span class="tok-k">extends</span> <span class="tok-t">ButtonHTMLAttributes</span><span class="tok-p"><</span><span class="tok-t">HTMLButtonElement</span><span class="tok-p">> {</span>
<span class="tok-f">variant</span><span class="tok-p">?:</span> <span class="tok-s">"primary"</span> <span class="tok-p">|</span> <span class="tok-s">"ghost"</span><span class="tok-p">;</span>
<span class="tok-p">}</span>
<span class="tok-k">export function</span> <span class="tok-f">Button</span><span class="tok-p">({</span>
<span class="tok-f">variant</span> <span class="tok-p">=</span> <span class="tok-s">"primary"</span><span class="tok-p">,</span>
<span class="tok-f">children</span><span class="tok-p">,</span>
<span class="tok-f">className</span><span class="tok-p">,</span>
<span class="tok-f">...props</span>
<span class="tok-p">}:</span> <span class="tok-t">ButtonProps</span><span class="tok-p">) {</span>
<span class="tok-k">return</span> <span class="tok-p">(</span>
<span class="tok-p"><</span><span class="tok-f">button</span>
<span class="tok-f">className</span><span class="tok-p">={</span><span class="tok-f">cn</span><span class="tok-p">(</span>
<span class="tok-s">"px-4 py-2 rounded-full text-sm"</span><span class="tok-p">,</span>
<span class="tok-f">variant</span> <span class="tok-p">===</span> <span class="tok-s">"primary"</span> <span class="tok-p">&&</span>
<span class="tok-s">"bg-zinc-900 text-white"</span><span class="tok-p">,</span>
<span class="tok-f">className</span>
<span class="tok-p">)}</span>
<span class="tok-p">{...</span><span class="tok-f">props</span><span class="tok-p">}</span>
<span class="tok-p">></span>
<span class="tok-p">{</span><span class="tok-f">children</span><span class="tok-p">}</span>
<span class="tok-p"></</span><span class="tok-f">button</span><span class="tok-p">></span>
<span class="tok-p">);</span>
<span class="tok-p">}</span></pre>
</div>
</div>
</section>
<!-- Process -->
<section id="process" class="border-t border-zinc-200 bg-white py-24">
<div class="max-w-6xl mx-auto px-6">
<div class="mb-12">
<p class="text-xs font-medium text-zinc-400 uppercase tracking-widest mb-3">Process</p>
<h2 class="text-3xl font-semibold text-zinc-900 leading-tight">
How we <span class="serif-italic font-normal">work</span>
</h2>
</div>
<div class="grid sm:grid-cols-2 md:grid-cols-4 gap-4">
<div class="border border-zinc-200 rounded-2xl p-6">
<div class="w-8 h-8 rounded-full bg-zinc-900 text-white text-xs font-medium flex items-center justify-center mb-4 tabular-nums">01</div>
<h3 class="text-sm font-semibold text-zinc-900 mb-2">Discovery</h3>
<p class="text-sm text-zinc-500 leading-relaxed">We map your users, goals, and constraints. No assumptions — only evidence.</p>
</div>
<div class="border border-zinc-200 rounded-2xl p-6">
<div class="w-8 h-8 rounded-full bg-zinc-900 text-white text-xs font-medium flex items-center justify-center mb-4 tabular-nums">02</div>
<h3 class="text-sm font-semibold text-zinc-900 mb-2">Architecture</h3>
<p class="text-sm text-zinc-500 leading-relaxed">Structure before style. We design information hierarchies and component systems first.</p>
</div>
<div class="border border-zinc-200 rounded-2xl p-6">
<div class="w-8 h-8 rounded-full bg-zinc-900 text-white text-xs font-medium flex items-center justify-center mb-4 tabular-nums">03</div>
<h3 class="text-sm font-semibold text-zinc-900 mb-2">Iteration</h3>
<p class="text-sm text-zinc-500 leading-relaxed">Weekly cycles with real feedback loops. You see progress — not just final deliverables.</p>
</div>
<div class="border border-zinc-200 rounded-2xl p-6">
<div class="w-8 h-8 rounded-full bg-zinc-900 text-white text-xs font-medium flex items-center justify-center mb-4 tabular-nums">04</div>
<h3 class="text-sm font-semibold text-zinc-900 mb-2">Delivery</h3>
<p class="text-sm text-zinc-500 leading-relaxed">Production-ready code, documentation, and a handoff your team can actually use.</p>
</div>
</div>
</div>
</section>
<!-- Testimonial -->
<section class="border-t border-zinc-200 bg-[#fafafa] py-24">
<div class="max-w-3xl mx-auto px-6 text-center">
<svg class="w-8 h-8 text-zinc-300 mx-auto mb-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
</svg>
<blockquote class="text-xl text-zinc-700 leading-relaxed mb-8 font-light">
"Working with them felt less like hiring a vendor and more like gaining a co-founder. The design system they built saves us four hours per sprint."
</blockquote>
<div class="flex items-center justify-center gap-3">
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-violet-300 to-indigo-400 flex items-center justify-center text-white text-xs font-semibold" aria-hidden="true">AR</div>
<div class="text-left">
<div class="text-sm font-semibold text-zinc-900">Alex Rivera</div>
<div class="text-xs text-zinc-500">CTO, Nucleus Labs</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section id="contact" class="border-t border-zinc-800 bg-zinc-900 py-24">
<div class="max-w-3xl mx-auto px-6 text-center">
<p class="text-xs font-medium text-zinc-500 uppercase tracking-widest mb-4">Let's work together</p>
<h2 class="text-4xl font-semibold text-white leading-tight mb-5">
Ready to build something<br>
<span class="serif-italic font-normal text-zinc-300">exceptional?</span>
</h2>
<p class="text-zinc-400 max-w-md mx-auto mb-10 leading-relaxed">
We take on a small number of projects at a time to give each one full attention. Tell us about your project.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-3">
<a href="#" class="w-full sm:w-auto text-sm bg-white text-zinc-900 font-medium px-6 py-3 rounded-full hover:bg-zinc-100 transition-colors">Start a project</a>
<a href="mailto:hello@studio.co" class="w-full sm:w-auto text-sm text-zinc-400 border border-zinc-700 px-6 py-3 rounded-full hover:bg-zinc-800 hover:border-zinc-600 transition-colors">hello@studio.co</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800 bg-zinc-900 py-8">
<div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<span class="text-sm font-semibold text-zinc-300">Studio</span>
<p class="text-xs text-zinc-600">© 2026. All rights reserved.</p>
<nav class="flex items-center gap-5" aria-label="Footer">
<a href="#" class="text-zinc-500 hover:text-zinc-300 transition-colors" aria-label="X / Twitter">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.736-8.856L1.957 2.25H8.2l4.252 5.627L18.244 2.25z"/></svg>
</a>
<a href="#" class="text-zinc-500 hover:text-zinc-300 transition-colors" aria-label="GitHub">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a>
<a href="#" class="text-xs text-zinc-600 hover:text-zinc-400 transition-colors">Privacy</a>
<a href="#" class="text-xs text-zinc-600 hover:text-zinc-400 transition-colors">Terms</a>
</nav>
</div>
</footer>
</body>
</html>
Minimal design agency template in a cream/zinc palette. Grid-patterned hero with subtle blur orb and serif italic type accents. Numbered service cards with hover-reveal arrows, portfolio grid with tilted UI mockups, approach section with a static code block, and a dark-zinc CTA. Zero JavaScript.