Redline spec
A component with its size, spacing, type and colours drawn on, as an image, HTML or Markdown.
A redline spec is a component with its measurements drawn on, for a design review or a handover to whoever builds it next.
- Select the element.
- Press the download button beside its name at the top of the Element tab, and choose a format.
| Format | What you get |
|---|---|
| Redline image (.png) | A picture of the element with its width and height in red, padding in green inside each edge, margin in orange outside it, its children outlined with the gaps between them, and its type and colours listed under it |
| Redline spec (.html) | The same drawing, then a table for each group: size, spacing, type, colours and effects, in one file that needs nothing else |
| Redline spec (.md) | The tables as Markdown, and its children with their sizes |
| Copy spec as Markdown | The same Markdown on the clipboard |
Lengths are in CSS pixels. Each colour carries its nearest palette name, such as Blue 600, and the font says what the text is really drawn in when that is not the first family. The picture is taken without Nitpique's overlay or a design overlay on it.
Questions
Which units does the spec use?
CSS pixels, as the browser lays the element out.