Zostel Logo

The six-Z symbol and the lockups — drawn from the brand’s own files, never re-typeset.

Preview

Colourways

Lockups — the Brand Manual's proportions

The symbol

The wordmark — outlines, never type

Usage

tsx

import { ZostelLogo, ZostelSymbol, ZostelWordmark } from "zostel-ui";

<ZostelLogo size={36} />                          {/* horizontal lockup, 2 colours */}
<ZostelLogo size={48} layout="vertical" />
<ZostelLogo size={36} color="white" />            {/* on Steel Grey or a photo */}
<ZostelSymbol size={32} />                        {/* at 32 px and below prefer zostel-symbol-small.svg */}
<ZostelWordmark size="lg" color="#43474B" />

ZostelLogo

Prop	Type	Default	Description
`size`	`number`	`48`	The symbol’s height in px; the wordmark follows in the Brand Manual’s proportions.
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	The p87 lockup, or the p1 lockup.
`color`	`"default" \| "white" \| "orange" \| "grey" \| "black"`	`"default"`	default = Warm Orange symbol and Steel Grey wordmark (on white only); the others are one colour.
`showWordmark`	`boolean`	`true`	false = the symbol alone.
`animated`	`boolean`	`false`	A slow breath; still for reduced motion.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

size

Type: number

Default: 48

The symbol’s height in px; the wordmark follows in the Brand Manual’s proportions.

layout

Type: "horizontal" | "vertical"

Default: "horizontal"

The p87 lockup, or the p1 lockup.

color

Type: "default" | "white" | "orange" | "grey" | "black"

Default: "default"

default = Warm Orange symbol and Steel Grey wordmark (on white only); the others are one colour.

showWordmark

Type: boolean

Default: true

false = the symbol alone.

animated

Type: boolean

Default: false

A slow breath; still for reduced motion.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

ZostelSymbol

Prop	Type	Default	Description
`size`	`number`	`48`	Width and height, px.
`color`	`string`	`"#F1563F"`	One colour — Warm Orange, or white on dark grounds.
`title`	`string`	`"Zostel"`	Accessible name; "" when the name is written next to it.
`animated`	`boolean`	`false`	A slow breath; still for reduced motion.

size

Type: number

Default: 48

Width and height, px.

color

Type: string

Default: "#F1563F"

One colour — Warm Orange, or white on dark grounds.

title

Type: string

Default: "Zostel"

Accessible name; "" when the name is written next to it.

animated

Type: boolean

Default: false

A slow breath; still for reduced motion.

ZostelWordmark

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Height: 10, 12, 16 or 24 px.
`color`	`string`	`"#43474B"`	Any CSS colour (the master outline is painted through a mask).

size

Type: "sm" | "md" | "lg" | "xl"

Default: "md"

Height: 10, 12, 16 or 24 px.

color

Type: string

Default: "#43474B"

Any CSS colour (the master outline is painted through a mask).

Rules

The two-colour logo goes on white only, with clear space equal to the symbol’s height and never smaller than 24 px. As a one-colour graphic the symbol may be orange or white and may be cropped or rotated. Never type “ZOSTEL” in a font — the wordmark is a drawing. More on /logo.