Logomark
The Mark
The Xenopic mark on light, dark, and brand-colored backgrounds. Always use the version with sufficient contrast for its background.
Light background
Dark background
Primary navy
Dark navy
Clear space
All brand files include 10% clear space on each side — the logo mark fills 80% of the canvas. Never place other elements within this exclusion zone. When placing in a context with implicit clear space (e.g. a navigation bar with padding), the built-in margin is sufficient.
Wordmark
Logo + Wordmark
Use the horizontal lockup as the primary combined identity. The mark alone is preferred in compact contexts (nav bars, favicons, app icons).
Xenopic
XenopicPrimary lockup
Mark on the left, name on the right. Baseline of the text aligns to optical center of the mark. Minimum width: 120px rendered.
Mark-only
Use the mark alone below 64px where the wordmark would become illegible. Always keep a 10% clear space buffer around the mark's canvas.
Assets
Downloads
All files use 10% built-in clear space (mark fills 80% of canvas). SVG is vector and scales to any size. PNG files include a transparent background.
SVG — Vector (scalable)
PNG — Mark, black (for light backgrounds)
PNG — Mark, white (for dark backgrounds)
PNG — Wordmark
Colors
Brand Palette
All colors are defined in OKLCH — a perceptually uniform color space where equal numeric steps look equally different. Hue 232° (cool blue-gray) runs through the entire neutral scale.
Background
97.7% 0.009 232
#f3f5f9
Surface
100% 0 0
#ffffff
Foreground
20.6% 0.020 232
#272f3c
Primary
24% 0.032 232
#1e2d40
Muted
54.2% 0.011 232
#697487
Border
92.2% 0.009 232
#dde3ec
Dark BG
18% 0.028 232
#162030
Dark Surface
23.5% 0.025 232
#1e2c3d
Dark FG
96.6% 0.007 232
#f0f3f8
Success
53% 0.155 147
#1e8c56
Error
56% 0.185 27
#d43a1f
Warning
74% 0.170 65
#c78a00
var(--color-primary)), never hardcode hex or OKLCH values directly. The system adapts to light and dark modes automatically.Typography
Type System
Two typefaces. One for structure, one for readability. Never use other typefaces in Xenopic brand materials.
Display & Headings
Open Runde
Soft, rounded, confident. Use for headlines, product names, marketing copy, and the brand wordmark. Weights: Regular (400), Medium (500), Semibold (600), Bold (700).
Bold — Aa Bb Cc 0123
Semibold — Aa Bb Cc
Medium — Aa Bb Cc 0123
Regular — Aa Bb Cc 0123
Body & UI
Inter
Precise, neutral, legible at any size. Use for body text, labels, captions, code, and all UI at 16px and below. Weights: Regular (400), Medium (500), Semibold (600), Bold (700).
Bold — Aa Bb Cc 0123
Semibold — Aa Bb Cc
Medium — Aa Bb Cc 0123
Regular — Aa Bb Cc 0123
Type scale (18px base, 1.25 Major Third ratio)
Mark
Anatomy & Symbolism
Every element of the Xenopic mark is intentional. The logo is constructed from three distinct components, each with a specific meaning.
01
The Squircle Frame
A ring, not a filled shape — a window into something. The continuous-curvature corners use the same mathematical technique as Apple's iOS icons: curvature builds gradually from zero rather than snapping to a circular arc. The result is imperceptibly smoother, but that extra care compounds into a sense of quality you feel before you can name it. The ring structure signals openness: Xenopic is a channel, not a container.
02
The X Mark
The platform mark, set inside the window. Bold strokes, unambiguous identity. It anchors Xenopic to the specific creative ecosystem it serves — the X (Twitter) creator network. The X is not drawn with uniform width; its varying stroke weight gives it the same dynamic character as a handwritten signature: decisive but human.
03
The Publisher's Seal
A small squircle nested in the top-right corner of the frame — the traditional position for a quality mark, a registration badge, a seal of authentication. It represents the publisher: the creator who earns by making their banner a canvas for sponsorships. It is also the widget — the smallest unit of content, the thing that earns. Subtle but structurally load-bearing: remove it and the mark loses its second story.
Name
Why "Xenopic"
Xeno (Greek: xenos — foreign, from outside) + Pic (picture). Foreign data — Stripe revenue, GitHub commits, follower counts — transplanted into an image on your profile. A xenograft for your banner: tissue from a different platform, living natively where people look first.
Philosophy
Design Principles
Five beliefs that shape every product decision. Not aspirational — these are constraints. If a choice violates a principle, it doesn't ship.
01
Precision is kindness
Every pixel that is exactly right saves the viewer a moment of cognitive work. We optimize for zero friction between seeing and understanding. Sloppy alignment is a tax on the reader.
02
Motion reveals structure
Animation exists to show relationships — what belongs together, what leads to what. A transition that makes spatial sense costs nothing; one that surprises costs trust. Springs, not tweens: physics-based motion matches physical intuition.
03
Restraint is a feature
Remove things until removing more would lose meaning. White space is not empty — it is breathing room for ideas. Every element on screen is an implicit promise that it matters. Break that promise and you erode trust.
04
System over style
Beautiful products are not designed element by element. They are born from coherent systems: tokens, not values; patterns, not one-offs; components, not pages. Consistency scales. Style decisions do not.
05
Earn every curve
The squircle's continuous-curvature corners take more effort to get right than a CSS border-radius. The wordmark uses a real display typeface rather than a system font. These choices are invisible to most users — but they compound into a sense of quality that's felt before it's named.
Guidelines
Do's and Don'ts
These rules protect the integrity of the mark. When in doubt, ask — don't improvise.
Use on solid backgrounds
Place the mark on backgrounds with sufficient contrast. Light mark on dark, dark mark on light.
Maintain clear space
Always preserve the built-in 10% margin. In contexts with existing padding, no additional space is needed.
Use provided SVG files
The brand SVG uses G2 continuous-curvature corners. Never recreate the logo from scratch — always start from the provided files.
Don't stretch or distort
The mark is square. Never scale it non-uniformly. A wide or tall logo is not a Xenopic logo.
Don't add effects
No drop shadows, glows, gradients, or outlines on the mark. The logo speaks for itself.
Don't use on low-contrast backgrounds
A 3:1 contrast ratio is the minimum. Never use the dark mark on a dark background or vice versa.
Source
Logo Generation
The Xenopic mark is generated programmatically using the figma-squircle algorithm (s=0.6) for continuous-curvature corners. The script below produces the canonical SVG path data.
import { getSvgPath } from 'figma-squircle';
function translate(path, tx, ty) {
return path.replace(/([ML])\s+([\d.-]+)\s+([\d.-]+)/g,
(_, cmd, x, y) => `${cmd} ${+x + tx} ${+y + ty}`);
}
const sq = (w, h, r, tx, ty) =>
translate(getSvgPath({ width: w, height: h,
cornerRadius: r, cornerSmoothing: 0.6 }), tx, ty);
// Outer ring (frame) + inner void (evenodd = ring)
const ring = sq(67.2, 67.2, 12.7, 16.4, 16.4);
const inner = sq(61.6, 61.6, 9.9, 19.2, 19.2);
// Small squircle (publisher's seal)
const seal = sq(13.7, 13.7, 3.7, 62.3, 22.6);
const sealInner = sq(9.9, 9.9, 1.8, 64.2, 24.5);
// X mark (scaled into center)
const xMark = 'M178.57 127.15 290.27 0h-26.46l-97.03 ' +
'110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l' +
'102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66' +
'l187.13 262.13h-40.66';
// viewBox "8 8 84 84" → 10% clear space, 80% logo fill
console.log(`<svg viewBox="8 8 84 84">
<g fill="currentColor">
<path fill-rule="evenodd" d="${ring} ${inner}"/>
<path fill-rule="evenodd" d="${seal} ${sealInner}"/>
</g>
<g fill="currentColor" transform="translate(35,40) scale(0.1)">
<path d="${xMark}"/>
</g>
</svg>`);