---
import Base from '../../layouts/Base.astro';
import '../../styles/design-system.css';
import fs from 'node:fs';
import path from 'node:path';
const candidateRoot = path.resolve(process.cwd(), 'site/public/assets/neo-kinpaku/candidates');
function listCandidates(subdir) {
const dir = path.join(candidateRoot, subdir);
if (!fs.existsSync(dir)) return [];
return fs.readdirSync(dir)
.filter((f) => f.endsWith('.png'))
.sort()
.map((file) => {
const base = file.replace(/\.png$/, '');
const kept = base.startsWith('keep-');
const id = kept ? base.replace('keep-', '') : base;
return { src: `/assets/neo-kinpaku/candidates/${subdir}/${file}`, id, kept };
});
}
const solidCandidates = listCandidates('solid');
const keyedCandidates = listCandidates('keyed');
const i2iCandidates = listCandidates('i2i');
const mockupCandidates = listCandidates('mockups');
---
Explorations
Visual studies. Kept for reference, not for production.
Hero candidate sets and the wider icon-mark exploration anchors. The canonical system lives at /design-system. If you arrived here looking for what ships, that's the page.
Logo direction
Three marks with mass. Tested in a partner roster.
The current placeholder (ε0) is a hairline box around a thin slash: empty negative space, a wordmark too light to hold its own. Each direction below adds mass and an idea, then sits in a monochrome roster strip (white on black, no gold to lean on) next to the kind of neighbors it has to survive.
{[
{
id: 'ε0', name: 'Current placeholder',
idea: 'Hairline box, thin slash, light wordmark. Shown for contrast.',
baseline: true,
mark: '',
wordWeight: 300, wordTrack: '0.42em',
},
{
id: 'A', name: 'Brushstroke slash + flake',
idea: 'The slash kept from ε0, but solid and tapered like a kintsugi stroke. The flake is the gold leaf breaking off: the trace of refinement. Keeps the slash-command DNA, gains mass.',
mark: '',
wordWeight: 500, wordTrack: '0.2em',
},
{
id: 'B', name: 'Carved tile',
idea: 'A solid tile split by a diagonal slash cut clean through it. Maximum mass for a roster; the slash now reads as negative space instead of a thin line. The split halves nod to before / after.',
mark: '',
wordWeight: 500, wordTrack: '0.2em',
},
{
id: 'C', name: 'Convergence',
idea: 'Three chevrons narrowing to a single point: iterative passes closing in on done. Departs from the slash, leans hardest into the iterative-refinement story.',
mark: '',
wordWeight: 500, wordTrack: '0.2em',
},
].map((c) => (
{c.id}
{c.name}
{c.idea}
mark · 48px gold
IMPECCABLElockup · gold
Supporting partners
Vercel
block
IMPECCABLE
humanlayer
YouTube
))}
Hero candidates
Pick a hero. Neo kinpaku set, generated in batch.
Image-to-image variants based on the kinpaku_5 and kinpaku_8 inspo. The R-NN set targets restraint: single streak, mostly empty slate. Call out the ones you want kept.
{mockupCandidates.length > 0 && (
Full hero mockups · UI baked in (text gets stripped in a second pass)
{mockupCandidates.map((c) => (
{c.id}
))}
)}
{i2iCandidates.length > 0 && (
Image-to-image · based on kinpaku_5 + kinpaku_8 inspo
Earlier shapes kept because they each carry a property worth iterating on: stacked planes, three-flake scatter, reverse fill, three-layer fade. The current production placeholder (ε7) and its near-neighbors live on /design-system.
