v1.0 · April 2026
Spark I/O LLC · Brand System Vol. 1 · Apr 2026

Enterprise
rigor,
bilingually
expressed.

Author
Manuel Villafañe
Scope
Logo · Color · Type · Voice
Markets
PR · FL · LatAm
Version
1.0
01.1 · Directions

Pick a direction, we'll refine.

Alt · Geometric
Gate
SPARK/IO

Two squares — input and output, offset. Reads as a logic gate, a handshake, a migration. On the bench as a more technical / developer-forward alternate.

Alt · Monogram
S/O Glyph
S/O

The favicon and avatar derivative. Just "I/O" in Instrument Serif with the same italic amber slash. Used wherever the full wordmark is too wide to read — browser tabs, social avatars, app icons.

01.2 · Color Lockups

On every surface.

Spark I/O
Obsidian · Primary
Spark I/O
Bone · Reverse
Spark I/O
Amber · Feature
Spark I/O
Mono · Reverse
Spark I/O
Minimum clearspace = X on all sides, where X = the height of the mark. Never crowd the logo.
S/O S/O S/O S/O
S/O glyph — our favicon / avatar. Minimum 16px on screen. Scales cleanly from favicon to billboard.
Ch. 02 / Color

Three tones. One signal.

A tight palette built around contrast: obsidian for authority, bone for clarity, amber for the spark. Everything else is restrained grayscale.

02.1 · Primary palette

The three.

Obsidian
#0A0B0D · OKLCH 0.14 0.005 270
Primary surface. Authority, depth, confidence. 70% of every dark screen.
PrimaryWCAG AAA on Bone
Ember
#C77A2A
The spark. Accent only — never a background.
AccentUse < 10%
Bone
#FAF8F3
Light mode surface. Warm off-white — never pure.
SurfaceLight mode
02.2 · Grayscale

Ink range.

Ink / 950
#0A0B0D
Ink / 800
#2A2D33
Ink / 600
#55534D
Ink / 400
#8A877E
Ink / 100
#F2EFE7
Ink / 50
#FAF8F3
Live
#34D399
Status indicators, success toasts, "online" states.
Focus
#C77A2A
Active state, current tab, highlighted data.
Alert
#D66868
Errors, destructive actions, form validation.
Info
#6B7FD6
Tips, secondary callouts, navigation hints.
Ch. 03 / Typography

One editorial, one functional.

A serif that carries the brand. A sans that carries the work. A mono that carries the data. Pairing gives Spark I/O an editorial confidence without feeling precious.

03.1 · The stack

Three faces.

Display · Editorial
Instrument Serif
Instrument · open-source
Regular 400 Italic 400
Spark I/O
Body · Functional
Geist
Vercel · open-source
Light 300 Regular 400 Medium 500 Semibold 600
Shipping work.
Technical · Data
JetBrains Mono
JetBrains · open-source
Regular 400 Medium 500
01_HELLO.md
03.2 · Scale

The ladder.

TokenSize / LineSampleUse
display/xl112 / 108The headline.Hero · cover
display/lg68 / 70Section titlesSection h2
display/md40 / 44SubsectionSubsection h3
body/lg18 / 28Lede & large body text for introductions.Lede · intro
body/md15 / 24Standard body copy for paragraphs & descriptions.Default body
label13 / 20Form labels & UI captionsUI labels
eyebrow11 / 16Ch. 03 / TypographyEyebrow · meta
Ch. 04 / Voice

Premium. Human. Bilingual.

Spark I/O talks like a senior operator who respects your time: direct, warm, allergic to jargon. Never corporate. Never cute.

04.1 · Do / Don't

How we write.

We say

+ Yes
  • "AI strategy that actually ships."
  • "60 minutes to make AI useful."
  • "Receipts, not promises."
  • "Enterprise rigor. Operator's empathy."
  • "Bilingual is native — not a feature."

We don't say

× No
  • "Leverage synergies to unlock value."
  • "Revolutionary AI-powered solutions."
  • "Cutting-edge best-in-class innovation."
  • "Let us be your partner on the journey."
  • "Disrupt. Transform. Elevate." (Stacked buzzwords.)
Ch. 05 / System

Components & tokens.

Every surface of Spark I/O is built from a tight set of primitives. Pills not corners. Editorial stats not dashboards. Grid-driven spacing.

05.1 · Components

Atomic primitives.

Buttons
Book a call → See the work Submit ✦ Featured
Chips & Pills
LIVE Models Tools Industry Ch. 01 / Identity
Metric card
Case Study · SaaS
IPO
Led GTM & digital transformation at KnowBe4.
Eyebrow · Status
Workshop · Apr 16, 2026 Featured · This week AI Brief · Weekly
05.2 · Spacing

8-point grid.

space/xs
8
space/sm
16
space/md
24
space/lg
40
space/xl
64
space/2xl
120
8
radius/sm
14
radius/md
24
radius/lg
radius/pill
Ch. 06 / Motion

Always intentional.

Motion reinforces hierarchy — never decoration. Three easings cover 95% of interactions. If something moves, it should be answering a question.

06.1 · Easings

Three curves.

Linear · precise
200ms · linear
Theme toggles, progress indicators, anything uniform.
Exit · glide
350ms · cubic(.22,1,.36,1)
Scroll reveals, card entrances, modal open. Default.
Emphasis · snap
500ms · cubic(.87,0,.13,1)
Hero entrance, section transitions. Used sparingly.