Diagram

The architecture diagram grammar as SVG primitives: zones, boxes, orthogonal arrows with a verb.

Rules

Boxes: 1.5 px line, 6 px corners, surface fill, the axis color on the left edge only.
Zones: dashed line, labeled in Plex Sans. Arrows: orthogonal, a verb on the arrow.
One diagram per case study and per technical post. Put zones first, then boxes, then arrows.

Once the theme is installed:

npx shadcn@latest add https://brand.stevenoumi.com/r/diagram.json

Prop

Type

On the brand page: The diagram, more than the logo.

IdentityHeader

Emblem, name, title, tri-accent, headline and tagline. The responsive version of the README header, for the portfolio.

TemplateFrame

The frame behind every template: it draws a support at its native size and scales it without distortion.