Hostetler Space
Brand Reference — icon, wordmark, color, and usage guide
Overview
The mark
A bold monogram "H" paired with a tilted orbital ring in the brand cyan. The ring
passes behind the H on one crossing and in front on the other two, with a subtle
width taper (thinner on the far/back arc, thicker on the near/front arc) that reads
as depth without relying on gradients or shading. No rocket, no sparkle, no stock
"space" clichés — the orbit motif alone carries the reference to hostetler.space.
Variants
Icon
Horizontal lockup
Two wordmark options: the domain-style hostetler.space for web
contexts, and title-case Hostetler Space for more formal use (documents,
letterhead, headings).
Stacked lockup
Icon centered above the wordmark, for square or tall spaces where the horizontal lockup doesn't fit — social avatars with a caption, app tiles, centered letterhead marks.
Transparent
For placing the mark over a photo, gradient, or any background whose color isn't known in advance. These have no background fill at all — a real alpha channel (PNG) or no background rect (SVG) — and the ring-to-H separation is cut as an actual transparent gap rather than a color-matched halo, so it reads cleanly on literally anything. Available in navy ink (for light/bright backgrounds) and white ink (for dark backgrounds), for the icon, horizontal lockup, and stacked lockup.
Color
Palette
Navy and cyan are the brand pair — always used together on the white and dark variants. Pure black and white are reserved for the monochrome variant only; don't substitute them for navy in the two-tone lockups.
Typography
Wordmark type
| Typeface | Poppins, Bold (700) |
|---|---|
| Letter spacing | −2px tracking at 168px font size (tightened slightly from default) |
| Case | hostetler.space — all lowercase, domain styleHostetler Space — title case, two words |
| Accent color | The second segment (.space or Space) is set in brand cyan; the rest in the primary ink color for that variant. |
In every delivered SVG, the wordmark is built from real vector outlines pulled
directly from the Poppins font file — not live, font-dependent text. That means the
files render identically on any machine, even without Poppins installed. If you ever
need to regenerate or extend the wordmark, keep using outlined glyphs rather than a
<text> element for this reason.
Spacing & sizing
Clear space
Keep at least the height of the crossbar (the horizontal bar of the H) as empty space on all sides of the mark — don't let other text, edges, or graphics encroach closer than that.
Minimum size
| Context | Minimum | Notes |
|---|---|---|
| Icon alone, digital | 32px | Sharp and legible; the ring's depth taper is fully visible. |
| Icon alone, favicon tab | 16px | Still reads as "H with a ring," but this is the floor — the taper effect and halo gap start to break down below this. |
| Horizontal lockup, digital | 120px wide | Below this the wordmark stops being legible before the icon does. |
| 0.5in / 13mm (icon height) | Standard offset print; verify on the actual stock before high-volume runs. |
Below 32px, use the monochrome or dark variant rather than the two-tone version when possible — flat single-color shapes hold up better at tiny sizes than the navy/cyan split does.
Usage
Which file, which background
| Background | Use | Folder |
|---|---|---|
| White / light (near #FFFFFF) | Standard two-tone (navy + cyan) | /lockup, root icon files |
| Brand navy #1A1C3C / dark | Dark variant (white + cyan) | /dark |
| Any other solid color, or single-ink print | Monochrome (black-on-white or white-on-black) | /monochrome |
| Photo, gradient, or unknown/variable background | Transparent (navy or white ink, no fill) | /transparent |
| Browser tab / bookmark | Favicon set (.ico + PNG sizes) | /favicon |
The white, dark, and monochrome variants are each built assuming they sit on the
exact background they were designed for — the white version on true white,
the dark version on the exact navy shown above. Don't drop those onto a different or
unknown background as a transparent cutout; the flat-color fill baked into each file
won't match. When the background isn't known in advance, use the files in
/transparent instead — those have a real alpha channel and no
background-color dependency at all.
Guidelines
Do & don't
Do
- Use the SVG whenever possible — it's resolution-independent and font-independent.
- Pick the variant that matches the exact background color (white / navy / mono), or use the transparent variant on anything else.
- Keep the icon and ring at their original proportions.
- Maintain the clear space and minimum size guidance above.
Don't
- Recolor the H or ring outside the palette on this page.
- Stretch, skew, or rotate the mark.
- Add drop shadows, gradients, glows, or bevels.
- Rebuild the wordmark in a different typeface or weight.
- Paste the white, dark, or monochrome variant onto a background it wasn't built for — use the transparent variant instead.