01 · Our Brand
Our Brand
Introduction
These guidelines exist so the work looks like one company. Wetware Labs ships across a wide surface: booking portals, marketing sites, custom software, SEO reports and proposals. Each of those has its own client brand or none at all, and the Wetware layer sits underneath all of them. This document fixes that layer.
Everything here is expressed as tokens and ratios rather than fixed pixels, so a design handed over at one width stays true at every other width, and so the rules survive a change of tool.
Identity
Hardware, software, wetware. The stack ends at the person. Wetware Labs is named for the layer above the machine: the judgment that decides what to build, what to measure and what to tell a client. That layer is not outsourced here. The people who write the migration are the people who read the crawl.
The identity term is Operator. The tagline is Built and Operated. It is a claim about accountability, not about scale, and it is the one thing said in every context where only one thing fits.
Personality
Three traits govern every point of contact: the writing, the interface, the report, the reply to a client email at nine at night.
Trait 01
Direct
Say what will happen and what it costs. No warm-up, no recital of the client's problems back to them, no hedging a number that is already known.
Trait 02
Technical
Plain technical facts, with the working shown. A report reads like an engineer wrote it, because one did. Precision is the courtesy.
Trait 03
Accountable
One name is on the work. When something breaks it gets stated, dated and fixed in the open, and the fix gets written down so it does not recur.
Design Philosophy
The aesthetic is Terminal Modern: the discipline of a monospaced console, drawn with current typographic care. A terminal has no colour, one weight of rule, a fixed grid and no ornament, and it is still the most information-dense surface most of us use. That is the constraint we design under.
It is why the palette has no hue, why labels and data are set in mono, why every division in the system is a single hairline, and why the wordmark's reversed E reads as a terminal glyph rather than a logotype flourish. The restriction is the identity. Anything that needs colour to work has not been designed yet.
02 · Foundation
Foundation
Logo
The wordmark is a drawing, not a setting. Letters interlock: the W and the reversed E share a stem, the second W and the A share a diagonal. It cannot be reproduced by typing the word in any typeface. Always place the supplied vector.
Wordmark · ink on paper · 1262 : 192
Wordmark reversed · paper on ink
Symbol · the reversed E, lifted from the wordmark · 135 : 192
Symbol geometry, given as ratios of cap height H. Reproduce from the file, not from these numbers.
| Variant | Screen | Clear space | |
|---|---|---|---|
| Wordmark | 96px wide | 25mm wide | 50% of cap height, all sides |
| Signature | 140px wide | 36mm wide | 50% of cap height, all sides |
| Symbol | 16px | 4mm | 25% of symbol height, all sides |
Background safety
The mark is one flat colour, so on any ground you place whichever of the two reads. It needs 7:1 against that ground to hold at small sizes, and the middle of the tint range cannot give that in either colour. Ratios below are computed from the live tokens, so the unusable band moves correctly between themes.
Things to avoid
- 01Do not add shadow, glow, bevel or any effect.
- 02Do not fill it with a colour, tint or gradient.
- 03Do not outline it or knock it out to a stroke.
- 04Do not stretch, condense, skew or rotate it.
- 05Do not re-set the word in a typeface.
- 06Do not un-reverse the E. It is the mark.
- 07Do not place it on a busy or mid-tone ground.
- 08Do not put anything inside the clear space.
- 09Do not ship it as a low-resolution raster.
Signature and co-branding
The full signature is the wordmark plus LABS in Geist Mono, uppercase, tracked +0.2em, cap-aligned, with a gap of half the wordmark cap height. Next to a partner mark, leave a gap of 1.5 times the taller mark's cap height and match optical weight rather than bounding box.
Font
Two faces, no more. Geist Sans carries everything a person reads. Geist Mono carries everything a machine produced: labels, data, identifiers, code, and the word LABS in the signature. If a piece of text is a fact rather than a sentence, it is set in mono.
Sizes are given in pixels at the two design widths. Leading is a percentage, tracking is in em, so both survive scaling. The rule across the whole scale: tight and negative above 20px, loose and zero below it, nothing in between.
Built and Operated.
The layer above the machine
Search, software and the operator who runs both
Body copy runs at 180% leading and zero tracking, held to roughly 65 characters a line. Long-form technical writing is the default case here, not the exception, so the setting is tuned for a reader working through a crawl summary rather than skimming a headline.
wetwareofficial.com · build 1.0.0 · 2026-08-25
Technical SEO · Custom Software
| Role | Desktop | Handheld | Leading | Tracking | Face |
|---|---|---|---|---|---|
| Display | 90 | 40 | 96% | -0.03em | Sans 500 |
| Title | 56 | 32 | 106% | -0.03em | Sans 500 |
| H1 | 40 | 28 | 110% | -0.02em | Sans 500 |
| H2 | 28 | 22 | 113% | -0.02em | Sans 500 |
| H3 | 20 | 18 | 150% | -0.01em | Sans 500 |
| Body L | 18 | 16 | 170% | 0 | Sans 400 |
| Body | 16 | 15 | 180% | 0 | Sans 400 |
| Body S | 14 | 14 | 170% | 0 | Sans 400 |
| Caption | 13 | 12 | 150% | 0 | Sans 400 |
| Label | 13 | 13 | 150% | +0.04em | Mono 400 |
| Eyebrow | 12 | 12 | 100% | +0.2em | Mono 400 caps |
Colour
There is no brand hue. The palette is a neutral ramp and the two roles it fills. Ink is foreground, paper is surface, and the two swap between themes. Nothing else changes, which is why light and dark are one system rather than two stylesheets.
Values are stored as bare RGB triplets so opacity is applied where it is used: rgb(var(--ink-0) / .12). That single expression is also the only divider in the system.
Roles, current theme
The ramp
Zinc 50 through 950. Tokens draw from this ramp and nothing outside it.
Line
One weight only: 1px. Hairline is ink at 12%, which is the same value as the opaque zinc-800 on a zinc-950 ground. A stronger rule at 24% is available for hover and active states. There is no 2px rule and no double rule.
The one exception
A single error state exists for screen interfaces, because a destructive action has to read as one. It never appears on a branded document, a report, a deck or any print surface. Those stay black and white.
Iconography
Icons are drawn on a 24px box with a 20px live area and a 2px keyline margin. Stroke is 1.5px with butt caps and mitre joins, matching the flat terminals of the wordmark. No rounded caps, no filled icons, no two-tone.
Imagery
Most Wetware imagery is a screenshot of real work. That is the honest asset for a company whose output is software and search, and it is preferred over any photograph.
Do
Capture at 2x with real content and real numbers. Crop on the grid. Desaturate anything that carries a client's colour so it does not compete. Grain and screen texture are acceptable.
Do not
No stock photography of people at desks. No glossy 3D renders, neon or lens flare. No blurred fake dashboards. No mock data presented as a result. No client logo used as decoration.
03 · Components
Components
Grid
The viewport is always exactly 39 units wide on handheld and 144 units wide on desktop. One unit is 10px at the design width, 390 and 1440. Past 1800px the unit stops growing and the surplus becomes symmetric outer margin, so content never exceeds 1800px and the page never letterboxes.
Every layout value in the system is written as calc(var(--u) * n). Nothing is a hard-coded pixel. That is what makes a design handed over at 1440px true at every other width.
- Viewport
- —
- Units across
- —
- One unit
- —
- Outer margin
- —
| Measure | Units | Desktop | Handheld |
|---|---|---|---|
| Design width | 144 / 39 | 1440px | 390px |
| Page margin | 8 / 2 | 80px | 20px |
| Page column | 128 / 35 | 1280px | 350px |
| Document column | 92 | 920px | full |
| Prose measure | 64 | 640px | full |
| Side navigation | 26 | 260px | hidden |
| Unit cap | 1 | 12.5px | n/a |
Button
Height 40px, or 4 units at the design width. Padding 20px. Radius 8px. Label in Body S at +0.02em. Two forms only: filled for the single primary action on a view, ghost for everything else. Hover is 150ms on the micro curve.
Filled
Ghost
Tag and Field
Tags are outline only, pill radius, mono at 11px with +0.12em tracking. They classify; they never carry status colour. Fields are 40px, 8px radius, hairline border, and the focus state moves the border to 24% rather than adding a ring.
Table
Header row in mono caps at 11px, +0.16em, on paper-1. Data in Body S. Rules are hairlines on the horizontal only; there are no vertical rules and no zebra striping. Numbers are tabular and right-aligned to the column, never centred.
| Asset | Format | Colour | Min size |
|---|---|---|---|
| Wordmark | SVG, currentColor | 1 | 96px |
| Signature | SVG plus live text | 1 | 140px |
| Symbol | SVG, four rectangles | 1 | 16px |
| Wordmark, raster | PNG, transparent | 1 | 192px |
Motion
Four curves and five durations. Motion clarifies a change of state; it is never the subject of a page. Anything that would still be moving after a reader has stopped looking at it does not ship.
| Token | Curve | Use |
|---|---|---|
| ease-out | .3, .2, 0, 1 | The default. Anything leaving or settling. |
| ease-enter | .24, .12, .09, 1 | Panels, sheets and menus arriving. |
| ease-micro | .25, .1, .2, 1 | Hover, focus, toggles. |
| ease-reveal | .1, .5, .3, 1 | Scroll reveals only. |
Durations: 150, 300, 400, 600, 800ms. Nothing else. Radius: 3, 5, 8, 10, 15, pill.
Breakpoints
Stated as behaviour rather than numbers, because four of these five fall out of the unit engine without any media query at all.
| Width | Behaviour |
|---|---|
| up to 359 | Scales down as it would at 360. |
| 360 to 1023 | Handheld design. Only the width changes. |
| 1024 to 1279 | Scales down as it would at 1280. |
| 1280 to 1800 | Desktop design. Only the width changes. |
| 1801 and above | Unit is capped. Left and right margins expand. |
04 · Assets and Voice
Assets and Voice
PR Assets
Profile icon is the symbol on paper-0, symbol height at 40% of the canvas, optically centred rather than mathematically centred. The OGP card is a paper-0 field with the wordmark at 30% of canvas width, sitting bottom-left on the page margin, with one line of eyebrow above it.
| Surface | Size | Contents |
|---|---|---|
| YouTube | 800 × 800 | Symbol |
| X | 400 × 400 | Symbol |
| 400 × 400 | Symbol | |
| 320 × 320 | Symbol | |
| 320 × 320 | Symbol | |
| Open Graph | 1200 × 630 | Wordmark, eyebrow line |
Voice
The writing rules are part of the identity, not a style preference. They are enforced on every client-facing surface.
Rules
No em dashes, en dashes or double hyphens. Use a period, a semicolon or a colon.
Black and white only on branded documents. No colour in text or charts.
The interpunct ( · ) is the only separator.
Stance
Do not recite the client's pain points back to them. State what we will do.
No revenue projections in SEO reports. Let the metrics speak.
Plain technical facts. Not onboarding voice, not first-person persuasion.
| Identifier | Correct form |
|---|---|
| Company | Wetware Labs, or Wetware Labs LLC in legal and financial contexts |
| Wordmark | WETWARE, always with the reversed E, never spelled out in prose |
| Domain | wetwareofficial.com, and no variant of it |
| Contact | kasen@wetwareofficial.com |
Downloads
The marks are supplied as vectors that inherit currentColor, so they take the ink of whatever they are placed in. Use them under the terms below.
Logo pack
Wordmark, symbol and raster
SVG for both marks, plus a transparent PNG of the wordmark for surfaces that cannot take a vector.
Download →
Design tokens
CSS, Tailwind and JSON
The role colour, type, radius and motion tokens, the Tailwind v4 bridge, and the unit engine that drives the grid.
Download →
Terms of use
The Wetware Labs marks are the property of Wetware Labs LLC. They may be used to refer to Wetware Labs in press, editorial coverage, partner materials and client work we have delivered.
They may not be used to imply endorsement, partnership or authorship where none exists; altered, redrawn, recoloured or incorporated into another mark; or used in a way that damages the brand. When in doubt, ask before you publish.
The design tokens carry no such restriction. They are published so that anyone building with us, or for us, produces work that matches. Take them.
Questions
Anything this page does not answer, or a use you are unsure about: kasen@wetwareofficial.com.