Names the tokens an app may override to restyle an interface, and a component reads to inherit that styling, and
gives the custom property each one resolves to, for a value taken outside the cascade. A token is read wherever a
CSS value is written by hand, and assigned to a subtree through a style declaration any rendering layer accepts.
The values behind them are provided by the companion stylesheet.
An app that includes the stylesheet gets a brand-agnostic default look, light or dark according to the platform
colour scheme; one that redefines the tokens gets its own, with no component change. Components name tokens through
this contract rather than through literal strings, so a renamed token breaks the build instead of silently losing
its styling.
Override order — the stylesheet declares its rules in a tile cascade layer, so a rule an app or a component
writes outside a layer wins whatever order the two stylesheets reach the document in, and whichever selector is the
more specific. An app whose own rules are layered orders its layer after tile.
Missing and malformed values — a token carrying a literal states it as the registered default of its custom
property, so the value lives in one place. A malformed override is caught only where the token has a fixed type: a
weight, a duration or an opacity the browser cannot parse stays on its default. Most tokens, the colour anchors and
the sizes among them, take an override as written, so a malformed value leaves whatever reads it unstyled rather
than on the default. A component styled against a token it cannot count on, because the stylesheet may not
be loaded at all, names its own fallback in the reference it writes by hand: var(--tile--color-strong, #06C),
which is the one case css.var does not cover.
First paint — the stylesheet has to reach the document before it is painted, or the first frame shows the
unstyled markup: an app bundling it from the entry point is served by the bundler, while one assembling its own HTML
links it in the document head. An override stated in a <style> in the document head is in force from the first
frame, so a loader painted before the stylesheet arrives already reads the app's brand.
Values outside the cascade — a consumer painting where a reference doesn't reach, on a canvas or against an API
taking a colour as text, takes the value a token resolves to for the element it applies to, rather than a copy of
the default, and so keeps whatever the app overrode and whichever colour scheme is in force. A colour token holds a
light-dark() pair or a mix until something paints with it, so it is resolved through a colour property of an
element in the subtree:
Design system.
Names the tokens an app may override to restyle an interface, and a component reads to inherit that styling, and gives the custom property each one resolves to, for a value taken outside the cascade. A token is read wherever a CSS value is written by hand, and assigned to a subtree through a style declaration any rendering layer accepts. The values behind them are provided by the companion stylesheet.
An app that includes the stylesheet gets a brand-agnostic default look, light or dark according to the platform colour scheme; one that redefines the tokens gets its own, with no component change. Components name tokens through this contract rather than through literal strings, so a renamed token breaks the build instead of silently losing its styling.
The tokens are grouped by what they decide, each group standing on its own alongside the stylesheet module stating its values: typography, spacings, scalings, borders, colors, elevations, palettes, layers, motions, opacities, viewports and visuals. tile gathers them, so a consumer names a token without knowing which group it belongs to.
Example
Include the stylesheet once, at the entry point of the app:
Override any token to restyle the whole interface, stating a colour for both schemes as a
light-dark()pair:Pin a colour scheme, on the root element or on any subtree that has to differ from the page:
Assign the tokens inline to restyle a single subtree instead:
Read a token where a single CSS value is written by hand:
Remarks
Override order — the stylesheet declares its rules in a
tilecascade layer, so a rule an app or a component writes outside a layer wins whatever order the two stylesheets reach the document in, and whichever selector is the more specific. An app whose own rules are layered orders its layer aftertile.Missing and malformed values — a token carrying a literal states it as the registered default of its custom property, so the value lives in one place. A malformed override is caught only where the token has a fixed type: a weight, a duration or an opacity the browser cannot parse stays on its default. Most tokens, the colour anchors and the sizes among them, take an override as written, so a malformed value leaves whatever reads it unstyled rather than on the default. A component styled against a token it cannot count on, because the stylesheet may not be loaded at all, names its own fallback in the reference it writes by hand:
var(--tile--color-strong, #06C), which is the one case css.var does not cover.First paint — the stylesheet has to reach the document before it is painted, or the first frame shows the unstyled markup: an app bundling it from the entry point is served by the bundler, while one assembling its own HTML links it in the document head. An override stated in a
<style>in the document head is in force from the first frame, so a loader painted before the stylesheet arrives already reads the app's brand.Values outside the cascade — a consumer painting where a reference doesn't reach, on a canvas or against an API taking a colour as text, takes the value a token resolves to for the element it applies to, rather than a copy of the default, and so keeps whatever the app overrode and whichever colour scheme is in force. A colour token holds a
light-dark()pair or a mix until something paints with it, so it is resolved through a colour property of an element in the subtree: