CogniSion Brand Guide

// 01 Logo

The mark

An eye drawn from the letter C, with a glowing iris at its centre and orbit lines around it: cognition (C) and vision (the eye). The logo is glowing artwork. Never redraw or retype it; always use the supplied files.

Mark

Avatars, favicons, small spaces, watermark.

↓ PNG ↓ JPG

Stacked lockup

Primary logo. Flyer covers, posters, title slides.

↓ PNG ↓ JPG

Horizontal lockup

Headers, footers, email signatures, banners.

↓ PNG ↓ JPG

Wordmark

When the mark is already on the page. “Cogni” white, “Sion” cyan.

↓ PNG

Light backgrounds

On white or light paper use the _for-light-bg files: “Cogni” switches to Midnight Navy so it stays readable. The mark itself works on both.

One-colour

For single-colour print: stamps, engraving, merch, photo overlays, coloured backgrounds. Brightness becomes coverage, so detail is kept.

White

↓ PNG

Navy

↓ PNG

Stacked · white

↓ PNG

// 02 Usage

Clear space & sizing

Keep clear space around the logo of at least half the height of the iris ring, about 15% of the mark’s width. The PNGs already include a small transparent margin. Minimum sizes: mark 24 px / 8 mm wide, horizontal lockup 120 px / 35 mm, stacked lockup 80 px / 25 mm. Below those sizes use the mark alone.

Do

Put it on Midnight Navy or another dark, calm background, where the glow works best.
Use the _for-light-bg versions on white paper.
Scale it proportionally (hold Shift).
Use the one-colour files on photos or busy backgrounds.
Use the full-size PNG for print. At 300 dpi it holds up to about 11 cm wide for the mark and stacked lockup, and about 22 cm for the horizontal lockup.

Don’t

Retype “CogniSion” in a font as a logo. The wordmark is custom lettering.
Recolour, stretch, rotate or add extra shadows or outlines.
Put the dark-bg wordmark on white, because “Cogni” disappears.
Place it on mid-cyan or busy imagery without the one-colour version.
Enlarge the PNGs beyond their print size. For roll-ups and signage, email hello@cognision.eu.

In running text, write the name as CogniSion (capital C and S). The legal name is CogniSion s. r. o.

// 03 Colour

Palette

Sampled from the logo: a deep navy field, an electric cyan rim and an iris that fades from blue to violet. Roughly 70% navy tones, 20% white or slate text, and 10% cyan accent. Violet only appears in gradients and small details. CMYK values are approximate, so ask your printer for a proof. Electric Cyan is brighter than CMYK can print and will come out slightly duller.

--bg

Midnight Navy#0A1128 · 10 17 40CMYK 75 58 0 84

--surface

Deep Surface#0E1838 · 14 24 56CMYK 75 57 0 78

--card

Card Navy#122046 · 18 32 70CMYK 74 54 0 73

--border

Grid Line#1A2E5C · 26 46 92CMYK 72 50 0 64

--cyan

Electric Cyan#00E5FF · 0 229 255CMYK 100 10 0 0

--blue

Signal Blue#1E7BFF · 30 123 255CMYK 88 52 0 0

--violet

Neural Violet#7B5CFF · 123 92 255CMYK 52 64 0 0

--text

Ice White#F0F4F8 · 240 244 248CMYK 3 2 0 3

--text-soft

Soft Slate#CBD5E1 · 203 213 225CMYK 10 5 0 12

--muted

Muted Steel#8C9DB5 · 140 157 181CMYK 23 13 0 29

Brand gradient: linear-gradient(90deg, #00E5FF, #7DD3FC 45%, #7B5CFF). Use it for headline highlights and thin accent lines, never for body text.

Contrast (WCAG 2.1)

Text	On	Ratio	Use
Ice White	Midnight Navy	16.9 : 1	Any text
Soft Slate	Midnight Navy	12.6 : 1	Body copy
Electric Cyan	Midnight Navy	12.1 : 1	Any text, accents
Midnight Navy	Electric Cyan	12.1 : 1	Primary buttons
Muted Steel	Midnight Navy	6.8 : 1	Captions, meta
Signal Blue	Midnight Navy	4.7 : 1	OK for text, better as accent
Midnight Navy	White	18.7 : 1	Text on light layouts
Neural Violet	White	4.4 : 1	Large text only (18 pt+)
Signal Blue	White	3.9 : 1	Large text only (18 pt+)
Electric Cyan	White	1.5 : 1	Never as text, decoration only

// 04 Typography

Two families, both free (SIL OFL)

Use Space Grotesk for headings and copy, and JetBrains Mono for the technical HUD voice: eyebrows, labels, buttons and data. Both are on Google Fonts, and the TTF files are included in the full kit.

Primary · Space Grotesk

Aa Gg 0123

Light 300Regular 400Medium 500SemiBold 600*Bold 700

*SemiBold comes only as part of SpaceGrotesk-Variable.ttf.

Secondary · JetBrains Mono

// 0x1F </>

Regular 400Medium 500Bold 700

Use uppercase with +6–8% letter-spacing for labels and buttons. Prefix eyebrows with //.

Display · 700Clear digital vision

H2 · 600What we build

H3 · 600Cloud backends

Body · 400Custom software for businesses that demand precision and clarity.

Eyebrow · Mono// What we do

Fallbacks when the brand fonts aren’t available (Word, email): Segoe UI or Arial for Space Grotesk, Consolas for JetBrains Mono.

// 05 UI style

The HUD look

Dark navy fields with a faint 32 px cyan grid, glass panels with thin cyan borders, soft cyan glows, corner brackets, and mono “system readout” labels. Keep it restrained: one glow per composition and plenty of empty navy space.

Start a project See our work TypeScript · Node.js C# · .NET · Unity

Element	Spec
Corner radius	`16px` cards · `12px` buttons · `10px` small · `999px` chips
Panel	Fill `rgba(14,24,56,.7)` with 16 px blur, 1 px border at `rgba(0,229,255,.15)`
Glow	`0 0 25px rgba(0,229,255,.30)`, large: `0 0 50px rgba(0,229,255,.50)`
Grid	32 px cells, lines `rgba(0,229,255,.04)`, 1 px dots at `.08`
Motion	`0.3s cubic-bezier(.4,0,.2,1)`, slow rotations, no bouncing

// 07 Files

What’s in the full kit

Folder	Contents
`logos/mark`	Mark as transparent PNG (native, @1024w, @512w), plus flattened JPGs on navy and on white
`logos/stacked`	Primary lockup: `_for-dark-bg`, `_for-light-bg`, flattened JPGs
`logos/horizontal`	Wide lockup: `_for-dark-bg`, `_for-light-bg`, flattened JPGs
`logos/wordmark`	Wordmark only, for dark and light backgrounds
`logos/mono`	One-colour mark (white, navy, cyan) and white stacked lockup
`logos/app-icons`	favicon.ico, 32 px favicon, 180 px Apple touch icon
`social`	Avatars, LinkedIn banner, X header, OG image
`backgrounds`	HUD grid backgrounds at 16:9 and A4
`fonts`	Space Grotesk and JetBrains Mono TTFs, with OFL licences
`tokens`	`colors.css`, `tokens.json`, `cognision.ase` (Adobe and Affinity), `cognision.gpl` (GIMP and Inkscape)

The mark

Mark

Stacked lockup

Horizontal lockup

Wordmark

Light backgrounds

Stacked · light

Horizontal · light

Mark · light

One-colour

White

Navy

Stacked · white

Clear space & sizing

Do

Don’t

Palette

Contrast (WCAG 2.1)

Two families, both free (SIL OFL)

The HUD look

Ready-made images

LinkedIn banner

Facebook cover

X / Twitter header

Link preview / OG

Avatar

Slide / video background · 16:9

Flyer background · A4 300 dpi

What’s in the full kit