WebBoss brand and logo

WebBoss mark WebBoss.

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

Mark at 120px120
Mark at 64px64
Mark at 32px32
Mark at 16px16

Use at least 16 px for a browser icon. Larger sizes are shown above for comparison.

On a dark canvas

WebBoss mark, inverted WebBoss.

Use the light tile and dark crown on dark backgrounds, as in the site footer.

Parts of the logo

WebBoss mark, large
  • 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

Graphite
Tile · hero · footer
oklch(22% .018 50)
#26201b
Clay
Interactive · links
oklch(54% .16 35)
Olive-lime
Logo center point
oklch(74% .15 138)
#a4c466
Paper
Canvas (warm-neutral)
oklch(98.5% .004 70)

In a browser tab

WebBoss — Will Scott searchengineland.com

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.

Layout

Group related content and make the next action easy to find. Use different layouts for projects, writing, and contact information.

Type

Bricolage Grotesque for headings, System UI for body text, and JetBrains Mono for dates, handles, and numbers.

Color

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.

Surface & space

Thin borders separate sections. Shared components use rounded corners and a maximum content width of 1140px; the homepage uses smaller corner radii.

Motion

The homepage heading stays still. Hover and scroll effects respect prefers-reduced-motion.

The mark

A white crown with a green center point on a dark rounded square. Use the inverted version on dark backgrounds.

Content

Use real screenshots and photographs. Label placeholders and examples. Do not invent results or statistics.