Popover
The contact popover: menu items with a cell, a name and an address.
States
-
Row at rest
nothing set
A tissue ring round the glyph, the name in ink, the address muted.
-
Row, hot
hover or :focus-visible
One interaction, one flare: the cell fires and the hairline only develops out of it.
Anatomy
| Width | eighteen modules (432px), or the screen less the gutter |
|---|---|
| Row | two modules tall: a 32px icon cell, the name in the clean cut at 16/24, the address in the label voice |
| Glyph | the pixel set’s envelope; a platform’s official mark at 16px |
| Hover | the row is the cell’s hover scope: the cell fires, the hairline develops out of it, the name turns --state |
| Scrim | --scrim, a flat neutral wash, burned at a 4px dot |
| Burn | 360ms both ways, fired where the trigger was pressed |
| Narrow | below 24rem the address drops under the name |
As ContactMenu.astro sets them.
Decisions
-
The menu item
The rows are the design system’s menu item. They replaced tracked-caps names beside a bare 24px glyph: the popover was the last menu still speaking the old row, on off-module padding.
-
Sized to the content
Every row names where it goes. The email address was once cut to “HELLO@…” because the box was too narrow; the popover is now sized to the content, never the reverse.
-
A flat scrim
Replaced a 75% Bayer halftone, which broke the page behind it into hollow, outlined ghosts and read as noise rather than the page stepping back.
-
Official marks
LinkedIn was dropped, and Twitter became X with its official mark.
-
No row fill
Replaced a filled --state row on hover: frames off, the row’s own hairline answers instead.