# Grailset collector visual kit

Prepared 21 October 2026. **71 asset families, 220 visual files, four original editorial masters.**

Open index.html for searchable previews, category filtering, full-size inspection and per-file downloads. The complete ZIP is one directory above this kit.

## Included

- **Identity:** 13 families.
- **Editorial artwork:** 4 families.
- **Social & campaign:** 13 families.
- **Website & sharing:** 10 families.
- **Guides & explainers:** 7 families.
- **Interface graphics:** 24 families.

Identity includes transparent light/dark/monochrome logos, original archive G variants, profile avatars, favicon PNGs at 16/32/48/64, a multi-size ICO, 192/512 app icons, a 180 Apple touch icon and a brand board.

Social includes four 1080×1350 feature posts, a 1080 square introduction, a 1080×1920 story, a 1500×500 X header, a 1920×640 community cover and a five-slide 1080×1350 research carousel. Website includes four 1600×900 heroes and six 1200×630 Open Graph cards. Guides include four article covers, a research-flow diagram, a square checklist and a dated project-status explainer. UI includes eight state illustrations and sixteen original utility icons.

## Placement

| Surface | Recommended files |
| --- | --- |
| General homepage / introduction | website/hero-discover-1600x900.*; editorial/research-desk.webp |
| Catalog | website/og-catalog-1200x630.*; ui/state-search-empty.* |
| Saved shortlist | website/hero-shortlist-1600x900.*; ui/state-saved-empty.* |
| Comparison | website/hero-compare-1600x900.*; ui/state-compare-empty.* |
| Field guide | website/hero-field-guide-1600x900.*; guides/cover-*.webp |
| Collections | website/og-collections-1200x630.*; editorial/archive-system.webp |
| Project status | guides/project-status-1200x900.* |
| Social profile | social/profile-header-1500x500.png; identity/avatar-cobalt.png |
| Community introduction | social/research-carousel-01 through 05 |
| Loading/error/offline | ui/state-feed-offline.*; ui/state-source-unavailable.* |

These are ready-to-use assets and proposed placements, not changes to the application routes. This kit lives in its own directory to coexist with the ongoing website work. Main-site photographs and live listing components remain the sources for actual cards.

## File formats

- SVG is the editable, resolution-independent master for typography, identity, diagrams and UI graphics. Text is outlined for exact rendering. Composition SVGs embed PNG art; their photo portions are raster, not vectors.
- PNG is the high-quality social/share export. Transparent logo/mark/icon PNGs preserve alpha.
- WebP is the smaller web delivery version. Editorial -768.webp files are proportional 768×512 derivatives; originals are 1536×1024.
- manifest.json records roles, alt text, dimensions, file bytes and SHA-256 hashes. asset-index.csv is a flat planning index.

## Identity and accessibility

Use cobalt #2457D6, ink #162333, frost #F4F6F8, white #FFFFFF, steel #536477 and rule #D9DFE7. Use Barlow Condensed for display and DM Sans for reading. Preserve the original mark proportions and adequate clear space. White variants need a dark surface. Small icons should sit on a 48px drawing grid and be displayed with labelled controls.

Keep UI instructions and actions in real HTML; decorative images should use empty alt text when adjacent content already conveys their meaning. Standalone editorial/marketing images have proposed alt text in the manifest. Keep photos complete where they depict real cards. Allow story overlays at top/bottom and profile avatar overlap at the lower-left of the X banner. Check the platform preview before posting.

## Product context

Copy follows the current working research interface: source-linked catalog, device-local saved cards and notes, comparison and guides. Provider checkout, custody and redemption remain with the provider. Saved observations do not reserve cards. Certificate lookup does not guarantee authenticity. GRAILS is unlaunched; the independent CARDS launch contract and adapter are pending; staking, rewards and automatic acquisitions are inactive. Review dated status artwork and deployed feature availability before publication.

The four original generated scenes depict neutral research materials. They are not inventory, authentication evidence or screenshots. No third-party card photographs, fantasy cards, grader marks, fabricated certificates, prices or performance charts are included in this new kit. Existing attributed real-card compositions remain in the project's separate brand/campaign libraries.

## Sources and regeneration

Native identity derives from the existing original Grailset archive G and wordmark. All new layouts, diagrams and icons were authored as code-native SVG. Four supporting images were created with built-in ImageGen; exact prompt sets are in build-sources/editorial-prompts.json and detail-prompts.json. The PNG masters are preserved in editorial/.

Source generators live in the project at design/visuals/collector-kit-v1/. The copied build-sources folder is a reference backup. From the Grailset project root, run:

```powershell
node design/visuals/collector-kit-v1/identity.mjs
node design/visuals/collector-kit-v1/ui.mjs
node design/visuals/collector-kit-v1/campaign.mjs
node design/visuals/collector-kit-v1/package.mjs
node scripts/prepare-visual-kit.mjs
./design/visuals/collector-kit-v1/pack.ps1
```

The generator uses the project's installed opentype.js and fonts, and the desktop runtime's sharp package. It reuses existing image masters, so it does not call a paid image API. Exact image prompts aid iteration; rerunning generative tools will not guarantee identical pixels. Font redistribution notices are included under fonts/.

The reviewed gallery is served at /media with the application’s self-only script policy. Regeneration must include the prepare and packaging commands above before building a release. These files are prepared media assets; social posts are not published automatically.