JBMv1 / browser proof

An authored practice for the web

Joyful
Brutalist
Minimalism

Show how the thing works, give the content room to speak, and attach one restrained moment of joy to something useful.

This is Sergio's working language for pairing editorial warmth with technical precision. It is a practice to interpret, not a framework every project must install.

Read the constitution Open the Figma source

PUBLIC SOURCE · INTENTIONALLY UNLICENSED · INTERPRETATION IS NOT AUTOMATIC INHERITANCE

01 / Principles in use

Eight constraints make the work recognizable.

The instrument and the ledger share one source. Its counts cannot drift from the content without changing this page's data.

  1. 01 / 08

    Make structure honest

    Every line, edge, and interval must clarify hierarchy, expose an action, or make behavior easier to perceive.

    Structure
  2. 02 / 08

    Make the work inspectable

    Indexes, measures, diagrams, and status come from real content or state—not an atmosphere of precision.

    Structure
  3. 03 / 08

    Treat joy as function

    Warmth and surprise count when they improve clarity, attention, memory, or emotional ease.

    Experience
  4. 04 / 08

    Pair warmth with precision

    Editorial reading and technical notation should feel like two voices working on the same artifact.

    Translation
  5. 05 / 08

    Use one delight at a time

    Choose one coordinated playful system and give it a useful job instead of stacking unrelated effects.

    Experience
  6. 06 / 08

    Animate explanation

    Motion may reveal relationship, progress, hierarchy, or cause and effect. It never gates the only copy of meaning.

    Translation
  7. 07 / 08

    Design each medium intentionally

    Figma and the browser agree semantically while geometry, interaction, and responsiveness honor their own medium.

    Translation
  8. 08 / 08

    Preserve an escape hatch

    Keyboard, mobile, zoom, no JavaScript, low power, and reduced motion are designed states—not degraded exceptions.

    Access

02 / Portable foundations

Named matter, not a mood board.

Every swatch and interval below comes from the canonical DTCG token file. The browser consumes generated custom properties rather than a second hand-edited palette.

Color / semantic roles

Sparse signals on warm paper

  • Pagesurface.page
  • Papersurface.paper
  • Quietsurface.quiet
  • Inktext.primary
  • Actionaction.default
  • Signalsignal.sage
  • Figuresignal.sky

Typography / role before family

Two voices, one artifact

Reading should feel warm, calm, and unhurried.

MEASURE / PROVENANCE / STATUS

Source Serif 4 carries the editorial voice. IBM Plex Mono makes compact evidence align and scan.

Space / 4px basis

Nine honest intervals

  1. 000px
  2. 014px
  3. 028px
  4. 0312px
  5. 0416px
  6. 0524px
  7. 0632px
  8. 0748px
  9. 0864px

Shape / depth / movement

Pressure, never gloss

Crisp offset
Quiet inset

Rules stay at one or two pixels, paper corners stay nearly square, and explanatory motion resolves to zero when reduced motion is set.

03 / Technical figure

Change one owner. Translate intentionally.

Four sources can exchange a decision without becoming competing truths because each owns a different concern.

Meaning belongs to DESIGN.md, portable values belong to the token file, visual representation belongs to Figma, and responsive and interactive behavior belongs to the reference site. An accepted decision changes its owner first, then translates only where useful.

FIG. 01Four authorities exchange decisions without competing for ownership.SOURCE · DESIGN.md § Authority and conflict resolution · Original JBM figure

04 / Medium ledger

Semantic agreement beats pixel identity.

The Figma library establishes visual intent. This browser proof keeps the same roles while accepting behaviors that only a page can own.

Agrees

Names and responsibilities

Ground, Kicker, Rule, Index Row, Plate, Action Link, and Figure Caption keep the same content functions, token roles, and hard-edged grammar.

Translates

Responsive composition

The wide Figma studies become a sticky reading rail on large screens and a horizontal source index on narrow screens without changing their measure.

Belongs here

Interaction and escape hatches

Focus order, pointer feedback, current reading position, no-JavaScript anchors, and reduced motion are browser-owned decisions.

05 / Inspect the source

The language stays legible from idea to implementation.

Start with meaning, take only the smallest relevant pattern, translate it into local semantics, and record important divergence.