Brand identity
A name, a mark, a voice and the system that keeps them in step, built for screens first.
See the serviceKestrel Studio style guide
One system, every page.
Every colour, size and component on this page comes from Automatic.css settings and the kit's component classes. Change a setting and the whole kit follows. This page ships with the kit so your client can see the system too.
01
Colour
Primary is the one brand colour and it sits on interactive things only: buttons, links, eyebrows, icons. There is no second colour: the serif italic carries the emphasis. Everything else is ink and paper.
- –primaryButtons, links, eyebrows
- –primary-hoverHover
- –primary-ultra-lightLight bands (bg–light)
- –primary-lightText on dark bands
- –primary-darkRarely: pressed
- –accentStar ratings, highlights
- –base-ultra-darkText, ultra-dark bands
- –base-darkDark bands
- –neutral-ultra-lightPage background (paper)
- –neutral-lightLines, dividers
- –neutral-semi-lightDisabled, placeholders
- –whiteCards, inputs
Paper
Heading on ultra-light
Body text and a button take their colours from the band, not from the component.
Start a projectLight
Heading on light
Body text and a button take their colours from the band, not from the component.
Start a projectDark
Heading on dark
Body text and a button take their colours from the band, not from the component.
Start a projectUltra dark
Heading on ultra-dark
Body text and a button take their colours from the band, not from the component.
Start a project02
Type
Websites, brands and products for companies that ship.
Four ways to work with us.
What you get
Card title and small headings
Lead text sits under a headline and says the one thing the section is about, in a sentence or two.
Body text is Inter Tight at 17px on desktop and 16px on phones, line height 1.55, for reading at arm's length. Headings are Inter Tight at weight 500 with tight tracking. Inline links look like this link to the services page, underlined so nobody has to guess.
Small text for captions, notes under buttons and legal lines. Never lighter than this.
Eyebrow label, the literal section heading03
Buttons
Three weights: primary for the one ask on a page, outline for the alternative, text link for everything else. Verb plus noun labels. At least 48px tall. Hover lifts nothing here, it darkens; the pressed and focus states are in ACSS.
On a dark band
04
Section intro
Every section starts with this component: the literal heading as an eyebrow, the headline as a paragraph, an optional lead and buttons. Alignment and the band colour are props.
Services
Four things we do. All of them well.
Fixed price, a launch date, and a system your team runs afterwards.
05
Cards
Service cards
Websites
Designed and built by the same four people, on a system your team can edit without breaking it.
See the service
Product design
Interfaces for software that people use all day: research, flows, a component library, the hard screens.
See the service
Review cards
They shipped in three weeks and it still feels finished.
Every studio we spoke to quoted four months. Kestrel asked what the launch date was and worked back from it. The brand holds up a year later.
Maya Lindqvist, co-founder, Cronos Systems, Client since 2025 The first agency that let our team own the site.
We have changed every page ourselves since launch. Nothing has broken. That was the brief, and they took it seriously.
Daniel Osei, head of marketing, Pulse Architecture, Client since 2025
Process cards
Listen
A day with your team and your customers. We leave with the brief written in your words, and a fixed price.
Shape
Direction before pages: type, colour, motion and the three screens that define the product, reviewed live.
Build
The real thing, on the real system, with your content. You see it every Thursday and can edit it from week five.
Launch and look after
Launch day with us in the room. Then a care plan, if you want one, from the people who built it.
06
Talking points and stats
- 6Years, one team
- 68Projects shipped
- 31Days, median brief to launch
- 9 in 10Clients who come back
07
Contact details and FAQ
How much does a website cost?
Most sites we build are between $18,000 and $60,000, fixed before we start. A brand identity is $12,000 to $30,000. The first call tells you which end you are at.
How long does it take?
Eight weeks for a website, three to six for a brand, from the first day to launch. The median across all our projects is 31 days of work.
Who builds it?
The four people on the About page. We do not hand work to contractors or juniors you have not met.
08
Media
Images are always in a figure. Cards fix the ratio (4:3), heroes use 3:2, square tiles are square. Corners come from the ACSS auto radius, so the client cannot upload a square-cornered photo by mistake.
