The system, written down.
Most of this already existed — living in globals.css and never described anywhere a person could read it. This page is that description, generated from the same tokens the site renders with, so the two can't drift apart.
Wordmark
Lowercase, set in Geist Semibold at −0.035em, with “nest” in brand green and a drawn green dot closing the word. No symbol — the logo is the name, so there's nothing to learn to recognise and nothing extra to maintain.
Construction
| Property | Value | Note |
|---|---|---|
| Typeface | Geist | Already loaded site-wide |
| Weight | 600 | Semibold |
| Case | lowercase | No capitals, anywhere |
| Tracking | -0.035em | Snug, not tight |
| “data” | --foreground | Full-strength ink |
| “nest” | --brand-strong | Not --brand — see §03 |
| Dot diameter | 0.125em | True circle, sized to the stem |
| Dot offset | 0.045em | From the t, on the baseline |
| Dot colour | --brand | The brighter green; it's a small shape |
Geist's full stop is designed to end a sentence, not a logo — against a 600-weight stem it reads optically light, and it's the first thing to vanish when the mark is scaled down or printed small. This dot is a true circle at 0.125em, weighted to match the vertical strokes. In the SVG it's a <circle>, not a glyph.
The three versions
Three, and only three. Everything else is a misuse.
This wordmark carries its split in colour, and colour is exactly what disappears when a proposal is printed in black, faxed, photocopied, or dropped into a client's greyscale template. Reproduce the primary version in one colour and “datanest” collapses into an undifferentiated word — the whole idea, gone silently.
So the one-colour version carries the split by tone instead of hue: “data” at a 62% tint, “nest” and the dot at full strength. Use it any time the output isn't full colour — given proposals and invoices are where this mark mostly lives, that's not an edge case.
Avatar
Where the full name won't fit, the wordmark reduces to dn. Not an arbitrary abbreviation: the d heads “data” and the n heads “nest”, coloured as they are in the full lockup. It's the wordmark with the middle removed.
16px — no dot
32px
180pxThe green tile is the exception. A green “n” can't sit on a green ground, so it falls back to the same 62% tonal split the print version uses. One rule, two places.
16px drops the dot. Three glyphs in a 16px square is tight and the dot lands sub-pixel, so it blurs. Every favicon size is redrawn by the generator rather than downscaled from one master.
Logo use
x = the x-height of the wordmark — the height of the “a”. Spatial rules are expressed in it so they scale with the mark rather than being pinned to pixels.
- Clear space — 1.5× the x-height on every side. Nothing crosses it, including the page edge or a photo's subject.
- Minimum size — 88px wide on screen, 22mm in print. Below that the dot stops registering and the split stops reading.
- The dot never detaches. It belongs to the lockup — not a bullet, not a divider, not a decorative element to reuse.
- On photography, use the reversed version over an area darkened enough to clear 4.5:1, or place it on a solid panel.
Use --brand-strong for “nest” on light and the brighter green on ink. Different values, deliberately.
Reach for the one-colour version the moment full colour isn't guaranteed.
Capitalise it. Not “Datanest”, not “DATANEST” — the mark stays lowercase even where a sentence would capitalise.
Retype it. Tracking, dot size and dot offset are fixed; typing “datanest” in Geist gets none of them right.
Recolour the split — no client palettes, no seasonal variants, no gradients across the word.
Add effects or distort it — no shadows, outlines, stretching, rotation or arcs.
Someone will type “Datanest” in a deck and think it's the logo. It isn't — that's the company name in body copy, which is capitalised. The logo is the file. Write the name normally in sentences; place the asset when you mean the mark.
Colour
One green, two values — it shifts brighter in dark mode because the same value goes muddy on ink. Every swatch below is a conversion of a token already in the stylesheet, not a new colour.
None of the neutrals are true grey — each carries a 150–165° hue at 8–16% saturation. That's what makes the palette read as one family instead of green-on-default-grey. If you add a neutral, bias it the same way.
Contrast — measured, not assumed
| Pair | Sample | Ratio | Verdict |
|---|---|---|---|
| Brand strong on paper | Engineered to last | 4.94:1 | AA |
| Brand green on paper | Engineered to last | 2.50:1 | Fills only |
| Brand strong on ink | Engineered to last | 9.94:1 | AAA |
| Muted on paper | Engineered to last | 4.87:1 | AA |
| Muted on ink | Engineered to last | 7.68:1 | AAA |
--brand-strong was 156 52% 36%, measuring 4.10:1 on paper — fine for headings, short of the 4.5:1 body text needs. The site's 11–12px mono kickers use that colour, so they were failing AA. It's now 32%, which measures 4.94:1 and passes. Dark mode never had the problem.
How much of each
Green is the accent, not the field: one primary action per view, the kicker label, the hero underline, and the logo. The old bought logo's full-bleed green block was the opposite of this rule.
Type
Three faces, strict roles. This page is set in all three, so what you're reading is the specimen.
- Never mix display and body roles. Bricolage above 24px, Geist below. A Bricolage paragraph reads as a mistake.
- Tracking tightens as size grows — −0.042em at hero, −0.02em at section, 0 at body, +0.22em at kicker.
- The logo's −0.035em is its own value, not part of the text scale. Don't apply it to headings.
Surfaces
The blueprint grid, green glow and film grain are a real part of the identity, so they're specified here rather than left as one-off CSS.
Geometry
- Radius —
0.85rembase. Pills go full round; video scales it to 28px because the pixels are bigger. - Borders — always 1px, always
--border. - Elevation — light mode gets a faint shadow; dark mode uses a lighter surface instead. Never both.
Atmosphere
- Blueprint grid — 64px, or 28px for the small variant, foreground at 5%. Always masked so it never reaches an edge.
- Green glow — radial, blurred 40px. Two or three per page maximum, behind content.
- Grain — fractal noise at 40% multiply. Hero and full-bleed sections only.
Grid, glow and grain are a set — pick at most two per section. All three at once is where the treatment stops reading as considered and starts reading as a template. The logo never sits on all three.
Motion
Slow, few, and skippable. Taken verbatim from the keyframes in the stylesheet.
| Name | Spec | Where |
|---|---|---|
| fade-up | 0.9s cubic-bezier(.22,1,.36,1) | Entrances, staggered 90ms |
| fade-in | 1.1s ease | Backgrounds, images |
| float-slow | 9s ease-in-out infinite | Glow blobs only |
| ticker | 38s linear infinite | Logo cloud marquee |
- Stagger, don't scatter. One orchestrated entrance per section beats five independent ones.
- Never animate the logo. No draw-on, no dot bouncing into place, no colour-fill reveal on “nest”.
prefers-reduced-motionis non-negotiable — anything new joins that block on the same commit.
Voice
Plain, specific, unhurried. The register is a competent person explaining their work, not a company announcing itself.
We build software that people actually use.
Leveraging cutting-edge technology to deliver transformative solutions.
We build AI products, and consult on AI workflows — when AI is genuinely the right tool.
AI-powered, AI-first, AI-native everything.
From the first sketch through to launch.
End-to-end holistic delivery across the full lifecycle.
Auckland. Delivering worldwide.
A globally distributed team of world-class engineers.
- Say the specific thing. “Auckland” beats “globally distributed”. Named constraints are credibility.
- Qualify honestly. “When AI is genuinely the right tool” is the most trust-building sentence on the site.
- No exclamation marks, and none of: unlock, empower, seamless, robust, leverage.
- Buttons say what happens. “Book a time”, then a confirmation that says “Booked”.
Assets
Everything is generated from one script and one font file.
Download
Regenerating
Every file above — plus the favicons and the React component the navbar uses — comes out of one script. Letters are outlined to real vector paths through HarfBuzz, so nothing depends on a font being installed.
python business/brand/generate.pyChange a value in the spec, rerun, and every asset follows. Don't hand-edit the outputs.
The green has no Pantone match yet — a naive CMYK conversion of #41B883 lands near C65 M0 Y29 K28, which is fine for an office laser printer and not for anything a client pays for. Bright greens shift on uncoated stock, so that needs pinning against a physical swatch book once.