Artsabers · 4.5.0

ARTSABERS — Kyber Hull

The Kyber Hull direction — LOCKED 2026-07-07 as the ARTSABERS design direction. Moody cinematic spaceship-hull identity: pages read as sequential dark panels/plates in carbon-black, void, and charcoal, with a warm orange-ombre forge accent (bright forge-glow #FFB347 → signature ember #FF7A2E → smouldering deep #D14810) reserved for CTAs, capture band, and delicate hull-plate seams. Pure and warm-tinted whites are reserved for physical light-catch points (top-edge chrome, thin card glints, section-heading titles); body copy is warm off-white #F5F0E8. Content sections alternate between plain-ground and delicate-hull-imagery patterned grounds; imagery is smooth architectural (matte carbon plates, no scratches / no rivets / no industrial machinery) with a hair-thin ember seam as the only warm visual note. Reference mockup: MAS43 (post 12840).

Section Rhythm

Dark → Green → Dark → Light → Dark variant — balanced rhythm with green and light breathing room.

Dark
Green
Dark
Light
Dark variant

Colour Palette

Primary
#FF7A2E
Secondary
#D14810
Tertiary
#FFB347
Dark
#0A0A0A
Light
#F5F0E8
Accent
#FF7A2E
Text
#F5F0E8
Positive
#FF7A2E
Neutral
#B8B0A6
Negative
#D14810

Typography

Orbitron — via Google Fonts.

Display--fs-display
Curated for Collectors
H1--fs-h1
The Curator's Vault
H2--fs-h2
Latest Acquisitions
H3--fs-h3
Pokémon
H4--fs-h4
Friday Night Magic
Body Large--fs-body-lg
The definitive archive for trading card games, miniatures, and board game rarities.
Body--fs-body
A standing weekly event where the shop floor transforms into a tournament hall.
Eyebrow--fs-eyebrow
The Gallery · Social Hub · Staff Pick

Border Radius

0px--radius-none
0px--radius-sm
0px--radius-md
0px--radius-lg
0px--radius-xl

Spacing Scale

--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-5 24px
--space-6 32px
--space-7 48px
--space-8 64px
--space-9 96px
--space-10 128px

Borders

1px--border-hairline
2px--border-regular
4px--border-thick

Shadows

--shadow-panel-lift
--shadow-panel-lift-hover
--shadow-chrome-top
--shadow-chrome-top-soft
--shadow-chrome-corners
--shadow-ember-glow-sm
--shadow-ember-glow-md
--shadow-ember-glow-lg
--shadow-ember-seam-glow
--shadow-ember-seam-below
--shadow-ember-backlight
--shadow-ember-hot-rim
--shadow-modal-glow

Components

Buttons

Badges

Staff Pick Sale New MTG

Hero

The Obsidian Selection

Curated for Collectors

A standing archive of the finest cards, miniatures, and board game rarities — treated with the reverence of fine art. Handpicked by people who care.

Image · 4:5

Product Card

Product art
Staff Pick

Charizard ex Full Art

Pokémon · 151 Booster

£189.00

Product art

Mox Opal (Foil)

Magic: The Gathering · Modern Masters

£340.00

Product art
New

Ursula's Quest Deckbox

Disney Lorcana · First Chapter

£52.00

Image and Content

Feature · 4:3

Editorial Feature

The Curator's Notebook

An ongoing record of pulls from the shop floor — the pieces that stopped us in our tracks, the rarities that resurfaced from private collections, and the cards we wish we could keep for ourselves.

Newsletter Form

Direction Rules

Do

  • Render every section as a PANEL SLAB — surface with a 1-2px chrome-highlight top edge (rgba(250,250,250,0.30-0.40)) suggesting light catching the raised lip, and a darker recessed bottom edge (fade into carbon) suggesting shadow
  • Between sections use an EMBER SEAM GLOW — a thin orange line + soft ember bleed (`ember-seam-glow` shadow) as the visible join between adjacent hull panels. Not every section boundary, but every deliberate one
  • The tonal ladder is carbon (#060606) → void (#0A0A0A) → charcoal (#141414) → charcoal-warm (#161412) → hull-panel (#1A1A1A) → hull-panel-lift (#242424) → hull-panel-dark (#0F0F0F, recessed). Different sections sit on different tones so the page reads as an assembly of plates
  • Cards are RAISED PLATES on their host panel — `panel-lift` shadow (subtle chrome-top inset + deep cast shadow underneath) with hull-panel-lift #242424 surface. Hover intensifies both the chrome top-edge and the cast shadow
  • CTAs use an ORANGE OMBRE gradient: ember-glow #FFB347 (top) → ember #FF7A2E (middle) → ember-deep #D14810 (bottom). Text is on-primary-fixed #2A0800 (near-black-burnt). Add an ember-glow-sm outer glow so the CTA reads as radiating heat
  • The warm capture band pre-footer is a FULL EMBER OMBRE — ember-glow #FFB347 top → ember-forge #E85D18 bottom — reading as a massive open seam of forge light
  • Ember never sits FLAT — it always GLOWS: through a seam, back-lighting an image, rim-lighting a card, radiating from a CTA. Use ember-glow / ember-seam-glow / ember-backlight shadow tokens
  • PURE WHITE (chrome-highlight #FAFAFA) is RESERVED for physical light-catch points — panel top edges, card upper hairlines, corner chrome-glints, section headings. Not for body copy
  • Body text is chrome-warm #F5F0E8 (warm-tinted off-white) — takes on the forge light. Meta / dim text is chrome-dim #B8B0A6
  • The hero opens on carbon #060606 with a full-bleed cinematic photograph. An ember-backlight or ember-seam-glow at the bottom lip marks where the hero PANEL ENDS and the next panel begins
  • The footer sits on carbon #060606. An ember seam glow at its TOP marks the join from the capture band
  • Zero border-radius sitewide. Every panel, card, tile, input, and button is rectangular and hard-edged
  • Spec-sheet asymmetric layout persists: title/description LEFT, dotted-leader technical specs RIGHT. Tight data clusters, generous section whitespace
  • Space Grotesk for display / headings / labels / technical annotations. Manrope for body copy
  • Photograph-brief placeholders (where real imagery is absent) render as dark panels with visible italic captions describing the photograph — never SVG-drawn hilts, sabers, portraits, or scenes
  • Full-bleed cinematic photography for hero, workshop/heritage, and any other atmospheric moment. When a real image is available, it fills the whole panel and receives its own ember-backlight from below
  • Alternate content sections between plain and patterned backgrounds — Saber Core, Factions, Mission Control, Brand Story carry delicate hull-plate imagery; Favourites, New Arrivals, Testimonials stay plain-ground for visual rest
  • Patterned sections use smooth architectural hull-plate imagery only — matte carbon-black plates, a single delicate hair-thin ember seam, no rivets, no scratches, no industrial machinery, no visible weathering. Reference: brand_imagery.hull_plate_horizontal_smooth (variant F) + brand_imagery.hull_plate_vertical_smooth (variant G)
  • Sections with horizontal composition (4-across cards, 2-column split) use variant F horizontal imagery; sections with vertical composition (3×2 tile grids, editorial split) use variant G vertical imagery
  • Overlay each patterned section with a 58-74% dark linear gradient mask (`linear-gradient(180deg, rgba(6,6,6,0.58), rgba(6,6,6,0.74))`) so the delicate ember seam registers but the plates never compete with cards on top
  • Cards sitting on patterned hull-plate sections need a solid dark fill (`rgba(20,20,20,0.94)`) plus `backdrop-filter: blur(3px)` so they read as raised plates on the hull rather than transparent windows
  • Section ground assignments are one step darker than the SG default tonal ladder: Saber Core / New Arrivals / Testimonials → carbon; Favourites / Mission Control / Brand Story → void; Factions stays carbon (deepest vault). Hero + footer + capture band unchanged from v4.0
  • Panel-seam between sections is a single ember hairline + soft glow only — no dark shadow channels above or below. Adjacent section content (image, card row, editorial text) touches the ember line directly, so the seam reads as one clean warm hairline rather than a construction gap.
  • No corner rivets on sections, cards, or panels — the panel-slab is defined by its chrome top-edge inset + darker recessed bottom + tonal ground alone. Rivets read as noise once the direction is locked; they belong to industrial-feature imagery, not to the surface treatment.
  • No hero-bottom ember overlay — the hero panel transitions to the next section via the standard panel-seam alone. Any second ember gradient at the hero bottom stacks against the panel-seam and reads as a double gradient.

Don't

  • Use any border-radius — every corner is rectangular and 0px
  • Use 1px solid section-boundary borders — panel joins are chrome-top-edge inset + ember seam glow, not flat divider lines
  • Use pure white for body copy — pure white is chrome-highlight territory, reserved for surface catches
  • Use ember/orange as a flat background wash for a whole section — ember is always a glow, gradient, or radiating light effect
  • Use pastel / peach / soft coral tones — the ombre is orange proper: forge-glow to smouldering-deep
  • Use a cool tertiary (teal, blue, aqua) — the direction has ONE accent voice: orange ombre
  • Use warm-tinted grey surfaces — the hull surfaces are cool-neutral to slightly warm-neutral. The warmth reads through outlines, dim text, seam glows, and back-lighting, not the surfaces themselves
  • Use soft rounded plush cards, pill buttons, or ANY radius > 0
  • Cycle through many visible tonal grounds section-to-section unless the deliberate panel-plate story calls for it — most sections sit on charcoal with hull-panel cards; occasional deep-panel or charcoal-warm sections mark rhythm shifts
  • Use standard-issue drop shadows without a chrome-top inset partner — plate elevation ALWAYS pairs a chrome-catch top edge with a deep cast shadow below
  • Author bright chrome hairlines on every card edge — chrome-top is a HINT (30-40% opacity, 1-2px), not a decorative accent painted around the whole card
  • Author gradient-over-placeholder heroes — hero is real photography or photograph-brief placeholder, always full-bleed, always with a bottom ember-backlight marking the panel end