This is where we keep our logos, colors, typography, and layout rules — for press, partners, and anyone building alongside us. Follow the guidelines below; for anything they don't cover, reach out to us first.
Our core palette — VisionEngine Blue drives primary actions, Signal Green marks positive states, and Deep Navy, Ink, Slate, and Cool Gray carry structure and text.
03 — TYPE
Typography
BRAND MARK — used only inside the logo artwork
Two fonts make up the logo, each doing one job: Bricolage Grotesque sets the "VisionEngine" wordmark, Squarish Sans CT sets the offset dot accent next to it. Neither appears anywhere else in the product.
Bricolage Grotesque
Free — Google Fonts. Sets the wordmark.
VisionEngine
Squarish Sans CT
Licensed font file. Sets the dot accent.
VisionEngine
SITE INTERFACE — used across the product, not the logo
These three fonts power the VisionEngine product — every page, dashboard, and control. Match them in any integration or co-branded surface to keep it feeling native to the platform.
Plus Jakarta Sans
Headings — weights 300–800 loaded
Aa Bb Cc 123
DM Sans
Body text — weights 300–700 loaded
Aa Bb Cc 123
Fira Code
Labels, code, metadata — weights 300–700 loaded
Aa Bb Cc 123
Headings → Plus Jakarta Sans, weight 700–800Body → DM Sans, weight 400UI labels / mono → Fira Code, weight 500
TYPE SCALE
Display
32–56px · weight 800
Section title
24px · weight 700
Body
13–15.5px · weight 400
Label / eyebrow
10–11px · weight 500
03b — TEXTURE
Background pattern
A repeating texture built from the dot accent. Pick a background and an edge fade, then grab it as an image or CSS — ready to drop into any layout.
04 — LAYOUT
Grid system
The spacing and layout values used consistently across the product — a 4px base unit, two content widths depending on context, and a small set of corner radii.
4px
Base unit
All spacing (padding, gaps, margins) is a multiple of this.
1100px
Content max-width
Reading-width pages — docs, brand center.
1480px
Landing max-width
Wide marketing sections, dashboards.
48–72px
Section padding
Vertical rhythm between major sections.
12–16px
Card radius
12px for compact rows, 16px for cards and panels.
12-column reference grid, 4px gutter — the pattern behind the section widths above.
05 — ICONS
Icon system
We pull every icon in the product from Google's Material Symbols, outlined style — never a custom or mixed-source set. This keeps every icon on the same grid, stroke weight, and optical size.
north_eastnorth_east
downloaddownload
codecode
arrow_forwardarrow_forward
menumenu
closeclose
checkcheck
contrastcontrast
space_barspace_bar
crop_freecrop_free
Default size → 16–20px inline, 22–24px standaloneStyle → Outlined, not filled or roundedColor → inherits text color, accents use Signal Green or VisionEngine Blue
06 — RULES
Usage guidelines
SPACING & SIZING
space_bar
Clear space
Keep space around the logo at least equal to the height of the icon mark on every side — nothing else (text, edges, other logos) should sit inside that zone.
crop_free
Minimum size
Never render the icon smaller than 24px tall on screen, or 0.5in tall in print — below that, the mark loses legibility and the dots become indistinct.
WHAT NOT TO DO
photo_size_select_small
Never stretch
The icon and wordmark must always scale together, proportionally. Stretching either one independently distorts the mark — this is exactly what the locked-aspect preview above prevents.
block
Don't recolor or add effects
No drop shadows, gradients, outlines, or recoloring outside the approved palette above. The logo should always appear exactly as provided.
rotate_90_degrees_ccw
Don't rotate or skew
The logo is always shown upright, never rotated or skewed for a layout — if it doesn't fit a space as-is, use a different variant instead.
BACKGROUNDS
contrast
Choose the matching variant
Use the light-colored logo on dark backgrounds, and the dark-colored logo on light backgrounds — check both using the background picker above before publishing.
texture
Avoid busy backgrounds
Don't place the logo over photos, patterns, or gradients where contrast drops and the mark becomes hard to read at a glance.
07 — KIT
Download brand kit
Full brand kit (.zip)
Logo files (SVG + PNG) · color and type reference · Bricolage Grotesque + Squarish Sans CT font files
