Pages Hard
Agency — Branding / Identity Landing
A full one-page landing for Marrow and Plumb, a fictional branding and identity studio rendered in a cream, plum and warm-sand duotone with refined serif and sans pairing. It opens on an animated brand-mark hero and runs through social proof, end-to-end case studies with type specimens and color blocks, four services, a studio philosophy, a clear four-step process, founder testimonials and an inquiry form, all wired with vanilla JavaScript scroll reveals, counters and a toast.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--cream: #f3efe6;
--cream-2: #e9e0cf;
--sand: #caa26a;
--sand-deep: #b58a4f;
--plum: #5a2e4e;
--plum-deep: #41203a;
--ink: #221a20;
--muted: #6b5f63;
--line: rgba(34, 26, 32, 0.12);
--shadow: 0 24px 60px -28px rgba(65, 32, 58, 0.45);
--shadow-sm: 0 10px 30px -16px rgba(65, 32, 58, 0.4);
--r: 18px;
--sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--serif: "Fraunces", Georgia, "Times New Roman", serif;
--maxw: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
color: var(--ink);
background: var(--cream);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.08; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 100;
background: var(--ink); color: var(--cream); padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
.eyebrow {
font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .22em;
text-transform: uppercase; color: var(--plum); margin-bottom: 1rem;
}
.eyebrow--light { color: var(--sand); }
.ital { font-style: italic; color: var(--plum); }
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
font-family: var(--sans); font-size: .95rem; font-weight: 600; padding: .85rem 1.5rem;
border-radius: 999px; border: 1px solid transparent; cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn--solid { background: var(--plum); color: var(--cream); box-shadow: var(--shadow-sm); }
.btn--solid:hover { background: var(--plum-deep); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.btn--block { width: 100%; padding: 1rem; }
.btn:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
/* Section heads */
.sec-head { max-width: 640px; margin-bottom: 3rem; }
.sec-title { font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -.01em; }
/* NAV */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(243, 239, 230, 0.82);
backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color .3s ease, box-shadow .3s ease;
}
.nav.scrolled { border-color: var(--line); box-shadow: 0 8px 24px -18px rgba(65,32,58,.4); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 600; }
.brand__mark {
display: inline-grid; place-items: center; width: 40px; height: 40px;
background: var(--plum); color: var(--cream); border-radius: 11px;
font-family: var(--serif); font-size: .9rem; letter-spacing: -.02em;
}
.brand__name { font-family: var(--serif); font-size: 1.1rem; }
.nav__links { display: flex; gap: 1.8rem; font-size: .92rem; font-weight: 500; }
.nav__links a { position: relative; color: var(--muted); transition: color .2s ease; }
.nav__links a:hover { color: var(--ink); }
.nav__links a::after {
content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
background: var(--sand); transition: width .25s ease;
}
.nav__links a:hover::after { width: 100%; }
.nav__cta { padding: .6rem 1.2rem; }
.nav__toggle {
display: none; flex-direction: column; gap: 5px; background: none; border: 0;
padding: 8px; cursor: pointer;
}
.nav__toggle span { width: 24px; height: 2px; background: var(--ink); transition: transform .3s, opacity .3s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
display: flex; flex-direction: column; gap: 1.1rem; padding: 1.5rem 1.25rem 2rem;
border-top: 1px solid var(--line); font-size: 1.05rem; font-weight: 500;
}
.mobile-menu .btn { margin-top: .5rem; }
/* HERO */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); position: relative; }
.hero::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(60% 60% at 85% 5%, rgba(202,162,106,.28), transparent 60%),
radial-gradient(50% 50% at 5% 90%, rgba(90,46,78,.18), transparent 60%);
}
.hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__title { font-size: clamp(2.6rem, 6.4vw, 4.6rem); letter-spacing: -.02em; }
.hero__sub { margin: 1.6rem 0 2rem; font-size: 1.12rem; color: var(--muted); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__stats { display: flex; gap: 2.2rem; margin-top: 3rem; flex-wrap: wrap; }
.hero__stats li { display: flex; flex-direction: column; }
.hero__stats strong { font-family: var(--serif); font-size: 2rem; color: var(--plum); }
.hero__stats span { font-size: .82rem; color: var(--muted); letter-spacing: .03em; }
.markstage {
position: relative; aspect-ratio: 4/5; border-radius: 24px; padding: 1.6rem;
background: linear-gradient(155deg, var(--plum), var(--plum-deep));
color: var(--cream); box-shadow: var(--shadow); overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between;
}
.markstage::after {
content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
background: radial-gradient(circle, rgba(202,162,106,.55), transparent 70%);
top: -60px; right: -60px;
}
.markstage__glyph {
font-family: var(--serif); font-weight: 600; font-size: clamp(4rem, 11vw, 7rem);
letter-spacing: -.04em; align-self: center; margin: auto 0; position: relative;
animation: floaty 6s ease-in-out infinite;
}
.markstage__glyph .pulse { color: var(--sand); }
@keyframes floaty { 50% { transform: translateY(-10px); } }
.markstage__swatches { display: flex; gap: .5rem; position: relative; }
.markstage__swatches span { flex: 1; height: 30px; border-radius: 7px; background: var(--c); border: 1px solid rgba(255,255,255,.15); }
.markstage__caption { font-family: var(--sans); font-size: .76rem; opacity: .8; margin-top: 1rem; position: relative; }
/* CLIENTS */
.clients { padding: 2.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clients__label { text-align: center; color: var(--muted); font-size: .9rem; margin-bottom: 1.6rem; }
.clients__row {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: clamp(1.5rem, 5vw, 3.2rem);
}
.clients__row li {
font-family: var(--serif); font-size: 1.25rem; color: var(--ink); opacity: .55;
letter-spacing: .02em; transition: opacity .25s ease, color .25s ease;
}
.clients__row li:hover { opacity: 1; color: var(--plum); }
/* WORK */
.work { padding: clamp(4rem, 8vw, 7rem) 0; }
.case {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: center; margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.case--rev .case__visual { order: 2; }
.case__visual {
aspect-ratio: 5/4; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
display: grid; place-items: center; position: relative;
}
.case__visual--hearth { background: linear-gradient(140deg, #6e3b5c, #2a2128); }
.case__visual--solene { background: linear-gradient(140deg, #d8b483, #5a2e4e); }
.case__visual--north { background: linear-gradient(140deg, #3a2a44, #c79b5c); }
.specimen { width: 78%; display: flex; flex-direction: column; gap: 1.2rem; }
.specimen__type {
font-family: var(--serif); font-weight: 600; font-size: clamp(3.5rem, 9vw, 6rem);
color: var(--cream); line-height: 1; letter-spacing: -.03em;
}
.specimen__type--serif { font-style: italic; }
.specimen__type--mono { font-family: var(--sans); font-weight: 600; }
.specimen__blocks { display: flex; gap: .5rem; }
.specimen__blocks span { flex: 1; height: 38px; border-radius: 8px; background: var(--b); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.case__tag { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sand-deep); margin-bottom: .9rem; }
.case__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1rem; }
.case__desc { color: var(--muted); font-size: 1.05rem; margin-bottom: 1.4rem; max-width: 42ch; }
.case__chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.case__chips li {
font-size: .8rem; font-weight: 500; padding: .35rem .8rem; border-radius: 999px;
background: var(--cream-2); color: var(--ink); border: 1px solid var(--line);
}
/* SERVICES */
.services { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--ink); color: var(--cream); }
.services .eyebrow { color: var(--sand); }
.services .sec-title { color: var(--cream); }
.grid { display: grid; gap: 1.4rem; }
.grid--services { grid-template-columns: repeat(4, 1fr); }
.svc {
padding: 2rem 1.6rem; border-radius: var(--r); background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1); transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.svc:hover { transform: translateY(-6px); background: rgba(202,162,106,.12); border-color: var(--sand); }
.svc__num { font-family: var(--serif); font-size: 1.1rem; color: var(--sand); display: block; margin-bottom: 1.2rem; }
.svc h3 { font-size: 1.5rem; margin-bottom: .7rem; }
.svc p { color: rgba(243,239,230,.72); font-size: .98rem; }
/* PHILOSOPHY */
.philosophy { padding: clamp(4rem, 8vw, 7rem) 0; }
.philosophy__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.philosophy__copy p { color: var(--muted); font-size: 1.1rem; margin-top: 1.2rem; max-width: 50ch; }
.philosophy__copy .btn { margin-top: 1.8rem; }
.philosophy__values { display: flex; flex-direction: column; gap: 1rem; }
.philosophy__values li {
padding: 1.5rem 1.6rem; border-radius: var(--r); background: var(--cream-2);
border-left: 4px solid var(--sand); font-size: 1rem; color: var(--muted);
}
.philosophy__values strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--ink); margin-bottom: .3rem; }
/* PROCESS */
.process { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--cream-2); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; counter-reset: s; }
.step {
padding: 2rem 1.6rem; border-radius: var(--r); background: var(--cream);
border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.step__n { font-family: var(--serif); font-size: 2.2rem; color: var(--plum); display: block; margin-bottom: 1rem; }
.step h3 { font-size: 1.4rem; margin-bottom: .6rem; }
.step p { color: var(--muted); font-size: .96rem; }
/* VOICES */
.voices { padding: clamp(4rem, 8vw, 7rem) 0; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.quote {
margin: 0; padding: 2rem 1.8rem; border-radius: var(--r); background: var(--cream-2);
border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease;
}
.quote:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.quote p { font-family: var(--serif); font-size: 1.18rem; line-height: 1.4; margin-bottom: 1.6rem; }
.quote footer { display: flex; flex-direction: column; }
.quote strong { font-weight: 600; }
.quote span { color: var(--muted); font-size: .85rem; }
/* INQUIRE */
.inquire { padding: clamp(4rem, 8vw, 7rem) 0; background: linear-gradient(155deg, var(--plum), var(--plum-deep)); color: var(--cream); }
.inquire__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.inquire .sec-title { color: var(--cream); }
.inquire__copy p { color: rgba(243,239,230,.78); font-size: 1.1rem; margin-top: 1.2rem; max-width: 42ch; }
.inquire__form { display: flex; flex-direction: column; gap: 1rem; background: rgba(255,255,255,.06); padding: 1.8rem; border-radius: var(--r); border: 1px solid rgba(255,255,255,.14); }
.inquire__form label { display: flex; flex-direction: column; gap: .5rem; font-size: .85rem; font-weight: 600; letter-spacing: .04em; }
.inquire__form input, .inquire__form textarea {
font-family: var(--sans); font-size: 1rem; padding: .85rem 1rem; border-radius: 11px;
border: 1px solid rgba(255,255,255,.2); background: rgba(243,239,230,.95); color: var(--ink); resize: vertical;
}
.inquire__form input:focus, .inquire__form textarea:focus { outline: 3px solid var(--sand); outline-offset: 1px; }
/* FOOTER */
.foot { background: var(--ink); color: var(--cream); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.foot__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; }
.foot__brand p { color: rgba(243,239,230,.65); font-size: .95rem; margin-top: 1rem; max-width: 34ch; }
.foot__col h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sand); margin-bottom: 1.1rem; }
.foot__col a, .foot__col p { display: block; color: rgba(243,239,230,.7); font-size: .95rem; margin-bottom: .65rem; transition: color .2s ease; }
.foot__col a:hover { color: var(--cream); }
.foot__mail { color: var(--sand) !important; }
.foot__base {
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12);
color: rgba(243,239,230,.5); font-size: .85rem;
}
/* TOAST */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 120%);
background: var(--ink); color: var(--cream); padding: .9rem 1.4rem; border-radius: 12px;
box-shadow: var(--shadow); font-size: .92rem; z-index: 90; opacity: 0;
transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease; max-width: 90vw;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
/* REVEAL */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
/* RESPONSIVE */
@media (max-width: 940px) {
.grid--services, .steps { grid-template-columns: repeat(2, 1fr); }
.quotes { grid-template-columns: 1fr; }
.foot__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.nav__links, .nav__cta { display: none; }
.nav__toggle { display: flex; }
.hero__inner, .philosophy__inner, .inquire__inner { grid-template-columns: 1fr; }
.hero__visual { order: -1; max-width: 360px; }
.case, .case--rev .case__visual { grid-template-columns: 1fr; order: 0; }
.case__visual { order: -1 !important; }
}
@media (max-width: 520px) {
.grid--services, .steps, .foot__inner { grid-template-columns: 1fr; }
.hero__stats { gap: 1.4rem; }
.clients__row { gap: 1.1rem; }
.clients__row li { font-size: 1.05rem; }
.sec-head { margin-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 3200);
}
/* ---------- Sticky nav shadow ---------- */
var nav = document.querySelector(".nav");
function onScroll() {
if (!nav) return;
nav.classList.toggle("scrolled", window.scrollY > 8);
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---------- Mobile menu ---------- */
var toggle = document.getElementById("navToggle");
var menu = document.getElementById("mobileMenu");
function closeMenu() {
if (!menu || !toggle) return;
menu.hidden = true;
toggle.setAttribute("aria-expanded", "false");
toggle.setAttribute("aria-label", "Open menu");
}
if (toggle && menu) {
toggle.addEventListener("click", function () {
var open = toggle.getAttribute("aria-expanded") === "true";
if (open) {
closeMenu();
} else {
menu.hidden = false;
toggle.setAttribute("aria-expanded", "true");
toggle.setAttribute("aria-label", "Close menu");
}
});
menu.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", closeMenu);
});
}
/* ---------- Smooth-scroll for in-page anchors ---------- */
document.querySelectorAll('a[href^="#"]').forEach(function (link) {
link.addEventListener("click", function (e) {
var id = link.getAttribute("href");
if (id.length < 2) return;
var target = document.querySelector(id);
if (!target) return;
e.preventDefault();
target.scrollIntoView({ behavior: "smooth", block: "start" });
});
});
/* ---------- Scroll reveal ---------- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("in");
io.unobserve(entry.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
);
reveals.forEach(function (el) { io.observe(el); });
} else {
reveals.forEach(function (el) { el.classList.add("in"); });
}
/* ---------- Animated stat counters ---------- */
var counters = document.querySelectorAll("[data-count]");
function animateCount(el) {
var target = parseInt(el.getAttribute("data-count"), 10) || 0;
var dur = 1200;
var start = null;
function frame(ts) {
if (start === null) start = ts;
var p = Math.min((ts - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
el.textContent = Math.round(eased * target);
if (p < 1) requestAnimationFrame(frame);
else el.textContent = target;
}
requestAnimationFrame(frame);
}
if (counters.length && "IntersectionObserver" in window) {
var cio = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
animateCount(entry.target);
cio.unobserve(entry.target);
}
});
},
{ threshold: 0.6 }
);
counters.forEach(function (el) { cio.observe(el); });
}
/* ---------- Hero brand-mark cycle ---------- */
var glyph = document.getElementById("heroGlyph");
if (glyph) {
var marks = ["M&P", "M·P", "M&P", "/MP", "M&P"];
var i = 0;
setInterval(function () {
i = (i + 1) % marks.length;
glyph.style.opacity = "0";
setTimeout(function () {
glyph.innerHTML = marks[i].replace("&", '<span class="pulse">&</span>');
glyph.style.opacity = "1";
}, 220);
}, 2600);
glyph.style.transition = "opacity .24s ease";
}
/* ---------- Inquiry form ---------- */
var form = document.getElementById("inquireForm");
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
var name = form.elements.name.value.trim();
var email = form.elements.email.value.trim();
var brief = form.elements.brief.value.trim();
if (!name || !email || !brief) {
toast("Please fill in every field so we can reply properly.");
return;
}
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
toast("That email doesn't look right — mind checking it?");
return;
}
form.reset();
toast("Thanks, " + name.split(" ")[0] + "! We'll be in touch within two days.");
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Marrow & Plumb — Branding & Identity Studio</title>
<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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<!-- NAV -->
<header class="nav" id="top">
<div class="wrap nav__inner">
<a class="brand" href="#top" aria-label="Marrow and Plumb home">
<span class="brand__mark" aria-hidden="true">M&P</span>
<span class="brand__name">Marrow & Plumb</span>
</a>
<nav class="nav__links" aria-label="Primary">
<a href="#work">Work</a>
<a href="#services">Services</a>
<a href="#philosophy">Studio</a>
<a href="#process">Process</a>
<a href="#voices">Voices</a>
</nav>
<a href="#inquire" class="btn btn--solid nav__cta">Start a project</a>
<button class="nav__toggle" id="navToggle" aria-expanded="false" aria-controls="mobileMenu" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
<div class="mobile-menu" id="mobileMenu" hidden>
<a href="#work">Work</a>
<a href="#services">Services</a>
<a href="#philosophy">Studio</a>
<a href="#process">Process</a>
<a href="#voices">Voices</a>
<a href="#inquire" class="btn btn--solid">Start a project</a>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="wrap hero__inner">
<div class="hero__copy reveal">
<p class="eyebrow">Brand strategy & identity · Est. 2014</p>
<h1 class="hero__title">
We build brands<br />
with a <span class="ital">spine</span> and a<br />
<span class="ital">soul</span>.
</h1>
<p class="hero__sub">
Marrow & Plumb is a duotone identity studio. We find the truest line of a
business and draw the whole identity system from it — strategy, naming, marks,
type and the guidelines that keep it honest.
</p>
<div class="hero__actions">
<a href="#inquire" class="btn btn--solid">Start a project</a>
<a href="#work" class="btn btn--ghost">See the work →</a>
</div>
<ul class="hero__stats">
<li><strong data-count="142">142</strong><span>identities shipped</span></li>
<li><strong data-count="11">11</strong><span>design awards</span></li>
<li><strong data-count="9">9</strong><span>year studio</span></li>
</ul>
</div>
<div class="hero__visual reveal" aria-hidden="true">
<div class="markstage">
<div class="markstage__glyph" id="heroGlyph">M&P</div>
<div class="markstage__swatches">
<span style="--c:var(--plum)"></span>
<span style="--c:var(--sand)"></span>
<span style="--c:var(--ink)"></span>
<span style="--c:var(--cream-2)"></span>
</div>
<div class="markstage__caption">Logotype · v3 · drawn from the brand's core idea</div>
</div>
</div>
</div>
</section>
<!-- CLIENTS / SOCIAL PROOF -->
<section class="clients" aria-label="Selected clients">
<div class="wrap">
<p class="clients__label">Trusted by founders & teams who care about the details</p>
<ul class="clients__row">
<li>HEARTHWOOD</li>
<li>Solène</li>
<li>NORTHBOUND</li>
<li>Kindling</li>
<li>ATLAS&CO</li>
<li>Verbena</li>
<li>FELDSPAR</li>
</ul>
</div>
</section>
<!-- WORK / CASE STUDIES -->
<section class="work" id="work">
<div class="wrap">
<header class="sec-head reveal">
<p class="eyebrow">Selected work</p>
<h2 class="sec-title">Identity systems, end to end</h2>
</header>
<article class="case reveal">
<div class="case__visual case__visual--hearth">
<div class="specimen">
<div class="specimen__type">Hh</div>
<div class="specimen__blocks">
<span style="--b:#6e3b5c"></span>
<span style="--b:#caa26a"></span>
<span style="--b:#2a2128"></span>
<span style="--b:#efe7d6"></span>
</div>
</div>
</div>
<div class="case__body">
<p class="case__tag">Hospitality · Naming + Identity</p>
<h3 class="case__title">Hearthwood</h3>
<p class="case__desc">
A boutique cabin collection needed to feel warm but never twee. We named it,
built a serif logotype carved like timber, and a palette of plum dusk and ember.
</p>
<ul class="case__chips"><li>Naming</li><li>Logotype</li><li>Color system</li><li>Guidelines</li></ul>
</div>
</article>
<article class="case case--rev reveal">
<div class="case__visual case__visual--solene">
<div class="specimen">
<div class="specimen__type specimen__type--serif">Ss</div>
<div class="specimen__blocks">
<span style="--b:#5a2e4e"></span>
<span style="--b:#d8b483"></span>
<span style="--b:#f3efe6"></span>
<span style="--b:#1f1a20"></span>
</div>
</div>
</div>
<div class="case__body">
<p class="case__tag">Beauty · Identity + Packaging</p>
<h3 class="case__title">Solène</h3>
<p class="case__desc">
A skincare line built on Provençal calm. A high-contrast didone wordmark, a sand
and plum duotone, and a packaging grid that scales from droppers to billboards.
</p>
<ul class="case__chips"><li>Strategy</li><li>Wordmark</li><li>Packaging</li><li>Art direction</li></ul>
</div>
</article>
<article class="case reveal">
<div class="case__visual case__visual--north">
<div class="specimen">
<div class="specimen__type specimen__type--mono">N↑</div>
<div class="specimen__blocks">
<span style="--b:#3a2a44"></span>
<span style="--b:#c79b5c"></span>
<span style="--b:#e9e0cf"></span>
<span style="--b:#241d2a"></span>
</div>
</div>
</div>
<div class="case__body">
<p class="case__tag">Outdoor tech · Rebrand</p>
<h3 class="case__title">Northbound</h3>
<p class="case__desc">
A trail-navigation app outgrowing its garage logo. We rebuilt the system around a
compass mark, a confident geometric sans, and motion guidelines for the product.
</p>
<ul class="case__chips"><li>Rebrand</li><li>Mark</li><li>Motion</li><li>Design system</li></ul>
</div>
</article>
</div>
</section>
<!-- SERVICES -->
<section class="services" id="services">
<div class="wrap">
<header class="sec-head reveal">
<p class="eyebrow">What we do</p>
<h2 class="sec-title">Four disciplines, one through-line</h2>
</header>
<div class="grid grid--services">
<article class="svc reveal">
<span class="svc__num">01</span>
<h3>Strategy</h3>
<p>Positioning, audience, brand architecture and the single idea everything hangs from.</p>
</article>
<article class="svc reveal">
<span class="svc__num">02</span>
<h3>Identity</h3>
<p>Logotypes, marks, color systems, typography and the visual grammar of the brand.</p>
</article>
<article class="svc reveal">
<span class="svc__num">03</span>
<h3>Naming</h3>
<p>Names with a reason to exist — checked, sounded out, and ready for a trademark.</p>
</article>
<article class="svc reveal">
<span class="svc__num">04</span>
<h3>Guidelines</h3>
<p>Living guideline systems so your team keeps the brand sharp long after we leave.</p>
</article>
</div>
</div>
</section>
<!-- PHILOSOPHY -->
<section class="philosophy" id="philosophy">
<div class="wrap philosophy__inner">
<div class="philosophy__copy reveal">
<p class="eyebrow">The studio</p>
<h2 class="sec-title">A name like a skeleton key.</h2>
<p>
Marrow is the core — the strategic truth inside a business. Plumb is the line — the
craft that keeps everything straight and intentional. We named ourselves for the two
halves of the work we do, because every brand we build starts with both.
</p>
<p>
We're a deliberately small studio. No pitch theatre, no fifty-slide decks of stock
mood. Just a tight team that sits with your problem until the obvious-in-hindsight
answer shows up — then draws it beautifully.
</p>
<a href="#inquire" class="btn btn--ghost">Work with us →</a>
</div>
<ul class="philosophy__values reveal">
<li><strong>Truth over trend.</strong> We design what's true, not what's fashionable this quarter.</li>
<li><strong>Systems, not logos.</strong> A mark is one part. We build the whole grammar.</li>
<li><strong>Craft is the strategy.</strong> The way a thing is made is part of what it says.</li>
</ul>
</div>
</section>
<!-- PROCESS -->
<section class="process" id="process">
<div class="wrap">
<header class="sec-head reveal">
<p class="eyebrow">How it goes</p>
<h2 class="sec-title">A clear path, every time</h2>
</header>
<ol class="steps">
<li class="step reveal"><span class="step__n">01</span><h3>Excavate</h3><p>Workshops, audits and listening until the core idea surfaces.</p></li>
<li class="step reveal"><span class="step__n">02</span><h3>Define</h3><p>Strategy, naming and positioning written down in plain language.</p></li>
<li class="step reveal"><span class="step__n">03</span><h3>Draw</h3><p>Marks, type, color and the full identity system, refined in rounds.</p></li>
<li class="step reveal"><span class="step__n">04</span><h3>Equip</h3><p>Guidelines, files and rollout support so it lives well in the wild.</p></li>
</ol>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="voices" id="voices">
<div class="wrap">
<header class="sec-head reveal">
<p class="eyebrow">Voices</p>
<h2 class="sec-title">What founders say</h2>
</header>
<div class="quotes">
<blockquote class="quote reveal">
<p>"They found a word for our company we'd been circling for three years. The whole identity fell out of that one idea."</p>
<footer><strong>Dara Mensah</strong><span>Founder, Hearthwood</span></footer>
</blockquote>
<blockquote class="quote reveal">
<p>"The most considered work we've ever commissioned. Six months in, the brand still feels inevitable — like it always existed."</p>
<footer><strong>Élise Caron</strong><span>CEO, Solène</span></footer>
</blockquote>
<blockquote class="quote reveal">
<p>"Small team, enormous output. The guidelines alone saved us a year of internal arguments about the logo."</p>
<footer><strong>Theo Park</strong><span>Head of Brand, Northbound</span></footer>
</blockquote>
</div>
</div>
</section>
<!-- INQUIRE / CTA -->
<section class="inquire" id="inquire">
<div class="wrap inquire__inner reveal">
<div class="inquire__copy">
<p class="eyebrow eyebrow--light">Start a project</p>
<h2 class="sec-title">Tell us what you're building.</h2>
<p>We take on a handful of identity projects each quarter. Send a line about the
company and the problem — we reply to every serious inquiry within two days.</p>
</div>
<form class="inquire__form" id="inquireForm" novalidate>
<label>Your name
<input type="text" name="name" required placeholder="Jordan Rivera" />
</label>
<label>Email
<input type="email" name="email" required placeholder="you@company.com" />
</label>
<label>What are you building?
<textarea name="brief" rows="3" required placeholder="A short brief…"></textarea>
</label>
<button type="submit" class="btn btn--solid btn--block">Send inquiry</button>
</form>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="foot">
<div class="wrap foot__inner">
<div class="foot__brand">
<span class="brand__mark" aria-hidden="true">M&P</span>
<p>Marrow & Plumb — a branding & identity studio. Strategy, naming, identity and guidelines for brands with a spine.</p>
</div>
<nav class="foot__col" aria-label="Studio">
<h4>Studio</h4>
<a href="#work">Work</a>
<a href="#services">Services</a>
<a href="#philosophy">About</a>
<a href="#process">Process</a>
</nav>
<nav class="foot__col" aria-label="Connect">
<h4>Connect</h4>
<a href="#inquire">Start a project</a>
<a href="#voices">Voices</a>
<a href="#top">Instagram</a>
<a href="#top">LinkedIn</a>
</nav>
<div class="foot__col">
<h4>Studio hours</h4>
<p>Mon–Fri · 9–6<br />Remote-first, worldwide</p>
<p class="foot__mail">hello@marrowplumb.studio</p>
</div>
</div>
<div class="wrap foot__base">
<span>© 2026 Marrow & Plumb. Fictional studio.</span>
<span>Cream, plum & sand. Made with care.</span>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Branding / Identity Landing
A polished, single-page marketing site for Marrow & Plumb, an invented branding and identity studio. The visual identity leans on a cream base with a deep-plum and warm-sand duotone, pairing a high-contrast Fraunces serif against Inter for body copy. A sticky, translucent nav sits above a hero whose animated logotype cycles through mark variants while a duotone “mark stage” panel previews the palette.
Below the fold the page tells the studio’s story in distinct sections: a client logo row, three full case studies built from type specimens and color blocks, a four-discipline services grid on an ink-dark band, a philosophy split with named values, a four-step process, three founder testimonials, and a plum inquiry section with a validated contact form. Everything is fully responsive down to ~360px with a hamburger menu, and accessible with semantic landmarks, skip link and visible focus states.
Interactions are pure vanilla JavaScript: an IntersectionObserver drives staggered scroll
reveals and animated stat counters, the hero brand-mark cycles on a timer, anchors smooth-scroll,
the mobile menu toggles, and the inquiry form validates inline and confirms through a reusable
toast() helper. A prefers-reduced-motion guard disables animation for sensitive users.
Illustrative UI only — fictional brand, not a real product.