# velniq — Brand Guidelines

**v1.0 · July 2026**

velniq builds precise, trustworthy software tools. The brand is clean, technical, and confident: a gradient teal "V" with a subtle 3-D fold, paired with a lowercase black wordmark. Everything in this document exists to keep that mark consistent everywhere it appears.

> Scope: this is the **corporate identity** for velniq. Product UIs (e.g. LayoutLock Translate) keep their own design systems — do not mix the velniq teal palette into product component styling; use it for velniq-branded surfaces: website, marketing, docs covers, decks, social.

---

## 1. Logo system

Four lockups, each in six variants. The masters live in `png/` (high-res, transparent).

| Lockup | File | Use when |
| --- | --- | --- |
| **Icon** (V only) | `velniq-icon.png` | Avatars, favicons, app icons, tight square spaces |
| **Wordmark** (velniq only) | `velniq-wordmark.png` | When the V icon is already visible nearby |
| **Horizontal lockup** (V + velniq + tagline) | `velniq-lockup-horizontal.png` | Default. Headers, footers, docs, email, wide banners |
| **Vertical lockup** (V above velniq + tagline) | `velniq-lockup-vertical.png` | Square/portrait spaces: social cards, splash screens |

**Tagline:** *"Intelligent products. Real impact."* — set in the lockup artwork with a teal dot on the "i" of *impact*. It ships only inside the two lockups; don't typeset it as a separate lockup element. When written in copy, it's a normal sentence pair (no special styling). Note the lockups' minimum sizes exist partly so the tagline stays legible — if it would render too small to read, use the wordmark or icon instead.

**Variant folders:**

| Variant | Folder | Use when |
| --- | --- | --- |
| Full colour | `png/` | Default, on white or light backgrounds |
| On-dark (white text, colour V) | `png/on-dark/` | **Any dark background** — black text is invisible on dark |
| All black | `png/black/` | Single-colour print, engraving, fax, stamps, light watermarks |
| All white | `png/white/` | Single-colour on photos, dark print, dark watermarks |
| Greyscale | `png/grey/` | Newsprint, greyscale print, "past sponsors" strips |

**Rules of thumb**
- Default choice is the **horizontal lockup, full colour, on white**.
- Background luminance decides colour vs on-dark: if you'd struggle to read black text on it, use `on-dark/`.
- Never place the full-colour logo on mid-tone teal/green backgrounds — the V disappears. Use black or white variants there.

## 2. Clear space & minimum sizes

Let **V** = the height of the V icon in the lockup you're using.

- **Clear space:** keep at least **½ V** of empty space on all sides. Nothing else (text, edges, other logos) enters this zone.
- **Minimum sizes (digital):** icon 24 px; wordmark 90 px wide; horizontal lockup 120 px wide; vertical lockup 96 px tall.
- **Minimum sizes (print):** icon 8 mm; horizontal lockup 30 mm wide.
- Below minimum size, drop to the icon alone.

## 3. Logo misuse — never do these

1. Don't stretch, squash, rotate, or skew any lockup.
2. Don't recolour the gradient, the wordmark, or the i-dot.
3. Don't retype "velniq" in a font — the wordmark is artwork, always placed as an image.
4. Don't add drop shadows, outlines, glows, or bevels.
5. Don't place the full-colour logo on busy photos or mid-teal backgrounds (use black/white variants).
6. Don't put the colour (black-text) version on dark backgrounds — use `on-dark/`.
7. Don't rebuild or approximate the V — the 3-D fold is part of the mark (this is why we ship raster masters only, no SVG).
8. Don't capitalise the name. It is **velniq**, always lowercase, even at the start of a sentence.

## 4. Colour

### Primary palette

| Name | Hex | RGB | Role |
| --- | --- | --- | --- |
| Mint | `#88F5CD` | 136 245 205 | Gradient start (V top-left) |
| Teal mid | `#2DD5D1` | 45 213 209 | Gradient midpoint |
| Cyan | `#01AFB7` | 1 175 183 | Gradient end (V bottom-right) |
| Teal (accent) | `#06CACB` | 6 202 203 | Flat accent — the i-dot colour. Buttons, highlights, links on dark |
| Ink | `#000000` | 0 0 0 | Wordmark text on light |
| Dark | `#0A0F14` | 10 15 20 | Brand near-black — dark backgrounds |
| White | `#FFFFFF` | 255 255 255 | Light backgrounds, on-dark text |

**Brand gradient:** `linear-gradient(135deg, #88F5CD 0%, #2DD5D1 50%, #01AFB7 100%)` — reserved for the V icon, hero accents, and decorative rules. Never run body text over it.

### Accessible teal ramp (derived)

The accent teal fails WCAG contrast for text on white (2.0:1). For teal **text or links on light backgrounds**, use:

| Name | Hex | Contrast on white |
| --- | --- | --- |
| Teal 700 | `#0E8385` | 4.6:1 — AA body text |
| Teal 800 | `#086265` | 7.1:1 — AAA |

### Support neutrals

`#39424A` (grey-700) · `#6E7A7A` (grey-500) · `#C9D1D1` (grey-300) · `#F2F5F5` (grey-100)

### Contrast quick reference (WCAG)

| Pair | Ratio | Verdict |
| --- | --- | --- |
| Black on white | 21.0 | ✅ anything |
| White on dark `#0A0F14` | 19.2 | ✅ anything |
| Teal `#06CACB` on dark | 9.5 | ✅ text on dark |
| Mint `#88F5CD` on dark | 14.7 | ✅ text on dark |
| Black on teal `#06CACB` | 10.3 | ✅ button labels |
| Teal `#06CACB` on white | 2.0 | ❌ decorative only |
| Mint on white | 1.3 | ❌ decorative only |

Rule: **teal/mint are text colours only on dark; on light they are decoration, and teal-700/800 carry the text.**

Machine-readable tokens: `brand/tokens.css`, `brand/tokens.json`. Design-app swatches: `brand/velniq.ase` (Adobe), `brand/velniq.gpl` (GIMP/Inkscape/Krita).

## 5. Typography

The wordmark is custom artwork and is never retyped. For everything else, the recommended pairing (all open-source, Google Fonts):

| Role | Typeface | Notes |
| --- | --- | --- |
| Display / headings | **Bricolage Grotesque** | Characterful contemporary grotesque — gives headlines a voice without losing precision. Weights 600–800 |
| Body / UI | **Manrope** | Semi-geometric workhorse; its rounded geometry echoes the wordmark. Weights 400–600 |
| Code / numeric | **Martian Mono** | Distinctive wide mono for terminals, code samples, tabular data. Weight 400 |

Conventions: headings are sentence case; "velniq" is always lowercase; generous line-height (1.5 body, 1.2 headings); avoid ALL-CAPS except tiny labels/eyebrows with letter-spacing.

## 6. Voice & tone

- **Precise, not stiff.** Say exactly what the product does; skip superlatives.
- **Technical, but plain-spoken.** Assume a smart reader, explain jargon on first use.
- **Confident, not loud.** No exclamation marks in product copy; let specifics carry the claim.
- **Honest about limits.** State constraints plainly — trust is the brand.
- Product names: "velniq" lowercase always; product names in normal title styling (e.g. LayoutLock Translate).
- **Tagline:** "Intelligent products. Real impact." — use it verbatim; don't remix it per campaign.

## 7. Applications — which file where

| Purpose | File |
| --- | --- |
| Website header | `web/velniq-lockup-horizontal-400.png` (or `optimized/webp/…`) |
| Website header (dark mode) | `web/on-dark/velniq-lockup-horizontal-400.png` |
| Favicon | `favicon/favicon.ico` + `favicon/favicon-{16,32,48,256}.png` |
| iOS/Safari touch icon | `app-icons/apple-touch-icon.png` |
| PWA manifest icons | `app-icons/icon-192.png`, `icon-512.png`, `icon-maskable-512.png` |
| Open Graph / link preview | `social/og-image.png` (light) or `og-image-dark.png` |
| X/Twitter header | `social/x-header-1500x500.png` |
| Social avatar | `web/velniq-icon-512.png` |
| Instagram / square posts | `social/square-1080.png` / `square-1080-dark.png` |
| Email signature | `web/velniq-lockup-horizontal-400.png` (see `brand/email-signature.html`) |
| Slide decks | `png/` masters (light slides) / `png/on-dark/` (dark slides) |
| Print (colour) | `png/` masters at 300 DPI+ |
| Print (single colour) | `png/black/` or `png/white/` |

HTML `<head>` boilerplate (favicons + OG + theme colour): `brand/meta-tags.html`.

## 8. Asset inventory

```
logos/
├── BRAND_GUIDELINES.md      ← this document
├── brand-guidelines.html    ← visual brand book (open in a browser)
├── README.md                ← quick asset map
├── brand/                   ← tokens.css/json, swatches, snippets
├── png/                     ← high-res transparent masters
│   ├── on-dark/  black/  white/  grey/
│   └── _source_upscaled/    ← raw upscaled sources (archive)
├── web/  (+ on-dark/)       ← sized PNGs for web
├── optimized/webp/          ← WebP versions (~3.5× smaller)
├── favicon/  app-icons/  social/
└── press-kit.zip            ← masters + variants + guidelines, for sharing
```

Regeneration: `python3 build_brand.py` rebuilds every derived asset from the `png/` masters.
