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
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. 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. 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.
Details
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. We measure success by how many clients come back and tell their friends. Websites we build are fast, accessible and easy for your team to update.
Friendly people answer your questions quickly, by phone, chat or email. Senior designers lead every project from the first sketch to the final file. Small teams, short feedback loops and no handoffs lost in translation. Thousands of clients already trust us, and we work hard to keep it that way.
Pricing
We combine strategy, design and technology to build brands that grow. We have helped more than a hundred companies launch, rebrand and grow online. From logo to launch campaign, everything is designed to work together. Clear prices, honest advice and no surprises along the way.
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. Our team has done this many times, so you never have to guess. Thousands of clients already trust us, and we work hard to keep it that way.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Nimbusan</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="position-relative border rounded p-3" 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-3">
<h3 class="h6">Intro</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. Every project starts with a workshop, so we understand your audience before we design.</p>
<p class="small">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. We measure success in sign-ups, sales and brand recall, not just awards.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">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. We measure success by how many clients come back and tell their friends. Websites we build are fast, accessible and easy for your team to update.</p>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Senior designers lead every project from the first sketch to the final file. Small teams, short feedback loops and no handoffs lost in translation. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">We combine strategy, design and technology to build brands that grow. We have helped more than a hundred companies launch, rebrand and grow online. From logo to launch campaign, everything is designed to work together. 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. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Clear prices, honest advice and no surprises along the way. Websites we build are fast, accessible and easy for your team to update. We have helped more than a hundred companies launch, rebrand and grow online. Every detail is handled by people who care about getting it right.
Step two
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. From logo to launch campaign, everything is designed to work together. Small teams, short feedback loops and no handoffs lost in translation.
Step three
We measure success by how many clients come back and tell their friends. We combine strategy, design and technology to build brands that grow. Our motion team turns complex ideas into short films people actually watch.
Step four
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. Friendly people answer your questions quickly, by phone, chat or email. We test early with real users, so the final design works on the first day.
<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="position-relative border rounded p-3" 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-3">
<h3 class="h6">Step one</h3>
<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. We have helped more than a hundred companies launch, rebrand and grow online. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</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. From logo to launch campaign, everything is designed to work together. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">We measure success by how many clients come back and tell their friends. We combine strategy, design and technology to build brands that grow. Our motion team turns complex ideas into short films people actually watch.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">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. Friendly people answer your questions quickly, by phone, chat or email. We test early with real users, so the final design works on the first day.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Campaign production
We measure success in sign-ups, sales and brand recall, not just awards. 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. From logo to launch campaign, everything is designed to work together.
UX research
Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many clients come back and tell their friends. We combine strategy, design and technology to build brands that grow.
Content strategy
Small teams, short feedback loops and no handoffs lost in translation. Thousands of clients already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.
Questions
Clients stay with us for years because we treat their brand like our own. We measure success in sign-ups, sales and brand recall, not just awards. Senior designers lead every project from the first sketch to the final file.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1131">Campaign production</a><a class="nav-link" href="#spy-1132">UX research</a><a class="nav-link" href="#spy-1133">Content strategy</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" 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-3">
<h3 class="h6">Campaign production</h3>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. 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. From logo to launch campaign, everything is designed to work together.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">UX research</h3>
<p class="small">Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many clients come back and tell their friends. We combine strategy, design and technology to build brands that grow.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Content strategy</h3>
<p class="small">Small teams, short feedback loops and no handoffs lost in translation. Thousands of clients already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Clients stay with us for years because we treat their brand like our own. We measure success in sign-ups, sales and brand recall, not just awards. Senior designers lead every project from the first sketch to the final file.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
We test early with real users, so the final design works on the first day. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. Every project starts with a workshop, so we understand your audience before we design.
Install
Start in minutes and get help from a real person whenever you need it. Our motion team turns complex ideas into short films people actually watch. Websites we build are fast, accessible and easy for your team to update.
Configure
We listen first, then build a plan around what you actually need. Fixed prices and weekly demos keep you in control from start to finish. We have helped more than a hundred companies launch, rebrand and grow online.
Usage
From logo to launch campaign, everything is designed to work together. 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.
Examples
Every project starts with a workshop, so we understand your audience before we design. Websites we build are fast, accessible and easy for your team to update. Small teams, short feedback loops and no handoffs lost in translation.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" 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-3">
<h3 class="h6">Getting started</h3>
<p class="small">We test early with real users, so the final design works on the first day. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Our motion team turns complex ideas into short films people actually watch. Websites we build are fast, accessible and easy for your team to update.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">We listen first, then build a plan around what you actually need. Fixed prices and weekly demos keep you in control from start to finish. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<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. We measure success in sign-ups, sales and brand recall, not just awards.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. Websites we build are fast, accessible and easy for your team to update. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Thousands of clients already trust us, and we work hard to keep it that way. Fixed prices and weekly demos keep you in control from start to finish. Start in minutes and get help from a real person whenever you need it. We have helped more than a hundred companies launch, rebrand and grow online.
Midday
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. We combine strategy, design and technology to build brands that grow. We keep things simple, so you can focus on what matters to you.
Afternoon
We measure success by how many clients come back and tell their friends. Every detail is handled by people who care about getting it right. Our motion team turns complex ideas into short films people actually watch.
Evening
Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Clients stay with us for years because we treat their brand like our own. We listen first, then build a plan around what you actually need.
<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="position-relative border rounded p-3" 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-3">
<h3 class="h6">Morning</h3>
<p class="small">Thousands of clients already trust us, and we work hard to keep it that way. Fixed prices and weekly demos keep you in control from start to finish. Start in minutes and get help from a real person whenever you need it. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</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. We combine strategy, design and technology to build brands that grow. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">We measure success by how many clients come back and tell their friends. Every detail is handled by people who care about getting it right. Our motion team turns complex ideas into short films people actually watch.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Clients stay with us for years because we treat their brand like our own. We listen first, then build a plan around what you actually need.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
We measure success by how many clients come back and tell their friends. We combine strategy, design and technology to build brands that grow. Clear prices, honest advice and no surprises along the way.
Beta
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. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.
Gamma
Senior designers lead every project from the first sketch to the final file. Websites we build are fast, accessible and easy for your team to update. Our team has done this many times, so you never have to guess.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
<a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="position-relative border rounded p-3" 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-3">
<h3 class="h6">Alpha</h3>
<p class="small">We measure success by how many clients come back and tell their friends. We combine strategy, design and technology to build brands that grow. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</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. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Senior designers lead every project from the first sketch to the final file. Websites we build are fast, accessible and easy for your team to update. Our team has done this many times, so you never have to guess.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Thousands of clients already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. Small teams, short feedback loops and no handoffs lost in translation.
Features
Our motion team turns complex ideas into short films people actually watch. Clients stay with us for years because we treat their brand like our own. Every project starts with a workshop, so we understand your audience before we design. Start in minutes and get help from a real person whenever you need it.
Reviews
Fixed prices and weekly demos keep you in control from start to finish. We have helped more than a hundred companies launch, rebrand and grow online. From logo to launch campaign, everything is designed to work together.
FAQ
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 measure success by how many clients come back and tell their friends.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
<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="position-relative border rounded p-3 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-3">
<h3 class="h6">Overview</h3>
<p class="small">Thousands of clients already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Our motion team turns complex ideas into short films people actually watch. Clients stay with us for years because we treat their brand like our own. Every project starts with a workshop, so we understand your audience before we design. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Fixed prices and weekly demos keep you in control from start to finish. We have helped more than a hundred companies launch, rebrand and grow online. From logo to launch campaign, everything is designed to work together.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">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 measure success by how many clients come back and tell their friends.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
From logo to launch campaign, everything is designed to work together. Clients stay with us for years because we treat their brand like our own. Every detail is handled by people who care about getting it right.
Background
We combine strategy, design and technology to build brands that grow. We keep things simple, so you can focus on what matters to you. We measure success in sign-ups, sales and brand recall, not just awards. Our motion team turns complex ideas into short films people actually watch.
Method
We have helped more than a hundred companies launch, rebrand and grow online. 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.
Results
Every project starts with a workshop, so we understand your audience before we design. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="position-relative border rounded p-3" 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-3">
<h3 class="h6">Summary</h3>
<p class="small">From logo to launch campaign, everything is designed to work together. Clients stay with us for years because we treat their brand like our own. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">We combine strategy, design and technology to build brands that grow. We keep things simple, so you can focus on what matters to you. We measure success in sign-ups, sales and brand recall, not just awards. Our motion team turns complex ideas into short films people actually watch.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">We have helped more than a hundred companies launch, rebrand and grow online. 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-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first order-md-last">
<p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-column 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
We listen first, then build a plan around what you actually need. Websites we build are fast, accessible and easy for your team to update. Small teams, short feedback loops and no handoffs lost in translation. Fixed prices and weekly demos keep you in control from start to finish.
Set up your profile
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. We measure success in sign-ups, sales and brand recall, not just awards.
Invite the team
Start in minutes and get help from a real person whenever you need it. Fixed prices and weekly demos keep you in control from start to finish. From logo to launch campaign, everything is designed to work together. We have helped more than a hundred companies launch, rebrand and grow online.
Go live
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. We combine strategy, design and technology to build brands that grow. Clear prices, honest advice and no surprises along the way.
<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="position-relative border rounded p-3" 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-3">
<h3 class="h6">Create an account</h3>
<p class="small">We listen first, then build a plan around what you actually need. Websites we build are fast, accessible and easy for your team to update. Small teams, short feedback loops and no handoffs lost in translation. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
<div id="spy-1162" class="pb-3">
<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. Friendly people answer your questions quickly, by phone, chat or email. We measure success in sign-ups, sales and brand recall, not just awards.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Fixed prices and weekly demos keep you in control from start to finish. From logo to launch campaign, everything is designed to work together. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">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. We combine strategy, design and technology to build brands that grow. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Five things we learned this year
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. We listen first, then build a plan around what you actually need. Senior designers lead every project from the first sketch to the final file.
Choosing colours that sell
Websites we build are fast, accessible and easy for your team to update. We keep things simple, so you can focus on what matters to you. Small teams, short feedback loops and no handoffs lost in translation.
Planning a month of social content in a day
We measure success by how many clients come back and tell their friends. Every detail is handled by people who care about getting it right. 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.
Designing packaging that survives the shelf
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. 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.
<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="position-relative border rounded p-3" 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-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">Five things we learned this year</h3>
<p class="small mb-0">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. We listen first, then build a plan around what you actually need. Senior designers lead every project from the first sketch to the final file.</p>
</div>
<div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">Choosing colours that sell</h3>
<p class="small mb-0">Websites we build are fast, accessible and easy for your team to update. We keep things simple, so you can focus on what matters to you. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
<div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2025</span>
<h3 class="h6">Planning a month of social content in a day</h3>
<p class="small mb-0">We measure success by how many clients come back and tell their friends. Every detail is handled by people who care about getting it right. 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-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2026</span>
<h3 class="h6">Designing packaging that survives the shelf</h3>
<p class="small mb-0">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. 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.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Our favourite tips for busy weeks?
- We test early with real users, so the final design works on the first day.
- Why motion matters for modern brands?
- We combine strategy, design and technology to build brands that grow.
- Lessons from a year of client workshops?
- We have helped more than a hundred companies launch, rebrand and grow online.
Shipping
- Looking back at a busy season?
- Clear prices, honest advice and no surprises along the way.
- What makes a brand memorable?
- Every detail is handled by people who care about getting it right.
- A beginner's guide to getting started?
- We measure success by how many clients come back and tell their friends.
Returns
- Inside our design process?
- Small teams, short feedback loops and no handoffs lost in translation.
- The small habits that make a big difference?
- Our team has done this many times, so you never have to guess.
- Five website mistakes that cost you leads?
- From logo to launch campaign, everything is designed to work together.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<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="position-relative border rounded p-3" 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-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">We test early with real users, so the final design works on the first day.</dd>
<dt class="small">Why motion matters for modern brands?</dt>
<dd class="small text-body-secondary">We combine strategy, design and technology to build brands that grow.</dd>
<dt class="small">Lessons from a year of client workshops?</dt>
<dd class="small text-body-secondary">We have helped more than a hundred companies launch, rebrand and grow online.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
<dt class="small">What makes a brand memorable?</dt>
<dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">We measure success by how many clients come back and tell their friends.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">Inside our design process?</dt>
<dd class="small text-body-secondary">Small teams, short feedback loops and no handoffs lost in translation.</dd>
<dt class="small">The small habits that make a big difference?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
<dt class="small">Five website mistakes that cost you leads?</dt>
<dd class="small text-body-secondary">From logo to launch campaign, everything is designed to work together.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Start in minutes and get help from a real person whenever you need it. 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.
Battery
Senior designers lead every project from the first sketch to the final file. 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.
Connectivity
Websites we build are fast, accessible and easy for your team to update. Friendly people answer your questions quickly, by phone, chat or email. 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.
Security
Clear prices, honest advice and no surprises along the way. 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. We measure success in sign-ups, sales and brand recall, not just awards.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-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="position-relative border rounded p-3" 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-3">
<h3 class="h6">Performance</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. 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-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Senior designers lead every project from the first sketch to the final file. 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>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Websites we build are fast, accessible and easy for your team to update. Friendly people answer your questions quickly, by phone, chat or email. 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.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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. We measure success in sign-ups, sales and brand recall, not just awards.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$12.75 / mo
- Fast turnaround
- Weekly demos
- Weekly demos
Team
$30.54 / mo
- Fixed-price projects
- Award-winning team
- Award-winning team
Business
$51.30 / mo
- Weekly demos
- Fixed-price projects
- Global clients
<nav id="spy-nav-1179" class="nav nav-pills justify-content-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="position-relative border rounded p-3 bg-body-tertiary" 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-3">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="fs-4 fw-bold mb-1">$12.75<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Fast turnaround</li>
<li>Weekly demos</li>
<li>Weekly demos</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="fs-4 fw-bold mb-1">$30.54<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Fixed-price projects</li>
<li>Award-winning team</li>
<li>Award-winning team</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$51.30<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Weekly demos</li>
<li>Fixed-price projects</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: A checklist for your next website launch
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. Small teams, short feedback loops and no handoffs lost in translation. From logo to launch campaign, everything is designed to work together.
We measure success by how many clients come back and tell their friends. We keep things simple, so you can focus on what matters to you. We have helped more than a hundred companies launch, rebrand and grow online.
Chapter 2: What our clients asked us most
Our motion team turns complex ideas into short films people actually watch. Every detail is handled by people who care about getting it right. Websites we build are fast, accessible and easy for your team to update. We test early with real users, so the final design works on the first day.
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. Senior designers lead every project from the first sketch to the final file. Friendly people answer your questions quickly, by phone, chat or email.
Chapter 3: How to choose the right project
From logo to launch campaign, everything is designed to work together. Websites we build are fast, accessible and easy for your team to update. We keep things simple, so you can focus on what matters to you. Fixed prices and weekly demos keep you in control from start to finish.
We combine strategy, design and technology to build brands that grow. 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.
Chapter 4: How we ran a rebrand in eight weeks
Clients stay with us for years because we treat their brand like our own. Every detail is handled by people who care about getting it right. We measure success by how many clients come back and tell their friends.
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 measure success in sign-ups, sales and brand recall, not just awards.
<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="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" 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-3">
<h3 class="h6">Chapter 1: A checklist for your next website launch</h3>
<p class="small">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. Small teams, short feedback loops and no handoffs lost in translation. From logo to launch campaign, everything is designed to work together.</p>
<p class="small">We measure success by how many clients come back and tell their friends. We keep things simple, so you can focus on what matters to you. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: What our clients asked us most</h3>
<p class="small">Our motion team turns complex ideas into short films people actually watch. Every detail is handled by people who care about getting it right. Websites we build are fast, accessible and easy for your team to update. We test early with real users, so the final design works on the first day.</p>
<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. Senior designers lead every project from the first sketch to the final file. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: How to choose the right project</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. We keep things simple, so you can focus on what matters to you. Fixed prices and weekly demos keep you in control from start to finish.</p>
<p class="small">We combine strategy, design and technology to build brands that grow. 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.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: How we ran a rebrand in eight weeks</h3>
<p class="small">Clients stay with us for years because we treat their brand like our own. Every detail is handled by people who care about getting it right. We measure success by how many clients come back and tell their friends.</p>
<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 measure success in sign-ups, sales and brand recall, not just awards.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Small teams, short feedback loops and no handoffs lost in translation. Our motion team turns complex ideas into short films people actually watch. Every project starts with a workshop, so we understand your audience before we design.
Notifications
We have helped more than a hundred companies launch, rebrand and grow online. We listen first, then build a plan around what you actually need. Senior designers lead every project from the first sketch to the final file. Friendly people answer your questions quickly, by phone, chat or email.
Privacy
Our team has done this many times, so you never have to guess. 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. We test early with real users, so the final design works on the first day.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1188" class="list-group list-group-flush border rounded">
<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="position-relative border rounded p-3" 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-3">
<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="Isla Alvarez">
</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="Seoul">
</div>
<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. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
<div id="spy-1190" class="pb-3">
<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">We have helped more than a hundred companies launch, rebrand and grow online. We listen first, then build a plan around what you actually need. Senior designers lead every project from the first sketch to the final file. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1191" class="pb-3">
<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">Our team has done this many times, so you never have to guess. 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. We test early with real users, so the final design works on the first day.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Operations
- Owen OkaforOperations Manager
- Jonah NovakContent Writer
- Ivy TanakaFrontend Engineer
Customer Support
- Owen QuinnQA Engineer
- Aria IbrahimSupport Specialist
- Priya FischerBackend Engineer
Research
- Sofia HarlowSupport Specialist
- Nadia OkaforCustomer Success
- Ethan WhitakerMarketing Lead
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Operations</a><a class="nav-link" href="#spy-1199">Customer Support</a><a class="nav-link" href="#spy-1200">Research</a>
</nav>
<div class="position-relative border rounded p-3" 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-3">
<h3 class="h6">Operations</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Owen Okafor"><div><div class="small fw-semibold">Owen Okafor</div><div class="small text-body-secondary">Operations Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Jonah Novak"><div><div class="small fw-semibold">Jonah Novak</div><div class="small text-body-secondary">Content Writer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Ivy Tanaka"><div><div class="small fw-semibold">Ivy Tanaka</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Customer Support</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Owen Quinn"><div><div class="small fw-semibold">Owen Quinn</div><div class="small text-body-secondary">QA Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Aria Ibrahim"><div><div class="small fw-semibold">Aria Ibrahim</div><div class="small text-body-secondary">Support Specialist</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Priya Fischer"><div><div class="small fw-semibold">Priya Fischer</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Research</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Sofia Harlow"><div><div class="small fw-semibold">Sofia Harlow</div><div class="small text-body-secondary">Support Specialist</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Nadia Okafor"><div><div class="small fw-semibold">Nadia Okafor</div><div class="small text-body-secondary">Customer Success</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Ethan Whitaker"><div><div class="small fw-semibold">Ethan Whitaker</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
- Social kit$1,850
- Brand sprint$4,600
- Landing page$3,150
Motion
- Video edit$2,350
- Packaging design$4,200
- Explainer animation$5,650
Branding
- UX audit$2,650
- Logo refresh$3,000
- Website package$9,250
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Print</a><a class="nav-link" href="#spy-1203">Motion</a><a class="nav-link" href="#spy-1204">Branding</a>
</nav>
<div class="position-relative border rounded p-3" 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-3">
<h3 class="h6">Print</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Social kit</span><span class="fw-semibold">$1,850</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Brand sprint</span><span class="fw-semibold">$4,600</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Landing page</span><span class="fw-semibold">$3,150</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Motion</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Video edit</span><span class="fw-semibold">$2,350</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Packaging design</span><span class="fw-semibold">$4,200</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Explainer animation</span><span class="fw-semibold">$5,650</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Branding</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>UX audit</span><span class="fw-semibold">$2,650</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Logo refresh</span><span class="fw-semibold">$3,000</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Website package</span><span class="fw-semibold">$9,250</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
From logo to launch campaign, everything is designed to work together. Clients stay with us for years because we treat their brand like our own. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.
This week
Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. 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.
Later
Friendly people answer your questions quickly, by phone, chat or email. Our motion team turns complex ideas into short films people actually watch. 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.
<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="position-relative border rounded p-3 border-0 rounded-0" 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-3">
<h3 class="h6">Today</h3>
<p class="small">From logo to launch campaign, everything is designed to work together. Clients stay with us for years because we treat their brand like our own. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. 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.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</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. 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.</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. Fixed prices and weekly demos keep you in control from start to finish. We combine strategy, design and technology to build brands that grow. We measure success by how many clients come back and tell their friends.
Orbit
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. Thousands of clients already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right.
Landing
We have helped more than a hundred companies launch, rebrand and grow online. Senior designers lead every project from the first sketch to the final file. Websites we build are fast, accessible and easy for your team to update. Small teams, short feedback loops and no handoffs lost in translation.
<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
<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="position-relative border rounded p-3 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-3">
<h3 class="h6">Launch</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 combine strategy, design and technology to build brands that grow. We measure success by how many clients come back and tell their friends.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">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. Thousands of clients already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">We have helped more than a hundred companies launch, rebrand and grow online. Senior designers lead every project from the first sketch to the final file. Websites we build are fast, accessible and easy for your team to update. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Jul 4, 2026
- NewWe listen first, then build a plan around what you actually need.
- ImprovedWe combine strategy, design and technology to build brands that grow.
- FixedEvery project starts with a workshop, so we understand your audience before we design.
v3.1 Sep 21, 2026
- NewFrom logo to launch campaign, everything is designed to work together.
- ImprovedClear prices, honest advice and no surprises along the way.
- FixedWe keep things simple, so you can focus on what matters to you.
v3.0 Jun 2, 2026
- NewFixed prices and weekly demos keep you in control from start to finish.
- ImprovedClients stay with us for years because we treat their brand like our own.
- FixedFriendly people answer your questions quickly, by phone, chat or email.
v2.9 Jul 4, 2026
- NewOur team has done this many times, so you never have to guess.
- ImprovedStart in minutes and get help from a real person whenever you need it.
- FixedWe measure success in sign-ups, sales and brand recall, not just awards.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-column 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="position-relative border rounded p-3" 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-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Jul 4, 2026</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>We combine strategy, design and technology to build brands that grow.</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-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Sep 21, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>From logo to launch campaign, everything is designed to work together.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Clear prices, honest advice and no surprises along the way.</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 id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Jun 2, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Fixed prices and weekly demos keep you in control from start to finish.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Clients stay with us for years because we treat their brand like our own.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Jul 4, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</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-danger me-1">Fixed</span>We measure success in sign-ups, sales and brand recall, not just awards.</li>
</ul>
</div>
</div>
</div>
</div>