Klnn

Brand book · v1

The connection to your audience.

A short, opinionated guide to writing, placing, and protecting the Klnn tagline across product, marketing, and partner surfaces.

The tagline

The connection to your audience.

Approved

The connection to your audience.

Always written sentence-case. The full stop is part of the mark — keep it. Italicize "audience" only when paired with the citron accent in display contexts.

Variants

  • Long lockup: Klnn — The connection to your audience.
  • Short lockup: Klnn · The connection to your audience.
  • Standalone (no logo): The connection to your audience.
  • Never: "The key to your audience" (retired).
  • Never abbreviate, translate, or rewrite for tone.

Voice

Quiet confidence, never loud.

  • Direct. Premium. Built for craft, not noise.
  • Use sentence case. End sentences with a period.
  • Pair the tagline with calm, declarative supporting copy.
  • No exclamation marks, hype, or emoji in the mark.
  • No all-caps treatment of the tagline.

Placement

Where it belongs.

  • Site title and meta description on every shareable route.
  • OG and Twitter card title/description for previews.
  • Footer, alongside the © line.
  • Closing CTA on the landing page hero or final section.
  • Email signatures, deck title slides, partner one-pagers.
  • Don't repeat the tagline twice on the same screen.
  • Don't place inside dense paragraphs — give it room.

Typography

SF Pro Display, tight tracking.

  • Display: font-display (SF Pro Display / Inter Tight), semibold, tracking -0.035em.
  • Body: font-sans (SF Pro Text / Inter).
  • Eyebrow micro-labels: .eyebrow in JetBrains Mono, uppercased.
  • No serifs. No script faces. No system-default fallbacks in marketing.

Color

Midnight navy + a single citron accent.

Midnight

Background · 60–70%

Surface

Cards · 20–30%

Citron

Accent · <10%

  • Citron is the singular signal — primary CTA, italic accent word, hero glow.
  • Never set the tagline entirely in citron.
  • Never place the tagline on a citron fill.

Logo

The Link mark.

A single chain link in a citron square. It signals the core promise — connection — without saying a word. Pair it with the wordmark in the lockup, or use the square alone as an app icon, avatar, or favicon.

Sizes

32 · favicon
48 · avatar
64 · app icon
96 · hero

Corner radius scales with size: 6px at 32, 8px at 48, 10px at 64+. The glyph is always exactly half the square.

Clear space

1× clear space

Reserve a margin equal to the full mark height on all four sides. Nothing — type, imagery, UI chrome — enters this zone.

Rules

  • Use the lucide Link mark (imported as Link2 from lucide-react) at strokeWidth 2.25.
  • Citron square, midnight glyph. Glyph is always 50% of the square's height.
  • Minimum size: 24px. Below that, switch to a filled monochrome favicon.
  • Don't rotate, skew, outline, or add inner shadows to the mark.
  • Don't replace the Link mark with KeyRound, Key, or any other glyph.
  • Don't place the mark on a citron, white, or busy photographic background without the square.

Downloads

Vector master files and rasterized PNGs of the Klnn mark, ready for product, social, and partner use.

Mark · SVG (vector)

Mark · PNG (raster)

Monochrome glyph

Lockup

Backgrounds

On dark · on light.

Klnn is a midnight-first brand. The full-color mark — citron square + midnight glyph — is the default and works on both themes, provided the background gives the citron square enough contrast. On busy or off-brand surfaces, fall back to a monochrome variant.

Klnn

Default · dark

Full-color mark + foreground wordmark on midnight (--background).

Klnn

Allowed · light

Same full-color mark, wordmark recolored to midnight. Use only on near-white (≥ oklch 0.95) neutrals.

Klnn

Mono · citron

Glyph-only, citron stroke. Use on dark photography or saturated brand gradients where the square would muddy.

Klnn

Mono · midnight

Glyph-only, midnight stroke. For print, embossing, single-color partner placements, or favicons under 24px.

Background contrast

  • Default surface: midnight (--background) or any neutral darker than oklch 0.40.
  • Light surface: only near-white neutrals (oklch 0.95+). Recolor the wordmark to midnight; keep the citron square.
  • Mid-tone or photographic background: switch to the monochrome glyph (citron on dark, midnight on light).
  • Never place the full-color mark on a citron, primary-glow, or saturated brand fill — the square disappears.
  • Never invert the square (midnight square + citron glyph). The citron is always the surface.
  • Never add a stroke, shadow, or knockout box to make the mark "pop" on a wrong-contrast background — fix the background instead.

Monochrome variants

  • Citron stroke (klnn-mark-mono-citron.svg) on dark photo, video, or gradient surfaces.
  • Midnight stroke (klnn-mark-mono-midnight.svg) on light, print, embossing, or single-ink contexts.
  • White stroke (klnn-mark-mono-white.svg) on photography, video end-cards, or any deeply saturated non-brand surface.
  • Stroke width stays 2.25 across all three monochromes — never thin it for "elegance".
  • No grayscale tint, no off-whites, no off-citrons. Mono is one of those three values, nothing else.

Unboxed mark · three values

Midnight · on light

Print, embossing, single-ink partner placements.

White · on dark

Photography, video end-cards, deeply saturated non-brand surfaces.

Citron · on midnight

Brand gradients, dark hero glows, social bumpers.

The unboxed mark drops the citron square and renders the link glyph in a single brand value. Use only when the square would muddy the surface — it is a substitute for the full-color mark, not a co-equal alternative.

Wordmark

The "Klnn" wordmark.

Set in font-display (SF Pro Display / Inter Tight), semibold, tracking -0.035em. Always sentence-case as Klnn — never KLNN, klnn, or K.L.N.N.

Sizes

Klnn20 · UI / nav
Klnn24 · footer / inline
Klnn36 · marketing
Klnn60 · hero

Minimum legible size: 14px on screen, 8pt in print. Below that, switch to the mark only.

Clear space

Klnn
x = cap height

Reserve clear space equal to the cap height of the "K" on every side. Horizontal margin in1ch, vertical in0.75 × cap height.

Alignment

Klnn

Horizontal lockup · mark and wordmark share the same optical baseline.

Klnn

Stacked lockup · wordmark left-aligned to the mark, gap = 0.5× mark height.

  • Optically center the wordmark to the mark — match cap height to mark height.
  • Left-align the wordmark to the mark in stacked lockups.
  • In horizontal lockups, gap between mark and wordmark = 0.3× mark height.
  • Don't center the wordmark under the mark — always left-align.
  • Don't stretch, condense, or re-kern the wordmark.
  • Don't outline, italicize, or add effects to "Klnn".

Lockup

Logo + tagline.

Klnn

The connection to your audience.

  • Minimum clear-space around the lockup: the height of the "K".
  • Tagline sits below or to the right — never above — the wordmark.
  • Don't recolor the Link mark. Citron square, midnight glyph.

Type & spacing scale

ElementFamilySize / line-heightTracking
Mark (square)—h = wordmark cap-height × 1.25—
Wordmarkfont-display · semibold24 / 24 (leading-none)-0.035em
Taglinefont-sans · regular14 / 20-0.005em
EyebrowJetBrains Mono · medium11 / 16, uppercase0.18em

Spacing within the lockup

gap-3

12px

Mark → wordmark (horizontal)

mt-4

16px

Wordmark → tagline (stacked)

px-[1ch]

≈1× cap

Clear space, sides

Pairing rules

  • Wordmark uses leading-none so it baselines to the mark.
  • Tagline always pairs with body color text-muted-foreground; only "audience." carries emphasis.
  • Italic accent on "audience" only at display sizes (≥ text-2xl). Skip italics in UI lockups.
  • Stack order is fixed: mark → wordmark → tagline. Never reorder.
  • Don't mix font weights inside the wordmark or tagline.
  • Don't pair the lockup with another logotype on the same line.
  • Don't apply leading-tight or larger line-heights to the wordmark — it breaks alignment with the mark.

Questions about usage

Get in touch with the brand team.

Contact us