Happiness, shipped.
Happy Digital builds software that solves business problems — and this book defines how the brand should look, sound, and behave while doing it. Six years in, the work outgrew the wrapper. This is the new wrapper.
The work got better.
The brand didn't.
The 2020 identity was made quickly and cheaply, and it shows: a stock-feeling gradient monogram, an all-caps geometric wordmark, and a plum that photographed like a bruise. Meanwhile the studio was quietly shipping serious software for real businesses. This revision closes that gap — it keeps what earned equity and rebuilds everything that didn't.
- ✕Blue-to-purple gradient reads as a 2016 template, not a studio
- ✕ALL-CAPS wordmark contradicts the warmth in the name
- ✕Muted plum #4F2C69 disappears on screens and in print
- ✕No system behind it — no voice, no palette, no rules
- ✓The Happy H — the crossbar is now a smile. One idea, instantly legible
- ✓Lowercase wordmark: extrabold "happy," light "digital" — warm meets engineered
- ✓Flat, confident color. Iris violet energized from the heritage plum
- ✓A full system: color, type, voice, motion, and tokens for the dev team
What we deliberately kept
A rebrand shouldn't erase six years of recognition. Three things carry over.
Serious software.
Happy outcomes.
Every studio says "we build software." Almost none promise how it will feel to work with them — or to use what they make. That's the open lane. Happy Digital's position: the studio that treats delight as an engineering requirement, not a coat of paint.
Happiness, shipped.
"Shipped" is developer language — it means done, live, in users' hands. "Happiness" is the outcome we ship it for. Every release should make someone's day measurably better: a customer who finds what they need, a team that stops fighting its tools, a founder who finally sees clean numbers. If a feature ships and nobody's happier, it wasn't done.
Happy Digital is the product studio that turns business problems into software people actually enjoy using.
Plain answers, working software, and a team that's genuinely pleasant to build with. We measure ourselves on outcomes — hours saved, orders completed, headaches deleted — not hours billed.
Four pillars
Everything the brand does should be traceable to one of these. If it isn't, cut it.
Personality
The brand is an optimistic expert — the senior engineer who explains things kindly and is usually right. Calibrate to these dials.
Read: warmer than corporate, plainer than technical — but never so playful it undermines trust. When in doubt, be clear first and charming second.
Who we're talking to
Taglines
Happiness, shipped.
Software that makes work feel better.
Built to be enjoyed.
The Happy H
Two pillars — your business on one side, your users on the other — connected by the thing we build between them. The crossbar of the H is a smile. At a glance it's a confident letterform; at a second glance it's the whole company philosophy. It works flat, in one color, at sixteen pixels, and on a water bottle.
Primary lockup · horizontal
The wordmark
Set in Bricolage Grotesque, all lowercase, tracked to −2%. "happy" carries ExtraBold (800); "digital" drops to Regular (450). The weight shift is the brand in one typographic move — warmth up front, engineering right behind it. Never re-set the wordmark in another face or case.
Approved lockups
Six configurations cover every situation. If a surface seems to need a seventh, it doesn't — pick the closest and adjust the surface.
Clearspace & minimum sizes
One and a half bar-widths of empty space on all sides, measured from the mark's extremes. Nothing enters it — not type, not photos, not other logos, not even the smile device.
Never do this
Each of these has already been tried somewhere by someone with good intentions. The answer is still no.
Violet, grown up.
Plus one ray of sun.
Purple was always the right instinct — it just needed conviction. The system is built on four colors: a violet-black Ink instead of generic dark grey, an electric Iris evolved from the heritage plum, a warm Beam yellow that does the smiling, and a faintly lavender Paper. Most surfaces use only these four.
#180F33 · rgb(24 15 51)Text, dark surfaces, the app icon. A violet-black — never use pure #000.#6D2AE3 · rgb(109 42 227)The hero. Logo, links, primary buttons, focus rings. Direct descendant of the 2020 plum.#FFC630 · rgb(255 198 48)The happiness pixel. Smiles, highlights, one CTA per screen. Scarcity is what makes it land.#F7F5FB · rgb(247 245 251)Default background. A whisper of lavender keeps pages warm without reading as cream.Extended palette
For data visualization, illustration, and product states only — never for brand surfaces or the logo.
#FF6E5F · errors, "don't"#2FCBAF · success, "do"#6FB4FF · info, charts#E9E1FA · tints, washesApproved pairings
WCAG contrast, pre-checked. If a pairing isn't here, don't ship it.
| Pairing | Ratio | Use for |
|---|---|---|
| Ink / Paper | 16.9 ✓ | Body text, default UI |
| Paper / Ink | 16.9 ✓ | Dark sections, footer |
| Iris / Paper | 6.4 ✓ | Links, headings, logo |
| White / Iris | 6.4 ✓ | Primary buttons |
| Ink / Beam | 11.5 ✓ | Hero CTA, highlights |
| Beam / Ink | 11.5 ✓ | Accents on dark |
| Beam / Paper | 1.5 ✕ | Graphics only — never text |
| Iris / Ink | 2.7 ✕ | Decorative glows only |
Daybreak — the one gradient
One gradient survives, and it's earned: Iris rising through coral into Beam, like a sunrise (the good kind of corny). It appears as full-bleed art on hero moments and event covers — at most once per surface, never on the logo, never behind body copy.
A grotesk with a grin,
a workhorse, an engineer.
Three faces, three jobs, zero exceptions. Bricolage Grotesque headlines with just enough quirk to feel human; Figtree carries paragraphs and interfaces without complaint; JetBrains Mono handles numbers, labels, and code — a quiet nod to the people who actually build the products. All three are open-source: the type system costs $0 and installs in one line.
Type scale
| display-xl · 84/0.98 · BG 800 | Happiness, shipped. |
| display · 56/1.04 · BG 800 | Built to be enjoyed |
| h1 · 40/1.1 · BG 800 | Fewer clicks, happier ops team |
| h2 · 28/1.2 · BG 700 | What we shipped this sprint |
| body-lg · 20/1.6 · FT 450 | Lead paragraphs earn a little more size and a lot more air. |
| body · 17/1.65 · FT 450 | Default reading text. Comfortable at sixty-six characters per line, like this sentence is trying to be. |
| small · 14.5/1.55 · FT 500 | Secondary detail, card metadata, captions under images. |
| label · 11.5/1.4 · JBM 500 +10% | Eyebrow labels look exactly like this |
House rules
Write like the senior dev
everyone actually likes.
The voice is the brand's biggest upgrade. The old site talked like every dev shop ("innovative technological advancements…"); the new voice talks like a smart colleague who respects your time. Plain verbs, real numbers, sentence case, and warmth that never tips into wacky.
Before → after
Real copy from the 2020 site, rewritten in the 2026 voice.
"The present era is all about working for tech, and towards opting for innovative technological advancements that we promise to deliver here at Happy Digital."
You have a business problem. We build the software that solves it.
"We bridge the gap between the global technology industry and your business through website development, mobile development, and application development services."
Web apps, mobile apps, and the unglamorous integrations that make them useful — planned in plain English, shipped on a date we actually said.
"Empowering businesses through end-to-end digital transformation solutions."
Last project, the client's ops team got 11 hours a week back. That's the whole pitch.
Microcopy
Interfaces are where the voice earns trust. Buttons say what they do; errors explain what happened and how to fix it; nothing apologizes vaguely.
| Moment | Say | Not |
|---|---|---|
| primary button | Start a project | Submit |
| success toast | Shipped — your changes are live. | Operation completed successfully! |
| error | Couldn't save — the server didn't respond. Try again in a minute. | Oops! Something went wrong 😢 |
| empty state | No projects yet. Start your first one. | Nothing to display. |
| 404 | This page shipped out. Head back home. | Error 404: Not Found |
| loading | One sec — loading your dashboard. | Please wait… |
Soft geometry,
engineered tight.
Every visual decision inherits from the mark: round terminals, generous radii, flat color, one accent at a time. Layouts breathe on an 8-point grid. And the smile — the crossbar of the H — quietly becomes the system's signature device.
The smile is the system
One curve, four jobs. Use it deliberately — one smile device per view is plenty.
the underline
Highlights one phrase per headlineGrid, spacing, radius
12 columns, 1180px max container, 24px gutters. All spacing snaps to multiples of 8. Corner radii come in three sizes plus the 25% app-icon squircle — pick by component scale, never freestyle.
Iconography
2px rounded strokes on a 24px grid, corners echoing the mark. Ink lines with at most one Iris accent stroke per icon. No filled icons, no two-accent icons.
Motion
Motion is a springboard, not a trampoline: quick, purposeful, done. Nothing loops, nothing bounces twice, and everything respects prefers-reduced-motion.
cubic-bezier(.2,.9,.3,1)ease-out · translateY(8px)→0stroke-dashoffset → 0Photography
Real people, real screens, warm daylight. Candid over posed; laptops over stock handshakes; the occasional Iris or Beam wardrobe accent is a happy accident worth keeping. If a photo could appear on any dev shop's site, it can't appear on ours.
Illustration
Built from the mark's own vocabulary: bars, arcs, and half-circles, flat-colored in two to three brand colors on Paper. Geometric and calm — like this:
The brand, deployed.
Guidelines only matter if they survive contact with real surfaces. Here's the system on the five it will meet first.
Software that makes work feel better.
Web apps, mobile apps, and integrations that solve real business problems — built by developers who explain things in plain English and ship on the date they said.
For the people
who ship it.
A brand built by developers should hand off like good code. Drop these tokens into any project and the visual system follows. This very document runs on them.
/* happy-digital.tokens.css · v1.0 · 2026 */ :root { /* color · core */ --hd-ink: #180F33; --hd-iris: #6D2AE3; --hd-beam: #FFC630; --hd-paper: #F7F5FB; /* color · extended (data-viz & states only) */ --hd-coral: #FF6E5F; --hd-mint: #2FCBAF; --hd-sky: #6FB4FF; --hd-lilac: #E9E1FA; /* neutrals · violet-tinted, never grey-grey */ --hd-n700: #3A2F5C; --hd-n500: #6E6787; --hd-n300: #A7A1B8; --hd-n200: #D5D1E2; --hd-n100: #ECE9F4; /* type */ --hd-font-display: "Bricolage Grotesque", sans-serif; --hd-font-text: "Figtree", sans-serif; --hd-font-mono: "JetBrains Mono", monospace; /* shape & motion */ --hd-r-sm: 8px; --hd-r-md: 16px; --hd-r-lg: 24px; --hd-snap: 120ms cubic-bezier(.2,.9,.3,1); --hd-settle: 240ms ease-out; }
Asset checklist
| Asset | Formats | Notes |
|---|---|---|
| Happy H — mark | SVG · PDF · PNG @1–4x | Iris, Ink, Paper & two-tone (dark surfaces) versions |
| Lockups × 6 | SVG · PDF · PNG | As specified in Chapter 03 — no local remixes |
| App icon & favicons | 512 / 192 / 32 / 16 PNG + ICO | Ink tile, 25% radius, two-tone mark |
| Fonts | Google Fonts | Bricolage Grotesque · Figtree · JetBrains Mono — all open-source, self-host for production |
| Tokens | CSS · JSON | Copy the block above; keep names prefixed --hd- |
| This book | HTML | Single file, no build step — the source of truth until v2 |
Ship happy.
Questions, edge cases, or a surface this book didn't predict — [email protected]. Guard the system, but remember what it's for: making people a little happier every time we ship.