We built Citruit's site first.
Before we built anything for clients, we built Citruit's own brand and website from scratch. Here's the brand system we designed for Citruit and how citruit.com came together, plus three concept sites for fictional clients, each with its own look.
95+
Static code, optimized images and no plugins mean our desktop performance scores are all over 95/100!
See the report0
Every line written with purpose, no WordPress updates to keep track of, no page-builder login to hack, and no plugin bloat.
5
Home, Services, Portfolio, About, Contact. Five pages, the same number included with both of our website plans.
How we designed Citruit's brand and site.
This is our own brand, not a client project. Everything here, from the lemon-yellow palette to the type pairing, is the brand system we created for Citruit. Our clients are small businesses that can't hire a big firm, so it had to do two things: feel approachable, and prove we know what we're doing.
- 01
The brief
Small businesses shouldn't feel intimidated before they even see a price. The site had to feel competent and friendly, presenting real numbers up front and proving we know what we're doing.
- 02
The decisions
A bright, punchy color palette. Clear, easy to read typefaces. Our $300/month rate right at the top, a real price anyone can use to ballpark a project before they have to call.
- 03
The result
Built to WCAG AA Accessibility standards, making it easy to read and navigate. 95+ desktop PageSpeed, meaning we convert faster than the competition, and you will too!
- Lemon Yellow #FFF523
- Near Black #111111
- Solid White #FFFFFF
- Off-white #F7F7F5
- Mid Gray #5C5C5C
The rules behind Citruit's look: yellow signals. Black reads. Everything else stays out of the way. Roboto for words, Cousine for labels, numbers and code.
- Page builders
- None
- Plugins
- None (Google Analytics is the only outside script)
- Stack
- HTML, Sass & JavaScript
- Programs
- Figma, VS Code, Eleventy
- Accessibility
- Designed to WCAG AA standards
- Legible
Roboto is one of our favorite fonts, since its wide curves and letter height make it easy to read on small screens.
- Hand-coded
No plugins or page-builder bloat, so it's fast, secure and simple to maintain.
- One brand system
A thorough, consistent brand system means we can add a page to citruit.com next year and it'll still look like it belongs.
Three concept builds. Three different looks.
Concept projects for fictional clients, built to show range. Each started with a different problem, so each looks different.
Concept LegalWhitfield & Cole Family Law
A Lehigh Valley family law firm that needed a fast, mobile friendly site for them to reach their clients where they were needed the most.
Explore the demo site
Concept CoffeeMeridian Coffee Co.
A direct-to-consumer fair trade brand needed a site that tells the story behind beans sourced straight from farmers. We built the site to match.
Explore the demo site
Concept LandscapingGreenline Landscaping
A landscaping company was stuck on a broken free template for years. We hand-coded a faster, more reliable site from scratch.
Explore the demo site