~ / playground / index.md § ◊◊.◊

PLAYGROUND

[ SCRATCH SURFACE · DESIGN SYSTEM + ELEMENT VARIATIONS · BUILD 0001 ]

»»» / DESIGN SYSTEM / ∆

~ / type / scale.css § 00.a

HEADING 1 ABC Whyte / 48 / 500 / -0.03em
Design at the intersection
HEADING 2 ABC Whyte / 32 / 500 / -0.03em
Design at the intersection
HEADING 3 ABC Whyte / 24 / 500 / -0.025em
Design at the intersection
HEADING 4 ABC Whyte / 20 / 500 / -0.02em
Design at the intersection
STATEMENT ABC Whyte / 18 / 400 / -0.02em / 1.6
I shape ideas into reality — from code to design to systems that last.
BODY ABC Whyte / 16 / 400 / 1.6 Primary body
For over a decade my work has centered on Shopify — leading technology and e-commerce at Kosas, creating a premium theme used by 30,000+ merchants, and building custom apps that have led to millions in additional revenue.
BODY SMALL ABC Whyte / 14 / 400 / 1.6 Compact contexts — role cards, dense data
Lead Shopify engineering and e-commerce technology — theme, custom apps, UX, CRO, performance, and technical decisions across operations, CX, and marketing.
MONO LABEL GT Pressura Mono / 12 / 400 / uppercase
~ / WORK / ROLES.MD
MONO CAPTION GT Pressura Mono / 10 / 400 / 1px / uppercase
T-0042 / MAY.04.26 / 02:02 CST

~ / type / mono-details.md § 00.b

// PATHS & SECTIONS

  • ~ / about / statement.md
  • ~ / work / roles.md
  • § 01.a
  • § ◊◊.◊
  • /IDX/A-01
  • ../sketch/v2

// STATUS

  • [active]
  • [draft]
  • [archive]
  • LIVE · TELEMETRY
  • ● ● · ●
  • ○ ○ · ◌

// CODES & STAMPS

  • T-0042
  • CRC A4F9
  • HEX 7A-00-FF-1C
  • BIN 0011 0101
  • NODE 03
  • BUILD 0001
  • COM-2

// TIME & PLACE

  • MAY.04.26
  • 02:02 (CST)
  • 2026 / 05 / 04
  • 30.1902° N, 098.0867° W
  • AUSTIN.TX
  • ±84 MO

// RANGE & DELTA

  • 2019—‹··›
  • 2019 → 2026
  • 2305 × 1328
  • ▲ +04
  • ▼ −2.4%
  • ±0.5

// BRACKETS

  • [ INTERFACE ]
  • { DRAFT }
  • « STUDIO »
  • ‹ PING 89ms ›
  • (off-line)
  • [ ◊ ]

// DIVIDERS

  • » » » ∆
  • + +
  • § 01.A
  • ◊ ◊
  • [ ]
  • »» ∆

// SEPARATORS

  • NODE · CRC · BUILD
  • NODE — CRC — BUILD
  • NODE / CRC / BUILD
  • NODE | CRC | BUILD
  • NODE ◊ CRC ◊ BUILD
  • NODE ↦ CRC ↦ BUILD

// ARROWS & MARKERS

  • ↗ ↘ ↖ ↙
  • ← ↑ → ↓
  • ▲ ▼ ◀ ▶
  • ‹ › « »
  • + × ✦ ★
  • ◊ ◆ ○ ●

~ / tokens / color.css § 00.c

// SURFACE

--v2-bg #0B0809
--v2-bg-chrome #0B0809 / 92%

// TEXT SCALE

--v2-text-1 rgb(255 / 1.0)
--v2-text-2 rgb(255 / 0.8)
--v2-text-3 rgb(255 / 0.6)
--v2-text-4 rgb(255 / 0.4)
--v2-text-5 rgb(255 / 0.2)
--v2-text-6 rgb(255 / 0.1)

// ACCENT

--v2-accent-primary #C84A2D · RUST
--v2-accent-secondary #6B8E65 · SAGE

// STATUS

--v2-status-active → RUST
--v2-status-beta RING / WHITE 20%
--v2-status-draft RING / WHITE 20%
--v2-status-archive RING / WHITE 20%

~ / tokens / spacing.css § 00.d

  • --v2-space-1 4px
  • --v2-space-2 8px
  • --v2-space-3 12px
  • --v2-space-4 16px
  • --v2-space-5 24px
  • --v2-space-6 32px
  • --v2-space-7 48px
  • --v2-space-8 64px
  • --v2-space-9 96px

~ / tokens / radius.css § 00.e

  • --v2-radius-0 0
  • --v2-radius-sm 2
  • --v2-radius-md 4
  • --v2-radius-lg 8
  • --v2-radius-pill PILL
  • --v2-radius-circle 50%

~ / tokens / elevation.css § 00.f

Stippled / dither shadows — radial-gradient halftone offset behind the element. Layers stack as elevation rises.

  • .pg-elev-0 FLAT
  • .pg-elev-1 STIPPLE
  • .pg-elev-2 DITHER
  • .pg-elev-3 LAYERED HALFTONE
--v2-stamp INSET / PRESSED

~ / tokens / modes.css § 00.g

COLOR SCHEME

Toggle reveals how every token in the system swaps. Tokens read across the whole page; the toggle here is the canonical control.

~ / type / inline.html § 00.h

This is body text in regular weight. Strong / bold emphasis sits at 500 weight. Italic uses the matching ABC Whyte italic. Highlight / mark draws on the rust accent. Inline code uses the mono stack with a dim border. Anchor link example: internal link. External link with affordance: external link. Smaller fine print uses small element. Abbreviations use a dotted underline like CSS. Sup/sub: H2O and E=mc2.

~ / type / lists.html § 00.i

// UNORDERED

  • Design at the intersection of craft and code
  • Systems that last beyond their initial release
  • Tools for entrepreneurs and small teams

// ORDERED

  1. Establish foundation tokens
  2. Build component primitives
  3. Compose page-level layouts

// NESTED — MIXED

  1. Tokens
    • Color, type, spacing
    • Radius, elevation
  2. Components
    • Buttons, inputs
    • Cards, callouts

// NESTED — BULLETS

  • Surface
    • Background base
    • Background chrome
  • Foreground
    • Text scale 1–6
    • Border tones

~ / type / blockquote.html § 00.j

PULL · STATEMENT

I shape ideas into reality — from code to design to systems that last. My work is about clarity, creativity, and cultivating growth in others.
— JONATHAN MOORE EST. 1999

~ / type / bignum.html § 00.k

84 SOLID · TENURE
84 OUTLINE · STROKE 1

~ / type / code.html § 00.l

// PLAIN 
const fade = (t) => t * t * (3 - 2 * t)
fade(0.5) // 0.5
tokens.css 
:root {
  --v2-bg: #0b0809;
  --v2-text-1: rgb(255 255 255 / 1);
  --v2-accent-primary: #C84A2D;
}
register-stack.css L 3 HIGHLIGHT 
--v2-elev-0: none;
--v2-elev-1: 2px 2px 0 var(--v2-text-6);
--v2-elev-2: 2px 2px 0 var(--v2-text-6),
             4px 4px 0 var(--v2-text-5);
--v2-elev-3: ...

~ / components / buttons.html § 00.m

// PRIMARY

// SECONDARY

// GHOST

// ICON ONLY

~ / components / forms.html § 00.n

// CHECKBOX
// SWITCH
// RADIO
// SELECT
// SLIDER
Slider295.00
Slider250.00

~ / components / cards.html § 00.o

// PRIMARY § 00.o.1

Solid background

Filled surface, dim border, holds dense content. Use for primary content blocks.

// SECONDARY § 00.o.2

Subtle background

Glassier surface, lower contrast border. Use for secondary or nested content.

// TERTIARY § 00.o.3

Transparent

No surface, only a dotted divider above. Use when the surrounding context already establishes structure.

// MARKED § 00.o.4

Registration marks

No fill, no continuous border — just corner brackets framing the content. Borrows from the viewfinder vocabulary.

ELEV-1
ELEV-2
ELEV-3

~ / components / overlays.html § 00.q

// TOOLTIP

HOVER OR FOCUS THIS TARGET

// DISCLOSURE / ACCORDION

Heading scale H1–H4 covers all needs. The 88px display treatment was removed in favor of a single, consistent typographic ladder.

// DIALOG / MODAL

~ / components / media.html § 00.r

// IMAGE WITH CAPTION · 1600×900 · STILL
// IMAGE BREAKOUT · WIDER THAN PROSE COLUMN

// BENTO GALLERY

// SCROLLING STRIP

  • FRAME · 01
  • FRAME · 02
  • FRAME · 03
  • FRAME · 04
  • FRAME · 05
  • FRAME · 06
  • FRAME · 07
  • FRAME · 08

// VIDEO PLAYER

0:00 of 0:00

// BEFORE / AFTER · MOCKUP

BEFORE
AFTER

~ / components / embeds.html § 00.s

Jonathan Moore @moore

A registration stack reads as a print artifact rather than a soft Gaussian blur. Same hierarchy, different vocabulary.

02:02 · MAY 04, 2026
JONATHANMOORE.COM

Design at the intersection

Entrepreneur, designer, and engineer working at the intersection of creativity and technology since 1999.

jonathanmoore.com / about

~ / components / navigation.html § 00.t

// BREADCRUMB

~ / components / icons.html § 00.u

  • arrow-right
  • plus
  • close
  • check
  • info
  • warning
  • link
  • github
  • x
  • search
  • menu
  • copy

~ / components / logo.html § 00.v

~ / layout / primitives.html § 00.w

// CONTENT COLUMN · 640PX

[ ] 640px · PROSE

// WIDE SECTION HEADER

§ INTRO

A full-width centered display heading announces a new section

The wide section header earns its breadth — used sparingly, between major content shifts.

// TWO-COLUMN HEADER

A larger title sits left, copy sits right.

Pairs a section title with a brief lede on the same row. Useful at the start of long-form sections where a single column would feel too sparse.

// HORIZONTAL TIMELINE / CHANGELOG

  1. 1999

    Interactive Era

    2Advanced · BLITZ · New Ezra

  2. 2012

    Style Hatch

    Owner · Engineer · Designer

  3. 2019

    Kosas

    Lead Design Engineer

  4. 2026

    Prism Lock

    New venture — pre-dev

~ / states / interactive.html § 00.x

  • DEFAULT
  • HOVER
  • FOCUS
  • ACTIVE
  • DISABLED
  • LOADING
  • ERROR
»»» / PLAYGROUND EXPERIMENTS / ∆

~ / frames / telemetry.svg § 01.a

LIVE · TELEMETRY T-0042 / MAY.04.26 / 02:02 CST
30.1902° N
13 VISITORS · LAST 24H
098.0867° W
NODE 03 CRC A4F9 BUILD 0001 2305 × 1328

~ / cards / code.tsx § 02.a

  • § 01.a
    A-01 _ABOUT
    ®
  • § 02.a
    W-02 _WORKS
    ®
  • § 03.a
    V-03 _VISUALS
    ®
  • § 04.a
    S-04 _STORE
    ®
  • § 05.a
    C-05 _CONTACT
    ®

~ / signals / burst.svg § 03.a

REPORT-12 — FILE: ERROR-404.TXT — ACCESS: DENIED

~ / patterns / marker-grid.css § 04.a

~ / sequences / tape.html § 05.a

SEQ-0042 / J·O·N·M·O·O·R·E 192 BIT · 24 FRAMES · CHK A4F9
00 06 12 18 24

DECODE · STREAM 03 / RUNNING ↗

~ / windows / data.html § 06.a

BLOCK:
0021
CRC:
A4F9
HEX:
7A-00-FF-1C
BIN:
0011 0101
PORT:
COM-2
EXEC · CYCLE 065 / 100
0 25 50 75 100

~ / plates / 10.html § 07.a

▼ ▼ ▼ ◁ ◁ ◁
µCORE 10 °K-12
IRQ: 05 ✦

~ / marks / monogram.svg § 08.a

JONATHAN MOORE · DESIGN ENGINEER · STUDIO · EST. 1999 ·

~ / tables / manifest.html § 09.a

# PROJECT SCOPE STATUS PHASE
  • 01 Kosas Cosmetics commerce, eng, ux [active] shipping
  • 02 Style Hatch themes, brand, eng [active] ongoing
  • 03 Prism Lock tbd [draft] pre-dev
  • 04 Interactive Agency Era flash, 3d, brand [archive] 1999—2012

~ / timelines / career.html § 10.a

  1. 2026

    Prism Lock

    New venture, in development.

  2. 2019

    Kosas Cosmetics

    Lead Shopify Engineering & E-Commerce Tech.

  3. 2012

    Style Hatch

    Owner, Engineer & Product Designer.

  4. 1999

    Interactive Agency Era

    2Advanced · BLITZ · New Ezra.

~ / metrics / dashboard.html § 11.a

84 MO

TENURE @ KOSAS

▲ ACTIVE

30K+

SHOPIFY MERCHANTS

▲ +12%

156 MO

STYLE HATCH

▲ ONGOING

27 YR

CRAFT

◊ EST. 1999

~ / hud / strip.html § 12.a

LIVE T-0042 MAY.04.26 / 02:02 CST 30.1902° N, 098.0867° W NODE 03 CRC A4F9 BUILD 0001

~ / statements / pull-quote.md § 13.a

PULL · STATEMENT

I shape ideas into reality — from code to design to systems that last. My work is about clarity, creativity, and cultivating growth in others.
— JONATHAN MOORE STATEMENT / 00.A EST. 1999

~ / labels / pills.css § 14.a

FILLED
ACTIVE PAUSED URGENT
OUTLINE
DRAFT ARCHIVE DEV
CHIP
A-01 § 01.a CRC A4F9 /ABOUT
DOTTED
ACTIVE DRAFT ARCHIVE LIVE
BRACKET
[ ACTIVE ] { DRAFT } « STUDIO » ‹ PING ›

~ / scrubbers / timecode.html § 15.a

TC · 04:32:18:14 IN 04:00:00:00 / OUT 05:00:00:00
04:00:00 04:15:00 04:30:00 04:45:00 05:00:00

~ / specimens / element.html § 16.a

01 CRAFT C Code

EST · 1999 · ◊ ACTIVE

42 CORE Jm Jonathan

REV · 2026 · ◊ PRIMARY

99 STUDIO Sh Style Hatch

EST · 2012 · ◊ ACTIVE

~ / schematics / circuit.svg § 17.a

CKT-04 · COMMERCE STACK REV · B / 2026
IN R-01 100Ω C-02 10µF L-03 · LOG OUT
▭ NODE ● JUNCTION ─ SIGNAL ▭ OUTPUT

~ / catalog / card.html § 18.a

700.42 / J FILED · MAY.04.26

Moore, Jonathan.

Design at the intersection of creativity
and technology — entrepreneur, designer, engineer.

  • 1. CRAFT — entrepreneur, designer, engineer
  • 2. STUDIO — Style Hatch · Kosas Cosmetics
  • 3. EST. — 1999
  • 4. SEE ALSO — § 02 / § 15