A blank sheet, on the platform beneath it.
The name is the idea. Whity is a white-label platform, so the surface belongs to whoever builds on it and the substrate underneath is ours. These pages cover the mark and the name — the software itself is AGPL-3.0 and governed separately.
Two planes, and the gap between them.
Everything the mark has to say is in the relationship between the two shapes, so that relationship is the thing to protect.
The substrate is the platform: it carries the brand blue, because it is the part that is ours. The sheet resting on it is blank, because it is the part that is not — in a white-label deployment it is someone else's logo, someone else's tokens, someone else's product name.
It reads several ways at once and all of them are true: layered planes for a platform and the things built on it, a sheet of paper for a product whose core surface is documents, and a blank white square for a name that means exactly that.
The offset is the load-bearing detail. Reduce it and the two planes collapse into one shape; increase it and they stop reading as stacked. It stays as drawn.
Drawn on a 32-unit grid: substrate 18×18 at (3.5, 10.5), sheet 17.5×17.5 at (11.25, 3.25), both with a 4.25 corner radius and a 2.5 stroke.
Four files, and when to use each.
All SVG. There is no raster version on purpose — the mark is geometry, so it should scale.
Primary mark
The default. Its outline follows the text colour and its sheet follows the surface, so it sits correctly in light and dark without a second file.
whity-mark.svg ↓
Favicon
Self-contained: literal colours plus its own dark-mode block, because page CSS never reaches an icon loaded through a link tag.
whity-favicon.svg ↓
Single colour
For stamps, embroidery, laser etching, or any print where the brand blue cannot go. Avoid placing it on the brand blue itself — the contrast collapses.
whity-mark-mono.svg ↓
Lockup
Mark and wordmark together, for READMEs, slides, and anywhere the name is not already on screen.
whity-lockup.svg ↓
Give it room, and do not shrink it past legibility.
Clear space
Keep free space on every side equal to a quarter of the mark's height. Nothing — type, rules, photography, another logo — enters that margin.
Minimum size
16px on screen — the favicon case, and the size the geometry was tested at. In print, 6mm. Below that the two planes stop separating and it becomes a smudge; use the single-colour version instead.
What breaks it.
Each of these destroys the one relationship the mark depends on.
One blue, and a lot of paper.
These are the product's own design tokens, generated from a single source to CSS, JSON and Dart — not a palette invented for a brand page.
Everything except the blue is neutral — zero chroma, no hue. That is deliberate: a white-label platform should not impose a colour on the product built with it, so the palette stays out of the way until a tenant supplies its own.
--brand: oklch(0.5 0.16 255); /* light */
--brand: oklch(0.7 0.15 255); /* dark */The geometry leaves the logo.
A logo that only appears in the header is a sticker. These three rules carry the mark's geometry into the product itself, and the third one is what stops it becoming wallpaper.
Corners are 24% of the short side
Every plane in the mark is rounded to about a quarter of its width. A 2.5rem control lands at 0.6rem and panels scale up from there, so nothing in the interface has a radius picked by eye.
The offset is quoted, not scaled
In the mark the two planes are offset by 43% of their size. At that ratio a button would look like a cartoon, so the interface states the relationship at 3px and widens it to 5px on hover instead of reproducing it.
It marks where you can act
Filled buttons wear the substrate always; clickable cards reveal it on hover; the one band per page whose whole job is to be acted on wears it statically. Informational panels never do. That restraint is the only reason it still means something.
The filled button is the sheet and its shadow is the substrate. The outlined button next to it is already the mark's front plane on its own — elevated surface, visible edge — so it stays flat and the hierarchy reads without a second colour.
In Arabic the layout mirrors and the substrate does not, for the same reason the mark does not mirror — see Arabic. A motif leaning one way while the logo above it leans the other reads as a bug, not as a direction.
/* The substrate, as a hard-edged box-shadow rather than a
pseudo-element: it inherits the element's own border-radius and
needs no stacking context to sit behind the sheet. */
--plane-offset: 0.1875rem;
--plane-lift: 0.3125rem;
.btn-primary {
border-radius: var(--radius); /* 24% of the 2.5rem height */
box-shadow: calc(var(--plane-offset) * -1)
var(--plane-offset) 0 0 var(--accent);
}
.btn-primary:hover {
box-shadow: calc(var(--plane-lift) * -1)
var(--plane-lift) 0 0 var(--accent);
translate: 1px -1px; /* the sheet lifts off */
}What the blue plane is.
A blue rectangle behind a white one is a colour choice. Naming it turns it into an idea, and the name was always available: the plane underneath is the drawing, and the sheet on top is what gets handed over.
So wherever a surface explains how Whity works underneath — the architecture, the tenancy model, the plugin boundary, the agent surface — the plane stops being a colour and becomes the drawing it stands for: blue ground, a measured grid, white lines.The documentation site is drawn the same way, for the same reason.
The rule that keeps it honest is the same one that governs the substrate: it means something specific. A blueprint band is for the machinery under the product. Marketing copy, pricing, policies and anything a customer would put their own name on stay on paper, because those are the sheet, not the drawing.
It does not invert with the theme. These bands are a different material from the rest of the page, and a blueprint that turned grey at night would stop being one.
The sheet, on the drawing
A panel like this one is the other half of the mark: the blank surface the customer's own brand goes on, resting on the plan that produced it. It carries no substrate plane of its own — it is already sitting on one, and drawing a second would say the ground is not the ground.
Three faces, all open.
The same families the product ships in packages/tokens, self-hosted rather than fetched from a CDN.
The mark does not mirror.
Layout mirrors in right-to-left; the logo does not. The mark keeps its offset in every direction — mirroring it would make two different marks, and a mark that changes shape by locale stops being an identifier.
In a right-to-left lockup the mark moves to the right of the name, because that is where the line begins. Its own geometry stays exactly as drawn.
Same mark, same orientation, opposite side of the name.
The code is free. The name is not.
Summarised here for convenience. Thetrademark policyis the authority, and it exists to be used rather than enforced.
No permission needed
- Running, modifying, deploying and selling services around Whity Core, on the AGPL's terms.
- Saying what is true — "built on Whity", "compatible with Whity", "Whity hosting".
- Forking it, under a different name.
- Writing about it: tutorials, courses, talks, reviews, favourable or not.
- Publishing plugins named for what they do — "Invoicing for Whity".
Ask first
- Naming a product, company, domain or package Whity, or anything confusable with it.
- Shipping a modified Whity Core still called Whity. Fork freely; rename when you do.
- Using the logo or wordmark as your own branding, or in a way implying endorsement.
- Claiming to be official, certified or a partner without an agreement saying so.
Replacing the branding is the supported path.
Whity Core has a branding subsystem: the name, logo and theme can be replaced in your own deployment, and design tokens are overridable per tenant. For white-label use that is the correct route, not an exploit of one — it is what the product is for, and what this mark depicts.
Two conditions come with it, both from the trademark policy: a white-labelled deployment must not be presented as "Whity", and Whity must not be named as the source of your product's warranties or support. Your customers should know who to call, and it is you.