Pixel Utility Family Design System (AI-Ready)

29 March 2026

Raw Markdown: pixel-family-design-language.md.

0. Role of This Document

DESIGN.md is the design-side counterpart to AGENTS.md.

It is not a marketing deck, but a shared design contract for both humans and AI agents. Every browser-native image, PDF, format-conversion, and batch-export utility in the Pixel family inherits these tokens, layout rules, and component semantics before writing UI code.

Scenario	Priority
User requests a 1:1 match with a specific reference site	Reference implementation takes precedence
Building a new utility in the Pixel product family	This `DESIGN.md` takes precedence
Feature-specific controls	Keep the family shell fixed, swap only inner modules

1. Product Family Goals

This product line is a family of browser-native media utilities built around three qualities:

Goal	Design Expression
Local-first & trustworthy	Paper-light surfaces, restrained motion, crisp hierarchy
Cohesive family	Shared header, locale switch, dropzone, queue, and settings rail
Warm precision	Soft borders, subtle elevation, careful type scale and tracking

A precise, restrained, browser-first family of media utilities.

2. Desktop & Mobile Skeleton

Region	Role	Reused Across Family
Header	Title, workspace tabs, locale switch	Yes
Left Workspace	Dropzone, summary cards, file queue	Yes
Right Configuration	Parameter modules, primary actions, credits	Yes

3. Color & Surface Tokens

Token	Value	Usage
App Background	`#FDFDFD`	Page canvas
Panel Background	`rgba(255,255,255,0.96)`	Primary cards, queue, settings
Muted Panel	`rgba(250,250,250,0.96)`	Secondary groups
Border Default	`#E5E5E5`	Primary hairline borders
Text Primary	`#1D1D1F`	Headings & primary copy
Text Secondary	`#525252`	Supporting copy
Text Muted	`#8B8B8B`	Hints & empty states
Accent Ink	`#171717`	Active pills & primary actions
Success	`#238057`	Saved file size & completion badges