# Archify Visual Presets Rendering Differences: A Complete Technical Guide
> Explore Archify visual presets rendering differences with this technical guide. Understand how CSS custom properties and data-preset attributes impact diagram styles like classic, signal-flow, blueprint, and editorial.
- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: deep-dive
- Published: 2026-08-31
---
**Archify visual presets change every diagram's appearance through CSS custom properties toggled via the `data-preset` attribute, with four built-in styles—classic, signal-flow, blueprint, and editorial—each offering distinct color palettes, accent treatments, and typographic treatments.**
Archify ships with a **visual preset system** that instantly restyles generated diagrams, workflows, and UI views without JavaScript recomputation. Understanding these rendering differences helps you select the right preset for technical documentation, live data visualizations, or publication-ready outputs. This guide examines the implementation in `tt-a1i/archify` source code.
## How Archify Visual Presets Work
The preset mechanism relies on **declarative CSS attribute selectors**. Each generated HTML file contains blocks of CSS custom properties scoped to `[data-preset="..."][data-theme="..."]` combinations. When you change an attribute, the browser instantly applies the matching variable set—no re-render required.
### Core Activation Mechanism
Archify uses two data attributes on the root `` element:
- `data-preset` — selects the visual style (`classic`, `signal-flow`, `blueprint`, `editorial`)
- `data-theme` — switches between `light` and `dark` mode variants
The default configuration appears in [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html):
```html
```
Running JavaScript like `document.documentElement.setAttribute('data-preset', 'blueprint')` triggers an immediate visual shift. This approach eliminates flicker and maintains performance even on complex diagrams.
### Theme Detection Logic
A small inline script in [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html) (lines 10-30) handles automatic theme selection:
```javascript
// Excerpt from theme detection script
const theme = localStorage.getItem('theme')
|| (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
```
This ensures preset-specific color sets align with user or OS preferences before the page renders.
## The Four Archify Visual Presets Explained
Each preset serves a distinct purpose, with CSS definitions located in [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html) at specific line ranges.
### Classic Preset (Default)
**Classic** provides the baseline neutral palette used when no explicit preset is chosen. It prioritizes versatility over strong visual character.
- **CSS location**: Lines 2-34 in [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html)
- **Background**: Dark `#020617` / Light `#f8fafc`
- **Arrow accent**: Mid-gray `#64748b`
- **Best for**: General-purpose diagrams where content matters more than visual flair
The classic preset uses subtle `rgba` fills for component categories (backend, database, cloud) without dramatic color saturation.
### Signal-Flow Preset
**Signal-flow** is an opt-in, motion-forward style emphasizing dynamic arrows and bright accent colors. It targets live-data or real-time flow visualizations.
- **CSS locations**: Dark theme lines 35-67; light theme lines 68-101
- **Background**: Dark `#030711` (deeper than classic) / Light `#f4f9fc` (lighter)
- **Arrow accent**: Cool `#7890ad` (dark) / `#7b97aa` (light)
- **Component fills**: Brighter rgba values creating "glow" effects, like `rgba(6,182,212,0.14)` for frontend components
- **Best for**: Real-time dashboards, data pipelines, animations
The signal-flow preset adds colored `.preset-control-mark` indicators in the toolbar to highlight the active selection.
### Blueprint Preset
**Blueprint** favors muted, blueprint-like tones and high-contrast outlines for design reviews and technical documentation.
- **CSS locations**: Dark theme lines 102-138; light theme lines 139-172
- **Background**: Dark `#0a0a1a` (muted) / Light `#ffffff` (plain)
- **Arrow accent**: Emerald `#34d399` (dark) / `#059669` (light)
- **Component fills**: Desaturated values emphasizing contrast, like `rgba(34,211,238,0.15)` in light mode
- **Toolbar treatment**: Modified `--toolbar-bg` variable for the preset menu
- **Best for**: Design reviews, architecture diagrams, technical specifications
### Editorial Preset
**Editorial** delivers a warm, publication-minded aesthetic with softer backgrounds and enhanced typographic hierarchy.
- **CSS locations**: Dark theme lines 173-209; light theme lines 210-244
- **Background**: Matches classic (`#020617` / `#f8fafc`)
- **Arrow accent**: Same emerald as blueprint (`#34d399` / `#059669`)
- **Typography**: Larger heading size with explicit weight—`font-size: 1.72rem; font-weight: 600` (lines 695-701)
- **Component fills**: Warm tones with soft borders optimized for readability in long-form content
- **Best for**: Articles, blog posts, story-driven documentation
## Rendering Differences: Side-by-Side Comparison
| Visual Aspect | Classic | Signal-Flow | Blueprint | Editorial |
|-------------|---------|-------------|-----------|-----------|
| **Background depth** | Neutral | Deeper dark / Lighter light | Muted dark / Plain white | Same as classic |
| **Arrow emphasis** | Subtle gray | Cool blue tones | Emerald green | Emerald green |
| **Fill saturation** | Low | High (glow effect) | Desaturated (contrast) | Warm (readable) |
| **Typography scale** | Default | Default | Default | 1.72rem headings |
| **Motion cueing** | None | Strong (designed for animation) | None | None |
| **Toolbar styling** | Generic | Colored active indicator | Modified menu background | Softer hover states |
## Toolbar UI and User Control
The preset selector resides in [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html) (lines 402-409). Users interact with a button group where each option carries `data-preset-option` attributes:
```html
```
Click handling updates both the `data-preset` attribute and accessibility states:
```javascript
// Runtime preset switching (derived from template logic)
document.querySelectorAll('.preset-option').forEach(btn => {
btn.addEventListener('click', () => {
const preset = btn.dataset.presetOption;
document.documentElement.dataset.preset = preset;
// Update aria states for accessibility
document.querySelectorAll('.preset-option').forEach(b => b.ariaChecked = 'false');
btn.ariaChecked = 'true';
});
});
```
## Practical Implementation Examples
### Static HTML with Preset Declaration
```html
Blueprint Documentation
API Gateway
```
### Runtime Preset Switching
```javascript
/**
* Set Archify visual preset programmatically
* @param {string} name - 'classic' | 'signal-flow' | 'blueprint' | 'editorial'
*/
function setArchifyPreset(name) {
const valid = ['classic', 'signal-flow', 'blueprint', 'editorial'];
if (!valid.includes(name)) {
throw new Error(`Unknown preset: ${name}`);
}
document.documentElement.setAttribute('data-preset', name);
}
// Example: match preset to content type
const contentType = document.body.dataset.contentType;
const presetMap = {
'live-metrics': 'signal-flow',
'architecture-review': 'blueprint',
'blog-post': 'editorial'
};
setArchifyPreset(presetMap[contentType] || 'classic');
```
### Preserving User Selection
```javascript
// Persist preset preference across sessions
function savePresetPreference(preset) {
localStorage.setItem('archify-preset', preset);
document.documentElement.dataset.preset = preset;
}
// Restore on page load
const saved = localStorage.getItem('archify-preset');
if (saved) {
document.documentElement.dataset.preset = saved;
}
```
## Key Source Files Reference
| File | Purpose | Relevant Lines |
|------|---------|--------------|
| [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html) | Complete preset CSS definitions (all four presets, both themes) | 2-244 (CSS blocks), 695-701 (editorial typography) |
| [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html) | Toolbar markup and preset button structure | 402-409 |
| [`scripts/guide-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/guide-template.html) | Preset reuse in guide view | Preset handling mirroring start-template |
| [`README.md`](https://github.com/tt-a1i/archify/blob/main/README.md) | Architecture overview | Visual preset concept documentation |
| [`DESIGN.md`](https://github.com/tt-a1i/archify/blob/main/DESIGN.md) | Color palette rationale | Branding decisions per preset |
## Summary
- **Archify visual presets** are CSS-only, activated via `data-preset` and `data-theme` attributes on ``
- **Classic** provides neutral defaults; **signal-flow** emphasizes motion; **blueprint** optimizes for review; **editorial** enhances readability
- Rendering differences span background depth, accent colors, fill saturation, and typographic scale
- The system achieves instant, flicker-free updates without JavaScript recomputation
- Source definitions live in [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html) with UI controls in [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html)
## Frequently Asked Questions
### How do I change the Archify visual preset programmatically?
Set the `data-preset` attribute on `document.documentElement`. The browser immediately applies the matching CSS variable block. For example: `document.documentElement.dataset.preset = 'blueprint'`. This matches the implementation in [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html) where toolbar buttons trigger the same attribute update.
### Why does signal-flow look different in dark versus light mode?
Signal-flow uses distinct color stops per theme to maintain visual impact. Dark mode employs deeper backgrounds (`#030711`) with cool blue arrows (`#7890ad`), while light mode shifts to lighter backgrounds (`#f4f9fc`) with adjusted arrow tones (`#7b97aa`). The CSS blocks at lines 35-67 (dark) and 68-101 (light) in [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html) define these variants separately.
### Can I create custom Archify visual presets?
Yes. The preset system uses standard CSS custom properties within attribute selectors. Define a new block like `[data-preset="custom"][data-theme="dark"] { --bg: #...; --arrow: #...; }` following the pattern in lines 2-244 of [`generated/maka-regenerated.workflow.html`](https://github.com/tt-a1i/archify/blob/main/generated/maka-regenerated.workflow.html). Ensure your custom preset name matches in both CSS and any JavaScript that sets `document.documentElement.dataset.preset`.
### Which preset should I use for technical documentation?
**Blueprint** is designed specifically for technical review scenarios. Its muted blueprint-like tones, high-contrast emerald accents (`#34d399`), and desaturated fills emphasize structural clarity over decorative elements. The plain white background in light mode (`#ffffff`) and modified toolbar styling support extended reading sessions common in documentation workflows.