Florian Schrödl

Design Tokens give teams a single source of truth for design decisions like colors, spacing and typography. My work brought the DTCG Spec to Penpot as an open-source design tool.

Responsibilities

For Penpot I delivered the integration for Design Tokens in the Penpot app.

• Collaborated with the Penpot team and the people from Tokens.studio to bring the design token standard to Penpot.
• Spec & documentation work to define the loosely defined format.
• Implementation in Clojure/Script across frontend and backend.
• Defined the design tokens data shape and delivered the UI implementation.
• Communicated efforts across both teams.

Every design token carries a $value — a single string that might hold a color, a reference to another token, a piece of math, a template string, or a function call. Previous tooling picked these values apart with stacked regexes and ad-hoc string handling, which grew brittle the moment tokens started referencing and computing each other.

For the next generation of tokens at tokens.studio we needed something definite: a real language with a real grammar, so that a $value means exactly one thing and can be evaluated safely and predictably.

What Tokenscript is

Tokenscript is a small domain-specific language, and an interpreter for it, that turns design tokens into a computable medium. Instead of thousands of bespoke transform functions, it ships a focused subset of language features that stay fast, type-safe and sandboxed.

• References — tokens resolve other tokens ({primary-color}), with the full dependency graph tracked and evaluated in order.
• Unit-aware math — units travel through operations as metadata, so round(1.5px) is 2px and sum(1in, 72pt) converts and collapses to 2in.
• Template strings — backtick syntax composes values from references and expressions, e.g. `${spacing.base * 2}px`.
• Custom types & schemas — define your own types, units and functions, then bundle them as schemas that ship logic alongside token data.

Try it

A mini playground running the real interpreter in your browser — it loads lazily as you scroll here. Themes are just different stacks of token sets; edit the JSON and watch everything recompute.

Responsibilities

• Designed and implemented the language from the ground up in TypeScript — lexer, parser and tree-walking interpreter.
• Built the token resolver that walks the reference graph and evaluates each $value in dependency order.
• Shaped the math and unit system so units are preserved and converted correctly across every operation.
• Wrote a tolerant parser and structured error reporting so tooling can surface precise, recoverable feedback to authors.
• Shipped the public interpreter package, docs, an interactive REPL playground and example apps.

An AI agent harness that works from any device I own. Sessions are live connected and shared via tailscale for the tui, browser and mobile.

• One architecture, three surfaces — a standalone terminal UI, a multi-room WebSocket server, and a browser client are all assemblies of the same handlers.
• The events are the wire protocol — client and server both run ClojureScript, so the same event maps.
• Pluggable providers — Claude via the Agent SDK, or a local Ollama model, behind one small provider interface.
• Extensions as data — knowledge base, web search, commit helpers, GTD, plan mode and more are plain data maps.

Responsibilities

I worked on the team behind the presentation-consuming side of the product: the experience of delivering and watching presentations.

• Built features across the presentation experience, including the animations feature that brought motion and transitions to slides.
• Helped build interactive multiplayer Slide decks that are synced between clients.
• Contributed to the analytics front-end — graphs, tables and data visualisations that surface how viewers engage with a deck.
• Helped maintain and extend the internal component and design system that the app is built from.

MindMeister is Meisterlabs' flagship collaborative mind-mapping app.
During my time there I played an integral role in the team modernizing their existing legacy application by rebuilding it in React.

Responsibilities

• Engineered the high-performance canvas editor in React, able to render very large mind maps by virtualizing nodes geometrically, so only what's on screen is drawn.
• Responsible for the performance of the canvas (> 10,000 nodes)
• Built a robust drag-and-drop system and drawing interactions directly on the canvas.
• Created a file explorer for navigating and organising mind maps.
• Improved the team's productivity by building dev tools to debug & test the new mind-mapping canvas.
• Coached engineers from junior to senior in the tech stack, and helped bootstrap the team's documentation and unit-testing culture.