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