pivoshenko-brand

pivoshenko-brand

What pivoshenko Is

pivoshenko is the practitioner's notebook — a dark, monospaced workshop where an engineer thinks out loud.

Every rule below descends from that sentence. If a future decision doesn't fit it, the decision is out — not the sentence. Read this line as the brand's positioning, not its tagline; it's the test, not the marketing.

The skill is organized in two layers:

• DNA — identity decisions that hold across every substrate (web, print, video, audio, physical). These don't change when you port to a new medium.
• Expression — how DNA gets rendered in this substrate (CSS tokens, hex values, pixel sizes, motion timings). These change per substrate; the DNA above them does not.

When porting to a substrate this skill doesn't enumerate, hold the DNA fixed and re-derive the expression. The Porting to a new substrate section below gives the rubric.

Files

SKILL.md is the entry point. Open references only when the task calls for them — keeps context lean.

One rule for the tree: everything under preview/ is rendered HTML for a human to look at; everything else is for you to read. The component cards are the exception worth reaching for — lift their markup instead of reinventing a component.

• colors_and_type.css — drop-in role tokens (CSS vars as R G B triples) + utility classes + 8 type-* recipes. Link or inline for any web prototype.
• assets/logo-vp.svg — canonical VP tile (32×32, 4px radius, light fill, dark glyph). The only mark.
• assets/social/{github,linkedin,rss}.svg — Simple Icons brand marks (footer use only).
• assets/templates/ — drop-in artifact skeletons. Start here for any one-shot output — copy, fill placeholders, don't rebuild from scratch:
  • page.html — generic dark page (header + content + footer). Use for one-pagers, mocks, posters.
  • document.html — print-tuned (A4, @page, page-break hygiene). Render to PDF via headless Chrome.
  • og-card.html — 1200×630 social/OG card. Hex inlined because @vercel/og and most screenshotters don't resolve CSS variables.
• references/voice.md — content fundamentals: rhythm, casing, microcopy, refuse-list, smell test. Read when writing copy (post, README, social, email).
• references/visual.md — deep rationale for color + typography choices (origin / substitution / extension) and long-form spacing/border/layout rules. Read when extending the palette, porting to a substrate without JetBrains Mono, or auditing a layout.
• references/iconography.md — Lucide / Simple Icons / VP-mark rules. Read when placing icons, building a logo lockup, or making a favicon / OG mark.
• references/anti-patterns.md — do/don't pairs per DNA rule. Read when a rule feels ambiguous, or when you've drifted and want to diagnose why.
• preview/*.html — per-recipe component cards. Lift markup from these; read on demand:
  • colors-* — palette + accent usage
  • type-* — type recipes + foreground ladder
  • spacing-* — scale, borders, corners
  • components-* — card, button, tag, alert, code, chrome, menu, search, tabs, status, form-inputs, palette-table
• preview/index.html, preview/components.html — the two hub pages that frame the cards above for a human browsing them. Open one for the user when they want to see the system; they carry no rule you can't get from this file.