The webatla brand, applied to itself
Download the mark, copy the palette, check the rules. Everything on this page follows the guidelines it documents.
{"brand": "webatla", "case": "lowercase", "mark": "cloud-on-data", "primary": "#13715b", "accent": "#cc3366", "fonts": "system", "since": 2019}The mark
A teal cloud in two halves resting on a light data panel with five dark dots. The web's cloud sitting on rows of structured data. Drawn flat in a 512 square, no gradients.
viewBox: 512x512 · format: flat SVG · backgrounds: white, soft grey, navy, teal soft
Every file on this page in one archive, plus a README with the palette. If you download one file, make it this one.
webatla-mark.svgSVG · vectorThe primary mark as vector. The default choice for web, product, and print. Scales to any size without loss.
webatla-mark-512.pngPNG · 512
Raster export at 512 by 512, transparent. For avatars, chat tools, and anywhere SVG is not accepted.
webatla-mark-1024.pngPNG · 1024
Raster export at 1024 by 1024, transparent. For press kits and large placements.
webatla-mark-mono.svgSVG · mono
Single color silhouette of the cloud. For pinned tabs, engraving, and one color print. Tint it with any single brand color.
Mark, lockup, or mono
Three forms cover every placement. Pick by the space you have and the color you can print.
webatla
The mark alone
Use it when space is tight or the name already appears nearby. App icons, avatars, social profiles, favicons.
The lockup
The mark plus lowercase webatla set heavy at weight 800, ink #303642, with a tight gap. Use it in headers, documents, and slides where the mark needs its name.
The wordmark is a system font
webatla ships no webfonts, for privacy and performance. The wordmark renders in the reader's native UI font. It will differ slightly across platforms. That is by design, not drift.
The monochrome mark
Use it where only one color is available. Tint it with any single brand color. Never apply a single tint to the full color mark.
Clearspace and minimum size
Two numbers to remember. One dot of space, 24 pixels of size.
min-size: 24px on screen
Below 24 pixels the five dots merge. For tiny spots use the monochrome silhouette instead.
Measure the height of one square dot in the mark. Keep at least that much clear on all four sides. Nothing enters the zone. Not text, not other logos, not the canvas edge.
Color
The working palette is small on purpose. Click any swatch to copy its hex.
mark colors (never change them, never reuse them as UI colors)
Type
No webfonts, by principle. Text renders in the reader's own system stack, which keeps pages fast and requests private.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
role: headings and UI · stack: system sans · weight: 700 to 800 for headings, 400 for body
role: data, filenames, hex, code · stack: system mono · numbers in tables lean mono so columns align
Brand materials use these two stacks and nothing else. No display fonts, no scripts, no downloads.
Do not
Six ways to break the mark. Each card shows the real file abused live, so you can recognize the mistake.
Do not recolor
The full color mark ships in its five colors. Change none of them.
Do not stretch
The viewBox is square. Keep it square. Scale uniformly, never fit to a box.
Do not rotate
The cloud sits level on its panel. Zero degrees, always.
Do not add effects
The mark is flat. No shadows, no outlines, no glows, no gradients.
Do not tint the full color mark
Only the mono mark takes a tint, and only one brand color at a time.
NEW!Do not crowd
Respect the one dot clearspace. Text, badges, and edges stay outside it.
And never redraw it. No tracing, no rebuilding, no approximating. Use the files from this page, nothing else.
The name
One word, lowercase, everywhere.
Always lowercase
webatla is written lowercase as one word, even at the start of a sentence. Not Webatla, not WebAtla, not Web Atla.
One line to describe it
The whole internet in one JSONL file. Use this line as is for press and partner pages.
About the company
webatla is a small company in cybersecurity and domain data, working since 2019. It is fine to say small. It is accurate.
Take the whole kit
Every mark on this page in one archive, with a README that carries the palette. If a use is not covered here, ask before improvising.