Edge canon

The .edge primitive — a scoped procedural warp (::before, filtered) + baked halftone (::after) + razor-sharp content. Every card is an edge; plain fills are banned. Variants set the contrast pole + emphasis. Rendered from the real primitive — dark + light.

Contrast poles — edge ↔ fill opposites

.edge · quiet default

Quiet surface

Cool ground · soft-red dots · hairline. The red pole enters every card through the halftone.

keep · default

.edge--frame · blue pole

Primary container

Blue 1.5px frame · red ground · blue dots. The headline contrast — the protagonist surface.

keep · primary

.edge--inv · red pole

Inverse emphasis

Red frame · blue ground · red dots. The mirror pole for secondary/attention emphasis.

keep · inverse

Emphasis ladder — context + state

.edge--quiet

Nested context

Softer ground, hairline. For a calm nested surface inside a framed container.

keep

.edge--next

Upcoming / active

Blue frame accent — flags the live/next item without full blue-pole weight.

keep

.edge--past

De-emphasised

Transparent ground · recessed warp · dots dimmed. Past / done rows.

keep

Special — avatar · danger · opt-outs

.edge--avatar

Blue-abyss ground · tighter warp · no halftone. Small elements / avatars.

keep

.danger

Danger callout

Soft red · energized #edgeDanger warp + red/orange double-stroke. Reads by MOTION, not a louder hue.

keep

.edge--flat / --noht

Crisp opt-out

Warp off (crisp rule) / halftone off. For the rare place a straight edge is wanted.

keep · utility

Interaction — .edge--live (hover to energize)

.edge--live

Interactive surface

Hover / focus swaps the filter to #edgeHot — the frame breathes harder + faster. Opt-in; rows + quiet cards stay calm.

keep · interactive