Brand · Mark System

Logomark & lockup

Filled square. No stroke. Fill = foreground (or accent). JJ = background. Always. The [JJ] text string is the universal plain-text fallback.

Sizes · light
JJ JJ JJ
Sizes · dark
JJ JJ JJ
Full lockup · light
Jeff Jenx Since 1983
Full lockup · dark
Jeff Jenx Since 1983
Plain text fallback — works in every context
# Markdown / README [JJ] Jeff Jenx # With category [JJ] Jeff Jenx · GB Home # Terminal / git log [JJ] jeffjenx.com — accuracy · simplicity · performance
Design Tokens · Color

Color system

Monochrome base. Category accents applied via data-category attribute on any ancestor element.

Base palette
JJ Black
#0a0a0a
Ink
#1a1a1a
Charcoal
#2a2a2a
Border
#3a3a3a
Muted
#888888
Silver
#c8c8c8
Smoke
#e8e8e8
JJ White
#f8f8f8
Category accents
GB Indigo
#7B5EA7 | #EDE9F8
NES Red
#9B1C1C | #FCE8E8
PS Blue
#003791 | #E5F0FA
SHOP Gold
#C0A060 | #FAF4E5
WEB Blue
#0066CC | #E5F0FA
XBX Green
#107C10 | #E6F4E6
Design Tokens · Typography

Type scale

Major Third ratio (×1.250). IBM Plex Mono for display and UI, IBM Plex Sans for body. Two weights only: 400 and 500.

--jj-text-2xs · 8px
bitmap floor
Jeff Jenx · Since 1983
--jj-text-xs · 10px
labels, legal
Jeff Jenx · Since 1983
--jj-text-sm · 13px
secondary UI
Jeff Jenx · Since 1983
--jj-text-base · 16px
body text
Jeff Jenx · Since 1983
--jj-text-md · 20px
lead, card titles
Jeff Jenx
--jj-text-lg · 25px
section headings
Jeff Jenx
--jj-text-xl · 31px
page headings
Jeff Jenx
--jj-text-2xl · 39px
hero headings
Jeff Jenx
--jj-text-3xl · 49px
display, wordmark
Jeff Jenx
OpenType features
Tabular nums (prices, stats) 
$ 1,234.00
$   987.50
$     5.99
Default proportional 
$ 1,234.00
$   987.50
$     5.99
Components · Layer 3

Buttons

Four variants, three sizes. Accent buttons inherit --jj-accent from nearest data-category ancestor.

Variants
Sizes
Category accents on buttons
Components · Layer 3

Form inputs

All inputs use monospace font. Focus ring inherits the active accent. Works with no JS — all validation via HTML attributes.

Used only to send your receipt. Not stored.
That username is already taken.
Accent focus ring inherits category (GB Indigo shown)
GB Home project — accent is Game Boy Indigo
Components · Layer 3

Cards

Two card types: content card and product card. Both use the accent bar to signal category.

Content cards
Project

GB Home

A launch ROM for custom Game Boy flash carts. Boots directly into a home menu with save state management and library organization.

Open source View →
GB Home

GB Home

Same card with data-category="gb" on the element and .jj-card--accent for the border-left. Accent color cascades to all children automatically.

GB Home View →
Product cards
Design System · Category Scoping

Category accent system

Add data-category="[name]" to any ancestor. All --jj-accent references inside it resolve to that category's color automatically. No extra CSS required.

data-category="gb"
GB Home
Flash cart ROM
data-category="nes"
NES
Famicom Cartridge
data-category="xbx"
XBX
Microsoft Gaming
data-category="web"
Consulting
Web dev Book now
Architecture · Progressive Enhancement

Enhancement layers

Each layer is self-contained. Remove any layer and everything beneath it still works. This file is Layer 3. The token file is Layer 0.

/* ─────────────────────────────────────────────────── */ /* JEFF JENX · PROGRESSIVE ENHANCEMENT LAYER MAP */ /* ─────────────────────────────────────────────────── */ Layer 0 Raw HTML Content readable in Lynx, w3m, any text browser. Links work. Forms submit. Headings convey structure. The [JJ] text string renders correctly. Layer 1 @layer base Reset + jeffjenx-tokens.css Custom properties defined. Zero layout assumptions. Compatible: Chrome 49+, Firefox 31+, Safari 9.1+ Layer 2 @layer type Typographic scale, rhythm, readable body text. No color beyond inherited defaults. Layer 3 @layer layout CSS Grid + Flexbox structure. Compatible: Chrome 57+, Firefox 52+, Safari 10.1+ Layer 4 @layer enhanced Full component styles, custom property theming, data-category accent scoping, focus rings. Layer 5 @layer motion (prefers-reduced-motion gated) Hover transitions, micro-animations. Automatically disabled for users who request it. Layer 6 <script> (non-critical) Theme toggle, copy-to-clipboard, dynamic filtering. Page is fully functional without it.