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-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
Friendly people answer your questions quickly, by phone, chat or email. 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. 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. 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. Thousands of clients already trust us, and we work hard to keep it that way.
Details
We have helped more than a hundred companies launch, rebrand and grow online. Small teams, short feedback loops and no handoffs lost in translation. We combine strategy, design and technology to build brands that grow. Start in minutes and get help from a real person whenever you need it.
We 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. Our motion team turns complex ideas into short films people actually watch.
Pricing
We measure success in sign-ups, sales and brand recall, not just awards. From logo to launch campaign, everything is designed to work together. 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.
We have helped more than a hundred companies launch, rebrand and grow online. 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.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Aeroium Hub</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">Friendly people answer your questions quickly, by phone, chat or email. 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. Clients stay with us for years because we treat their brand like our own.</p>
<p class="small">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 listen first, then build a plan around what you actually need. 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">We have helped more than a hundred companies launch, rebrand and grow online. Small teams, short feedback loops and no handoffs lost in translation. We combine strategy, design and technology to build brands that grow. Start in minutes and get help from a real person whenever you need it.</p>
<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. Our motion team turns complex ideas into short films people actually watch.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. From logo to launch campaign, everything is designed to work together. 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.</p>
<p class="small">We have helped more than a hundred companies launch, rebrand and grow online. 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.</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. Small teams, short feedback loops and no handoffs lost in translation. We listen first, then build a plan around what you actually need.
Step two
Fixed prices and weekly demos keep you in control from start to finish. Clients stay with us for years because we treat their brand like our own. 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
Friendly people answer your questions quickly, by phone, chat or email. Thousands of clients already trust us, and we work hard to keep it that way. From logo to launch campaign, everything is designed to work together.
Step four
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. 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.
<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. Small teams, short feedback loops and no handoffs lost in translation. We listen first, then build a plan around what you actually need.</p>
</div>
<div 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. Clients stay with us for years because we treat their brand like our own. 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">Friendly people answer your questions quickly, by phone, chat or email. Thousands of clients already trust us, and we work hard to keep it that way. From logo to launch campaign, everything is designed to work together.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">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. 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>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
UX research
We measure success in sign-ups, sales and brand recall, not just awards. Clear prices, honest advice and no surprises along the way. We measure success by how many clients come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email.
Content strategy
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. Clients stay with us for years because we treat their brand like our own. Small teams, short feedback loops and no handoffs lost in translation.
Web design
We test early with real users, so the final design works on the first day. 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.
Questions
We have helped more than a hundred companies launch, rebrand and grow online. We combine strategy, design and technology to build brands that grow. 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">UX research</a><a class="nav-link" href="#spy-1132">Content strategy</a><a class="nav-link" href="#spy-1133">Web design</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">UX research</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. 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 id="spy-1132" 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. Fixed prices and weekly demos keep you in control from start to finish. Clients stay with us for years because we treat their brand like our own. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Web design</h3>
<p class="small">We test early with real users, so the final design works on the first day. 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-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">We have helped more than a hundred companies launch, rebrand and grow online. We combine strategy, design and technology to build brands that grow. 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
Senior designers lead every project from the first sketch to the final file. 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.
Install
From logo to launch campaign, everything is designed to work together. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.
Configure
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. 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.
Usage
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 motion team turns complex ideas into short films people actually watch. Fixed prices and weekly demos keep you in control from start to finish.
Examples
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 test early with real users, so the final design works on the first day. Websites we build are fast, accessible and easy for your team to update.
<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">Senior designers lead every project from the first sketch to the final file. 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-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">From logo to launch campaign, everything is designed to work together. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">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. 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.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">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 motion team turns complex ideas into short films people actually watch. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
<div 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. We measure success by how many clients come back and tell their friends. We test early with real users, so the final design works on the first day. Websites we build are fast, accessible and easy for your team to update.</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. 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. We measure success in sign-ups, sales and brand recall, not just awards.
Midday
Senior designers lead every project from the first sketch to the final file. Small teams, short feedback loops and no handoffs lost in translation. From logo to launch campaign, everything is designed to work together. Every detail is handled by people who care about getting it right.
Afternoon
Every project starts with a workshop, so we understand your audience before we design. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.
Evening
We combine strategy, design and technology to build brands that grow. From logo to launch campaign, everything is designed to work together. Start in minutes and get help from a real person whenever you need it.
<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">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. We have helped more than a hundred companies launch, rebrand and grow online. We measure success in sign-ups, sales and brand recall, not just awards.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Senior designers lead every project from the first sketch to the final file. Small teams, short feedback loops and no handoffs lost in translation. From logo to launch campaign, everything is designed to work together. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">We combine strategy, design and technology to build brands that grow. From logo to launch campaign, everything is designed to work together. Start in minutes and get help from a real person whenever you need it.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
We have helped more than a hundred companies launch, rebrand and grow online. 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.
Beta
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. Websites we build are fast, accessible and easy for your team to update.
Gamma
We measure success by how many clients come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Thousands of clients already trust us, and we work hard to keep it that way.
<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 have helped more than a hundred companies launch, rebrand and grow online. 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-1148" class="pb-3">
<h3 class="h6">Beta</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. Websites we build are fast, accessible and easy for your team to update.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">We measure success by how many clients come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Clients stay with us for years because we treat their brand like our own. 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 combine strategy, design and technology to build brands that grow.
Features
Fixed prices and weekly demos keep you in control from start to finish. Every project starts with a workshop, so we understand your audience before we design. Our team has done this many times, so you never have to guess.
Reviews
Clear prices, honest advice and no surprises along the way. Small teams, short feedback loops and no handoffs lost in translation. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.
FAQ
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. Clear prices, honest advice and no surprises along the way.
<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">Clients stay with us for years because we treat their brand like our own. 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 combine strategy, design and technology to build brands that grow.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Fixed prices and weekly demos keep you in control from start to finish. Every project starts with a workshop, so we understand your audience before we design. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Small teams, short feedback loops and no handoffs lost in translation. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</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. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
We test early with real users, so the final design works on the first day. From logo to launch campaign, everything is designed to work together. We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends.
Background
Every detail is handled by people who care about getting it right. Thousands of clients already trust us, and we work hard to keep it that way. Fixed prices and weekly demos keep you in control from start to finish. Websites we build are fast, accessible and easy for your team to update.
Method
Clients stay with us for years because we treat their brand like our own. We keep things simple, so you can focus on what matters to you. We combine strategy, design and technology to build brands that grow.
Results
We listen first, then build a plan around what you actually need. Our motion team turns complex ideas into short films people actually watch. 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-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">We test early with real users, so the final design works on the first day. From logo to launch campaign, everything is designed to work together. We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Every detail is handled by people who care about getting it right. Thousands of clients already trust us, and we work hard to keep it that way. Fixed prices and weekly demos keep you in control from start to finish. Websites we build are fast, accessible and easy for your team to update.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Clients stay with us for years because we treat their brand like our own. 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-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">We listen first, then build a plan around what you actually need. Our motion team turns complex ideas into short films people actually watch. 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
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. Senior designers lead every project from the first sketch to the final file.
Set up your profile
Our motion team turns complex ideas into short films people actually watch. Senior designers lead every project from the first sketch to the final file. We combine strategy, design and technology to build brands that grow.
Invite the team
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. Small teams, short feedback loops and no handoffs lost in translation.
Go live
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. We measure success by how many clients come back and tell their friends.
<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">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. Senior designers lead every project from the first sketch to the final file.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">Our motion team turns complex ideas into short films people actually watch. Senior designers lead every project from the first sketch to the final file. We combine strategy, design and technology to build brands that grow.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</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. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Fixed prices and weekly demos keep you in control from start to finish. We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Lessons from a year of client workshops
Every project starts with a workshop, so we understand your audience before we design. We keep things simple, so you can focus on what matters to you. Clients stay with us for years because we treat their brand like our own.
A checklist for your next website launch
Start in minutes and get help from a real person whenever you need it. From logo to launch campaign, everything is designed to work together. We listen first, then build a plan around what you actually need.
Choosing colours that sell
Every detail is handled by people who care about getting it right. 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.
How to choose the right project
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. 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">Lessons from a year of client workshops</h3>
<p class="small mb-0">Every project starts with a workshop, so we understand your audience before we design. We keep things simple, so you can focus on what matters to you. Clients stay with us for years because we treat their brand like our own.</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">A checklist for your next website launch</h3>
<p class="small mb-0">Start in minutes and get help from a real person whenever you need it. From logo to launch campaign, everything is designed to work together. We listen first, then build a plan around what you actually need.</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">Choosing colours that sell</h3>
<p class="small mb-0">Every detail is handled by people who care about getting it right. 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.</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">How to choose the right project</h3>
<p class="small mb-0">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. 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?
- Websites we build are fast, accessible and easy for your team to update.
- Five website mistakes that cost you leads?
- Small teams, short feedback loops and no handoffs lost in translation.
- Our favourite tips for busy weeks?
- Every detail is handled by people who care about getting it right.
Shipping
- What makes a brand memorable?
- Clear prices, honest advice and no surprises along the way.
- Inside our design process?
- Our motion team turns complex ideas into short films people actually watch.
- Why motion matters for modern brands?
- Friendly people answer your questions quickly, by phone, chat or email.
Returns
- Planning a month of social content in a day?
- We combine strategy, design and technology to build brands that grow.
- What our clients asked us most?
- Start in minutes and get help from a real person whenever you need it.
- Looking back at a busy season?
- We keep things simple, so you can focus on what matters to you.
<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-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Websites we build are fast, accessible and easy for your team to update.</dd>
<dt class="small">Five website mistakes that cost you leads?</dt>
<dd class="small text-body-secondary">Small teams, short feedback loops and no handoffs lost in translation.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">What makes a brand memorable?</dt>
<dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
<dt class="small">Inside our design process?</dt>
<dd class="small text-body-secondary">Our motion team turns complex ideas into short films people actually watch.</dd>
<dt class="small">Why motion matters for modern brands?</dt>
<dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">Planning a month of social content in a day?</dt>
<dd class="small text-body-secondary">We combine strategy, design and technology to build brands that grow.</dd>
<dt class="small">What our clients asked us most?</dt>
<dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
<dt class="small">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
We test early with real users, so the final design works on the first day. 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. We measure success in sign-ups, sales and brand recall, not just awards.
Battery
We listen first, then build a plan around what you actually need. We have helped more than a hundred companies launch, rebrand and grow online. From logo to launch campaign, everything is designed to work together.
Connectivity
We measure success by how many clients come back and tell their friends. 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.
Security
Our team has done this many times, so you never have to guess. Small teams, short feedback loops and no handoffs lost in translation. 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.
<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-fill" 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">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. 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-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">We listen first, then build a plan around what you actually need. 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-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">We measure success by how many clients come back and tell their friends. 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.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Our team has done this many times, so you never have to guess. Small teams, short feedback loops and no handoffs lost in translation. 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.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$16.02 / mo
- Award-winning team
- Award-winning team
- Award-winning team
Team
$41.64 / mo
- Fixed-price projects
- Award-winning team
- Fast turnaround
Business
$58.56 / mo
- Fixed-price projects
- Senior designers only
- Fast turnaround
<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">$16.02<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Award-winning team</li>
<li>Award-winning team</li>
<li>Award-winning team</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">$41.64<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>Fast turnaround</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">$58.56<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Fixed-price projects</li>
<li>Senior designers only</li>
<li>Fast turnaround</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: How we ran a rebrand in eight weeks
Thousands of clients already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. 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.
Websites we build are fast, accessible and easy for your team to update. We combine strategy, design and technology to build brands that grow. From logo to launch campaign, everything is designed to work together.
Chapter 2: The small habits that make a big difference
Our team has done this many times, so you never have to guess. Our motion team turns complex ideas into short films people actually watch. 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. We measure success in sign-ups, sales and brand recall, not just awards. We keep things simple, so you can focus on what matters to you.
Chapter 3: Five things we learned this year
Start in minutes and get help from a real person whenever you need it. Clients stay with us for years because we treat their brand like our own. We have helped more than a hundred companies launch, rebrand and grow online.
Every project starts with a workshop, so we understand your audience before we design. We listen first, then build a plan around what you actually need. From logo to launch campaign, everything is designed to work together.
Chapter 4: Designing packaging that survives the shelf
We combine strategy, design and technology to build brands that grow. We have helped more than a hundred companies launch, rebrand and grow online. 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 test early with real users, so the final design works on the first day. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.
<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: How we ran a rebrand in eight weeks</h3>
<p class="small">Thousands of clients already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. 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>
<p class="small">Websites we build are fast, accessible and easy for your team to update. We combine strategy, design and technology to build brands that grow. 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: The small habits that make a big difference</h3>
<p class="small">Our team has done this many times, so you never have to guess. Our motion team turns complex ideas into short films people actually watch. Clear prices, honest advice and no surprises along the way.</p>
<p class="small">We test early with real users, so the final design works on the first day. We measure success in sign-ups, sales and brand recall, not just awards. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Five things we learned this year</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Clients stay with us for years because we treat their brand like our own. We have helped more than a hundred companies launch, rebrand and grow online.</p>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. We listen first, then build a plan around what you actually need. From logo to launch campaign, everything is designed to work together.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: Designing packaging that survives the shelf</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. 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. We test early with real users, so the final design works on the first day. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
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. We listen first, then build a plan around what you actually need.
Notifications
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. 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.
Privacy
Small teams, short feedback loops and no handoffs lost in translation. 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.
<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="Nora 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="Vancouver">
</div>
<p class="small">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. We listen first, then build a plan around what you actually need.</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 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. 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.</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. 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.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Sales
- Luna TanakaQA Engineer
- Maya AshfordBackend Engineer
- Kenji SilvaFrontend Engineer
Finance
- Hana HaddadFinance Lead
- Priya HarlowSales Executive
- Kai DelgadoProduct Designer
Legal
- Sofia CarterSales Executive
- Luna LindqvistHR Partner
- Lea PatelContent Writer
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Sales</a><a class="nav-link" href="#spy-1199">Finance</a><a class="nav-link" href="#spy-1200">Legal</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">Sales</h3>
<ul class="list-unstyled">
<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="Luna Tanaka"><div><div class="small fw-semibold">Luna Tanaka</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-2.svg" class="rounded-circle" width="36" height="36" alt="Maya Ashford"><div><div class="small fw-semibold">Maya Ashford</div><div class="small text-body-secondary">Backend Engineer</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="Kenji Silva"><div><div class="small fw-semibold">Kenji Silva</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Finance</h3>
<ul class="list-unstyled">
<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="Hana Haddad"><div><div class="small fw-semibold">Hana Haddad</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-3.svg" class="rounded-circle" width="36" height="36" alt="Priya Harlow"><div><div class="small fw-semibold">Priya Harlow</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-4.svg" class="rounded-circle" width="36" height="36" alt="Kai Delgado"><div><div class="small fw-semibold">Kai Delgado</div><div class="small text-body-secondary">Product Designer</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Legal</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="Sofia Carter"><div><div class="small fw-semibold">Sofia Carter</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-5.svg" class="rounded-circle" width="36" height="36" alt="Luna Lindqvist"><div><div class="small fw-semibold">Luna Lindqvist</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-8.svg" class="rounded-circle" width="36" height="36" alt="Lea Patel"><div><div class="small fw-semibold">Lea Patel</div><div class="small text-body-secondary">Content Writer</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Motion
- Explainer animation$5,900
- Website package$9,250
- Video edit$2,500
Branding
- Launch campaign$15,000
- Website package$9,100
- Packaging design$4,450
Web
- Packaging design$4,050
- Social kit$1,800
- Website package$9,150
<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">Branding</a><a class="nav-link" href="#spy-1204">Web</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>Explainer animation</span><span class="fw-semibold">$5,900</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>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Video edit</span><span class="fw-semibold">$2,500</span></li>
</ul>
</div>
<div id="spy-1203" 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>Launch campaign</span><span class="fw-semibold">$15,000</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Website package</span><span class="fw-semibold">$9,100</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Packaging design</span><span class="fw-semibold">$4,450</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Web</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,050</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Social kit</span><span class="fw-semibold">$1,800</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Website package</span><span class="fw-semibold">$9,150</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Every project starts with a workshop, so we understand your audience before we design. Senior designers lead every project from the first sketch to the final file. Every detail is handled by people who care about getting it right.
This week
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. 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.
Later
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 keep things simple, so you can focus on what matters to you.
<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">Every project starts with a workshop, so we understand your audience before we design. Senior designers lead every project from the first sketch to the final file. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</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. 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>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</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 keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-bs-theme="dark"</code>.
Launch
Small teams, short feedback loops and no handoffs lost in translation. 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. Friendly people answer your questions quickly, by phone, chat or email.
Orbit
We combine strategy, design and technology to build brands that grow. Start in minutes and get help from a real person whenever you need it. Senior designers lead every project from the first sketch to the final file. Clear prices, honest advice and no surprises along the way.
Landing
We measure success by how many clients come back and tell their friends. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.
<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">Small teams, short feedback loops and no handoffs lost in translation. 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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">We combine strategy, design and technology to build brands that grow. Start in minutes and get help from a real person whenever you need it. Senior designers lead every project from the first sketch to the final file. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">We measure success by how many clients come back and tell their friends. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Aug 10, 2026
- NewClients stay with us for years because we treat their brand like our own.
- ImprovedWebsites we build are fast, accessible and easy for your team to update.
- FixedOur team has done this many times, so you never have to guess.
v3.1 Oct 5, 2026
- NewWebsites we build are fast, accessible and easy for your team to update.
- ImprovedClear prices, honest advice and no surprises along the way.
- FixedWe have helped more than a hundred companies launch, rebrand and grow online.
v3.0 May 13, 2026
- NewWe keep things simple, so you can focus on what matters to you.
- ImprovedOur team has done this many times, so you never have to guess.
- FixedSmall teams, short feedback loops and no handoffs lost in translation.
v2.9 Dec 14, 2025
- NewClients stay with us for years because we treat their brand like our own.
- ImprovedWe measure success by how many clients come back and tell their friends.
- FixedThousands of clients already trust us, and we work hard to keep it that way.
<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">Aug 10, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</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-primary me-1">Improved</span>Websites we build are fast, accessible and easy for your team to update.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our team has done this many times, so you never have to guess.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Oct 5, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Websites we build are fast, accessible and easy for your team to update.</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 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">May 13, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We keep things simple, so you can focus on what matters to you.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>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">Dec 14, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</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-primary me-1">Improved</span>We measure success by how many clients come back and tell their friends.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Thousands of clients already trust us, and we work hard to keep it that way.</li>
</ul>
</div>
</div>
</div>
</div>