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-bs-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 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. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.
We keep things simple, so you can focus on what matters to you. Websites we build are fast, accessible and easy for your team to update. From logo to launch campaign, everything is designed to work together. Thousands of clients already trust us, and we work hard to keep it that way.
Details
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. Our motion team turns complex ideas into short films people actually watch.
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. We measure success in sign-ups, sales and brand recall, not just awards. Our team has done this many times, so you never have to guess.
Pricing
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 test early with real users, so the final design works on the first day.
We combine strategy, design and technology to build brands that grow. We measure success by how many clients come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Junoix</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-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1121" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-3">
<h3 class="h6">Intro</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. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. Websites we build are fast, accessible and easy for your team to update. From logo to launch campaign, everything is designed to work together. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">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. Our motion team turns complex ideas into short films people actually watch.</p>
<p class="small">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. We measure success in sign-ups, sales and brand recall, not just awards. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</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 test early with real users, so the final design works on the first day.</p>
<p class="small">We combine strategy, design and technology to build brands that grow. We measure success by how many clients come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
We combine strategy, design and technology to build brands that grow. 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. From logo to launch campaign, everything is designed to work together.
Step two
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. Websites we build are fast, accessible and easy for your team to update.
Step three
Our team has done this many times, so you never have to guess. Clients stay with us for years because we treat their brand like our own. Thousands of clients already trust us, and we work hard to keep it that way.
Step four
We listen first, then build a plan around what you actually need. Small teams, short feedback loops and no handoffs lost in translation. We keep things simple, so you can focus on what matters to you.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1125" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</h3>
<p class="small">We combine strategy, design and technology to build brands that grow. 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. From logo to launch campaign, everything is designed to work together.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">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. Websites we build are fast, accessible and easy for your team to update.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Our team has done this many times, so you never have to guess. Clients stay with us for years because we treat their brand like our own. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">We listen first, then build a plan around what you actually need. Small teams, short feedback loops and no handoffs lost in translation. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Motion graphics
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. Every detail is handled by people who care about getting it right.
UX research
Clear prices, honest advice and no surprises along the way. Every project starts with a workshop, so we understand your audience before we design. We have helped more than a hundred companies launch, rebrand and grow online.
Content strategy
Every project starts with a workshop, so we understand your audience before we design. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many clients come back and tell their friends.
Questions
Every detail is handled by people who care about getting it right. 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-column">
<a class="nav-link" href="#spy-1131">Motion graphics</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-bs-spy="scroll" data-bs-target="#spy-nav-1130" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-3">
<h3 class="h6">Motion graphics</h3>
<p class="small">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. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">UX research</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Every project starts with a workshop, so we understand your audience before we design. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Content strategy</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. 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 id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Every detail is handled by people who care about getting it right. 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
Clear prices, honest advice and no surprises along the way. We test early with real users, so the final design works on the first day. Thousands of clients already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it.
Install
We measure success in sign-ups, sales and brand recall, not just awards. 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. Senior designers lead every project from the first sketch to the final file.
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. From logo to launch campaign, everything is designed to work together. Our team has done this many times, so you never have to guess.
Usage
We combine strategy, design and technology to build brands that grow. We keep things simple, so you can focus on what matters to you. Small teams, short feedback loops and no handoffs lost in translation. We measure success in sign-ups, sales and brand recall, not just awards.
Examples
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.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1135" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. We test early with real users, so the final design works on the first day. Thousands of clients already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. 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. Senior designers lead every project from the first sketch to the final file.</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. From logo to launch campaign, everything is designed to work together. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</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. Small teams, short feedback loops and no handoffs lost in translation. 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">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.</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. 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.
Midday
Every detail is handled by people who care about getting it right. 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.
Afternoon
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 have helped more than a hundred companies launch, rebrand and grow online.
Evening
Fixed prices and weekly demos keep you in control from start to finish. We combine strategy, design and technology to build brands that grow. Thousands of clients already trust us, and we work hard to keep it that way.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1141" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-3">
<h3 class="h6">Morning</h3>
<p class="small">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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Every detail is handled by people who care about getting it right. 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-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">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 have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Fixed prices and weekly demos keep you in control from start to finish. We combine strategy, design and technology to build brands that grow. Thousands of clients already trust us, and we work hard to keep it that way.</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. 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.
Beta
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. Our team has done this many times, so you never have to guess.
Gamma
Every project starts with a workshop, so we understand your audience before we design. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. We test early with real users, so the final design works on the first day.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1146" data-bs-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. 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-1148" class="pb-3">
<h3 class="h6">Beta</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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. We test early with real users, so the final design works on the first day.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
We combine strategy, design and technology to build brands that grow. 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.
Features
Clients stay with us for years because we treat their brand like our own. 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. From logo to launch campaign, everything is designed to work together.
Reviews
Small teams, short feedback loops and no handoffs lost in translation. We have helped more than a hundred companies launch, rebrand and grow online. 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.
FAQ
Start in minutes and get help from a real person whenever you need it. 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. Every detail is handled by people who care about getting it right.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1150" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-3">
<h3 class="h6">Overview</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. Senior designers lead every project from the first sketch to the final file.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Clients stay with us for years because we treat their brand like our own. 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. From logo to launch campaign, everything is designed to work together.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Small teams, short feedback loops and no handoffs lost in translation. We have helped more than a hundred companies launch, rebrand and grow online. 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>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. 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. Every detail is handled by people who care about getting it right.</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. Websites we build are fast, accessible and easy for your team to update. 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.
Background
Small teams, short feedback loops and no handoffs lost in translation. We listen first, then build a plan around what you actually need. We test early with real users, so the final design works on the first day.
Method
We measure success in sign-ups, sales and brand recall, not just awards. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.
Results
Thousands of clients already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. 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.
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-bs-spy="scroll" data-bs-target="#spy-nav-1155" data-bs-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. Websites we build are fast, accessible and easy for your team to update. 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.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Small teams, short feedback loops and no handoffs lost in translation. We listen first, then build a plan around what you actually need. We test early with real users, so the final design works on the first day.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. 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 id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Thousands of clients already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. 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>
</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
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. Fixed prices and weekly demos keep you in control from start to finish.
Set up your profile
Senior designers lead every project from the first sketch to the final file. We combine strategy, design and technology to build brands that grow. Our motion team turns complex ideas into short films people actually watch.
Invite the team
Every project starts with a workshop, so we understand your audience before we design. From logo to launch campaign, everything is designed to work together. 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.
Go live
Clear prices, honest advice and no surprises along the way. 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.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1160" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">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. 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">Senior designers lead every project from the first sketch to the final file. 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-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. From logo to launch campaign, everything is designed to work together. 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.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Looking back at a busy season
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. We measure success by how many clients come back and tell their friends.
Planning a month of social content in a day
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. 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.
The small habits that make a big difference
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. 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.
Five things we learned this year
Every project starts with a workshop, so we understand your audience before we design. We combine strategy, design and technology to build brands that grow. Small teams, short feedback loops and no handoffs lost in translation. Senior designers lead every project from the first sketch to the final file.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1165" data-bs-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">Looking back at a busy season</h3>
<p class="small mb-0">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. We measure success by how many clients come back and tell their friends.</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">Planning a month of social content in a day</h3>
<p class="small mb-0">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. 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.</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">The small habits that make a big difference</h3>
<p class="small mb-0">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. 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.</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">Five things we learned this year</h3>
<p class="small mb-0">Every project starts with a workshop, so we understand your audience before we design. We combine strategy, design and technology to build brands that grow. Small teams, short feedback loops and no handoffs lost in translation. Senior designers lead every project from the first sketch to the final file.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- A beginner's guide to getting started?
- Our team has done this many times, so you never have to guess.
- What makes a brand memorable?
- Thousands of clients already trust us, and we work hard to keep it that way.
- What our clients asked us most?
- Clients stay with us for years because we treat their brand like our own.
Shipping
- How we ran a rebrand in eight weeks?
- We measure success by how many clients come back and tell their friends.
- Designing packaging that survives the shelf?
- We test early with real users, so the final design works on the first day.
- Choosing colours that sell?
- Websites we build are fast, accessible and easy for your team to update.
Returns
- Why motion matters for modern brands?
- Our motion team turns complex ideas into short films people actually watch.
- Inside our design process?
- We combine strategy, design and technology to build brands that grow.
- How to choose the right project?
- Every detail is handled by people who care about getting it right.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1170" data-bs-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">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
<dt class="small">What makes a brand memorable?</dt>
<dd class="small text-body-secondary">Thousands of clients already trust us, and we work hard to keep it that way.</dd>
<dt class="small">What our clients asked us most?</dt>
<dd class="small text-body-secondary">Clients stay with us for years because we treat their brand like our own.</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">How we ran a rebrand in eight weeks?</dt>
<dd class="small text-body-secondary">We measure success by how many clients come back and tell their friends.</dd>
<dt class="small">Designing packaging that survives the shelf?</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">Choosing colours that sell?</dt>
<dd class="small text-body-secondary">Websites we build are fast, accessible and easy for your team to update.</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">Why motion matters for modern brands?</dt>
<dd class="small text-body-secondary">Our motion team turns complex ideas into short films people actually watch.</dd>
<dt class="small">Inside our design process?</dt>
<dd class="small text-body-secondary">We combine strategy, design and technology to build brands that grow.</dd>
<dt class="small">How to choose the right project?</dt>
<dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Clear prices, honest advice and no surprises along the way. From logo to launch campaign, everything is designed to work together. Fixed prices and weekly demos keep you in control from start to finish.
Battery
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. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.
Connectivity
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. Small teams, short feedback loops and no handoffs lost in translation.
Security
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. We listen first, then build a plan around what you actually need. 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">
<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-bs-spy="scroll" data-bs-target="#spy-nav-1174" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. From logo to launch campaign, everything is designed to work together. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</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. 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-1177" class="pb-3">
<h3 class="h6">Connectivity</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. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</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. We listen first, then build a plan around what you actually need. We test early with real users, so the final design works on the first day.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$15.17 / mo
- Fast turnaround
- Award-winning team
- Weekly demos
Team
$38.84 / mo
- Weekly demos
- Fixed-price projects
- Senior designers only
Business
$68.04 / mo
- Fast turnaround
- Weekly demos
- Weekly demos
<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-bs-spy="scroll" data-bs-target="#spy-nav-1179" data-bs-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">$15.17<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Fast turnaround</li>
<li>Award-winning team</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">$38.84<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>Senior designers only</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">$68.04<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>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Five website mistakes that cost you leads
We have helped more than a hundred companies launch, rebrand and grow online. 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. 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. We measure success by how many clients come back and tell their friends. Our team has done this many times, so you never have to guess. From logo to launch campaign, everything is designed to work together.
Chapter 2: Lessons from a year of client workshops
Fixed prices and weekly demos keep you in control from start to finish. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.
Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. 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.
Chapter 3: Our favourite tips for busy weeks
Small teams, short feedback loops and no handoffs lost in translation. 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.
Friendly people answer your questions quickly, by phone, chat or email. 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. Every detail is handled by people who care about getting it right.
Chapter 4: A checklist for your next website launch
Our team has done this many times, so you never have to guess. 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 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. We listen first, then build a plan around what you actually need. 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-bs-spy="scroll" data-bs-target="#spy-nav-1183" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: Five website mistakes that cost you leads</h3>
<p class="small">We have helped more than a hundred companies launch, rebrand and grow online. 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. Thousands of clients already trust us, and we work hard to keep it that way.</p>
<p class="small">Senior designers lead every project from the first sketch to the final file. We measure success by how many clients come back and tell their friends. 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-1185" class="pb-3">
<h3 class="h6">Chapter 2: Lessons from a year of client workshops</h3>
<p class="small">Fixed prices and weekly demos keep you in control from start to finish. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.</p>
<p class="small">Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. 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.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Our favourite tips for busy weeks</h3>
<p class="small">Small teams, short feedback loops and no handoffs lost in translation. 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>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: A checklist for your next website launch</h3>
<p class="small">Our team has done this many times, so you never have to guess. 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 keep things simple, so you can focus on what matters to you.</p>
<p class="small">Clients stay with us for years because we treat their brand like our own. 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 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
We combine strategy, design and technology to build brands that grow. Senior designers lead every project from the first sketch to the final file. 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.
Notifications
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. From logo to launch campaign, everything is designed to work together.
Privacy
Small teams, short feedback loops and no handoffs lost in translation. Every project starts with a workshop, so we understand your audience before we design. Clear prices, honest advice and no surprises along the way.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1188" data-bs-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="Ruby Rossi">
</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">We combine strategy, design and technology to build brands that grow. Senior designers lead every project from the first sketch to the final file. 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.</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">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. From logo to launch campaign, everything is designed to work together.</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">Small teams, short feedback loops and no handoffs lost in translation. Every project starts with a workshop, so we understand your audience before we design. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Design
- Jonah TanakaSales Executive
- Finn VargaQA Engineer
- Elena MensahQA Engineer
Engineering
- Amara IbrahimHR Partner
- Mateo DuarteOperations Manager
- Mason AshfordFrontend Engineer
Operations
- Nora WhitakerFinance Lead
- Isla DelgadoArt Director
- Felix KowalskiBackend Engineer
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Design</a><a class="nav-link" href="#spy-1199">Engineering</a><a class="nav-link" href="#spy-1200">Operations</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1197" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-3">
<h3 class="h6">Design</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Jonah Tanaka"><div><div class="small fw-semibold">Jonah Tanaka</div><div class="small text-body-secondary">Sales Executive</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Finn Varga"><div><div class="small fw-semibold">Finn Varga</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-3.svg" class="rounded-circle" width="36" height="36" alt="Elena Mensah"><div><div class="small fw-semibold">Elena Mensah</div><div class="small text-body-secondary">QA Engineer</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Engineering</h3>
<ul class="list-unstyled">
<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="Amara Ibrahim"><div><div class="small fw-semibold">Amara Ibrahim</div><div class="small text-body-secondary">HR Partner</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="Mateo Duarte"><div><div class="small fw-semibold">Mateo Duarte</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="Mason Ashford"><div><div class="small fw-semibold">Mason Ashford</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
</ul>
</div>
<div id="spy-1200" 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-5.svg" class="rounded-circle" width="36" height="36" alt="Nora Whitaker"><div><div class="small fw-semibold">Nora Whitaker</div><div class="small text-body-secondary">Finance Lead</div></div></li>
<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="Isla Delgado"><div><div class="small fw-semibold">Isla Delgado</div><div class="small text-body-secondary">Art Director</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="Felix Kowalski"><div><div class="small fw-semibold">Felix Kowalski</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Motion
- Print collateral$1,500
- Social kit$2,000
- Landing page$3,350
- Packaging design$4,450
- Brand sprint$4,750
- UX audit$2,700
Branding
- Website package$9,250
- Launch campaign$10,000
- Social kit$2,000
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Motion</a><a class="nav-link" href="#spy-1203">Print</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-bs-spy="scroll" data-bs-target="#spy-nav-1201" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1202" 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>Print collateral</span><span class="fw-semibold">$1,500</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Social kit</span><span class="fw-semibold">$2,000</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Landing page</span><span class="fw-semibold">$3,350</span></li>
</ul>
</div>
<div id="spy-1203" 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>Packaging design</span><span class="fw-semibold">$4,450</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Brand sprint</span><span class="fw-semibold">$4,750</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>UX audit</span><span class="fw-semibold">$2,700</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>Website package</span><span class="fw-semibold">$9,250</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Launch campaign</span><span class="fw-semibold">$10,000</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Social kit</span><span class="fw-semibold">$2,000</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
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 keep things simple, so you can focus on what matters to you. We combine strategy, design and technology to build brands that grow.
This week
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. Small teams, short feedback loops and no handoffs lost in translation. From logo to launch campaign, everything is designed to work together.
Later
We test early with real users, so the final design works on the first day. Thousands of clients already trust us, and we work hard to keep it that way. 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.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1205" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-3">
<h3 class="h6">Today</h3>
<p class="small">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 keep things simple, so you can focus on what matters to you. We combine strategy, design and technology to build brands that grow.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</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. Small teams, short feedback loops and no handoffs lost in translation. From logo to launch campaign, everything is designed to work together.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">We test early with real users, so the final design works on the first day. Thousands of clients already trust us, and we work hard to keep it that way. 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.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-bs-theme="dark"</code>.
Launch
Friendly people answer your questions quickly, by phone, chat or email. We have helped more than a hundred companies launch, rebrand and grow online. 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.
Orbit
Our team has done this many times, so you never have to guess. 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.
Landing
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. We keep things simple, so you can focus on what matters to you.
<div data-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1209" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-3">
<h3 class="h6">Launch</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. We have helped more than a hundred companies launch, rebrand and grow online. 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.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Our team has done this many times, so you never have to guess. 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.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</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. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Feb 9, 2026
- NewEvery project starts with a workshop, so we understand your audience before we design.
- ImprovedWe test early with real users, so the final design works on the first day.
- FixedClear prices, honest advice and no surprises along the way.
v3.1 Apr 7, 2026
- NewWe measure success by how many clients come back and tell their friends.
- ImprovedThousands of clients already trust us, and we work hard to keep it that way.
- FixedWe have helped more than a hundred companies launch, rebrand and grow online.
v3.0 Mar 30, 2026
- NewWe combine strategy, design and technology to build brands that grow.
- ImprovedEvery detail is handled by people who care about getting it right.
- FixedSmall teams, short feedback loops and no handoffs lost in translation.
v2.9 Jul 4, 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 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-bs-spy="scroll" data-bs-target="#spy-nav-1213" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Feb 9, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every project starts with a workshop, so we understand your audience before we design.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We test early with real users, so the final design works on the first day.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Clear prices, honest advice and no surprises along the way.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Apr 7, 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>Thousands of clients already trust us, and we work hard to keep it that way.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We have helped more than a hundred companies launch, rebrand and grow online.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Mar 30, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We combine strategy, design and technology to build brands that grow.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every detail is handled by people who care about getting it right.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Small teams, short feedback loops and no handoffs lost in translation.</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>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 measure success in sign-ups, sales and brand recall, not just awards.</li>
</ul>
</div>
</div>
</div>
</div>