Molecule
Door card
The only centred thing in Harrier. 5 instances across 5 screens, on the door: the one surface of this product that is not behind authentication.
Everything else is a console laid out from the top left of a two monitor desk. The door has no queue, no pane and no analyst yet, so the card takes the middle of an empty screen and stops at 440px.
Anatomy
dark, shipped
Harrier
Sign in
No password here. Your email decides which provider signs you in.
light, the pair
Harrier
Sign in
No password here. Your email decides which provider signs you in.
.doorcardthe card.margin:autoin a flex zone, which is what centres it in both axes without a single fixed position.doormarkthe wordmark, and it is a paragraph rather than the heading. Theh1names the screen, and the one public page of a security product does not put a brand where the page title belongsfieldone, and the button under it. There is no password: the email decides which provider signs you inbannerandblockoptional zones. A banner above the form when the last attempt failed or the session expired; a block below when there is something to explain
Variants
| Axis | Value | The rule |
|---|---|---|
| zones | banner present or absent | Its only axis, and it is not a modifier. What is in the card is decided by what happened before it was rendered: a session that expired, a provider that errored, an address that was deep linked |
| width | no values | 440px, once. A wider sign in card on a 1920 monitor reads as a form to fill in; this is one field and one button |
| emphasis | no values | There is one action and it is the primary. A second action on a door is a second way in |
When to use it
On the five door screens: sign in, signed out, session expired, provider error, and a deep link that needs authentication first. It is the whole of cluster 1 in one component.
Where she meets it. Once a shift at most, and at 03:00 when a pager link lands her here before the case. That second path is why the deep linked form keeps the address it was going to: ia/docs/sitemap.md settles that a case opened from a pager survives the sign in.
Rule and anti-rule
Do
Harrier
Sign in
The wordmark as a line, the screen name as the heading. A screen reader reads Sign in as the page, which is what the page is.
Do not
Harrier
Never the brand as the h1. It tells assistive technology the page is called Harrier, which is true of all sixty two screens and useful on none of them.
States
It has none, and it is not interactive.
dark, shipped
Harrier
Sign in
No password here. Your email decides which provider signs you in.
light, the pair
Harrier
Sign in
No password here. Your email decides which provider signs you in.
The field and the button inside it are, and both carry their own.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--bg-page | fill | the card’s ground, against the zone behind it | ||
--line-edge | line, exempt | the card’s boundary, through --rule-edge |