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
Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. 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. Fixed prices and weekly demos keep you in control from start to finish. We keep things simple, so you can focus on what matters to you.
Details
We combine strategy, design and technology to build brands that grow. From logo to launch campaign, everything is designed to work together. Small teams, short feedback loops and no handoffs lost in translation.
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. We have helped more than a hundred companies launch, rebrand and grow online.
Pricing
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. Clients stay with us for years because we treat their brand like our own.
Websites we build are fast, accessible and easy for your team to update. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Pixelium Nest</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">Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Our motion team turns complex ideas into short films people actually watch.</p>
<p class="small">We test early with real users, so the final design works on the first day. Fixed prices and weekly demos keep you in control from start to finish. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</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. Small teams, short feedback loops and no handoffs lost in translation.</p>
<p class="small">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. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Thousands of clients already trust us, and we work hard to keep it that way. Clients stay with us for years because we treat their brand like our own.</p>
<p class="small">Websites we build are fast, accessible and easy for your team to update. Our team has done this many times, so you never have to guess. 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
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. Websites we build are fast, accessible and easy for your team to update. Friendly people answer your questions quickly, by phone, chat or email.
Step two
Fixed prices and weekly demos keep you in control from start to finish. Senior designers lead every project from the first sketch to the final file. Our motion team turns complex ideas into short films people actually watch. Small teams, short feedback loops and no handoffs lost in translation.
Step three
We measure success in sign-ups, sales and brand recall, not just awards. From logo to launch campaign, everything is designed to work together. We combine strategy, design and technology to build brands that grow.
Step four
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. 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">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. Websites we build are fast, accessible and easy for your team to update. Friendly people answer your questions quickly, by phone, chat or email.</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. 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. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. From logo to launch campaign, everything is designed to work together. We combine strategy, design and technology to build brands that grow.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">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. 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.
UX research
Thousands of clients already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Every project starts with a workshop, so we understand your audience before we design.
Web design
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. 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.
Campaign production
Every project starts with a workshop, so we understand your audience before we design. We have helped more than a hundred companies launch, rebrand and grow online. We test early with real users, so the final design works on the first day.
Questions
Thousands of clients already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. 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 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">Web design</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">UX research</h3>
<p class="small">Thousands of clients already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Web design</h3>
<p class="small">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. 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-1133" class="pb-3">
<h3 class="h6">Campaign production</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. We have helped more than a hundred companies launch, rebrand and grow online. We test early with real users, so the final design works on the first day.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Thousands of clients already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. 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>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Clear prices, honest advice and no surprises along the way. We combine strategy, design and technology to build brands that grow. 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.
Install
Websites we build are fast, accessible and easy for your team to update. Small teams, short feedback loops and no handoffs lost in translation. Our motion team turns complex ideas into short films people actually watch.
Configure
From logo to launch campaign, everything is designed to work together. Our team has done this many times, so you never have to guess. We measure success in sign-ups, sales and brand recall, not just awards.
Usage
Start in minutes and get help from a real person whenever you need it. Fixed prices and weekly demos keep you in control from start to finish. Senior designers lead every project from the first sketch to the final file. Clients stay with us for years because we treat their brand like our own.
Examples
Small teams, short feedback loops and no handoffs lost in translation. Our team has done this many times, so you never have to guess. We measure success by how many clients come back and tell their friends. 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-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">Clear prices, honest advice and no surprises along the way. We combine strategy, design and technology to build brands that grow. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-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. Small teams, short feedback loops and no handoffs lost in translation. Our motion team turns complex ideas into short films people actually watch.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">From logo to launch campaign, everything is designed to work together. Our team has done this many times, so you never have to guess. We measure success in sign-ups, sales and brand recall, not just awards.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Fixed prices and weekly demos keep you in control from start to finish. Senior designers lead every project from the first sketch to the final file. Clients stay with us for years because we treat their brand like our own.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Small teams, short feedback loops and no handoffs lost in translation. Our team has done this many times, so you never have to guess. 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.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Every detail is handled by people who care about getting it right. From logo to launch campaign, everything is designed to work together. Senior designers lead every project from the first sketch to the final file. We measure success in sign-ups, sales and brand recall, not just awards.
Midday
Friendly people answer your questions quickly, by phone, chat or email. 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.
Afternoon
We test early with real users, so the final design works on the first day. Clear prices, honest advice and no surprises along the way. Thousands of clients already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need.
Evening
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 have helped more than a hundred companies launch, rebrand and grow online.
<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">Every detail is handled by people who care about getting it right. From logo to launch campaign, everything is designed to work together. Senior designers lead every project from the first sketch to the final file. We measure success in sign-ups, sales and brand recall, not just awards.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">We test early with real users, so the final design works on the first day. Clear prices, honest advice and no surprises along the way. Thousands of clients already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need.</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. Start in minutes and get help from a real person whenever you need it. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Websites we build are fast, accessible and easy for your team to update. Clients stay with us for years because we treat their brand like our own. Our motion team turns complex ideas into short films people actually watch.
Beta
Every detail is handled by people who care about getting it right. Senior designers lead every project from the first sketch to the final file. Clear prices, honest advice and no surprises along the way. Clients stay with us for years because we treat their brand like our own.
Gamma
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. We have helped more than a hundred companies launch, rebrand and grow online.
<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">Websites we build are fast, accessible and easy for your team to update. Clients stay with us for years because we treat their brand like our own. 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">Every detail is handled by people who care about getting it right. Senior designers lead every project from the first sketch to the final file. Clear prices, honest advice and no surprises along the way. Clients stay with us for years because we treat their brand like our own.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</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. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Small teams, short feedback loops and no handoffs lost in translation. We measure success in sign-ups, sales and brand recall, not just awards. Thousands of clients already trust us, and we work hard to keep it that way.
Features
Our motion team turns complex ideas into short films people actually watch. Start in minutes and get help from a real person whenever you need it. We test early with real users, so the final design works on the first day. We measure success by how many clients come back and tell their friends.
Reviews
Websites we build are fast, accessible and easy for your team to update. We combine strategy, design and technology to build brands that grow. 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.
FAQ
We listen first, then build a plan around what you actually need. From logo to launch campaign, everything is designed to work together. 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">Small teams, short feedback loops and no handoffs lost in translation. We measure success in sign-ups, sales and brand recall, not just awards. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</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. 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. We measure success by how many clients come back and tell their friends.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Websites we build are fast, accessible and easy for your team to update. We combine strategy, design and technology to build brands that grow. 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-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">We listen first, then build a plan around what you actually need. From logo to launch campaign, everything is designed to work together. 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 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. We have helped more than a hundred companies launch, rebrand and grow online.
Background
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. Websites we build are fast, accessible and easy for your team to update.
Method
Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. From logo to launch campaign, everything is designed to work together.
Results
Thousands of clients already trust us, and we work hard to keep it that way. Senior designers lead every project from the first sketch to the final file. We measure success in sign-ups, sales and brand recall, not just awards.
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 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. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</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. 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">Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. From logo to launch campaign, everything is designed to work together.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Thousands of clients already trust us, and we work hard to keep it that way. Senior designers lead every project from the first sketch to the final file. We measure success in sign-ups, sales and brand recall, not just awards.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first order-md-last">
<p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-column small">
<a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
</nav>
</div>
</div>9Numbered steps
<code>.list-group-numbered</code> turns the spy menu into a step counter.
Create an account
We keep things simple, so you can focus on what matters to you. 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.
Set up your profile
Fixed prices and weekly demos keep you in control from start to finish. We combine strategy, design and technology to build brands that grow. We measure success by how many clients come back and tell their friends.
Invite the team
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 motion team turns complex ideas into short films people actually watch.
Go live
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. We test early with real users, so the final design works on the first day.
<div class="row g-3">
<div class="col-sm-5">
<div id="spy-nav-1160" class="list-group list-group-numbered">
<a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
</div>
</div>
<div class="col-sm-7">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. 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-1162" class="pb-3">
<h3 class="h6">Set up your profile</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. We measure success by how many clients come back and tell their friends.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</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. Our motion team turns complex ideas into short films people actually watch.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">We have helped more than a hundred companies launch, rebrand and grow online. We listen first, then build a plan around what you actually need. We test early with real users, so the final design works on the first day.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
The small habits that make a big difference
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. Small teams, short feedback loops and no handoffs lost in translation. We keep things simple, so you can focus on what matters to you.
Planning a month of social content in a day
Every project starts with a workshop, so we understand your audience before we design. From logo to launch campaign, everything is designed to work together. Our team has done this many times, so you never have to guess. We combine strategy, design and technology to build brands that grow.
Our favourite tips for busy weeks
We measure success in sign-ups, sales and brand recall, not just awards. Thousands of clients already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many clients come back and tell their friends.
A checklist for your next website launch
Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Fixed prices and weekly demos keep you in control from start to finish.
<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">The small habits that make a big difference</h3>
<p class="small mb-0">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. Small teams, short feedback loops and no handoffs lost in translation. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">Planning a month of social content in a day</h3>
<p class="small mb-0">Every project starts with a workshop, so we understand your audience before we design. From logo to launch campaign, everything is designed to work together. Our team has done this many times, so you never have to guess. We combine strategy, design and technology to build brands that grow.</p>
</div>
<div id="spy-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">Our favourite tips for busy weeks</h3>
<p class="small mb-0">We measure success in sign-ups, sales and brand recall, not just awards. Thousands of clients already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many clients come back and tell their friends.</p>
</div>
<div id="spy-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 checklist for your next website launch</h3>
<p class="small mb-0">Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- What our clients asked us most?
- Clients stay with us for years because we treat their brand like our own.
- Looking back at a busy season?
- Our motion team turns complex ideas into short films people actually watch.
- Five things we learned this year?
- Websites we build are fast, accessible and easy for your team to update.
Shipping
- Inside our design process?
- From logo to launch campaign, everything is designed to work together.
- How to choose the right project?
- Clients stay with us for years because we treat their brand like our own.
- Choosing colours that sell?
- Friendly people answer your questions quickly, by phone, chat or email.
Returns
- Five website mistakes that cost you leads?
- Our team has done this many times, so you never have to guess.
- A beginner's guide to getting started?
- We keep things simple, so you can focus on what matters to you.
- How we ran a rebrand in eight weeks?
- We have helped more than a hundred companies launch, rebrand and grow online.
<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-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">What our clients asked us most?</dt>
<dd class="small text-body-secondary">Clients stay with us for years because we treat their brand like our own.</dd>
<dt class="small">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">Our motion team turns complex ideas into short films people actually watch.</dd>
<dt class="small">Five things we learned this year?</dt>
<dd class="small text-body-secondary">Websites we build are fast, accessible and easy for your team to update.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">Inside our design process?</dt>
<dd class="small text-body-secondary">From logo to launch campaign, everything is designed to work together.</dd>
<dt class="small">How to choose the right project?</dt>
<dd class="small text-body-secondary">Clients stay with us for years because we treat their brand like our own.</dd>
<dt class="small">Choosing colours that sell?</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">Five website mistakes that cost you leads?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
<dt class="small">How we ran a rebrand in eight weeks?</dt>
<dd class="small text-body-secondary">We have helped more than a hundred companies launch, rebrand and grow online.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Our motion team turns complex ideas into short films people actually watch. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.
Battery
We measure success by how many clients come back and tell their friends. We combine strategy, design and technology to build brands that grow. 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.
Connectivity
Senior designers lead every project from the first sketch to the final file. Websites we build are fast, accessible and easy for your team to update. We test early with real users, so the final design works on the first day.
Security
We measure success in sign-ups, sales and brand recall, not just awards. Small teams, short feedback loops and no handoffs lost in translation. Every project starts with a workshop, so we understand your audience before we design.
<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-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">Our motion team turns complex ideas into short films people actually watch. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">We measure success by how many clients come back and tell their friends. We combine strategy, design and technology to build brands that grow. 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-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Senior designers lead every project from the first sketch to the final file. Websites we build are fast, accessible and easy for your team to update. We test early with real users, so the final design works on the first day.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. Small teams, short feedback loops and no handoffs lost in translation. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$15.78 / mo
- Senior designers only
- Fast turnaround
- Weekly demos
Team
$29.04 / mo
- Fast turnaround
- Fixed-price projects
- Award-winning team
Business
$69.60 / mo
- Award-winning team
- Fixed-price projects
- 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-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">$15.78<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Senior designers only</li>
<li>Fast turnaround</li>
<li>Weekly demos</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="fs-4 fw-bold mb-1">$29.04<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Fast turnaround</li>
<li>Fixed-price projects</li>
<li>Award-winning team</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$69.60<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Award-winning team</li>
<li>Fixed-price projects</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: Lessons from a year of client workshops
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. 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. Our team has done this many times, so you never have to guess. Websites we build are fast, accessible and easy for your team to update.
Chapter 2: Designing packaging that survives the shelf
We have helped more than a hundred companies launch, rebrand and grow online. Senior designers lead every project from the first sketch to the final file. 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. Every detail is handled by people who care about getting it right. From logo to launch campaign, everything is designed to work together.
Chapter 3: Why motion matters for modern brands
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. 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. Start in minutes and get help from a real person whenever you need it. Fixed prices and weekly demos keep you in control from start to finish.
Chapter 4: What makes a brand memorable
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 combine strategy, design and technology to build brands that grow. Clear prices, honest advice and no surprises along the way.
Every detail is handled by people who care about getting it right. Websites we build are fast, accessible and easy for your team to update. Fixed prices and weekly demos keep you in control from start to finish.
<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: Lessons from a year of client workshops</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Thousands of clients already trust us, and we work hard to keep it that way. Clients stay with us for years because we treat their brand like our own.</p>
<p class="small">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. 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: Designing packaging that survives the shelf</h3>
<p class="small">We have helped more than a hundred companies launch, rebrand and grow online. Senior designers lead every project from the first sketch to the final file. Thousands of clients already trust us, and we work hard to keep it that way.</p>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. From logo to launch campaign, everything is designed to work together.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Why motion matters for modern brands</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. We test early with real users, so the final design works on the first day.</p>
<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. Start in minutes and get help from a real person whenever you need it. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: What makes a brand memorable</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. We combine strategy, design and technology to build brands that grow. Clear prices, honest advice and no surprises along the way.</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. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Start in minutes and get help from a real person whenever you need it. Every project starts with a workshop, so we understand your audience before we design. Friendly people answer your questions quickly, by phone, chat or email. We test early with real users, so the final design works on the first day.
Notifications
Small teams, short feedback loops and no handoffs lost in translation. We combine strategy, design and technology to build brands that grow. Senior designers lead every project from the first sketch to the final file.
Privacy
Our team has done this many times, so you never have to guess. Thousands of clients already trust us, and we work hard to keep it that way. 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.
<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="Nadia Novak">
</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="Auckland">
</div>
<p class="small">Start in minutes and get help from a real person whenever you need it. Every project starts with a workshop, so we understand your audience before we design. Friendly people answer your questions quickly, by phone, chat or email. We test early with real users, so the final design works on the first day.</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">Small teams, short feedback loops and no handoffs lost in translation. We combine strategy, design and technology to build brands that grow. Senior designers lead every project from the first sketch to the final file.</p>
</div>
<div id="spy-1191" class="pb-3">
<h3 class="h6">Privacy</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="spy-sw-1196">
<label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
</div>
<p class="small">Our team has done this many times, so you never have to guess. Thousands of clients already trust us, and we work hard to keep it that way. 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>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Sales
- Omar FischerProject Manager
- Ivy HarlowFinance Lead
- Owen FischerBackend Engineer
Legal
- Mateo HughesProduct Designer
- Diego LindqvistCustomer Success
- Mason OrtegaOperations Manager
Design
- Arjun BrennanSupport Specialist
- Ava DelgadoFinance Lead
- Lucas WhitakerProduct Designer
<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">Legal</a><a class="nav-link" href="#spy-1200">Design</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">Sales</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="Omar Fischer"><div><div class="small fw-semibold">Omar Fischer</div><div class="small text-body-secondary">Project Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Ivy Harlow"><div><div class="small fw-semibold">Ivy Harlow</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-2.svg" class="rounded-circle" width="36" height="36" alt="Owen Fischer"><div><div class="small fw-semibold">Owen Fischer</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
</ul>
</div>
<div id="spy-1199" 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-8.svg" class="rounded-circle" width="36" height="36" alt="Mateo Hughes"><div><div class="small fw-semibold">Mateo Hughes</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-9.svg" class="rounded-circle" width="36" height="36" alt="Diego Lindqvist"><div><div class="small fw-semibold">Diego Lindqvist</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="Mason Ortega"><div><div class="small fw-semibold">Mason Ortega</div><div class="small text-body-secondary">Operations Manager</div></div></li>
</ul>
</div>
<div id="spy-1200" 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-3.svg" class="rounded-circle" width="36" height="36" alt="Arjun Brennan"><div><div class="small fw-semibold">Arjun Brennan</div><div class="small text-body-secondary">Support Specialist</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Ava Delgado"><div><div class="small fw-semibold">Ava Delgado</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-7.svg" class="rounded-circle" width="36" height="36" alt="Lucas Whitaker"><div><div class="small fw-semibold">Lucas Whitaker</div><div class="small text-body-secondary">Product Designer</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
- Logo refresh$2,950
- Website package$8,450
- Brand sprint$4,600
Motion
- Landing page$3,250
- UX audit$2,550
- Explainer animation$5,600
Branding
- Print collateral$1,550
- UX audit$2,600
- Website package$9,100
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Print</a><a class="nav-link" href="#spy-1203">Motion</a><a class="nav-link" href="#spy-1204">Branding</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-3">
<h3 class="h6">Print</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Logo refresh</span><span class="fw-semibold">$2,950</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Website package</span><span class="fw-semibold">$8,450</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Brand sprint</span><span class="fw-semibold">$4,600</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Motion</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Landing page</span><span class="fw-semibold">$3,250</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>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Explainer animation</span><span class="fw-semibold">$5,600</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Branding</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Print collateral</span><span class="fw-semibold">$1,550</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>UX audit</span><span class="fw-semibold">$2,600</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>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Our motion team turns complex ideas into short films people actually watch. We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. We measure success by how many clients come back and tell their friends.
This week
From logo to launch campaign, everything is designed to work together. We measure success in sign-ups, sales and brand recall, not just awards. Clear prices, honest advice and no surprises along the way.
Later
We listen first, then build a plan around what you actually need. We test early with real users, so the final design works on the first day. 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">Our motion team turns complex ideas into short films people actually watch. We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. We measure success by how many clients come back and tell their friends.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">From logo to launch campaign, everything is designed to work together. We measure success in sign-ups, sales and brand recall, not just awards. 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 listen first, then build a plan around what you actually need. We test early with real users, so the final design works on the first day. 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 keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Senior designers lead every project from the first sketch to the final file.
Orbit
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. Fixed prices and weekly demos keep you in control from start to finish.
Landing
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 measure success by how many clients come back and tell their friends. Small teams, short feedback loops and no handoffs lost in translation.
<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
<nav id="spy-nav-1209" class="nav nav-pills mb-2">
<a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
</nav>
<div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-3">
<h3 class="h6">Launch</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Senior designers lead every project from the first sketch to the final file.</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. Our team has done this many times, so you never have to guess. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<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 measure success by how many clients come back and tell their friends. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 May 20, 2026
- NewStart in minutes and get help from a real person whenever you need it.
- ImprovedEvery project starts with a workshop, so we understand your audience before we design.
- FixedWe measure success in sign-ups, sales and brand recall, not just awards.
v3.1 Jun 3, 2026
- NewOur motion team turns complex ideas into short films people actually watch.
- ImprovedFriendly people answer your questions quickly, by phone, chat or email.
- FixedWe combine strategy, design and technology to build brands that grow.
v3.0 Dec 11, 2025
- NewWe have helped more than a hundred companies launch, rebrand and grow online.
- ImprovedOur motion team turns complex ideas into short films people actually watch.
- FixedOur team has done this many times, so you never have to guess.
v2.9 Oct 26, 2025
- NewFixed prices and weekly demos keep you in control from start to finish.
- ImprovedClients stay with us for years because we treat their brand like our own.
- FixedWe measure success in sign-ups, sales and brand recall, not just awards.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-column small">
<a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
</nav>
</div>
<div class="col-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">May 20, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Start in minutes and get help from a real person whenever you need it.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every project starts with a workshop, so we understand your audience before we design.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We measure success in sign-ups, sales and brand recall, not just awards.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jun 3, 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>Friendly people answer your questions quickly, by phone, chat or email.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We combine strategy, design and technology to build brands that grow.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Dec 11, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We have helped more than a hundred companies launch, rebrand and grow online.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our motion team turns complex ideas into short films people actually watch.</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-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Oct 26, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Fixed prices and weekly demos keep you in control from start to finish.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Clients stay with us for years because we treat their brand like our own.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We measure success in sign-ups, sales and brand recall, not just awards.</li>
</ul>
</div>
</div>
</div>
</div>