Design token
Z-index
Z-index tokens turn stacking into a named scale — dropdown, sticky, modal, toast — instead of the familiar mess of z-50, z-9999, and z-[100000] competing for the top. A defined order is the difference between predictable layering and a modal that hides behind a header.
How Windcraft owns it
Windcraft holds your z-index scale as the source and generates it into your Tailwind config and CSS variables. AI tools read it over MCP via get_design_tokens, so generated overlays use the named layer rather than guessing a number.
Generated into
- Tailwind config
- CSS variables
Example
Named layer vs magic number
// uses a named z-index token
<div className="z-modal" />
// the magic-number pile a scale replaces
<div className="z-[9999]" />FAQ
- Why tokenize z-index at all?
- Because untokenized stacking devolves into z-9999 wars. A named scale gives every layer a defined place, so a modal is always above a dropdown and a toast is always above both.
- Do AI tools read the z-index scale?
- Yes. get_design_tokens returns it over MCP, so generated overlays reference your named layers instead of inventing numbers.
- Where does the scale live in my code?
- In the generated Tailwind config and CSS variables, so components reference layers by name from one source.