TESSERA

Sobre el sistema

Creado a partir de

La web Tessera

Componentes

41 en 7 grupos, con todos sus estados

Tipografías

Inter Tight, DM Mono

Resolución

Cada imagen del sistema puede dibujarse como una matriz de glifos y teselas en sus propios colores. Cambia a Celdas y las fotografías se vuelven matrices, la marca cierra su retícula y los medidores pasan a barras de teselas; cambia a Imagen y cada foto se resuelve tesela a tesela desde su foco mientras la tesela suelta de la marca sube a su sitio.

Formato

HTML, CSS y JavaScript sin dependencias, más DESIGN.md

Versión

1.0

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

En contexto

Una página de empleo para un estudio de diseño, hecha solo con el kit: roles que se filtran, cinco estudios con su propia hora y una candidatura que valida sin enviar nada. Se incluye como página base, lista para cambiarle el nombre.

En el kit

DESIGN.md

Las reglas para construir con el sistema, escritas para pasárselas a Claude, a Lovable o a un desarrollador

tokens/tokens.json

Cada color, tamaño, espacio y tiempo como tokens con nombre

tokens/tokens.css

Los mismos tokens como variables CSS, con las hojas de tiza y las dos resoluciones

css/tessera.css

Todos los componentes y sus estados

js/tessera.js

La matriz y su lente, Resolución, ondas de teselas, etiquetas de glifos, pestañas, diálogos, avisos, relojes de los estudios y la vista previa del índice. Sin dependencias

components.html

Cada componente en cada estado, uno al lado del otro

starter/index.html

Una página de empleo para un estudio, hecha solo con el sistema

assets/imagery/

Fotografías de cerca, in situ y de fondo a resolución completa

LICENSE.md

Uso comercial en tus proyectos y en los de tus clientes

Construir con una IA

1. Adjunta DESIGN.md

   Añádelo a tu conversación en Claude, Lovable o cualquier herramienta de IA.

2. Describe tu página

   Con tus palabras, tu marca y tu contenido.

3. Quédate con el código o llévalo a otro stack

   Enlaza el CSS de tokens y componentes, o pide React. Las reglas se mantienen igual.

Componentes

Estructura

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

Acciones

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

Entrada

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

Datos

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

Indicadores

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

Contenido

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

Capas y navegación

Dialog, Navigation bar, Menu, Pagination, Footer