Brand and logo assets
The marks, the palette, and the rules for using them. Everything here is free to use for editorial, educational, and community purposes under the terms further down the page.
SVG, 6 files, light and dark variants
The marks
The identity is a forward-leaning W cut by a band of negative space, set against an italic wordmark that leans with it. The monogram is not a badge beside the name, it is the W of WebJs, and one slice cuts the whole lockup as a single object. Every mark is greyscale.
Lockup
The default. Use it wherever there is room for the full name: headers, footers, title slides, README banners.
webjs-lockup-on-dark.svg ↓
Lockup, light backgrounds
The same drawing with the ink flipped for a light surface. Use this file rather than a CSS invert, which flips the paper along with the ink.
webjs-lockup-on-light.svg ↓
Monogram
For square and cramped placements: avatars, favicons, app icons, stickers, a multi-brand logo row.
webjs-monogram.svg ↓
Monogram, light backgrounds
The same tile inverted, for a light surface. Bare W files with no tile at all are in the download, for placing on a background of your own.
webjs-monogram-on-light.svg ↓Clear space and minimum size
Both rules are expressed in one unit, the height of the monogram in the lockup. Call it W. Measuring against the mark itself means the rules hold at any scale without a table of pixel values.
Keep 1 W clear on every side
Nothing enters the shaded zone: no text, no rules, no other logo, no busy part of a photograph. When in doubt, give it more.
24 px
monogram floor
96 px wide
lockup floor
Below the floor, switch marks
The lockup stops being readable under 96 px wide. Use the monogram instead of shrinking it further. The slice through the W thins out below 24 px and the mark degrades to a plain W, which is intended.
Do not distort
Scale proportionally. Never stretch, squash, skew, or rotate the mark, and never adjust the lean, which is already part of the drawing.
Do not recolour
Use a supplied variant. Do not apply your own gradient, drop shadow, or outline, and do not repaint the slice as a solid bar.
Do not redraw
Do not set the name in another typeface and call it the lockup, and do not rebuild the W from a font glyph.
Do not imply endorsement
The marks may not suggest that WebJs sponsors, reviews, or is affiliated with your project without written permission.
Colour
Dark is the primary theme and light is a translation of it, not a separate design. Neutrals carry the page: they hold a trace of warmth and nothing more. The marks are greyscale, so the palette below is the product's, not the identity's. Every chip is painted with the token it names.
Dark, the primary theme
--bg
--bg-elev
--bg-subtle
--bg-sunken
--fg
--fg-muted
--fg-subtle
--border
Light, the translation
--bg
--bg-elev
--bg-subtle
--bg-sunken
--fg
--fg-muted
--fg-subtle
--border
One accent, spent where it counts
A single warm amber fills the primary button and the closing call to action, and marks live and focus state. Those are the surfaces asking for a click. Everything else stays neutral, which is what makes them land. The marks themselves carry no colour at all, so the identity survives wherever the accent cannot go.
Dark
--accent
--accent-fg
--accent-live
Light
--accent
--accent-fg
--accent-live
Where it is allowed to appear
Typography
Four faces, each with one job. The three brand faces are variable and self-hosted. The editorial serif is deliberately a system stack, so it costs zero bytes and renders in the reader's native voice.
Ag
Editorial serif
Hub titles, docs headings, and long-form pages. A system serif stack (ui-serif), the reading voice beside the geometric brand faces.
Ag
Inter Tight
Headlines and section headings, at weight 700 to 800 with tracking pulled to -0.03em.
Ag
Inter
Body prose, ledes, navigation, and everything in the documentation, at 1.6 line height.
Ag
JetBrains Mono
Code, terminal commands, token names, and version tags. Never used for running prose.
Writing the name
The name is a proper noun and takes one capitalisation, WebJs, everywhere it appears in prose. It stays lowercase only as a literal code token.
Correct
WebJs ships without a build step.
Most WebJs apps run on Node 24+ or Bun.
Run webjs dev to start.
Incorrect
WEBJS, WebJS, Webjs, web.js, Web JS
Lowercase is correct here
The CLI (webjs create),
the packages (@webjsdev/core),
the domain (webjs.dev), and the repository path. The lockup
itself is set as WebJs, matching the prose.
Permission and trademark
The framework is MIT licensed. The marks are not covered by that licence, because a logo has to keep meaning one thing to be worth anything.
You may, without asking
Use the marks unmodified to refer to WebJs in articles, talks, documentation, courses, and comparisons. State that your project is built with WebJs, and link to this site.
Please ask first
Merchandise, a modified mark, a name or logo confusingly similar to this one, or any use that implies partnership, sponsorship, or official status.
If you are unsure, open a discussion on GitHub and ask. The answer is usually yes.