Logo & brand
The quicz mark fuses the two things the project is: a QUIC transport and a Zig implementation. It is one glyph, one color, identical in light and dark.
The mark
Section titled “The mark”
On light
On dark
What it means
Section titled “What it means”- Hexagon — a protocol / network node: the QUIC connection.
- Lightning bolt — Zig’s signature shape, cut as negative space so the mark stays a single color.
- The bolt as the tail — reads as a lowercase q for quicz, and as a packet in flight.
- One teal — the same fill on every surface, in every theme. No light/dark variant of the mark.
Brand color
Section titled “Brand color”#10A391
teal · rgb(16, 163, 145)
#10a391 is the brand color for the mark, links, focus states, and buttons, in
both themes. It is the brightest teal that still keeps white text legible on a
solid block (≈3:1) — push it brighter and white labels wash out. As body link
text on a white background it sits around 3.2:1, the unavoidable cost of using a
single color across light and dark.
Favicon
Section titled “Favicon”The browser tab uses the same mark (public/favicon.svg), single color, no
light/dark split.
Do
- Use the mark exactly as-is, one color, on light or dark.
- Keep clear space around it (at least the height of one hexagon edge).
- Place it on solid, calm backgrounds.
Don’t
- Don’t recolor it per theme — the whole point is one color.
- Don’t put the bolt back as a second color; the negative space is intentional.
- Don’t stretch, rotate, or add drop shadows / gradients.
- Don’t set it on busy photography or low-contrast backgrounds.
- Mark (light header):
src/assets/logo-light.svg - Mark (dark header):
src/assets/logo-dark.svg - Favicon:
public/favicon.svg
Both header files carry the same #10a391 fill; they exist as a pair only so the
theme switcher has a slot to point at.