Thomas Valadez

constant → equilibrium → emergence → superposition

THOM — Thomas Valadez

Start with what remains true. Balance constraints. Let relationships create structure. Compose the result.

About the mark

01

About the mark

Four ideas, held in one name.

The letterforms use different construction techniques. Cap height, baseline, color, spacing, optical weight, and motion make them one system.

constant

π = C / d

02

Typography specification

Measured to stay itself at every scale.

The refined THOM artwork is the canonical source for shape, proportion, and placement. Its construction lines make the optical decisions explicit without reducing them to mechanically equal widths.

Canonical geometry plane

Cap line, construction axis, baseline, and optical overshoot.

SPEC 1.1
SVG Y ↓   THREE.JS Y ↑

THOM wordmark aligned to its upper ink extent, cap line, construction axis, baseline, and overshoot clearance
FIG. 01Nominal alignment and visible-ink compensation460 × 120u
01460 × 120

Canonical design frame

One SVG unit equals one master unit.

0289u

Cap height

From the 15u cap line to the 104u baseline.

03+6.72u

T roof overshoot

An intentional optical extension above the cap line.

04+3.40 / +2.15u

O visible overshoot

Above the cap line / below the baseline.

Implementation contract

One translation. No shape reinterpretation.

Every move point, line endpoint, Bézier control, and Bézier endpoint uses the same SVG-to-Three.js conversion. Uniform viewport scaling preserves the wordmark’s proportions.

const svgToThree = ({ x, y }) =>
  new Vector3(x, 120 - y, 0);
Visual specificationPDF · 11 pagesCanonical wordmarkSVG · transparentGeometry contractJSON · schema 1.1Editable specificationMarkdown · canonical copy

03

A working position

I am interested in how software systems become understandable enough to change.

Most of the engineering questions I return to live between product intent and system design: What is the real shape of the domain? Which boundaries are durable, and which ones are just artifacts of the current implementation?

Where is complexity collecting? What would make the next change easier without over-designing for an imagined future?

04

Concepts worth knowing

A field guide to systems that can change.

References that sharpen how I reason about software design, delivery, product experience, and semantics.

01

Software Design

02

Delivery, Operations, and Security

03

Product, UX, and Semantics

  • Laws of UX

    A compact map of psychology, perception, cognitive load, and interaction patterns that shape how interfaces feel.

  • Atomic Design

    A way to think about interfaces as nested systems, from small reusable parts to full product screens.

  • Good Services

    Service-design principles for making products work across discovery, expectations, handoffs, decisions, support, and real user outcomes. [scale]

  • Schema.org

    A shared vocabulary for structured data that makes entities, relationships, and actions easier for systems to understand.

05

Books and operating models

Ideas become useful when they change the work.

  1. 01The 4 Disciplines of Execution

    Focus, lead measures, scoreboards, and accountability rhythms for making important work survive daily urgency.

  2. 02Shape Up

    Project shaping as a discipline: use time constraints as planning inputs, make bets, write pitches, and explore solutions through breadboards and rough wireframes.

  3. 03Atomic Habits

    Small systems, environment design, and identity-based habits as a way to make change compound.

  4. 04Multipliers

    Leadership as the practice of increasing the intelligence, ownership, and capacity of the people around you.

  5. 05The Infinite Game

    Long-horizon thinking, durable purpose, and playing to keep improving rather than simply to win the current round.

06

Current focus

Making sound visible enough to shape.

Most current side-project energy is going into Soundsculpt: exploring AI-assisted audio generation, creative tooling, and product workflows around prompt-driven media.

soundsculpt.app

07

Public artifacts

Running systems, in various states of becoming.

Some are old, some are unfinished. Most moonlight work goes to Soundsculpt, and my day job gets my daylight work.

01
firebase-typed

TypeScript utility layer that adds type inference and safer ergonomics to Firebase realtime database access.

PUBLIC REPOSITORY
02
fullstack-code-gen

Proto-driven generation pipeline for Go, GraphQL, OpenAPI, TypeScript, Dockerized generators, migrations, and typed database access.

PUBLIC REPOSITORY
03
gambit

Realtime multiplayer game architecture with React Router, TypeScript, Supabase, Netlify, database migrations, and test coverage.

PUBLIC REPOSITORY
04
platonic-values

An exploration of which values or commodities are fundamental: how virtues, principles, and character qualities might compose into an ontological map.

PUBLIC REPOSITORY

08

Identity assets

One geometry, every application.

Canonical artwork and implementation assets share a documented translation path, with display, compact, and micro optical profiles selected by rendered width.

Master mark for THOMMaster markSVG ↓Compact mark for THOMCompact markSVG ↓Micro mark for THOMMicro markSVG ↓Social avatar for THOMSocial avatarSVG ↓Favicon for THOMFaviconSVG ↓Light mark for THOMLight markSVG ↓

THOM · System 1.0

Color with a job to do.

A dark, restrained palette that keeps gold as the brand constant, gives status an unmistakable vocabulary, and lets categorical color remain expressive without becoming noise.

01 · Foundation

Canvas, content, and structural contrast.

Every interface begins with the same near-black canvas, warm ivory content, and a two-level border hierarchy.

Background

#050505

Surface

#0c0b09

Raised

#15120d

Foreground

#f2e5cf

Muted

#a99b87

Brand / Primary

#d6b06a

02 · Elevation

Foregrounds follow the surface.

Elevation becomes slightly lighter and warmer as context moves from page content toward focused overlays.

Visual specimen

Card

bg-card · text-card-foreground

Visual specimen

Hover card

bg-hover-card · text-hover-card-foreground

Visual specimen

Popover

bg-popover · text-popover-foreground

Visual specimen

Dialog

bg-dialog · text-dialog-foreground

03 · Interaction

Hover invites. Active confirms. Focus locates.

State changes increase contrast without changing the role a color communicates.

04 · Composition

Constraints keep color coherent.

The system stays expressive by limiting where each family can carry meaning.

  1. 01

    Primary is reserved for brand emphasis, principal actions, selection, and focus.

  2. 02

    Success, info, warning, and error communicate status and always include text or icon context.

  3. 03

    Accents identify categories and visualization series; they never substitute for semantic status.

  4. 04

    Use one accent family inside a component and place chromatic text only on neutral surfaces.

  5. 05

    Decorative borders may stay quiet; inputs, controls, and meaningful boundaries use border-strong.

  6. 06

    Neutral interactions progress from surface to surface-raised to popover across hover and active states.

05 · Semantics

Status colors that stay in their lane.

Each intent owns a readable base, a lightened hover, a darkened active state, and a dark foreground for solid fills.

success

Completed, healthy, or available.

info

Neutral guidance or new context.

warning

Attention is required before proceeding.

error

Failure, destructive action, or invalid state.

06 · Accents

Six categorical colors, two stable handles.

Use hue names when the color itself matters and ordinal aliases when assigning a sequence dynamically.

blue

accent-1 · accent-blue

#7a8aff

rose

accent-2 · accent-rose

#e579c4

lime

accent-3 · accent-lime

#c8bc00

violet

accent-4 · accent-violet

#be9df7

teal

accent-5 · accent-teal

#009084

plum

accent-6 · accent-plum

#ad65be

Dynamic consumers set --accent-color from the typed palette and use Tailwind variable utilities.

Tailwind v4 · Dark foundation

4 semantic · 6 accent