Skip to content

Brand kit · v1

naulon

Money moving in real time.

One owned color: green, because the author only ever receives. Every figure in monospace. Hairline borders, four steps of elevation, ease-out motion. The swatches below read their values from the running stylesheet, so a token change shows here immediately.

two temperaments, one product · dark is the live wire · light is the printed ledger

The mark

A toll gateway: the arch is the gate an agent must pass, read as the “n” of naulon; the coin inside is the payment that clears it. Monoline, drawn in currentColor — crisp from a 16px favicon to a hero lockup.

Lockup
naulon
tile bg-primary · wordmark mono, lowercase, always
Clearspace
½ tile
keep ≥ half the tile’s height clear on all sides
Minimum size
16px min
24px nav
40px hero
below 16px, drop the wordmark — tile only
Never
recolor
outline tile
rotate
the tile is always --primary, filled, upright

Downloads

The mark in every form. SVG is the master — infinitely scalable and recolorable; PNG ships for tools that reject SVG. The tile and lockup carry the brand green, ready to place; the bare mark and wordmark use currentColor — set color to recolor.

below 16px, use the tile alone — drop the wordmark. never recolor the tile, outline it, or rotate it. (no JPEG: it is lossy with no transparency — wrong for a mark.)

Tile · app icon
Mark · currentColor
naulon-mark.svg
Wordmark · currentColor
naulon
naulon-wordmark.svg
Lockup
naulon
naulon-lockup.svg
Favicon · 16–32px

Color

Green is punctuation, not paint.

The one owned color appears in exactly three places: the brand mark, the interactive primary, and the moment money lands. Everything else is neutral. If a screen is mostly green, it’s wrong.

The owned color

--primary

brand · interactive · money

--primary-foreground

ink on green

Elevation — sidebar ‹ background ‹ card ‹ surface-2

--sidebar

chrome

--background

page

--card

panel

--surface-2

inset row

Text & hairlines

--foreground

body

--muted-foreground

secondary

--border

hairline

--border-strong

panel edge

Semantics — green is the gain; red is rare

--positive

money lands

--destructive

a refusal

--warning

402 · attention

--info

neutral notice

Typography

Three faces, three jobs. Fraunces earns display size only (≥28px). Hanken Grotesk is the workhorse. JetBrains Mono sets every figure — money must align, so numbers are always mono and tabular.

Fraunces

--font-serif · display ≥28px only

'Fraunces', Georgia, serif

Hanken Grotesk

--font-sans · UI & body

'Hanken Grotesk', system-ui, sans-serif

JetBrains Mono

--font-mono · every figure, path & token

'JetBrains Mono', 'Monaco', monospace

Voice

Plain, built by an engineer. Short declaratives. Exact figures, never vague ones. The product is the claim — the copy just states it.

Do
  • Humans read free.
  • Custody-free — buyer pays author directly.
  • Watch it settle in USDC.
  • Exact figures, in mono: +$0.001 to the author.
Don’t
  • “Unlock the power of the agentic web!” — no marketing filler.
  • Emoji bullets, exclamation points, “let’s dive in”.
  • “Earn passive income!” — never promise; state what settles.
  • Rounded, vague money (“fractions of a penny!”) or figures set in the UI face.