Nerdworks is an editorial, specialist-collector TCG and tabletop retail brand. The register is curated, magazine-quality, and community-rooted — closer to a serious collector’s archive than a commodity supermarket. References for the aesthetic tradition: MR PORTER, Monocle, Criterion Collection, catalogue-style editorial ecommerce. Commit fully to this register. Never hedge toward generic ecommerce or supermarket aesthetics.
Competitive positioning sits between the large uncurated marketplaces (eBay, CardMarket) and the small independents with weak digital presence. The brand’s differentiation is editorial curation, community expertise, and local trust rendered online. Every design choice must feel closer to a specialist publication than a transactional store.
Every page uses a three-tone section rhythm: anchor → bright → primary, cycling strictly across the page. No two adjacent sections share the same tone. The footer resolves on anchor. Transitions between sections are achieved through tonal shift alone — never through dividing borders, rules, or horizontal lines.
The rhythm is the signature of the design. Every page must use it without exception.
Accent colour depends on the surface tone. On anchor sections, saffron accents every CTA, price, and tag badge. On bright sections, primary accents CTAs, prices, and tag badges. On primary sections, saffron accents every price, tag badge, eyebrow, and label — never anchor. CTAs on primary remain anchor fill with bright text for solid stopping power, but every smaller accent is saffron.
Hero is an exception. Every hero is an anchor section, and its accent is primary — not saffron. This is the only context where primary appears as an accent on an anchor surface. The exception is brand-wide and applies to every hero on every page type.
Surfaces are matte and dimensional, not flat. Product cards and callout panels use two distinct card-surface treatments per the styleguide. On anchor ground the card is anchor-elevated (#262a26, a subtle lift from the anchor ground) with bright text and saffron accent — a subtle lift, not a contrast jump. On bright ground the card is anchor (dark) with bright text and saffron accent — bold contrast. On primary ground the card is bright (white) with anchor text and primary accent — this white-card-on-green is the signature Nerdworks product-card pairing. Every card carries a soft drop shadow that deepens on hover. No borders between sections — depth comes from tonal shift alone.
Text on primary: every text-bearing element on primary sections renders in bright or saffron — never anchor. This covers headings, body, leads, card titles, card metadata, eyebrows, label-font prices, tag badges, ghost-button borders and labels, icons, and link text. Default text is bright; accents (prices, tag badges, eyebrows, label font, ghost-button border and label) are saffron. Anchor appears only as the solid CTA fill on primary sections, paired with bright button text for stopping power. No dark text over green anywhere in the design.
Hairline rules separate metadata lines inside cards and panels at low opacity. Product imagery sits flush with the card surface without visible frames or decorative edges, allowing card art and photography to carry visual weight directly.
The editorial register calls for generous rhythm without sterile minimalism — density where density earns its keep (stock counts, price listings, event rosters, grading states) and breathing room where it does not (hero copy, curation language, staff notes).
The audience reads thoroughly — collectors compare stock, competitive players verify legality, Warhammer painters consult specs. Design for careful reading, not skimming. Lead copy under section titles earns real estate; body copy breathes at 1.65 line-height; card metadata uses label font at small scale to pack detail without crowding.
Hero sections hold a single focal composition — one headline, one sub-copy, one primary CTA, one supporting image or band. Hero avoids multi-column content grids. Other section types may carry density as the content demands: shop-by-system tiles, arrivals grids, singles archives, event rosters, news journals.
Imagery is the hero of the brand. TCG products, Warhammer kits, lightsabers, and helmets have strong visual identity — design frames that identity rather than competing with it. Photography is curated and styled for editorial feel, not transactional product-shot convention. Use generous scale for hero and feature images; tighter scale for tile grids.
Every image position uses the aspect ratios defined in the styleguide. Images are flush with surrounding surfaces — no borders, no frames, no inset shadows around image edges.
The voice is specialist-collector — factual, dated, catalogue-like, with genuine enthusiasm rather than marketing polish. Use editorial phrases: “Staff picks”, “Why we love this”, “Hand-picked for collectors”, “Curated in-house”, “What you could pull”. Avoid marketing filler (“seamlessly”, “effortlessly”, “delightful”, “cutting-edge”, “game-changing”).
Copy treats the reader as a fellow enthusiast who already knows the space, not a casual browser who needs persuasion. Reference specific formats, sets, and game systems by name rather than describing in generic terms. Carry a light in-store tone — the website is the online voice of a real shop with real staff opinions, not an algorithmic catalogue.
Never use generic AI-aesthetic patterns: purple-on-white gradients, three-equal-card feature grids with emoji icons and one-word headings, stock-photo-hero-plus-three-features templates, monospace pseudo-code decoration, pastel rainbow gradients. Never use pill-shaped buttons or soft rounded corners beyond 8px. Never use marketing prose filler. Never use “coming soon” placeholders. Never use borders between sections.
Never substitute typography. The heading, title, body, and eyebrow font is Proxima Nova; the label font is JetBrains Mono. Never emit Inter, Söhne, ABC Diatype, Roboto, Helvetica, or Arial in any capacity.
Never invent palette values. The palette is Anchor, Bright, Primary, Saffron — nothing else. No mint, sage, lime, or pastel greens. No red variants outside explicit error states. No coral, peach, or pink. No additional shades or “tints” generated from the base palette.