We Redesigned Every C4 Element From Scratch
Architecture diagrams have a job: tell you the truth about your systems faster than reading code. Most don't. They look the same whether you're staring at a 12-service startup or a 600-service enterprise. The same generic blue rectangles. The same lines. No hierarchy. No story.
We've spent the last week tearing the Archyl canvas apart and putting it back together. Every node, every edge, every pixel of background. Today's release is the result.
If you log in now, the diagram looks like a different product.
What Was Wrong
The previous nodes were a wash of generic blue. Heavy borders, soft frosted backgrounds, oversized shadows — the kind of "technical-modern" look that felt right in 2022 and feels generic now.
More importantly, they didn't say anything visually. A System (Level 1, "the architecture") looked exactly like a Component (Level 3, "an internal class"). A database container looked the same as a worker container. The four levels of the C4 model — System Context → Container → Component → Code — were collapsed into one undifferentiated layer of blue rectangles.
Edges were flat slate lines that gave no sense of direction. The canvas was a dot grid on a flat background. Selection barely registered. Click a node and... nothing changed.
The diagram was correct. It wasn't legible.
The New Visual System
Per-Level, Per-Type Colour
Every C4 level now has its own visual weight:
- System (Level 1) carries the brand identity — a thin indigo-to-fuchsia gradient stripe along the top edge of the card, the same colours used everywhere else in Archyl. People variants get a warm amber gradient. External systems go graphite.
- Container (Level 2) is sub-typed. Databases and caches are emerald. Message queues are amber. File storage and serverless functions are cyan. Web apps are indigo. Mobile and desktop apps are violet. The accent strip on the top edge tells you what the container is before you read its label.
- Component (Level 3) is intentionally subdued — a subtle indigo accent only, smaller card, smaller icon. Components live inside containers and shouldn't visually compete.
A 100-node board now reads as zones at low zoom: green clusters mean storage, amber clusters mean async, indigo clusters mean code. You can navigate by colour before you read a single label.
Cleaner Surfaces
Out: the heavy frosted look, the chunky borders, the dual-blue gradient that was barely a gradient.
In:
- A hairline border with a single bright pixel along the top edge — the "lit from above" trick that gives Linear and Stripe cards their premium feel. Cards look like they're made of a real material instead of stacked translucent plates.
- A directional drop shadow tinted by the per-level accent colour. Each level has its own ambient glow underneath the card. Same shape, different atmosphere — a database card sits on a faint emerald cushion, a queue card on a warm amber one.
- Real typographic hierarchy. The title carries weight, the description steps back into a muted grey, the type label uses small caps for technical clarity, and the technology icons line up neatly underneath. No more reaching for size as the only way to say "this matters more."
Badges, Reorganised
The previous design floated up to eight different badges — insights, ADRs, docs, API contracts, comments, external, org-linked, time-travel — around the perimeter of every card. On a dense diagram it looked like the cards were under siege.
Insights stay top-left. They're alerts — actionable. They earn their floating spot.
Everything else collapsed into a single inline metadata strip along the bottom of the card: 📚 5 · 📄 3 · 🔌 2 · 💬 8. Each pill still expands into the full popover on click. The card body breathes again.
Edges That Show Direction
Resting state: a thin neutral line, brand-tinted, with a slow, gentle motion along its full length — short marks drifting from source to target. Subtle but constant. The canvas feels alive even when you're not interacting with it. Crucially, the motion never stops or restarts when something else on the page updates — once a relationship is on screen, it keeps drifting forever.
Three line styles now flow correctly:
- Solid — clean, continuous line, no motion. Picked solid? Stays solid.
- Dashed — even, medium-spaced segments drifting at a calm, readable pace.
- Dotted — tighter, rounded dots drifting at roughly twice the speed, so a dotted edge feels visibly more "lightweight" than a dashed one even at a glance.
Hover or selection upgrades the line to a brand gradient (indigo → violet → fuchsia) oriented along the direction of the edge, so a top-to-bottom relationship has a vertical gradient and a left-to-right one has a horizontal gradient. A soft brand-coloured glow underlays the active edge. The drift continues uninterrupted underneath.
The arrow marker is a slimmer chevron that picks up the active gradient terminus. The edge label became a self-contained card with technologies living inside the rounded border instead of as a detached blob floating off to the side. Active state adds a brand-gradient sliver on the left edge of the label and shifts the description colour to indigo.
Focus Mode
Click any node. After a brief pause, the rest of the canvas fades back — nodes become almost transparent, edges nearly disappear. Only the clicked node and its direct neighbours stay vibrant. The connecting edges keep flowing. The selected node gains a layered halo — a crisp brand-coloured ring, a soft outer glow, and an intensified ambient bloom — all tinted by the node's own accent. A focused database glows emerald. A focused queue glows amber. A focused system glows indigo.
That brief pause is intentional: a follow-up double-click cancels the focus before it kicks in, so drilling into the next C4 level still works without the dim flash interfering.
Click the empty canvas, hit Escape, or click any other node to clear focus.
The result is the single biggest "this diagram speaks to me" upgrade. A 100-node board where you couldn't tell what was connected to what is now a board where one click answers it.
Atmosphere
The canvas itself isn't flat anymore. Behind the dot grid, soft pools of colour drift across the surface — indigo at the top, fuchsia toward the corner, deeper indigo at the bottom — all kept very faint so they read as atmosphere rather than decoration. Same identity as the rest of the product. The dot grid itself is now brand-tinted instead of generic slate.
The MiniMap and Controls were rebuilt to match — branded surface, hairline border, brand ambient shadow, accent-tinted node colours. The MiniMap now uses the same palette as the main canvas, so the bird's-eye view tells the same story as the diagram itself.
Connection handles glow brand indigo on hover, with a soft halo previewing the relationship colour you're about to draw.
Performance
While we were there, we also made the diagram noticeably snappier:
- The per-node animation engine is gone. It was the largest hidden cost at scale — every card carrying its own motion bookkeeping even at rest. Opacity changes now ride a single, lightweight transition.
- Lighter shadows. The first-pass ambient glow was a generous, expensive blur; we tightened it to roughly two-thirds of the size while keeping the lifted feel.
- Cards no longer permanently sit on their own GPU layer. That hint now fires only during the actual interaction, instead of being baked in for nodes just sitting still.
- We narrowed transitions to exactly the properties that change — movement and shadow — instead of asking the browser to consider every property "just in case."
Reduced-motion preference is honoured everywhere — the resting flow on edges, the focus-mode fade, and the drift motion all switch off when the operating system reports that preference.
Try It
Sign in to Archyl, open any project, and pick a system or container. The new diagram is rolled out to every plan, including the free tier — no migration step required, no toggle to flip.
If you have a diagram you're particularly proud of (or particularly tired of), this is a good week to share it. We rebuilt the canvas because we want the architecture map to feel like a real artefact, not a Visio export. Tag us — we want to see what your maps look like now.