Bento Grid

A design substrate, not another builder.

Tokens, surfaces, containers, behaviours — all readable by humans and agents alike. Composition is the entire product.

Timeline composer

From palette to package in one sitting.

Pick a constellation. Wire a behaviour. Export an .lsd. Hand it to your stack.

Every cell knows its weight.

Set data-tier="elevated" for a quiet lift, "high" for a directional accent wash. The colour thinking is done by the substrate.

Drag rounds to the scale.

Resizes lock to the next size step — never a rogue pixel.

Reflow by context.

A cell asks the parent its width, not the viewport.

One wire, many children.

Fan-out actions with origin modes — first, center, edges, random.

Triggers → actions → targets.

A visual JS designer for the parts that resist tokens.

Read a parent's surface, paint accordingly.

Components stay layout-only; colour flows from context.

Timeline-based motion.

Layers, ruler, draggable keyframes — Flash DNA for the modern web.

The cosmos is the design system.

Galaxies set palette, nebulas tune contrast, constellations decide hierarchy. Cells inherit the conversation.

// surface-aware
.card {
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--line);
}
// reads tier from parent
@container style(--tier: high) {
  .card { background: var(--bg-accent); }
}

+38%

Shipped surfaces vs last cycle.

Constellation map

A live view of every token in flight.

Package an .lsd

six contributors this cycle.