Examples

Browse the schema-valid DTIF fixtures that accompany the specification and technical report. Each example has a dedicated page with an introductory summary and a representative JSON excerpt. For additional narrative context, see the examples README.

Example catalog

• Animation tokens — Duration and easing fixtures that align CSS, iOS, and Android timelines.
• Border tokens — Cross-platform border strokes with per-corner radii and style metadata.
• Color space tokens — Color tokens expressed with sRGB, Display-P3, and OKLCH values.
• Complete design system tokens — A comprehensive fixture with metadata, extensions, themes, and aliases.
• Complex tokens — Interdependent tokens with aliases, themes, and platform metadata.
• Cursor tokens — Pointer styles with CSS strings, iOS beams, and Android hotspots.
• Dark theme tokens — A dark theme brand color that pairs with the light palette.
• Elevation tokens — Surface elevations for CSS, UIKit, and Android shadow models.
• Extension metadata tokens — Tokens that attach custom extension data to colors, components, and motion.
• Filter tokens — Filter pipelines that reuse shared shadow tokens across platforms.
• Font face tokens — A downloadable fontFace token linked to a typography style.
• Font scale tokens — Dimensions that toggle the fontScale flag for scalable values.
• Font tokens — Font declarations spanning CSS, iOS system, and local families.
• Gradient tokens — Linear and radial gradients with stops, hints, and keyword angles.
• Light theme tokens — The light theme brand color used throughout the fixtures.
• Minimal tokens — The smallest valid DTIF document with a single spacing token.
• Motion tokens — Motion transforms for CSS, UIKit/Core Animation, and Android APIs.
• Opacity tokens — Overlay and scrim opacities with aliases and expression values.
• Override tokens — Conditional overrides with fallbacks tied to prefers-color-scheme.
• Shadow tokens — Shadow styles for CSS, Android, and iOS surface treatments.
• Typography base tokens — A baseline typography style with family and size settings.
• Typography complete tokens — The fully merged typography style produced after layering.
• Typography grammar tokens — Typography values that exercise CSS grammar shorthands and features.
• Typography layer tokens — An additive typography layer that supplies weight and line height.
• Typography line-height tokens — Line heights expressed as ratios, pixels, ems, and scaled points.
• Typography optional property tokens — Typography descriptors covering variant, stretch, and line metrics.
• Typography unit tokens — Typography sizes expressed with characters, percentages, points, and viewport units.
• Z-index tokens — Stacking context values aligned with CSS, iOS, and Android APIs.