Organism
Door
The one surface of this product that is not behind authentication, and the only one that carries a photograph. 5 instances across 5 screens. Everything else in Harrier is a console; this is a page, and it is the single place where the product is allowed to look like something before it looks like a tool.
The image is on the screen and not on this component. .screen:has(.door) paints it behind everything at z-index -1 with a gradient over it, so the card keeps its own opaque ground and stays readable. That rule lives with screen because the image belongs to the whole surface rather than to the column, and this page does not reproduce it: a documentation column wearing a photograph would be the stand looking like the product instead of describing it. Open the real door to see it.
No variants. What differs between the five is what the card holds: a banner when the last attempt failed, a block when there is something to explain, an address when a deep link is waiting. All five are door cards.
Anatomy
A scaled scene, not a diagram. A screen region cannot be shown at full size inside a documentation column, so this is a smaller box with the real markup in it: the card is at its own 440px, the padding is --space-7 over --space-4, and the type is the product’s. The only fiction is the height, which is 420px here and a viewport in the product.
dark, shipped
Harrier
Sign in
You land on /case/C-4417
No password here. Your email decides which provider signs you in.
Cannot get in?
Harrier does not hold your password and it does not create accounts. Your seat comes from your provider.
the photograph is omitted here on purpose. It belongs to screen
light, the pair
Harrier
Sign in
You land on /case/C-4417
No password here. Your email decides which provider signs you in.
Cannot get in?
Harrier does not hold your password and it does not create accounts. Your seat comes from your provider.
the photograph is omitted here on purpose. It belongs to screen
.doorthe surface. A flex column that grows into whatever screen leaves it, scrolls on its own, and pads--space-7over--space-4so the card never touches an edge at 360.door h1--size-xlat weight 600 on--leading-tight. The heading names the screen, and the wordmark above it is a paragraph.door codean address on the door is a run of code inside a sentence, on--bg-surfaceat--size-sm, wrapping anywhere. Not theaddrblock: there is nothing to copy yet, only somewhere you were going.doorformthe sign in form. A place rather than a component: one field, one button,--space-3between them.doorhelpthe help below it, over a hairline, at--size-smwith its paragraphs in--text-secondary. Also a place rather than a component.door .banner > pone child, and the rule is here to keep it to one. banner makes a flex item of every element child, so a secondbstarts its own line and the punctuation after it orphans. Seen at 1440
Variants
There are none, and the empty axes are shown rather than skipped so nobody reinstates them.
| Axis | Value | Uses | The rule |
|---|---|---|---|
| content | no values | – | Prohibited, and it is the whole reason this has no modifier. The five doors differ by what the card holds, and that is decided by what happened before the render: a session that expired, a provider that errored, an address that was deep linked. Naming those on the surface would put the state in two places |
| route | no values | – | The route lives one level up. screen carries door 5 against authenticated 55, because the photograph and the missing strip are properties of the whole surface |
| width | no values | – | One rendering at every width. The card stops at 440px by itself and the padding is the only thing that ever moves |
When to use it
On the five screens of cluster 1 and nowhere else: sign in, signed out, session expired, provider error, and a deep link that needs authentication first. If a surface is behind authentication it is a console, and a console is the split.
Where she meets it. Once a shift at most, and at 03:00 when a pager link lands her here before the case she was paged about. That second path is why the deep linked door keeps the address it was going to and says so in a sentence: the analyst has to know the link worked before she is asked to sign in.
Rule and anti-rule
Do
You land on /case/C-4417
An address on the door is a run of code inside a sentence. It says where you were going and it is not yet worth anything: the case behind it is not readable until you are signed in, and the id names no tenant.
Do not
/case/C-4417Copy the addressNever the addr block here. addr is the component for an address that is the artefact, on a log entry an auditor quotes months later. On the door there is nothing to copy yet, and offering a copy control implies there is.
States
It has none, and it is not interactive. The field, the button and the disclosure inside it carry their own.
dark, shipped
light, the pair
Put the pointer on the button and the keyboard in the field above it: both states are produced live here, in whichever theme you are reading.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--bg-surface | fill | behind an inline address, so a path reads as a path inside a sentence | ||
--text-primary | ink 4.5:1 | the heading and the sentence | ||
--text-secondary | ink 4.5:1 | the paragraphs of the help below the hairline | ||
--line-separator | line, exempt | the hairline over the help, through --rule-hair |