Design review / social sharing

OpenGraph card system

A page-first family of previews for the QRL Ecosystem Index — designed to make a shared URL legible before the surrounding post does.

1200 × 630 canvas 600 × 315 check 300 × 158 check

Design decision

Make the page the headline.

Recommended direction

Editorial signal + restrained system.

Each card leads with the page’s job — discovery, onboarding, project evaluation, or collection browsing — and keeps QRL Ecosystem provenance as the supporting third read.

01First readWhat this specific page is about
02Second readWhy it is useful or relevant
03Third readQRL Ecosystem provenance + context

Current baseline

The existing cards have a solid visual base, but a narrow system.

Both are 1200 × 630 PNGs generated outside the Hugo templates.

Current generic QRL Ecosystem Index social card
Current defaultUsed by the homepage, Getting Started, collections, and most editorial pages.
Current Quantascan social card
Current project cardBetter page specificity, but the full listing description is still doing too much work.

Diagnosis. The default card says “QRL Ecosystem Index” but not what the shared page helps someone do. Getting Started therefore looks like another directory page, and a collection page loses its browse-by-facet meaning. Project cards are closer: the name and screenshot lead, but they need a condensed descriptor and a small, deliberate set of QRL context badges.

Archetype 01 / homepage

Ecosystem discovery

The proposition should do more work than the word “index.”

Option ARecommended / proposition-led
1200 × 630 · safe area shown by composition
Why it winsIt keeps the current proposition as the first read, then uses the two QRL generations as meaningful orientation rather than decoration.
Option BAlternate / breadth-led
1200 × 630 · safe area shown by composition
Useful, but secondaryThe scale signal is memorable, but counts age quickly and do not explain why the directory matters.

Archetype 02 / Getting Started

Developer onboarding

This is a path, not another index view.

Option ARecommended / journey-led
1200 × 630 · safe area shown by composition
Why it winsThe promised outcome and the Node → Sync → Wallet → Test funds → Contract → dApp sequence are both visible in one scan.
Option BAlternate / outcome-led
1200 × 630 · safe area shown by composition
Clear, but less directThe loop metaphor is strong, though the “from zero to deployed” promise is less immediate than in the recommended composition.

Archetype 03 / project page

Project evaluation

Answer “what is this?” before “who lists it?”

1200 × 630 · project image stays subordinate to the descriptor
Project ruleProject name first; concise role second; at most three useful context badges; image as evidence, not as a competing headline.

Archetype 04 / category or collection

Browse by facet

Translate the collection’s organizing idea into a useful promise.

1200 × 630 · category meaning leads; count supports
Collection ruleUse the facet label as context, but rewrite the title as a benefit or organizing idea. The count is proof of breadth, not the headline.

Thumbnail check

Recommended cards at 600 × 315 and 300 × 158.

The cards keep one strong message, one supporting cue, and a quiet provenance line as they shrink.

600 × 315Feed preview
300 × 158Small thumbnail

System rules

A reusable grammar with page-specific copy.

01

Typography

Use Inter for the headline at a tight display size; use DM Sans for the supporting line; use IBM Plex Mono only for small labels and structured metadata.

02

Safe areas

Keep primary copy inside roughly 80 px left/right and 60 px top/bottom on the 1200 × 630 canvas. Treat the outer edge as breathing room, not a content rail.

03

Brand placement

Place the QRL Ecosystem wordmark once in the footer or upper-right. Keep the domain quiet. Provenance supports the page; it does not compete with it.

04

Title + subtitle

Write a card title for scanning, not for metadata parity. Prefer one proposition or role plus one explanatory sentence; avoid full-page descriptions and visible ellipses.

05

Page-type labels

Use a small, consistent kicker: Homepage / ecosystem index; Getting started / QRL 2.0; Project / application; Collection / developer experience.

06

Project imagery

Use the first strong gallery image as evidence, cropped to a calm panel with a restrained frame. Never let a screenshot carry the page title.

07

Fallback treatment

If no screenshot exists, use a quiet surface with the project’s logo or initials and a category accent. Keep it intentional; do not show an empty image frame.

08

Badge limits

Show no more than three badges. Prefer the one or two QRL generations plus one practical context such as Web, Testnet, or Source available.

09

Long copy

Derive a concise social summary from existing page and project data. If a project title exceeds two lines, reduce title size once; never compress body copy until it becomes unreadable.

Production handoff

What changes later in Hugo.

Reusable

  • 1200 × 630 raster output, safe-area grid, typography, color tokens, footer wordmark, and domain treatment.
  • Four archetypes: ecosystem, guide, project, and collection.
  • Three metadata layers: page label, page message, restrained provenance.

Page-specific

  • Headline and subtitle, rewritten for the share context rather than copied verbatim from the H1 or description.
  • Project descriptor, selected QRL/network context, image, and fallback initials.
  • Collection organizing idea and current count, when the count adds useful context.

Recommended metadata/content changes

  • Keep project front matter unchanged; derive card copy from existing titles, descriptions, taxonomy definitions, QRL support, platforms, and gallery data.
  • Add collection descriptions to the taxonomy data so OG descriptions do not fall back to the site-wide default.
  • Generate explicit homepage, Getting Started, collection, and project assets; do not route every non-project URL to one default PNG.

Likely Hugo approach

  • Extend social-meta.html to resolve a page-type data object and set matching title/description/image fields for both OG and Twitter.
  • Refactor the Go card renderer into shared primitives plus four page-type renderers, with title wrapping and image fallback helpers.
  • Keep this prototype page as the visual contract for future card refinements.