IrvingSpace
Brand home v1.1.3 · current
02 — Section · Visual Identity

The face of the space, and the reasons.

The mark, the palette, the type, the imagery — chosen so any surface under the name reads the same way. What follows is the why behind each choice. The design system is where those same atoms become tokens and components you can build with.

ChaptersMark · Color · Type · Imagery
Built onBrand Guide v1.1.3
Companion/design-system
Contactjohn@irvingspace.com
01
The Mark
A compass, not a monogram. It answers a different question than most identity marks — not "who is this?" but "which way are we facing?"

The IrvingSpace mark is a directional compass — a cross with a neon-yellow center, oriented around finding direction. It works as an icon, a favicon, and as part of a lockup with the wordmark.

The center — the fixed neon-yellow point — carries the constant. It doesn't move. Everything else in the identity can shift version to version; this can't.

The four pointers behind it read as a plus sign, then as a compass rose, then as the intersection of two axes on a plot. All three readings are on purpose: they map to the three lenses the brand keeps returning to.

Anatomy
The fixed point Neon yellow at the exact center. The one constant across every version, every surface, every size.
Espresso core A dark inner dot inside the yellow. Reads as the pupil of an eye at small sizes and holds the mark together at 16px.
Primary pointer The upward-facing arm at full opacity. Direction. Where the work is aimed.
Secondary pointers South, east, west at ~32% opacity. Context — the other directions you could go, quieted so the primary reads first.
Grid lines Barely-there vertical + horizontal rules through the center. The grid the space is built on — visible if you look, invisible if you don't.
Wordmark Georgia serif. "Irving" at 45% opacity, "Space" bold — the name yields to the concept.
The mark in context
Favicon · 16px
Cross-only detail. The pointers drop away; the yellow center reads at 3px.
Mark · 44px
Full compass, all pointers visible. The default for inline use on cream.
Irving Space
Lockup · light
Mark + wordmark, primary application. Clear space equal to the height of the mark.
Irving Space
Lockup · dark
Reversed for espresso surfaces. "Irving" reads at 45% cream, "Space" pops in neon yellow.
02
Color
The palette is organized into three groups: surfaces (where things live), text (how type reads), and accents (reserved for specific moments).
Group
Surfaces

Cream, not white. White is a browser default; cream is a decision. The warmth is the tell — it says this space was made by a person, on purpose, not spun up from a template. Espresso is the anchor: the dark end of the palette where the neon accents earn their place.

Cream #F7F4EE
Primary background, nav, cards
Cream 2 #F0ECE4
Section alternates, writing bg
Cream 3 #EDE8DF
Card backgrounds, panels
Border #E3DDD5
Dividers, borders, grid gaps
Dark #1C1A17
Featured sections, headers
Espresso #0D0A06
Hero, footer, logo base
Group
Text & structure

Text stays close to the surface it sits on — soft-black espresso on cream, muted warm greys for hierarchy. Ink blue carries every interactive state: links, tags, hover. It's the one color allowed to say "click me" so nothing else has to compete for that job.

Primary #1C1A17
Headlines, body on cream
Secondary #5A5550
Body copy, nav links
Muted #AAA59F
Labels, dates, metadata
Ink Blue #1B3A5C
Tags, featured items, links
Warm Brown #6B5E3E
Eyebrows, sidebar labels
Amber #A8906A
Links on dark backgrounds
Group
Neon accents

The neons don't decorate. They exist because dark surfaces need a place for attention to land — a headline word, a hover state, the fixed point in the mark. Kept scarce on purpose: use one per surface, and only on espresso or dark ink. Scatter them across cream and they stop being accents.

The rule: Neon colors live primarily on dark (espresso/dark) backgrounds — the logo dot, hero moments, and interactive states. They are rarely used on cream surfaces, and only when the color has enough depth to hold contrast (Neon Forest is the clearest example). Casual or decorative use on cream dilutes their signal.
Neon Yellow #FFE537
Hero headline, logo dot, primary CTA
Neon Forest #00C44A
"Read writing" hover state
Neon Red #FF3B3B
"About" hover, don't indicators
Neon Teal #00C9B8
Systems thinking, nav hover
Neon Coral #FF5C35
Tracking results, charts
03
Type
Two typefaces. One does the editorial heavy lifting; the other gets out of the way. The tension between them is intentional — serious ideas, clean delivery.
Ask better questions.
Georgia · 400 · 96px · tracking −0.5
Editorial
Georgia
Serif · System font · Used for: headlines, card titles, pull quotes, wordmark, hero copy

Georgia is here because it's the widest-available serif that reads warm. It ships on every device. It carries the editorial gravitas of a printed page without asking the reader to load a font file first.

UI
System Sans
Used for: body copy, nav, labels, buttons, metadata, eyebrows

The system sans stays invisible on purpose. It renders in whatever the reader's OS already handles well — San Francisco on Mac, Segoe on Windows, Roboto on Android — so the interface disappears and the writing does the work.

Scale
The hierarchy is deliberately narrow — six roles do all the work. Every headline size below the hero uses Georgia; every functional element (buttons, labels, meta) uses sans. A single element never mixes the two.
Role Example Spec
Hero headline Are you solving for Georgia · 38px
Section / card title The problem space Georgia bold · 20px
Post / article title Everyone Is Shipping. Very Few Can Finish the Sentence. Georgia · 16px
Body copy Most teams skip problem definition entirely and pay for it later. Sans · 14px · lh 1.75
Label / eyebrow Three ideas that shape how I look at most things Sans · 9px · ls 1.8 · UC
Button / CTA Read the Writing Sans bold · 11px · ls 0.8
04
Imagery
So far, illustration. Line-art SVGs drawn from the same geometry as the mark, one accent color per piece. What we haven't tried yet — photography, richer imagery, motion — is unexplored, not ruled out.

What's here is what's shipped so far. The choice to lean on line-art wasn't a doctrine — it was the surface we'd already tested. It works on cream and espresso, reads at small sizes, and stays out of the writing's way. That's what earned it.

Other forms — photography, richer imagery, motion — aren't off the table. The brand seeks to understand before it prescribes, and we haven't yet asked what those forms would carry or how they'd hold to the voice. When we try them, they'll earn their place the same way the illustrations did: by working, not by fitting a rule.

The recipe for the illustrations we do use: hairline structural lines in soft-black at low opacity, plus one neon accent doing the work of the drawing. A single color per piece. If another form of imagery shows up on the site, it follows the same test — does it carry the idea, or just fill space?

Direction — one accent (yellow). A trajectory chart. Structural elements hold context; the neon carries the point.
Systems — one accent (teal). A node graph. The system is the drawing; the geometry echoes the mark.
Results — one accent (coral). A bar chart with a trend line. Data as illustration; the shape carries the meaning.
Ambient texture
The mark, dissolved

One exception to "the mark is a logo": at very low contrast, fading off the edge of a hairline grid, the compass becomes ambient — a texture, not a signature. Use it once per surface, low opacity, in a corner. Never at full contrast if it's not doing logo work.

Do
  • Draw illustrations from the same geometry as the mark — it's what's worked so far
  • Use one neon accent per piece
  • Keep structural lines in soft-black at low opacity
  • Fade illustrations off the edge of a hairline grid where they belong
  • Try new imagery forms deliberately — ship them if they hold to the voice
Don't
  • Reach for stock imagery or off-the-shelf icon libraries without asking why this over drawing our own
  • Mix more than one neon accent in a single illustration
  • Show the compass mark as a decorative full-contrast graphic when it isn't doing logo work
  • Treat what we haven't tried as ruled out — unexplored is not the same as forbidden