Tokens-only page

Every value on this page traces to either tokens.json or the breadcrumb skill's own spec -- nothing hardcoded, nothing eyeballed. Hover any block of text in the page source to see the token cited in a CSS comment next to it.

Source
alligo-design-tokens (alligo-design-tokens on npm)
Generated from
dist/css/base/color.css, dist/css/base/dimension.css, dist/css/base/border.css, dist/css/base/shadow.css, dist/tailwind/typography.css
CDN URL this repo loads
https://unpkg.com/alligo-design-tokens@latest/dist/css/index.css
Token counts in tokens.json
92 colors, 17 spacing steps, 20 type styles, 16 shadows, 3 border widths, 1 radius
Composed entirely from tokens

Background, border, shadow, padding, and both text styles on this card are each a direct token.json lookup -- see the CSS for the exact token name behind every property.

surface-raised-primary + border-primary + elevation-b-40

Full transparency -- values NOT from tokens.json

  • font-family: 'Breuer Condensed' -- the family name isn't a JSON field (tokens.json strips it as redundant, since every typography entry uses the same one). It comes from loading this same package's fonts.css in the <head>.
  • --px-page (16/32/32/40px per breakpoint) -- not in tokens.json (page-margin isn't part of the Supernova export), but is documented directly in breadcrumb/SKILL.md's own breakpoint table, and used here exactly as specified there.
  • --duration-fast-3 / --ease-standard -- referenced by name in breadcrumb's CSS template but not numbered there. Motion tokens aren't part of the Supernova export at all; these are the actual values already live in every other page's :root (verified against template.html).
  • box-sizing: border-box reset -- a CSS mechanic, not a design decision, so not a token to begin with.