Scrollspy
Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.
1In a navbar
Scroll the box: the navbar pill for the visible section becomes active.
Intro
We have helped more than a hundred companies launch, rebrand and grow online. Clients stay with us for years because we treat their brand like our own. Our motion team turns complex ideas into short films people actually watch. We measure success in sign-ups, sales and brand recall, not just awards.
From logo to launch campaign, everything is designed to work together. Senior designers lead every project from the first sketch to the final file. Friendly people answer your questions quickly, by phone, chat or email. Thousands of clients already trust us, and we work hard to keep it that way.
Details
Small teams, short feedback loops and no handoffs lost in translation. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.
We listen first, then build a plan around what you actually need. We measure success by how many clients come back and tell their friends. We combine strategy, design and technology to build brands that grow. Every project starts with a workshop, so we understand your audience before we design.
Pricing
We test early with real users, so the final design works on the first day. Websites we build are fast, accessible and easy for your team to update. Thousands of clients already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess.
Fixed prices and weekly demos keep you in control from start to finish. Senior designers lead every project from the first sketch to the final file. Friendly people answer your questions quickly, by phone, chat or email. We have helped more than a hundred companies launch, rebrand and grow online.
<nav id="spy-nav-1121" class="navbar bg-surface-3 px-4 mb-4 rounded-md">
<a class="navbar-brand" href="#">Nimbus Kit</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
<li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
</ul>
</nav>
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-4">
<h3 class="h6">Intro</h3>
<p class="small">We have helped more than a hundred companies launch, rebrand and grow online. Clients stay with us for years because we treat their brand like our own. Our motion team turns complex ideas into short films people actually watch. We measure success in sign-ups, sales and brand recall, not just awards.</p>
<p class="small">From logo to launch campaign, everything is designed to work together. Senior designers lead every project from the first sketch to the final file. Friendly people answer your questions quickly, by phone, chat or email. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1123" class="pb-4">
<h3 class="h6">Details</h3>
<p class="small">Small teams, short feedback loops and no handoffs lost in translation. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.</p>
<p class="small">We listen first, then build a plan around what you actually need. We measure success by how many clients come back and tell their friends. We combine strategy, design and technology to build brands that grow. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
<div id="spy-1124" class="pb-4">
<h3 class="h6">Pricing</h3>
<p class="small">We test early with real users, so the final design works on the first day. Websites we build are fast, accessible and easy for your team to update. Thousands of clients already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess.</p>
<p class="small">Fixed prices and weekly demos keep you in control from start to finish. Senior designers lead every project from the first sketch to the final file. Friendly people answer your questions quickly, by phone, chat or email. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Clients stay with us for years because we treat their brand like our own. Our motion team turns complex ideas into short films people actually watch. We listen first, then build a plan around what you actually need. Every project starts with a workshop, so we understand your audience before we design.
Step two
We combine strategy, design and technology to build brands that grow. From logo to launch campaign, everything is designed to work together. We keep things simple, so you can focus on what matters to you. We measure success by how many clients come back and tell their friends.
Step three
We test early with real users, so the final design works on the first day. Clear prices, honest advice and no surprises along the way. Websites we build are fast, accessible and easy for your team to update.
Step four
Small teams, short feedback loops and no handoffs lost in translation. Start in minutes and get help from a real person whenever you need it. We measure success in sign-ups, sales and brand recall, not just awards. Every detail is handled by people who care about getting it right.
<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
<a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="relative border rounded-md p-4" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-4">
<h3 class="h6">Step one</h3>
<p class="small">Clients stay with us for years because we treat their brand like our own. Our motion team turns complex ideas into short films people actually watch. We listen first, then build a plan around what you actually need. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
<div id="spy-1127" class="pb-4">
<h3 class="h6">Step two</h3>
<p class="small">We combine strategy, design and technology to build brands that grow. From logo to launch campaign, everything is designed to work together. We keep things simple, so you can focus on what matters to you. We measure success by how many clients come back and tell their friends.</p>
</div>
<div id="spy-1128" class="pb-4">
<h3 class="h6">Step three</h3>
<p class="small">We test early with real users, so the final design works on the first day. Clear prices, honest advice and no surprises along the way. Websites we build are fast, accessible and easy for your team to update.</p>
</div>
<div id="spy-1129" class="pb-4">
<h3 class="h6">Step four</h3>
<p class="small">Small teams, short feedback loops and no handoffs lost in translation. Start in minutes and get help from a real person whenever you need it. We measure success in sign-ups, sales and brand recall, not just awards. Every detail is handled by people who care about getting it right.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Campaign production
From logo to launch campaign, everything is designed to work together. Websites we build are fast, accessible and easy for your team to update. Every detail is handled by people who care about getting it right. Fixed prices and weekly demos keep you in control from start to finish.
Content strategy
We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. Thousands of clients already trust us, and we work hard to keep it that way.
Brand identity
Friendly people answer your questions quickly, by phone, chat or email. Small teams, short feedback loops and no handoffs lost in translation. Senior designers lead every project from the first sketch to the final file. Every project starts with a workshop, so we understand your audience before we design.
Questions
We test early with real users, so the final design works on the first day. We have helped more than a hundred companies launch, rebrand and grow online. Clients stay with us for years because we treat their brand like our own. Our motion team turns complex ideas into short films people actually watch.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-col">
<a class="nav-link" href="#spy-1131">Campaign production</a><a class="nav-link" href="#spy-1132">Content strategy</a><a class="nav-link" href="#spy-1133">Brand identity</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-4">
<h3 class="h6">Campaign production</h3>
<p class="small">From logo to launch campaign, everything is designed to work together. Websites we build are fast, accessible and easy for your team to update. Every detail is handled by people who care about getting it right. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
<div id="spy-1132" class="pb-4">
<h3 class="h6">Content strategy</h3>
<p class="small">We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1133" class="pb-4">
<h3 class="h6">Brand identity</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Small teams, short feedback loops and no handoffs lost in translation. Senior designers lead every project from the first sketch to the final file. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
<div id="spy-1134" class="pb-4">
<h3 class="h6">Questions</h3>
<p class="small">We test early with real users, so the final design works on the first day. We have helped more than a hundred companies launch, rebrand and grow online. Clients stay with us for years because we treat their brand like our own. Our motion team turns complex ideas into short films people actually watch.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
We combine strategy, design and technology to build brands that grow. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.
Install
We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends. Our motion team turns complex ideas into short films people actually watch. We test early with real users, so the final design works on the first day.
Configure
We have helped more than a hundred companies launch, rebrand and grow online. Every project starts with a workshop, so we understand your audience before we design. We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends.
Usage
We keep things simple, so you can focus on what matters to you. Clients stay with us for years because we treat their brand like our own. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.
Examples
Every detail is handled by people who care about getting it right. Thousands of clients already trust us, and we work hard to keep it that way. Small teams, short feedback loops and no handoffs lost in translation. We listen first, then build a plan around what you actually need.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1135" class="h-full flex-col items-stretch">
<nav class="nav nav-pills flex-col">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-col">
<a class="nav-link ms-4 my-1" href="#spy-1137">Install</a><a class="nav-link ms-4 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-col">
<a class="nav-link ms-4 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-4">
<h3 class="h6">Getting started</h3>
<p class="small">We combine strategy, design and technology to build brands that grow. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1137" class="pb-4">
<h3 class="h6">Install</h3>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends. Our motion team turns complex ideas into short films people actually watch. We test early with real users, so the final design works on the first day.</p>
</div>
<div id="spy-1138" class="pb-4">
<h3 class="h6">Configure</h3>
<p class="small">We have helped more than a hundred companies launch, rebrand and grow online. Every project starts with a workshop, so we understand your audience before we design. We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends.</p>
</div>
<div id="spy-1139" class="pb-4">
<h3 class="h6">Usage</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Clients stay with us for years because we treat their brand like our own. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1140" class="pb-4">
<h3 class="h6">Examples</h3>
<p class="small">Every detail is handled by people who care about getting it right. Thousands of clients already trust us, and we work hard to keep it that way. Small teams, short feedback loops and no handoffs lost in translation. We listen first, then build a plan around what you actually need.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Websites we build are fast, accessible and easy for your team to update. Fixed prices and weekly demos keep you in control from start to finish. Our team has done this many times, so you never have to guess. From logo to launch campaign, everything is designed to work together.
Midday
Senior designers lead every project from the first sketch to the final file. Start in minutes and get help from a real person whenever you need it. We combine strategy, design and technology to build brands that grow.
Afternoon
Every detail is handled by people who care about getting it right. Every project starts with a workshop, so we understand your audience before we design. Clients stay with us for years because we treat their brand like our own. Our team has done this many times, so you never have to guess.
Evening
We measure success by how many clients come back and tell their friends. We measure success in sign-ups, sales and brand recall, not just awards. Fixed prices and weekly demos keep you in control from start to finish.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1141" class="list-group">
<a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
</div>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-4">
<h3 class="h6">Morning</h3>
<p class="small">Websites we build are fast, accessible and easy for your team to update. Fixed prices and weekly demos keep you in control from start to finish. Our team has done this many times, so you never have to guess. From logo to launch campaign, everything is designed to work together.</p>
</div>
<div id="spy-1143" class="pb-4">
<h3 class="h6">Midday</h3>
<p class="small">Senior designers lead every project from the first sketch to the final file. Start in minutes and get help from a real person whenever you need it. We combine strategy, design and technology to build brands that grow.</p>
</div>
<div id="spy-1144" class="pb-4">
<h3 class="h6">Afternoon</h3>
<p class="small">Every detail is handled by people who care about getting it right. Every project starts with a workshop, so we understand your audience before we design. Clients stay with us for years because we treat their brand like our own. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1145" class="pb-4">
<h3 class="h6">Evening</h3>
<p class="small">We measure success by how many clients come back and tell their friends. We measure success in sign-ups, sales and brand recall, not just awards. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Clear prices, honest advice and no surprises along the way. Small teams, short feedback loops and no handoffs lost in translation. We combine strategy, design and technology to build brands that grow.
Beta
Start in minutes and get help from a real person whenever you need it. Thousands of clients already trust us, and we work hard to keep it that way. We have helped more than a hundred companies launch, rebrand and grow online. Websites we build are fast, accessible and easy for your team to update.
Gamma
We test early with real users, so the final design works on the first day. Senior designers lead every project from the first sketch to the final file. We listen first, then build a plan around what you actually need.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="flex flex-col gap-2 small">
<a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1147">Alpha</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1148">Beta</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="relative border rounded-md p-4" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-4">
<h3 class="h6">Alpha</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Small teams, short feedback loops and no handoffs lost in translation. We combine strategy, design and technology to build brands that grow.</p>
</div>
<div id="spy-1148" class="pb-4">
<h3 class="h6">Beta</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Thousands of clients already trust us, and we work hard to keep it that way. We have helped more than a hundred companies launch, rebrand and grow online. Websites we build are fast, accessible and easy for your team to update.</p>
</div>
<div id="spy-1149" class="pb-4">
<h3 class="h6">Gamma</h3>
<p class="small">We test early with real users, so the final design works on the first day. Senior designers lead every project from the first sketch to the final file. We listen first, then build a plan around what you actually need.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. From logo to launch campaign, everything is designed to work together. Our motion team turns complex ideas into short films people actually watch.
Features
We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. We have helped more than a hundred companies launch, rebrand and grow online.
Reviews
Clients stay with us for years because we treat their brand like our own. Our team has done this many times, so you never have to guess. Small teams, short feedback loops and no handoffs lost in translation.
FAQ
Every detail is handled by people who care about getting it right. Senior designers lead every project from the first sketch to the final file. We combine strategy, design and technology to build brands that grow. From logo to launch campaign, everything is designed to work together.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-b">
<a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="relative border rounded-md p-4 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-4">
<h3 class="h6">Overview</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. From logo to launch campaign, everything is designed to work together. Our motion team turns complex ideas into short films people actually watch.</p>
</div>
<div id="spy-1152" class="pb-4">
<h3 class="h6">Features</h3>
<p class="small">We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
<div id="spy-1153" class="pb-4">
<h3 class="h6">Reviews</h3>
<p class="small">Clients stay with us for years because we treat their brand like our own. Our team has done this many times, so you never have to guess. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
<div id="spy-1154" class="pb-4">
<h3 class="h6">FAQ</h3>
<p class="small">Every detail is handled by people who care about getting it right. Senior designers lead every project from the first sketch to the final file. We combine strategy, design and technology to build brands that grow. From logo to launch campaign, everything is designed to work together.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Websites we build are fast, accessible and easy for your team to update. Fixed prices and weekly demos keep you in control from start to finish. We measure success in sign-ups, sales and brand recall, not just awards. Start in minutes and get help from a real person whenever you need it.
Background
Every project starts with a workshop, so we understand your audience before we design. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Our motion team turns complex ideas into short films people actually watch.
Method
Thousands of clients already trust us, and we work hard to keep it that way. We test early with real users, so the final design works on the first day. We measure success by how many clients come back and tell their friends. From logo to launch campaign, everything is designed to work together.
Results
Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Thousands of clients already trust us, and we work hard to keep it that way.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-4">
<h3 class="h6">Summary</h3>
<p class="small">Websites we build are fast, accessible and easy for your team to update. Fixed prices and weekly demos keep you in control from start to finish. We measure success in sign-ups, sales and brand recall, not just awards. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1157" class="pb-4">
<h3 class="h6">Background</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Our motion team turns complex ideas into short films people actually watch.</p>
</div>
<div id="spy-1158" class="pb-4">
<h3 class="h6">Method</h3>
<p class="small">Thousands of clients already trust us, and we work hard to keep it that way. We test early with real users, so the final design works on the first day. We measure success by how many clients come back and tell their friends. From logo to launch campaign, everything is designed to work together.</p>
</div>
<div id="spy-1159" class="pb-4">
<h3 class="h6">Results</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first md:order-last">
<p class="small font-semibold uppercase text-muted mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-col small">
<a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
</nav>
</div>
</div>9Numbered steps
<code>.list-group-numbered</code> turns the spy menu into a step counter.
Create an account
Clear prices, honest advice and no surprises along the way. Small teams, short feedback loops and no handoffs lost in translation. Websites we build are fast, accessible and easy for your team to update. Clients stay with us for years because we treat their brand like our own.
Set up your profile
We test early with real users, so the final design works on the first day. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. We measure success in sign-ups, sales and brand recall, not just awards.
Invite the team
We measure success by how many clients come back and tell their friends. We have helped more than a hundred companies launch, rebrand and grow online. Our team has done this many times, so you never have to guess. We combine strategy, design and technology to build brands that grow.
Go live
Every project starts with a workshop, so we understand your audience before we design. Our motion team turns complex ideas into short films people actually watch. Fixed prices and weekly demos keep you in control from start to finish.
<div class="row g-3">
<div class="col-sm-5">
<div id="spy-nav-1160" class="list-group list-group-numbered">
<a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
</div>
</div>
<div class="col-sm-7">
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-4">
<h3 class="h6">Create an account</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Small teams, short feedback loops and no handoffs lost in translation. Websites we build are fast, accessible and easy for your team to update. Clients stay with us for years because we treat their brand like our own.</p>
</div>
<div id="spy-1162" class="pb-4">
<h3 class="h6">Set up your profile</h3>
<p class="small">We test early with real users, so the final design works on the first day. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. We measure success in sign-ups, sales and brand recall, not just awards.</p>
</div>
<div id="spy-1163" class="pb-4">
<h3 class="h6">Invite the team</h3>
<p class="small">We measure success by how many clients come back and tell their friends. We have helped more than a hundred companies launch, rebrand and grow online. Our team has done this many times, so you never have to guess. We combine strategy, design and technology to build brands that grow.</p>
</div>
<div id="spy-1164" class="pb-4">
<h3 class="h6">Go live</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. Our motion team turns complex ideas into short films people actually watch. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
How we ran a rebrand in eight weeks
We keep things simple, so you can focus on what matters to you. Senior designers lead every project from the first sketch to the final file. Fixed prices and weekly demos keep you in control from start to finish. Clear prices, honest advice and no surprises along the way.
Five things we learned this year
Our motion team turns complex ideas into short films people actually watch. From logo to launch campaign, everything is designed to work together. We keep things simple, so you can focus on what matters to you.
How to choose the right project
Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Small teams, short feedback loops and no handoffs lost in translation.
A beginner's guide to getting started
We measure success in sign-ups, sales and brand recall, not just awards. We have helped more than a hundred companies launch, rebrand and grow online. We measure success by how many clients come back and tell their friends.
<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1166" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">How we ran a rebrand in eight weeks</h3>
<p class="small mb-0">We keep things simple, so you can focus on what matters to you. Senior designers lead every project from the first sketch to the final file. Fixed prices and weekly demos keep you in control from start to finish. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1167" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">Five things we learned this year</h3>
<p class="small mb-0">Our motion team turns complex ideas into short films people actually watch. From logo to launch campaign, everything is designed to work together. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1168" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2025</span>
<h3 class="h6">How to choose the right project</h3>
<p class="small mb-0">Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
<div id="spy-1169" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2026</span>
<h3 class="h6">A beginner's guide to getting started</h3>
<p class="small mb-0">We measure success in sign-ups, sales and brand recall, not just awards. We have helped more than a hundred companies launch, rebrand and grow online. We measure success by how many clients come back and tell their friends.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Lessons from a year of client workshops?
- Websites we build are fast, accessible and easy for your team to update.
- Why motion matters for modern brands?
- Thousands of clients already trust us, and we work hard to keep it that way.
- The small habits that make a big difference?
- We listen first, then build a plan around what you actually need.
Shipping
- A checklist for your next website launch?
- Clients stay with us for years because we treat their brand like our own.
- What our clients asked us most?
- Senior designers lead every project from the first sketch to the final file.
- Choosing colours that sell?
- Every project starts with a workshop, so we understand your audience before we design.
Returns
- Inside our design process?
- Friendly people answer your questions quickly, by phone, chat or email.
- What makes a brand memorable?
- Our team has done this many times, so you never have to guess.
- Our favourite tips for busy weeks?
- We combine strategy, design and technology to build brands that grow.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills sm:flex-col">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-4">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">Lessons from a year of client workshops?</dt>
<dd class="small text-muted">Websites we build are fast, accessible and easy for your team to update.</dd>
<dt class="small">Why motion matters for modern brands?</dt>
<dd class="small text-muted">Thousands of clients already trust us, and we work hard to keep it that way.</dd>
<dt class="small">The small habits that make a big difference?</dt>
<dd class="small text-muted">We listen first, then build a plan around what you actually need.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-4">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">A checklist for your next website launch?</dt>
<dd class="small text-muted">Clients stay with us for years because we treat their brand like our own.</dd>
<dt class="small">What our clients asked us most?</dt>
<dd class="small text-muted">Senior designers lead every project from the first sketch to the final file.</dd>
<dt class="small">Choosing colours that sell?</dt>
<dd class="small text-muted">Every project starts with a workshop, so we understand your audience before we design.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-4">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">Inside our design process?</dt>
<dd class="small text-muted">Friendly people answer your questions quickly, by phone, chat or email.</dd>
<dt class="small">What makes a brand memorable?</dt>
<dd class="small text-muted">Our team has done this many times, so you never have to guess.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-muted">We combine strategy, design and technology to build brands that grow.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
We test early with real users, so the final design works on the first day. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. We have helped more than a hundred companies launch, rebrand and grow online.
Battery
We measure success in sign-ups, sales and brand recall, not just awards. We test early with real users, so the final design works on the first day. Our motion team turns complex ideas into short films people actually watch.
Connectivity
Every project starts with a workshop, so we understand your audience before we design. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.
Security
Fixed prices and weekly demos keep you in control from start to finish. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-col">
<a class="nav-link flex items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link flex items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link flex items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link flex items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-4">
<h3 class="h6">Performance</h3>
<p class="small">We test early with real users, so the final design works on the first day. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
<div id="spy-1176" class="pb-4">
<h3 class="h6">Battery</h3>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. We test early with real users, so the final design works on the first day. Our motion team turns complex ideas into short films people actually watch.</p>
</div>
<div id="spy-1177" class="pb-4">
<h3 class="h6">Connectivity</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1178" class="pb-4">
<h3 class="h6">Security</h3>
<p class="small">Fixed prices and weekly demos keep you in control from start to finish. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$9.27 / mo
- Fast turnaround
- Award-winning team
- Senior designers only
Team
$42.05 / mo
- Fast turnaround
- Global clients
- Award-winning team
Business
$58.61 / mo
- Weekly demos
- Senior designers only
- Global clients
<nav id="spy-nav-1179" class="nav nav-pills justify-center mb-2">
<a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="relative border rounded-md p-4 bg-surface-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-4">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="text-xl font-bold mb-1">$9.27<small class="text-base text-muted"> / mo</small></p>
<ul class="small mb-0">
<li>Fast turnaround</li>
<li>Award-winning team</li>
<li>Senior designers only</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-4">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="text-xl font-bold mb-1">$42.05<small class="text-base text-muted"> / mo</small></p>
<ul class="small mb-0">
<li>Fast turnaround</li>
<li>Global clients</li>
<li>Award-winning team</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-4">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="text-xl font-bold mb-1">$58.61<small class="text-base text-muted"> / mo</small></p>
<ul class="small mb-0">
<li>Weekly demos</li>
<li>Senior designers only</li>
<li>Global clients</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Designing packaging that survives the shelf
Small teams, short feedback loops and no handoffs lost in translation. Clients stay with us for years because we treat their brand like our own. Websites we build are fast, accessible and easy for your team to update. We combine strategy, design and technology to build brands that grow.
Start in minutes and get help from a real person whenever you need it. We measure success by how many clients come back and tell their friends. Thousands of clients already trust us, and we work hard to keep it that way. Senior designers lead every project from the first sketch to the final file.
Chapter 2: Five website mistakes that cost you leads
From logo to launch campaign, everything is designed to work together. We combine strategy, design and technology to build brands that grow. Websites we build are fast, accessible and easy for your team to update.
We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. Clients stay with us for years because we treat their brand like our own.
Chapter 3: Looking back at a busy season
Fixed prices and weekly demos keep you in control from start to finish. We measure success in sign-ups, sales and brand recall, not just awards. From logo to launch campaign, everything is designed to work together. We test early with real users, so the final design works on the first day.
We measure success by how many clients come back and tell their friends. Small teams, short feedback loops and no handoffs lost in translation. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.
Chapter 4: Planning a month of social content in a day
Friendly people answer your questions quickly, by phone, chat or email. Our motion team turns complex ideas into short films people actually watch. Thousands of clients already trust us, and we work hard to keep it that way.
Every project starts with a workshop, so we understand your audience before we design. Every detail is handled by people who care about getting it right. Senior designers lead every project from the first sketch to the final file. We have helped more than a hundred companies launch, rebrand and grow online.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="relative border rounded-md p-4 border-t-0 rounded-t-none leading-loose" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-4">
<h3 class="h6">Chapter 1: Designing packaging that survives the shelf</h3>
<p class="small">Small teams, short feedback loops and no handoffs lost in translation. Clients stay with us for years because we treat their brand like our own. Websites we build are fast, accessible and easy for your team to update. We combine strategy, design and technology to build brands that grow.</p>
<p class="small">Start in minutes and get help from a real person whenever you need it. We measure success by how many clients come back and tell their friends. Thousands of clients already trust us, and we work hard to keep it that way. Senior designers lead every project from the first sketch to the final file.</p>
</div>
<div id="spy-1185" class="pb-4">
<h3 class="h6">Chapter 2: Five website mistakes that cost you leads</h3>
<p class="small">From logo to launch campaign, everything is designed to work together. We combine strategy, design and technology to build brands that grow. Websites we build are fast, accessible and easy for your team to update.</p>
<p class="small">We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. Clients stay with us for years because we treat their brand like our own.</p>
</div>
<div id="spy-1186" class="pb-4">
<h3 class="h6">Chapter 3: Looking back at a busy season</h3>
<p class="small">Fixed prices and weekly demos keep you in control from start to finish. We measure success in sign-ups, sales and brand recall, not just awards. From logo to launch campaign, everything is designed to work together. We test early with real users, so the final design works on the first day.</p>
<p class="small">We measure success by how many clients come back and tell their friends. Small teams, short feedback loops and no handoffs lost in translation. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1187" class="pb-4">
<h3 class="h6">Chapter 4: Planning a month of social content in a day</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our motion team turns complex ideas into short films people actually watch. Thousands of clients already trust us, and we work hard to keep it that way.</p>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. Every detail is handled by people who care about getting it right. Senior designers lead every project from the first sketch to the final file. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
From logo to launch campaign, everything is designed to work together. We keep things simple, so you can focus on what matters to you. We test early with real users, so the final design works on the first day. Start in minutes and get help from a real person whenever you need it.
Notifications
Fixed prices and weekly demos keep you in control from start to finish. Thousands of clients already trust us, and we work hard to keep it that way. Our motion team turns complex ideas into short films people actually watch. We listen first, then build a plan around what you actually need.
Privacy
Clear prices, honest advice and no surprises along the way. Websites we build are fast, accessible and easy for your team to update. Friendly people answer your questions quickly, by phone, chat or email. Clients stay with us for years because we treat their brand like our own.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1188" class="list-group list-group-flush border rounded-md">
<a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
</div>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1189" class="pb-4">
<h3 class="h6">Profile</h3>
<div class="mb-2">
<label for="spy-in-1192" class="form-label small">Display name</label>
<input class="form-control form-control-sm" id="spy-in-1192" value="Theo Carter">
</div>
<div class="mb-2">
<label for="spy-in-1193" class="form-label small">City</label>
<input class="form-control form-control-sm" id="spy-in-1193" value="Oslo">
</div>
<p class="small">From logo to launch campaign, everything is designed to work together. We keep things simple, so you can focus on what matters to you. We test early with real users, so the final design works on the first day. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1190" class="pb-4">
<h3 class="h6">Notifications</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
<label class="form-check-label small" for="spy-sw-1194">Product news</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
<label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
</div>
<p class="small">Fixed prices and weekly demos keep you in control from start to finish. Thousands of clients already trust us, and we work hard to keep it that way. Our motion team turns complex ideas into short films people actually watch. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1191" class="pb-4">
<h3 class="h6">Privacy</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="spy-sw-1196">
<label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
</div>
<p class="small">Clear prices, honest advice and no surprises along the way. Websites we build are fast, accessible and easy for your team to update. Friendly people answer your questions quickly, by phone, chat or email. Clients stay with us for years because we treat their brand like our own.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Finance
- Owen VargaContent Writer
- Luna FischerFrontend Engineer
- Aria MoreauArt Director
Marketing
- Noah SilvaData Analyst
- Nora QuinnBackend Engineer
- Ruby LarsenProduct Designer
Sales
- Theo DelgadoMarketing Lead
- Liam MensahArt Director
- Freya HaddadProject Manager
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Finance</a><a class="nav-link" href="#spy-1199">Marketing</a><a class="nav-link" href="#spy-1200">Sales</a>
</nav>
<div class="relative border rounded-md p-4" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-4">
<h3 class="h6">Finance</h3>
<ul class="list-unstyled">
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Owen Varga"><div><div class="small font-semibold">Owen Varga</div><div class="small text-muted">Content Writer</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-full" width="36" height="36" alt="Luna Fischer"><div><div class="small font-semibold">Luna Fischer</div><div class="small text-muted">Frontend Engineer</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-full" width="36" height="36" alt="Aria Moreau"><div><div class="small font-semibold">Aria Moreau</div><div class="small text-muted">Art Director</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-4">
<h3 class="h6">Marketing</h3>
<ul class="list-unstyled">
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-full" width="36" height="36" alt="Noah Silva"><div><div class="small font-semibold">Noah Silva</div><div class="small text-muted">Data Analyst</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-full" width="36" height="36" alt="Nora Quinn"><div><div class="small font-semibold">Nora Quinn</div><div class="small text-muted">Backend Engineer</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-full" width="36" height="36" alt="Ruby Larsen"><div><div class="small font-semibold">Ruby Larsen</div><div class="small text-muted">Product Designer</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-4">
<h3 class="h6">Sales</h3>
<ul class="list-unstyled">
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Theo Delgado"><div><div class="small font-semibold">Theo Delgado</div><div class="small text-muted">Marketing Lead</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-full" width="36" height="36" alt="Liam Mensah"><div><div class="small font-semibold">Liam Mensah</div><div class="small text-muted">Art Director</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Freya Haddad"><div><div class="small font-semibold">Freya Haddad</div><div class="small text-muted">Project Manager</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Branding
- Launch campaign$15,000
- Brand sprint$4,600
- Explainer animation$5,900
Motion
- Social kit$1,900
- Launch campaign$10,000
- Video edit$2,550
- Website package$8,800
- Social kit$1,900
- Landing page$3,300
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Branding</a><a class="nav-link" href="#spy-1203">Motion</a><a class="nav-link" href="#spy-1204">Print</a>
</nav>
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-4">
<h3 class="h6">Branding</h3>
<ul class="list-unstyled">
<li class="flex justify-between border-b py-2 small"><span>Launch campaign</span><span class="font-semibold">$15,000</span></li>
<li class="flex justify-between border-b py-2 small"><span>Brand sprint</span><span class="font-semibold">$4,600</span></li>
<li class="flex justify-between border-b py-2 small"><span>Explainer animation</span><span class="font-semibold">$5,900</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-4">
<h3 class="h6">Motion</h3>
<ul class="list-unstyled">
<li class="flex justify-between border-b py-2 small"><span>Social kit</span><span class="font-semibold">$1,900</span></li>
<li class="flex justify-between border-b py-2 small"><span>Launch campaign</span><span class="font-semibold">$10,000</span></li>
<li class="flex justify-between border-b py-2 small"><span>Video edit</span><span class="font-semibold">$2,550</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-4">
<h3 class="h6">Print</h3>
<ul class="list-unstyled">
<li class="flex justify-between border-b py-2 small"><span>Website package</span><span class="font-semibold">$8,800</span></li>
<li class="flex justify-between border-b py-2 small"><span>Social kit</span><span class="font-semibold">$1,900</span></li>
<li class="flex justify-between border-b py-2 small"><span>Landing page</span><span class="font-semibold">$3,300</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
We have helped more than a hundred companies launch, rebrand and grow online. We combine strategy, design and technology to build brands that grow. Every project starts with a workshop, so we understand your audience before we design.
This week
Senior designers lead every project from the first sketch to the final file. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.
Later
We measure success in sign-ups, sales and brand recall, not just awards. Small teams, short feedback loops and no handoffs lost in translation. We measure success by how many clients come back and tell their friends.
<div class="card">
<div class="card-header">
<nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
<a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
</nav>
</div>
<div class="card-body p-0">
<div class="relative border rounded-md p-4 border-0 rounded-none" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-4">
<h3 class="h6">Today</h3>
<p class="small">We have helped more than a hundred companies launch, rebrand and grow online. We combine strategy, design and technology to build brands that grow. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
<div id="spy-1207" class="pb-4">
<h3 class="h6">This week</h3>
<p class="small">Senior designers lead every project from the first sketch to the final file. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1208" class="pb-4">
<h3 class="h6">Later</h3>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. Small teams, short feedback loops and no handoffs lost in translation. We measure success by how many clients come back and tell their friends.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Websites we build are fast, accessible and easy for your team to update. We combine strategy, design and technology to build brands that grow. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.
Orbit
Small teams, short feedback loops and no handoffs lost in translation. Our motion team turns complex ideas into short films people actually watch. Senior designers lead every project from the first sketch to the final file. We measure success in sign-ups, sales and brand recall, not just awards.
Landing
Fixed prices and weekly demos keep you in control from start to finish. Thousands of clients already trust us, and we work hard to keep it that way. Clients stay with us for years because we treat their brand like our own.
<div data-ui-theme="dark" class="bg-dark text-body rounded-md p-4">
<nav id="spy-nav-1209" class="nav nav-pills mb-2">
<a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
</nav>
<div class="relative border rounded-md p-4 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-4">
<h3 class="h6">Launch</h3>
<p class="small">Websites we build are fast, accessible and easy for your team to update. We combine strategy, design and technology to build brands that grow. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1211" class="pb-4">
<h3 class="h6">Orbit</h3>
<p class="small">Small teams, short feedback loops and no handoffs lost in translation. Our motion team turns complex ideas into short films people actually watch. Senior designers lead every project from the first sketch to the final file. We measure success in sign-ups, sales and brand recall, not just awards.</p>
</div>
<div id="spy-1212" class="pb-4">
<h3 class="h6">Landing</h3>
<p class="small">Fixed prices and weekly demos keep you in control from start to finish. Thousands of clients already trust us, and we work hard to keep it that way. Clients stay with us for years because we treat their brand like our own.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Jul 1, 2026
- NewWe measure success by how many clients come back and tell their friends.
- ImprovedOur team has done this many times, so you never have to guess.
- FixedWe test early with real users, so the final design works on the first day.
v3.1 Sep 19, 2025
- NewWe keep things simple, so you can focus on what matters to you.
- ImprovedWe have helped more than a hundred companies launch, rebrand and grow online.
- FixedEvery detail is handled by people who care about getting it right.
v3.0 Nov 29, 2025
- NewWe listen first, then build a plan around what you actually need.
- ImprovedFrom logo to launch campaign, everything is designed to work together.
- FixedEvery project starts with a workshop, so we understand your audience before we design.
v2.9 Jan 26, 2026
- NewStart in minutes and get help from a real person whenever you need it.
- ImprovedOur team has done this many times, so you never have to guess.
- FixedWe keep things simple, so you can focus on what matters to you.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-col small">
<a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
</nav>
</div>
<div class="col-9">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-4">
<h3 class="h6">v3.2 <small class="text-muted font-normal">Jul 1, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We measure success by how many clients come back and tell their friends.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We test early with real users, so the final design works on the first day.</li>
</ul>
</div>
<div id="spy-1215" class="pb-4">
<h3 class="h6">v3.1 <small class="text-muted font-normal">Sep 19, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We keep things simple, so you can focus on what matters to you.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We have helped more than a hundred companies launch, rebrand and grow online.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every detail is handled by people who care about getting it right.</li>
</ul>
</div>
<div id="spy-1216" class="pb-4">
<h3 class="h6">v3.0 <small class="text-muted font-normal">Nov 29, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We listen first, then build a plan around what you actually need.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>From logo to launch campaign, everything is designed to work together.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every project starts with a workshop, so we understand your audience before we design.</li>
</ul>
</div>
<div id="spy-1217" class="pb-4">
<h3 class="h6">v2.9 <small class="text-muted font-normal">Jan 26, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Start in minutes and get help from a real person whenever you need it.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
</ul>
</div>
</div>
</div>
</div>