WebBoss brand and logo
A crown on a rounded dark square, with a green center point. The downloads below include SVG and PNG versions for websites and browser icons.
Logo sizes
Use at least 16 px for a browser icon. Larger sizes are shown above for comparison.
On a dark canvas
Use the light tile and dark crown on dark backgrounds, as in the site footer.
Parts of the logo
- The tile. A rounded dark square.
- The crown. Two white outer points and a white base.
- The center point. A green accent between the white points.
Logo colors
In a browser tab
SVG favicon for current browsers, with 32 px PNG and a 180 px Apple touch icon as fallbacks, all generated from the one mark.
Usage rules
Do
- Give it room: clear space ≈ half the tile.
- Flip to the inverted mark on dark.
- Let olive-lime be the only color in the mark.
Don't
- Recolor the tile or the crown.
- Add a gradient, shadow, or glow.
- Stretch, rotate, or outline it.
Layout, type, and color
Use readable text, project screenshots, and enough space to separate sections. Keep decoration secondary to the content.
Group related content and make the next action easy to find. Use different layouts for projects, writing, and contact information.
Bricolage Grotesque for headings, System UI for body text, and JetBrains Mono for dates, handles, and numbers.
A light background with dark text. Use clay for links and green for headings, selected buttons, and the logo's center point. Use red for form errors.
Thin borders separate sections. Shared components use rounded corners and a maximum content width of 1140px; the homepage uses smaller corner radii.
The homepage heading stays still. Hover and scroll effects respect prefers-reduced-motion.
A white crown with a green center point on a dark rounded square. Use the inverted version on dark backgrounds.
Use real screenshots and photographs. Label placeholders and examples. Do not invent results or statistics.