Grasp's design system

Throughline keeps Grasp in one voice.

The colours, type, marks and rules behind Grasp, locked into one system. The app, the landing page and the decks Claude makes all read from it, so every piece looks like it came from the same hands.

Open the showcase Get it on GitHub

Version 1.3.6 · Locked 28 October 2026

How it works

Three parts, one lock.

  1. The tokens

    Every colour, face, size, space and corner as a named value. Grasp's code styles only from them: no raw colours, no sizes picked by eye.

    See the tokens

  2. The brief

    How Grasp uses those values: a cream page with ink type, a serif headline with one italic phrase, lilac for the one thing to press. Claude reads it before it makes anything.

    Read the brief

  3. The gate

    A check on every file Claude writes in Grasp's code. A shadow, a gradient or a stray colour code is refused before it lands, so the system cannot drift quietly.

    See what it guards

Where it runs

One system, every surface.

  • Grasp's app

    The live map, the cards and every screen around them, styled from the installed tokens and the shadcn/ui components they dress.

  • grasp.page

    The landing page, on the same tokens and recipes as the app.

  • Claude Slides and Design

    Throughline's Design System page in Claude, so decks and designs come out as Grasp without anyone restating a value.

  • Other tools

    DESIGN.md, DTCG tokens for Figma and Style Dictionary, and a shadcn registry item for any React project. All of them are in the showcase's files.

Asking Claude

Ask for the piece, not the look.

Name the system, hand Claude the content and the reader, and let the system do the rest.

A six-slide deck on how Grasp maps a lecture, for a teacher who has never seen it. Use the Throughline design system. Here are my notes: [paste them]

Do

  • Name the system in every request. Claude uses it only when asked.
  • Give Claude the content and the reader. Your notes, who it is for, and what they need from it.
  • Describe a change by what you want. “Make the title quieter” lets Claude pick the right step.
  • Start a new chat when a piece drifts. Name the system again and bring only the content.

Don't

  • Paste colour codes, sizes or font names. They override the system and the piece drifts.
  • Ask it to look like another brand. It pulls the piece away from Grasp.
  • Restyle an old deck. The old style wins: bring the text, not the template.
  • Mix two design systems in one piece. Pick one and say which.

Versions

Every change comes back as a new lock.

Throughline is made and kept with Substrate. A change goes through the lock and returns as one version: in the code, in Claude and on this page together.

  1. 1.3.628 October 2026A 44px control height for form fields.
  2. 1.3.521 October 2026A map's sticker pictures may cast a drop-shadow, by depth.
  3. 1.3.419 October 2026Canvas motion at half the interface's speed, and the settings popover recipe.
  4. 1.3.216 October 2026Annotation stickers, in their own group.
  5. 1.3.011 October 2026The Grasp logo, the mark and the live spark; a sun yellow.

See it all at once.

Every colour, type style, component and file, live, on one page.

Open the showcase Get it on GitHub