TESSERA

About the system

Built from

Tessera website

Components

41 in 7 groups, every state

Typefaces

Inter Tight, DM Mono

Resolution

Every picture in the system can be drawn as a matrix of glyphs and tiles in its own colours. Switch to Cells and the photographs become matrices, the mark closes its grid and meters turn into bars of tiles; switch to Image and each picture resolves tile by tile from its focus while the loose tile of the mark lifts into place.

Format

HTML, CSS and JavaScript with no dependencies, plus DESIGN.md

Version

1.0

• Basalt#121110
• Coal#1B1A18
• Overcast#8B8D90
• Fog#B9BAB9
• Chalk#EDEBE7
• Ink#141312
• Cocoa#3B2A22
• Umber#8A6650
• Sand#E9C9A6
• Ember#C98A6E

In context

A careers page for a design studio, built only from the kit: open roles you can filter, five studios on their own clocks and an application that validates without sending. It ships as the starter, ready to rename.

In the kit

DESIGN.md

Rules for building with the system, written to hand to Claude, Lovable or a developer

tokens/tokens.json

Every colour, size, space and timing as named tokens

tokens/tokens.css

The same tokens as CSS variables, with the chalk sheets and both resolutions

css/tessera.css

All components and their states

js/tessera.js

The matrix and its lens, Resolution, tile waves, glyph labels, tabs, dialogs, toasts, studio clocks and the index preview. No dependencies

components.html

Every component in every state, side by side

starter/index.html

A careers page for a studio, built only from the system

assets/imagery/

Up close, in situ and ground photographs at full resolution

LICENSE.md

Commercial use in your own and client projects

Building with an AI

1. Attach DESIGN.md

   Add it to your conversation in Claude, Lovable or any AI builder.

2. Describe your page

   In your own words, with your own brand and content.

3. Keep the code or port it

   Link the token and component CSS, or ask for React. The rules hold either way.

Components

Layout

Basalt and chalk sheets, Twelve-column grid, Section head, Drawn hairline, Tile marker

Actions

Tile button, Tech link, Icon button, Copy line, Text link

Input

Text field, Select, Textarea, Checkbox, Radio, Cube switch, Segmented control

Data

Index tabs, Work index with preview, Figures, Studio hours, Capabilities

Status

Tag, Studios-open tag, Note, Tile meter, Steps, Toast, Loader

Content

Matrix picture, Plate, Project card, Client tile, Quote, Person card, Service row

Overlay and navigation

Dialog, Navigation bar, Menu, Pagination, Footer