@texturehq/edges-visuals

@texturehq/edges-visuals

Texture brand visual primitives — patterns, motifs, illustrations, and photo-treatments. This is the brand layer of the design system: the surfaces, marks, and editorial flourishes that make Texture look like Texture. UI components (buttons, inputs, layouts, data displays) live in @texturehq/edges and do not belong here.

It exists for everyone who reaches for Texture's visual language: product surfaces in @texturehq/edges and apps/www, marketing pages, decks, exported Figma libraries, and AI agents that compose brand-correct artwork. Visuals here are tree-shakeable React components and accompanying raw assets so a consumer can import { ... } from "@texturehq/edges-visuals/patterns" for live composition or pull an SVG/PNG out of assets/ for a static export.

What does not belong here: anything interactive or stateful, anything that consumes form/data primitives, layouts, navigation, or page chrome. Those are UI concerns and live in @texturehq/edges. If you find yourself reaching for react-aria-components, react-hook-form, or app-level routing in this package, you are in the wrong package.

Decisions & scope

Why a separate package from @texturehq/edges. The two packages serve different consumers and ship at different cadences. @texturehq/edges is product UI infrastructure consumed by React apps; @texturehq/edges-visuals is brand artwork consumed by product, marketing, sales, PMM, decks, Figma libraries, and non-React tooling that needs raw SVG/PNG manifests. Keeping them split lets brand iterate independently of UI, lets non-React consumers pull assets without dragging a UI runtime, and preserves a clean mental model: edges = how we build UI, edges-visuals = how we look.

Why the name edges-visuals. Family consistency with @texturehq/edges and @texturehq/edges-tokens. The edges-* prefix signals "part of the Edges design system" and keeps the public surface area predictable as the system grows.

In scope: patterns, motifs, illustrations, photo-treatments, and the typed manifest of those entries. Not in scope: UI components — those live in @texturehq/edges. If a primitive needs interactive state, form integration, or layout responsibilities, it belongs there, not here. (textures was retired in PR #10544.)

Tracking project: Edges — Unified Design System.

Installation

This package is consumed via the workspace inside the mono repo:

// some-app/package.json
{
  "dependencies": {
    "@texturehq/edges-visuals": "workspace:*"
  }
}

Usage

Always prefer subpath imports — they keep bundles tree-shakeable.

// Brand patterns (lines, dots, grids)
import {
  AnglePattern,
  CellPattern,
  GridPattern,
  PerspectiveGridPattern,
} from "@texturehq/edges-visuals/patterns";

// Decorative motifs
import { /* …motif components */ } from "@texturehq/edges-visuals/motifs";

// Editorial illustrations
import { /* …illustration components */ } from "@texturehq/edges-visuals/illustrations";

// Photo treatments (duotone, overlays)
import { /* …photo-treatment components */ } from "@texturehq/edges-visuals/photo-treatments";

// The typed catalog of every public visual
import { visualsManifest, type VisualEntry } from "@texturehq/edges-visuals/manifest";

Raw asset files (SVG/PNG) ship under ./assets/* and can be imported by tools that need the source artwork directly (Figma exports, deck builders, etc.).

Domains

Subpath	Purpose	Status
patterns	Repeating, tileable brand patterns	Live — AnglePattern, CellPattern, GridPattern, PerspectiveGridPattern (ALL-833)
motifs	Small recurring brand marks and shapes	Skeleton — deferred
illustrations	Full editorial illustrations and scenes	Skeleton — deferred
photo-treatments	Duotone, gradient overlays, composable photo effects	Skeleton — deferred

Manifest

@texturehq/edges-visuals/manifest exposes a typed visualsManifest: VisualEntry[] catalog of every public entry in this package. Tools, docs sites, agents, and design surfaces should consume the manifest instead of crawling the source tree.

Design tokens

This package depends on @texturehq/edges-tokens for color and surface tokens. It must not depend on @texturehq/edges. Components consume tokens via CSS variables (e.g. var(--color-gray-100)); consumers should make sure the relevant token CSS is loaded in their app.

Patterns that ship with raw assets

AnglePattern, PerspectiveGridPattern, and GridPattern reference image assets shipped under ./assets/patterns/. By default the components load them from /patterns/<file> (matching the convention used by apps/www). To use a different path, pass assetSrc (or textureSrc for GridPattern) directly. To regenerate the static SVG snapshots used in assets/patterns/{cell,grid}.svg, run:

node scripts/generate-pattern-assets.mjs

Scripts

yarn lint        # Biome
yarn typecheck   # tsc --noEmit
yarn test        # vitest run
yarn build       # tsup
yarn dev         # tsup --watch