Brand v1 · Logo system

The logo system.

The canonical Creatin marks, wordmark and lockups — final vectors, locked construction, and the downloadable asset kit. Everything here is the real artwork. Colors are pulled live from tokens.css, the single source of truth shared with the print theme.

Default markIsometric voxel C
Wordmark facePlus Jakarta Sans
AccentCobalt keystone
Base unitCap height · H
01

The marks.

One symbol, three registers. The rendered isometric C leads wherever it has room; the flat block-C is the small-size and single-ink reduction. The cobalt keystone cube is the signature detail.

Isometric · rendered
Default — hero, web, app, ≥40px
default
Isometric · flat + accent
Flat-but-on-brand — mid sizes, flat design
Flat block-C
Reduction — ≤32px, favicons, single-ink
02

The wordmark.

Plus Jakarta Sans, single ink, set as one phrase — “Creatin Systems” elides into creating systems. Separation is by weight only, never a second color.

Primary wordmark
Bold “Creatin” / Medium “Systems” · single ink
primary
One file · currentColor
Recolors to any context — no extra files
TypefacePlus Jakarta Sans
“Creatin”Bold (700) · tracking −3%
“Systems”Medium (500) · tracking −3%
Word gapTwo text layers, baseline-aligned · auto-layout gap 0.12 × font size
Cap height (H)0.745 × font size — the unit the lockups use
Minimum sizeCap height ≥ 12px (“Systems” at Medium is the limiter)
03

The lockups.

Two configurations, one unit. Horizontal is primary; vertical is for square and app contexts. All spacing is a multiple of cap height (H), so the lockups hold at any scale.

Horizontal · one-line
Primary — header, signature, slides
primary
Vertical · stacked
Square / app / centered contexts
Horizontal — mark height1.90 × H · gap (mark→word) 0.45 × H · vertical-center on the cap-box
Vertical — mark width0.35 × wordmark width · gap (mark→word) 0.60 × H · centered on one axis
Measurement referenceMeasure to the nominal cap line / baseline — not the round overshoot of the C / S
04

Clearspace & minimum size.

Keep clear by one cap height (H) on every side, measured from the lockup’s outer extents. Below the minimums, switch register.

Clearspace = 1 H
Minimum keep-clear on all sides
Minimum sizes
Iso muddies small → flat-C holds
Isometric markMinimum 40px — below this the shading muddies; switch to the flat block-C
Flat block-CMinimum 16px — holds at favicon scale
Horizontal lockupMinimum 120px wide — below this, use the mark alone
05

Color across surfaces.

Navy is default; warm paper for print; cobalt is the single accent and the keystone color. The mark is built for all three.

On dark
Navy paper · var(--paper)
On light
Print paper · var(--paper) @ light
One-color reverse
Cobalt · var(--accent) @ light — single ink
06

Do’s & don’ts.

The mark’s integrity depends on these. When in doubt, use an unmodified file from the kit below.

Use the supplied files, unmodified
Don’t stretch or distort
Don’t rotate or tilt
Don’t recolor off-palette
Don’t add shadows or effects
Don’t place on clashing colors
Don’t crowd the clearspace
Don’t use the dark mark on light
07

The asset kit.

The finalized, deduplicated set — 18 files under logo/. Mono versions use currentColor (one file recolors anywhere); accent and rendered ship per surface. Click any file to download.

On the mono files: they use fill="currentColor", so a single SVG renders in any color — set it via CSS color: (or the host’s text color). Print-theme note: Typst’s image() does not inherit currentColor from surrounding text, so the Cobalt theme ships a navy-baked copy of the wordmark (themes/cobalt/assets/wordmark.svg) and uses the explicit -light rendered/accent files elsewhere.
Creatin · Logo system v1
Plus Jakarta Sans · cobalt theme
18-file asset kit · logo/
Icon · wordmark · lockups locked
Tokens · tokens.css (shared source)
May 2026