CompareHypervisors
A comparison site earns its authority by looking like it has nothing to sell. So the identity spends almost no colour on itself: ink on warm paper, one graphite mark, and a clear rule that the only hues on any page belong to the vendors being compared.
Name and domains
One name, one address, one short alias
The site is CompareHypervisors and it lives at comparehypervisors.io — that is the address in every link, canonical tag, sitemap entry and footer. comparehy.io is a short alias that 301-redirects there, path and all, so it is fine to share but never competes for a search result.
Set the name closed, as one word: CompareHypervisors. CompareHy is the short form, used only where the full lockup will not fit. Never “Compare Hypervisors Inc”, never “HyCompare”.
The mark
Two chevrons, converging on a gap
The map marks every clickable row with inward chevrons, ‹ ›.
The mark is that gesture turned into a tile: two stacks brought to a shared line, with
the space between them left open. The gap is the point — CompareHypervisors exists to name what
does not line up, not to claim the two sides are the same thing.
Construction
Drawn on a 24-unit grid: a tile with a 25% corner radius, chevrons at 2-unit stroke with round caps and joins, apexes at 9.6 and 14.4 so the centre gap survives down to favicon size.
Minimum size
16 px for the mark alone. The full lockup needs about 200 px; below that use the CompareHy compact lockup, and below 110 px drop the wordmark entirely and use the tile.
Clear space
Keep clear space equal to the tile’s corner radius on every side — a quarter of the tile height. The wordmark sits a third of a tile-width from it.
Colour
An achromatic brand over a reserved data palette
Five hues on this site carry meaning: one each for VMware by Broadcom, Nutanix, Microsoft Hyper-V and Proxmox VE, and one that means “nothing on that side does this job.” A brand hue of its own would compete with them and quietly undercut the neutrality claim. So the brand layer is warm greyscale and stays that way.
Brand layer
--brand-ink |
L #17160FD #F2F1EA | Headlines, wordmark, the one emphatic weight. | |
--brand-accent |
L #4A463CD #C9C2AC | The mark tile. The only deliberate brand hue. | |
--brand-paper |
L #f3f2ecD #141413 | Masthead band, one step off the page ground. | |
--brand-rule |
L #d9d8cdD #2b2a26 | Hairlines that divide brand chrome from content. | |
--plane |
L #f9f9f7D #0d0d0d | The page ground the map sits on. | |
--ink-2 |
L #52514eD #c3c2b7 | Secondary prose, sub-labels, captions. |
Data layer — reserved, never borrowed for chrome
--vcf |
L #005C8AD #2E8FBE | VMware by Broadcom. Read live from vmware.com. | |
--ntx |
L #7855FAD #8A6DFB | Nutanix. Read live from nutanix.com. | |
--hv |
L #8A5A0AD #D9A441 | Microsoft Hyper-V. A deep gold, kept apart from the Proxmox orange by value as well as hue. | |
--px |
L #B85400D #DD7F2B | Proxmox VE. Darkened from the vendor orange so white text clears 4.5:1 on it. | |
--gap |
L #C25139D #E0776B | No equivalent on that side. Chosen to hold its separation from the VMware blue under protanopia. |
The VMware and Nutanix hues are the ones those companies use on their own sites today, read from the live pages rather than a brand aggregator. The Hyper-V gold and Proxmox orange are adjusted from the vendors' marks so that every fill carries the same text colour (white in light mode, near-black in dark) at 4.5:1 or better. The gap terracotta was picked to stay separable from the VMware blue for red-green colour vision deficiency, which is why it is not the obvious red.
Typography
Archivo for the brand, system sans for the data
Archivo — display
Product for Product
Nothing on Nutanix
Direct equivalents
Hypervisor & Compute
Headings, the wordmark, tile labels, column headers and
buttons. A grotesque with enough width and a tight fit at display sizes; set with
letter-spacing:-.02em. Uppercase labels get
word-spacing:.14em, because Archivo’s word space is narrow and
tracked capitals close it up.
Subset to Latin and embedded as a data URI, so the page still makes zero network requests.
System sans — data
vSAN ESA
Single-tier NVMe, RAID-5/6
Every row of the map, every sub-label, every piece of commentary. The table is dense and its column widths are tuned to these metrics; it also renders instantly, before any webfont resolves.
The split is the point: brand layer and data layer never wear the same clothes.
Page chrome
Masthead, then get out of the way
Masthead
A full-bleed band in --brand-paper with a single hairline under it.
Lockup left, one sentence of positioning right. It scrolls away; the map’s own
sticky header takes over from there, so the brand never competes with the data.
Colophon
Closes every page: what CompareHypervisors is, the month the comparison was researched, links to the methodology and privacy notice, and the trademark notice. The verification date is not decoration — editions and packaging move, and a comparison with no date on it is worth less than no comparison.
Voice
Name the product, state the gap, skip the verdict
Do
- Name a real, current product on each side, or say plainly that there is none.
- Say which edition or add-on carries it, including when that is the expensive part.
- Flag pairings that line up on paper and are uneven in practice.
- Date the verification and cite the vendor page.
- Title Case product and capability labels; leave brand casing (vSAN, vMotion) alone.
Don’t
- Declare a winner, or let tile counts imply one.
- Use a vendor hue for anything that is not that vendor.
- Carry a legacy product name as if it were current.
- Quote prices — packaging changes faster than the page does.
- Imply affiliation or endorsement by anyone.
Assets
What ships with the site
index.html | The map, self-contained: styles, script, font and mark all inline. No external requests. |
og-home-v2.png | 1200×630 social card, referenced by the Open Graph and Twitter tags. |
favicon.svg | Theme-aware tile; also inlined into the page as a data URI. |
logo.svg | Horizontal lockup for light grounds. Wordmark is outlined, so it needs no font. |
logo-dark.svg | Same lockup for dark grounds. |
logo-compact.svg | The CompareHy short lockup, for narrow widths and the comparehy.io alias. |
logo-compact-dark.svg | Same short lockup for dark grounds. |
mark.svg | Tile alone, for avatars, app icons and tight spaces. |