zagzig
v1.0.0
Published
An archival pixel-drafted interface system. Curated scarcity, stepped geometry, collectible significance.
Downloads
18
Maintainers
alexleezaReadme
zagzig
An archival pixel-drafted interface system.
Curated scarcity. Stepped geometry. Collectible significance.
zagzig styles the web as a system of cataloged artifacts — an inventory interface from an institution that does not exist. Every surface is quiet by default. Color is rationed. Ornament is earned. Motion is mechanical.
Install
npm install zagzigQuick Start
@import 'zagzig';<div data-zagzig>
<article class="accession" data-rarity="rare">
<header class="accession__header">
<span class="shard" data-rarity="rare">Singular</span>
<span class="accession__number">#0041</span>
</header>
<hr class="seam seam--zagzig" data-rarity="rare" />
<section class="accession__body">
<h3 class="accession__title">Signal Fragment — Origin Unknown</h3>
<p class="accession__description">
Recovered from deep archive sector 7.
</p>
</section>
<hr class="seam" />
<footer class="accession__meta">
<div class="readout" data-rarity="rare">
<span class="readout__value">1 of 3</span>
<span class="readout__label">Known copies</span>
</div>
</footer>
</article>
</div>Scoping
All styles are scoped under [data-zagzig]. Nothing leaks. Add the attribute to any element to declare it as zagzig territory.
<!-- Full page -->
<body data-zagzig>...</body>
<!-- Single section -->
<section data-zagzig>...</section>The Five Laws
- Green must be earned. Signal color is rationed. Most UI is grey and black. Green means activation, life, rarity.
- The grid is the law. Everything snaps to a 4px base unit (
--grid: 4px). No exceptions. - Motion is discrete. All transitions use
steps()timing. Nothing eases smoothly. - Ornament is budgeted by rarity. The rarity system governs visual complexity — not just color, but spacing, borders, motion, and ornament.
- The staircase is the grammar. The zagzig motif (a 1px stepped diagonal) appears in clipped corners, dividers, focus rings, and selection markers.
Rarity
Every element exists at a tier of visual significance. Rarity is structural, not cosmetic.
| Tier | Attribute | Effect |
|------|-----------|--------|
| Common | (default) | Quiet. Grey. No green. Standard spacing. |
| Uncommon | data-rarity="uncommon" | Signal appears. Double borders. Tighter padding. |
| Rare | data-rarity="rare" | Full expression. Zagzig corners. Glow. Dense. |
Rarity describes content significance, not interaction emphasis. Don't put data-rarity="rare" on a submit button — put it on a one-of-a-kind artifact.
Components
| Class | What it is | HTML element |
|-------|-----------|--------------|
| .token | Button / interactive control | <button> |
| .panel | Card / container | <div>, <section> |
| .field | Input / data entry | <input>, <textarea> |
| .seam | Divider / separator | <hr>, <div> |
| .shard | Badge / tag / status | <span> |
| .readout | Read-only data display | <div> |
| .relay | Navigation / wayfinding | <nav> |
| .slot | Layout region | <div> |
| .cache | Modal / overlay | <div> |
| .index | Table / catalog | <table> |
| .accession | Specimen record (canonical) | <article> |
Modular Imports
/* Everything */
@import 'zagzig';
/* Foundation only */
@import 'zagzig/core/index.css';
/* Pick what you need */
@import 'zagzig/core/index.css';
@import 'zagzig/shadows/index.css';
@import 'zagzig/rarity/index.css';
@import 'zagzig/components/panel.css';
@import 'zagzig/components/accession.css';Color Palette
zagzig uses three color families with a mossy/organic green.
| Family | Role | Range |
|--------|------|-------|
| Void (black) | Backdrop, absence | --void, --void-soft |
| Structure (grey) | Skeleton, hierarchy | --structure-deep → --structure-bright |
| Signal (green) | Life, rarity, activation | --signal-faint → --signal-flare |
Greys carry a faint green tint (2-4% saturation) for cohesion.
Status States
Error is communicated mechanically, not chromatically. No red.
<input class="field" data-status="critical" />
<tr data-status="locked">...</tr>
<div class="panel" data-status="pending">...</div>| Status | Visual treatment |
|--------|-----------------|
| critical | Hatch pattern, border agitation, bright inversion |
| locked | Reduced opacity, diagonal stripe, no interaction |
| pending | Slow stepped pulse |
| resolved | Brief signal flash, settles |
Scaling
Change --grid to scale the entire system:
[data-zagzig] { --grid: 2px; } /* Tight */
[data-zagzig] { --grid: 4px; } /* Default */
[data-zagzig] { --grid: 8px; } /* Chunky */Browser Support
Modern browsers with CSS custom properties, clip-path: polygon(), and filter: drop-shadow(). Chrome, Firefox, Safari, Edge (latest).
License
MIT