Pick a built-in style

A style is a complete visual identity for a diagram — its shapes, strokes, typography, colour bias, and motion character — chosen with a single token. Beck ships nine: classic (the default, unchanged when you set nothing) plus eight designed looks. Set one per diagram with meta.style, or site-wide from C# with SvgRenderOptions.Style (a diagram's own meta.style opts back out). A style only ever redefines the defaults of the --beck-* tokens, so a themed diagram still adopts your host palette and still flips with light and dark — the theme guide covers that axis, which every style honours. To build your own by deriving from a built-in with a with expression, see Author a custom style.

The three diagrams

Every style below renders the same three sources — an architecture graph with a flow, a sequence, and a class diagram — so you can read one look against another. Only the style changes between sections; the YAML is identical. The Read path architecture diagram plays its flow live, so you can watch each style's arrival pulse — blueprint's surveyor ring, terminal's CRT flicker, circuit's LED blink — land on the receiving card; the sequence and class renders stay static.

type: architecture
meta: { title: Read path, direction: LR }
nodes:
  - { id: client, title: Client, kind: user }
  - { id: api, title: API, kind: gateway }
  - { id: cache, title: Redis, kind: cache }
  - { id: db, title: Postgres, kind: db }
edges:
  - { from: client, to: api }
  - { from: api, to: cache, kind: async }
  - { from: api, to: db }
flow:
  repeat: -1
  repeatDelay: 1.2
  steps:
    - packet: { from: client, to: api, label: GET /item }
    - packet: { from: api, to: cache, label: lookup, color: info }
    - packet: { from: api, to: db, label: SELECT, color: warn }
    - packet: { from: db, to: api, color: success }

type: sequence
participants:
  - { id: web, title: Web App, kind: user }
  - { id: api, title: Orders API }
  - { id: db, title: Postgres, kind: db }
messages:
  - { from: web, to: api, label: POST /orders }
  - { from: api, to: db, label: INSERT }
  - { from: db, to: api, label: ok, reply: true }
  - { from: api, to: web, label: 201 Created, reply: true }

type: class
classes:
  - id: order
    name: Order
    stereotype: aggregate
    fields: ["Status: OrderStatus", "Total: Money"]
    methods: ["AddLine(sku, qty)", "Submit()"]
  - id: line
    name: OrderLine
    fields: ["Sku: string", "Qty: int"]
relations:
  - { from: order, to: line, kind: composition, fromCard: "1", toCard: "*" }

Each gallery is rendered at build time into its own fragment page (fragments/styles/<name>.html) by the same C# engine that renders ```beck fences, and fetched in as you scroll near its section — so this page stays light while every diagram is still a finished, self-animating SVG with no client rendering.

classic

The default. A balanced, modern card look — soft shadows, rounded corners, Inter and IBM Plex Mono. Every other style is a deliberate departure from this baseline, and any diagram that sets no style renders exactly here, byte-for-byte.

minimal

Sober and flat: no shadows, hairline borders, and a single travelling dot for the packet. Glow and rings are off; an arriving dot tints the receiving card for a beat instead of ringing it. The closest thing to a "no design" look — reach for it when the diagram should recede and the surrounding prose should lead.

terminal

Monospace everything, [bracketed] label affordances, square block packets, and a default accent biased toward the green success ramp. The identity is carried by type and hard-stepped motion — a card receiving a packet invert-flickers twice, CRT-style — no scanlines, no blinking cursor. Suits CLI, DevOps, and infra diagrams.

blueprint

A drafting surface: a faint grid behind the diagram, dashed flowing edges, dimension ticks on group boxes, and mono uppercase labels. An arrival pings a rectangular surveyor's ring off the receiving card. Reads like an engineering plan — good for architecture and infrastructure where the "schematic" framing fits the content.

glow

The "designed by Claude" option: gradient strokes, a soft bloom around nodes, and a breathing pulse on active ones — arrivals ripple a glowing halo ring off the card. Gradients are defined once and reference tokens through color-mix, so the bloom still tracks your palette. Opt into it for a hero diagram; it is deliberately not the default.

brutalist

Thick strokes, a hard solid offset shadow (no blur), uppercase Archivo, and steps() easing on the flow — a hit card slams its border thick for two frames and snaps back. Loud and structural. The shadow is a static offset — nothing snaps or pops at rest; the stepped motion appears only in the choreography.

sketch

Hand-drawn: Shantell Sans, wobbly outlines, and arrows that draw themselves on. A box jolts a beat larger — a marker pop — the moment an arrow lands on it. The jitter is baked deterministically into the outline geometry — the same content always wobbles the same way — so there is no restless continuous motion, just a lively, informal line.

extrude

Nodes as 2.5D slabs with static depth faces. The depth never floats or bobs; a highlight presses the node down toward its face instead of lifting it, and an arriving pulse flashes the struck slab face magenta. Gives an architecture a physical, stacked-blocks feel without any resting animation.

circuit

Nodes as chips with pin stubs, right-angle traces with a via dot at every bend, and pulse packets riding the traces — an amber LED on the chip blinks when a signal lands. The vias are emitted by the SVG layer at the router's existing bend points — the routing itself is untouched. A natural fit for hardware and data-path diagrams.

Want a look that is not here? Every built-in is an instance of the public BeckStyle record, and you compose your own by deriving from the closest one with a with expression, then registering it. Author a custom style walks through it.