Organism, and it contains another
Screen
The column the whole product lives in. 62 instances across 62 screens: every screen in the product is one. Z1 at the top, Z2 under it, and everything else filling what is left.
Three declarations, and the reason it is a component at all is the one beside it. shell is a row and this is a column: the documentation panel and the product are siblings, and only one of them stacks. Take that away and the top bar sits beside the console instead of over it.
The one photograph in the product is painted here, and it is not on this page. .screen:has(.door) lays an image behind everything at z-index:-1 at 78 per cent, with a gradient of --bg-page over it running 30 to 78 per cent down the surface, and isolation:isolate keeps the negative index inside this box rather than sending it behind the page. The rule is here rather than on door because the image belongs to the whole surface, and the card on top of it keeps its own opaque ground so it stays readable. The stand describes it and does not wear it: open the real door to see the thing itself.
The rename is done, and a screen written today writes class="screen". Stage 08 step 2 ruled it and step 6 executed it: all 53 coloured screens carry it and none carries .wf-screen. It was the largest single row in the rename map and it moved not one pixel. The grey corpus still says .wf-screen and always will, because wireframes/ has been frozen since stage 05, and that asymmetry is a property of the two corpora rather than an unfinished job.
Anatomy
A diagram of the zones, not a scaled scene. A screen is a viewport, and a viewport in a documentation column is a photograph of a monitor. What is real below: the top band is --zone-top at 56px and the strip under it is --zone-strip at 26px, both at their own heights rather than drawn to them, and the pane band is --pane-w, 320px at 1440 and 380px above 1560. The overall height is the fiction.
dark, shipped
the split, flex:1 1 auto. On five screens this band is the door instead, and the two bands above it are not rendered at all
--pane-w · 320px here, 380 above 1560
Z1 and Z2 are at their token heights. The rest is what is left
Z1 and Z2 keep those heights at this width too. What is under them stacks, and the drawing above is the desk rendering
light, the pair
the split, flex:1 1 auto. On five screens this band is the door instead, and the two bands above it are not rendered at all
--pane-w · 320px here, 380 above 1560
Z1 and Z2 are at their token heights. The rest is what is left
Z1 and Z2 keep those heights at this width too. What is under them stacks, and the drawing above is the desk rendering
.screenflex:1 1 auto,min-width:0, a flex column on--bg-page. Five declarations and the last of them is the only paintz1, z2the class is in no html file.design/_shell.jsinjects both on every authenticated screen, which is why an inventory taken from the screens alone has no header in it and does not noticez45 or doorwhatever is left. One of the two, never both: authenticated on 55 and the door on 5:has(.door)::beforethe photograph, at 78 per cent behind everything:has(.door)::afterthe gradient over it,--bg-pagefrom 30 to 78 per cent. Two pseudo elements rather than one, because the image and the wash have to be dimmed and tinted separately or the card stops being readable
Variants
One axis, three values, and all three are about what is inside rather than about how the column paints.
| Axis | Value | Uses | The rule |
|---|---|---|---|
| route | authenticated | 55 | Z1, Z2 and the split. The console, and it is what fifty five of the sixty two screens are |
| door | 5 | the only surface not behind authentication, and the only one carrying a photograph. No top bar and no strip, because there is nobody signed in to name and nothing to navigate to. The image belongs to the whole column rather than to the card standing on it | |
| no strip | 2 | Z1 without Z2, on the systemic states. The bar renders as z1--out, which drops the navigation, the map and the annunciator, and there is no strip because there is no connection to report on | |
| theme | no values | – | Prohibited here. The theme is an attribute on the root and every role pairs itself. A screen that could choose its own ground would let one surface of the console disagree with the rest of it |
When to use it
Once per page, inside shell, holding everything that is the product. If something on the page is not the product, it is the documentation panel and it is the shell’s other child.
Where she meets it. Never, and that is the measure of it working. This component has no ink, no line and one fill; what she meets are the four things standing in it. The one place it becomes visible is the door, where the product is allowed to look like something before it looks like a tool, and even there the visible part is a photograph the column carries for the card.
Rule and anti-rule
The two drawings below are proportional rather than measured: the point is the axis they stack on, and neither of them has a token width.
Do
A column. The top bar spans the product and the console fills what is left, which is what every one of the sixty two screens is.
Do not
Never a row. The row is shell, one level up, and its job is to put the documentation panel beside the product. Make this one a row too and the two siblings become indistinguishable, which is the reason the split into two components exists at all.
States
It has none, and it is not interactive. Every state on a Harrier screen belongs to something standing inside this column.
dark, shipped
and it has no other
--pane-w
light, the pair
and it has no other
--pane-w
The two bands at the top hold their heights in both themes and at both widths: 56 and 26 are the same at 360 as at 1920, because the shell above stops being a viewport there and every zone releases its own scroll rather than shrinking.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--bg-page | fill | the ground of the whole product, and the only colour this component sets | ||
--bg-page | fill, twice over | the gradient over the door photograph, the same role at 30 and 78 per cent through color-mix |
One role, read twice. The image itself is a visual rather than a token, and it lives at design/visuals/door.jpg with its origin recorded beside it.