XERJ is a storage system. It looks like a storage system.
No mascots, no gradients, no floating 3D laptops. The product is
typography, negative space, and 1 px lines — and the
marketing is the same. This book is the rulebook.
01·LAWS
FIVE LAWS. NEVER BROKEN.
Everything in XERJ — product dashboards, marketing pages,
brand book, even internal slides — is bound by the same five
rules. They were written first and they stay written. A
designer who wants to break one of them is welcome to leave a
500-word essay on the team wiki explaining why, and if we ship
the exception it becomes law number six.
00
NO FRAMES.
No boxed containers around content. No card backgrounds,
no rounded rectangles, no inset shadows. Hierarchy is
established by type weight, white space, and the 12-column
grid — not by drawing a rectangle around every idea. If a
panel needs a border to be understood, the typography
failed and the border is a patch.
01
ONLY 1 PX LINES.
Every rule, every chart stroke, every hairline divider is
exactly one pixel. No filled bars, no gradient sweeps, no
drop shadows, no 3 px "emphasis" borders. A bar chart
is a 1 px line. A row divider is a 1 px line.
A scene separator is a 1 px line. The uniformity is
the brand.
02
INFOGRAPHICS FIRST.
Every screen is an infographic. The reader should understand
the point in one pass — title, number, trend, context — with
no decorative ornaments competing for attention. Meaning is
carried by the arrangement of data, not by affordances or
illustrations. If we remove the data, nothing is left. That's
the test.
03
TYPOGRAPHY FIRST.
Everywhere. Product, marketing, docs, brand book. Type is the
primary visual element — not a secondary label sitting next
to a "real" graphic. Four typefaces, seven sizes, nothing
else ships. When we have to choose between a bigger word and
a bigger chart, the word wins.
04
DESIGN BY DATA POINTS.
The layout of every page is dictated by the data points it
carries, not by a template. A dashboard with three metrics
looks different from a dashboard with twelve because the
numbers need different room. The grid serves the data. The
data never serves the grid. That relationship — layout
following the shape of real values — is the XERJ brand
language. Everything else flows from it.
02·VOICE
SOLID. QUIET. TECHNICAL.
We write for engineers who have been paged at 2 am and
don't want to be charmed. Every sentence should earn its place.
Copy leads with a number, a constraint, or a name — not an
adjective. If a line could appear in a LinkedIn influencer post,
it doesn't ship.
DO
"Hybrid query p95 is 38 ms at 1B vectors on one box." ·
"One binary, no JVM heap tuning." ·
"Agents are the workload." ·
"Explain plan is first-class."
DON'T
"Revolutionary." · "Paradigm shift." · "Unleash the power of…" ·
"Next-generation AI-powered cloud-native…" · anything with the
word journey, storytelling, or magic.
NEVER
Emojis in marketing. Humor as the primary register. Cute
mascots. "Fun" at the expense of precision. We're storage.
Storage is serious.
03·WORDMARK
THE WORD IS THE MARK.
XERJ has no logotype other than the word itself, set in
Big Shoulders Display 900, all
caps, tracking +0.24 em. The accent color is reserved for the
final character of the short form — X
in the favicon, for example — and otherwise is not used inside
the wordmark.
XERJ.AI
Short form
XERJ
System line
XERJ.AI · OBSERVE
Favicon
A single X in Big Shoulders 900 on
the night background. No containment shape. The square crop is
forced by the browser, not by us.
Clear space
Minimum clear space around the wordmark is the height of the X.
Never place it against a photograph, a gradient, or any element
with more than 5 % visual texture.
04·COLOR
FIVE COLORS. ONE OF THEM IS YELLOW.
The palette is intentionally narrow. Night is primary — the
product is read in dim rooms at 2 am when something
broke. Day is a courtesy. Accent is the only chromatic color
in the system and it is used sparingly: for active state, for
a single key number, or for the one word a sentence is pointing at.
NIGHT · primary
Ink · bg#0B0B0D
Paper · ink#F4F2EC
Mute#8A8680
Faint · hairlines#2B2A28
Accent · solid#FFC400
DAY · courtesy
Paper · bg#F6F4EE
Ink · ink#11120F
Mute#696762
Faint · hairlines#CFCBBF
05·TYPOGRAPHY
FOUR TYPEFACES. SEVEN SIZES.
The entire system is built from four typefaces at seven sizes.
Nothing outside this grid ships. Any designer tempted to add
an eighth size owes the team a 500-word essay defending it.
TYPEFACES
Display
BIG SHOULDERS DISPLAY 900
Prose
Inter Regular — body copy, reading text.
Data
IBM PLEX SANS 500 · eyebrows, labels, UI chrome
Mono
JetBrains Mono — code, identifiers, hex, paths
THE SCALE
11 pxEyebrow / keyTYPE IS THE UI — 11 PX
13 pxData / rowType is the UI — 13 px
16 pxBodyType is the UI — 16 px
20 pxLeadType is the UI — 20 px
32 pxSection h4TYPE IS THE UI — 32
56 pxSection h3TYPE IS THE UI
96 pxScene h2TYPE
160 pxHero h1 — landing onlyX
06·GRID
12 COLUMNS. 24 PX GUTTERS. ONE MAX WIDTH.
Columns
12 — same on marketing, brand, product. A component that is 4/12 on the landing page is also 4/12 on the dashboard. There is no "marketing grid" distinct from the "product grid". They are one grid.
Gutter
24 px horizontal. Vertical rhythm follows the 8-step scale: 4/8/12/16/24/32/48/64/96/128.
Max width
1680 px. Above that, the page centers. The 64 px outer padding stays put. Nothing grows beyond 1680.
Breakpoint
Single — 960 px. Below 960 px, the hero folds to 96 px and metrics stack two-up. There is no tablet layout, because there is no tablet user.
07·HARD RULES
WHAT SHIPS. WHAT DOESN'T.
YES
1 px lines · 1 px chart strokes · hairline borders on rows and tables · negative space · typographic hierarchy · monospace for numbers · compact formatting (1.2K, 3.4M)
Gradient text · emoji decoration · oversized punctuation (no exclamation marks in headlines) · stock photos of people pointing at screens · handwritten-style fonts · "script" accents
NO
Launch-day confetti · tomato-red CTAs · "get started for free" · countdown timers · live-chat widgets · cookie banners that look like dialogs