/wire-template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — Title font exploration · Typography</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Rajdhani:wght@400;500;600;700&family=Turret+Road:wght@400;500;700;800&family=Space+Mono:wght@400;700&family=Chakra+Petch:wght@400;500;600;700&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--carbon: #060605;
--carbon-panel: #0F0F0F;
--carbon-lift: #1A1A1A;
--hull-edge: rgba(231,224,220,0.12);
--ember-glow: #FFB347;
--ember: #FF7A2E;
--ember-deep: #D14810;
--chrome-highlight: #F7F5F3;
--chrome-warm: #E5E2E1;
--text-primary: #C7C1BE;
--text-dim: rgba(199,193,190,0.55);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--carbon); color: var(--text-primary); font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.page { max-width: 1440px; margin: 0 auto; padding: 80px 48px 120px; }
/* ==== Page header ==== */
.header { border-bottom: 1px solid var(--hull-edge); padding-bottom: 56px; margin-bottom: 72px; }
.header__eyebrow { font-family: 'Space Grotesk', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.24em; color: var(--ember); font-size: 12px; margin-bottom: 24px; }
.header__title { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 56px; line-height: 1.05; color: var(--chrome-highlight); max-width: 900px; margin-bottom: 20px; letter-spacing: -0.01em; }
.header__sub { font-size: 17px; line-height: 1.6; color: var(--text-primary); max-width: 780px; margin-bottom: 20px; }
.header__meta { font-family: 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.header__meta strong { color: var(--ember); font-weight: 600; }
/* ==== Baseline strip ==== */
.baseline { background: var(--carbon-panel); border: 1px solid var(--hull-edge); padding: 36px 40px; margin-bottom: 72px; }
.baseline__label { font-family: 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember); font-weight: 600; margin-bottom: 20px; }
.baseline__title { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 68px; line-height: 1.02; color: var(--chrome-highlight); letter-spacing: -0.01em; }
.baseline__note { font-size: 14px; color: var(--text-dim); margin-top: 20px; max-width: 760px; }
/* ==== Font row ==== */
.row { padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--hull-edge); }
.row__meta { display: grid; grid-template-columns: 280px 1fr; gap: 48px; margin-bottom: 44px; }
.row__name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember); margin-bottom: 12px; }
.row__family { color: var(--chrome-warm); font-size: 20px; margin-bottom: 8px; font-weight: 500; }
.row__badge { display: inline-block; padding: 4px 10px; border: 1px solid var(--hull-edge); font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-top: 8px; }
.row__desc { color: var(--text-primary); font-size: 15px; line-height: 1.65; max-width: 720px; }
.row__desc em { color: var(--chrome-warm); font-style: italic; }
.samples { display: flex; flex-direction: column; gap: 40px; }
.sample { }
.sample__label { font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; font-weight: 500; }
.sz-hero { font-size: 80px; line-height: 1.02; font-weight: 500; color: var(--chrome-highlight); letter-spacing: -0.015em; }
.sz-section { font-size: 44px; line-height: 1.08; font-weight: 500; color: var(--chrome-highlight); letter-spacing: -0.01em; }
.sz-page { font-size: 32px; line-height: 1.1; font-weight: 500; color: var(--chrome-highlight); }
.sz-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember); }
.sz-context { font-family: 'Manrope', sans-serif; font-size: 15px; line-height: 1.6; color: var(--text-primary); max-width: 720px; margin-top: 24px; font-style: normal; }
/* Font applications — per-row overrides on the sample text */
.row--space-grotesk .sz-hero, .row--space-grotesk .sz-section, .row--space-grotesk .sz-page, .row--space-grotesk .sz-eyebrow { font-family: 'Space Grotesk', sans-serif; }
.row--orbitron .sz-hero { font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: 64px; letter-spacing: -0.01em; }
.row--orbitron .sz-section { font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: 36px; }
.row--orbitron .sz-page { font-family: 'Orbitron', sans-serif; font-weight: 500; font-size: 26px; }
.row--orbitron .sz-eyebrow { font-family: 'Orbitron', sans-serif; font-weight: 500; }
.row--rajdhani .sz-hero { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 88px; letter-spacing: 0.005em; }
.row--rajdhani .sz-section { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 48px; }
.row--rajdhani .sz-page { font-family: 'Rajdhani', sans-serif; font-weight: 500; font-size: 36px; }
.row--rajdhani .sz-eyebrow { font-family: 'Rajdhani', sans-serif; font-weight: 600; }
.row--turret-road .sz-hero { font-family: 'Turret Road', sans-serif; font-weight: 700; font-size: 72px; letter-spacing: -0.005em; }
.row--turret-road .sz-section { font-family: 'Turret Road', sans-serif; font-weight: 700; font-size: 42px; }
.row--turret-road .sz-page { font-family: 'Turret Road', sans-serif; font-weight: 500; font-size: 30px; }
.row--turret-road .sz-eyebrow { font-family: 'Turret Road', sans-serif; font-weight: 500; }
.row--space-mono .sz-hero { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 60px; letter-spacing: -0.03em; }
.row--space-mono .sz-section { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 36px; }
.row--space-mono .sz-page { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 28px; }
.row--space-mono .sz-eyebrow { font-family: 'Space Mono', monospace; }
.row--chakra-petch .sz-hero { font-family: 'Chakra Petch', sans-serif; font-weight: 600; }
.row--chakra-petch .sz-section { font-family: 'Chakra Petch', sans-serif; font-weight: 600; }
.row--chakra-petch .sz-page { font-family: 'Chakra Petch', sans-serif; font-weight: 500; }
.row--chakra-petch .sz-eyebrow { font-family: 'Chakra Petch', sans-serif; font-weight: 500; }
/* Legend hint */
.legend { margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--hull-edge); color: var(--text-dim); font-size: 13px; line-height: 1.7; max-width: 720px; }
.legend strong { color: var(--chrome-warm); font-weight: 500; }
</style>
</head>
<body>
<main class="page">
<div class="header">
<div class="header__eyebrow">Title font exploration · 2026-07-14 · Upright · Sci-fi shortlist</div>
<h1 class="header__title">Same words. Six voices. Pick the one that sounds like the brand.</h1>
<p class="header__sub">Direct A/B of six candidate title fonts against the current Space Grotesk baseline. Serifs are out — all six candidates are Star Wars-adjacent sci-fi sans / mono / display. All samples set upright (no italic). Same content across every row — a hero title, a section title, a page title, a chrome eyebrow — in the current Kyber Hull styleguide colours, paired with Manrope body copy.</p>
<p class="header__meta">Baseline: Space Grotesk · Sci-fi alternatives: <strong>Orbitron · Rajdhani · Turret Road · Space Mono · Chakra Petch</strong></p>
</div>
<!-- BASELINE -->
<div class="baseline">
<div class="baseline__label">Current baseline · Space Grotesk · Upright</div>
<div class="baseline__title">"Anakin's blade. From the factory floor. Yours inside ten days."</div>
<p class="baseline__note">Current locked title font (SAS1 v4.2.1), rendered upright — italic use is being retired from ARTSABERS titles. 500 weight, hero size ~80px. Geometric sans with slight quirks — modernist, precise, sci-fi-adjacent. Reads as tech-editorial rather than overtly cinematic-sci-fi. Below: the same title strings in five Star Wars-adjacent alternatives.</p>
</div>
<!-- ROW 1 · SPACE GROTESK (baseline restated) -->
<section class="row row--space-grotesk">
<div class="row__meta">
<div>
<div class="row__name">01 · Space Grotesk</div>
<div class="row__family">Space Grotesk</div>
<span class="row__badge">Current baseline · Geometric sans</span>
</div>
<p class="row__desc">Modernist geometric sans with tempered quirks. Reads as <em>precise, engineered, tech-editorial</em>. Currently used across all 16 mockups this batch. Neutral enough to work everywhere; distinctive enough not to feel generic. Feels contemporary but not cinematic — Nordic tech magazine, not Star Wars opening crawl. Upright at 500 weight has clean stability.</p>
</div>
<div class="samples">
<div class="sample">
<div class="sample__label">Hero title · 80px 500</div>
<div class="sz-hero">"Anakin's blade. From the factory floor."</div>
</div>
<div class="sample">
<div class="sample__label">Section title · 44px 500</div>
<div class="sz-section">"Broadest catalogue. Real service."</div>
</div>
<div class="sample">
<div class="sample__label">Page title · 32px 500</div>
<div class="sz-page">Three questions. We'll pick.</div>
</div>
<div class="sample">
<div class="sample__label">Chrome eyebrow · 13px 600 uppercase</div>
<div class="sz-eyebrow">This week · Free spare blade in the box</div>
</div>
<div class="sample">
<div class="sample__label">Body context · Manrope 15px (locked)</div>
<p class="sz-context">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it.</p>
</div>
</div>
</section>
<!-- ROW 2 · ORBITRON -->
<section class="row row--orbitron">
<div class="row__meta">
<div>
<div class="row__name">02 · Orbitron</div>
<div class="row__family">Orbitron</div>
<span class="row__badge">Classic sci-fi UI · Geometric wide</span>
</div>
<p class="row__desc">The <em>quintessential sci-fi UI typeface</em>. Squarish oval letterforms, wide proportions. Immediately reads as "space movie title card" or "aerospace engineering panel." Common in game UI, tech branding, spacecraft-adjacent design (Elon Musk-era SpaceX aesthetic). Weights 400-900. Hero drops to 64px because wide letters take more horizontal space. Risk: overused enough that some designers see it as the go-to generic sci-fi choice.</p>
</div>
<div class="samples">
<div class="sample">
<div class="sample__label">Hero title · 64px 600 (wide letters, size dropped)</div>
<div class="sz-hero">"Anakin's blade. From the factory floor."</div>
</div>
<div class="sample">
<div class="sample__label">Section title · 36px 600</div>
<div class="sz-section">"Broadest catalogue. Real service."</div>
</div>
<div class="sample">
<div class="sample__label">Page title · 26px 500</div>
<div class="sz-page">Three questions. We'll pick.</div>
</div>
<div class="sample">
<div class="sample__label">Chrome eyebrow · 13px 500 uppercase (in Orbitron)</div>
<div class="sz-eyebrow">This week · Free spare blade in the box</div>
</div>
<div class="sample">
<div class="sample__label">Body context · Manrope 15px (locked)</div>
<p class="sz-context">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it.</p>
</div>
</div>
</section>
<!-- ROW 3 · RAJDHANI -->
<section class="row row--rajdhani">
<div class="row__meta">
<div>
<div class="row__name">03 · Rajdhani</div>
<div class="row__family">Rajdhani</div>
<span class="row__badge">Condensed sci-fi · Cyberpunk-adjacent</span>
</div>
<p class="row__desc">Indian Type Foundry's condensed sci-fi sans. Sharp angular cuts on letters, narrow proportions. Reads as <em>Cyberpunk 2077 UI panel, Blade Runner subtitle, aggressive tech HUD</em>. Narrow letters create dense vertical rhythm — fits more character per line than wide fonts. Weights 400-700. Hero can go bigger (88px) because letters are narrow. Cousin of Chakra Petch but denser and less baroque.</p>
</div>
<div class="samples">
<div class="sample">
<div class="sample__label">Hero title · 88px 600 (condensed can go bigger)</div>
<div class="sz-hero">"Anakin's blade. From the factory floor."</div>
</div>
<div class="sample">
<div class="sample__label">Section title · 48px 600</div>
<div class="sz-section">"Broadest catalogue. Real service."</div>
</div>
<div class="sample">
<div class="sample__label">Page title · 36px 500</div>
<div class="sz-page">Three questions. We'll pick.</div>
</div>
<div class="sample">
<div class="sample__label">Chrome eyebrow · 13px 600 uppercase (in Rajdhani)</div>
<div class="sz-eyebrow">This week · Free spare blade in the box</div>
</div>
<div class="sample">
<div class="sample__label">Body context · Manrope 15px (locked)</div>
<p class="sz-context">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it.</p>
</div>
</div>
</section>
<!-- ROW 4 · TURRET ROAD -->
<section class="row row--turret-road">
<div class="row__meta">
<div>
<div class="row__name">04 · Turret Road</div>
<div class="row__family">Turret Road</div>
<span class="row__badge">Squared aerospace · Engineering document</span>
</div>
<p class="row__desc">Squared geometric sans with mono influence but proportional widths. Reads as <em>aerospace engineering document, technical manual, modern tech-poster</em>. Less overtly sci-fi than Orbitron — more "NASA report cover" than "space opera title card." Feels engineered and precise without being costume-y. Weights 200-800 give real hierarchy control. Good middle ground between Space Grotesk (safe) and Orbitron (obvious).</p>
</div>
<div class="samples">
<div class="sample">
<div class="sample__label">Hero title · 72px 700</div>
<div class="sz-hero">"Anakin's blade. From the factory floor."</div>
</div>
<div class="sample">
<div class="sample__label">Section title · 42px 700</div>
<div class="sz-section">"Broadest catalogue. Real service."</div>
</div>
<div class="sample">
<div class="sample__label">Page title · 30px 500</div>
<div class="sz-page">Three questions. We'll pick.</div>
</div>
<div class="sample">
<div class="sample__label">Chrome eyebrow · 13px 500 uppercase (in Turret Road)</div>
<div class="sz-eyebrow">This week · Free spare blade in the box</div>
</div>
<div class="sample">
<div class="sample__label">Body context · Manrope 15px (locked)</div>
<p class="sz-context">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it.</p>
</div>
</div>
</section>
<!-- ROW 5 · SPACE MONO -->
<section class="row row--space-mono">
<div class="row__meta">
<div>
<div class="row__name">05 · Space Mono</div>
<div class="row__family">Space Mono</div>
<span class="row__badge">Sci-fi monospace · Machine-log</span>
</div>
<p class="row__desc">Monospaced sci-fi cousin of Space Grotesk (same family designer). Reads as <em>technical, terminal, machine-log</em> — Star Wars UI screens, Cyberpunk terminal output, tech briefing document. Overwhelmingly on-brand for the hull-plate / spacecraft interior metaphor. Every character occupies the same width — creates a distinctive engineering-blueprint rhythm. Best at smaller-to-mid title sizes; monospace at 80px starts to feel gappy so hero drops to 60px.</p>
</div>
<div class="samples">
<div class="sample">
<div class="sample__label">Hero title · 60px 700 (mono needs a size reduction)</div>
<div class="sz-hero">"Anakin's blade. From the factory floor."</div>
</div>
<div class="sample">
<div class="sample__label">Section title · 36px 700</div>
<div class="sz-section">"Broadest catalogue. Real service."</div>
</div>
<div class="sample">
<div class="sample__label">Page title · 28px 700</div>
<div class="sz-page">Three questions. We'll pick.</div>
</div>
<div class="sample">
<div class="sample__label">Chrome eyebrow · 13px 400 uppercase (in Space Mono)</div>
<div class="sz-eyebrow">This week · Free spare blade in the box</div>
</div>
<div class="sample">
<div class="sample__label">Body context · Manrope 15px (locked)</div>
<p class="sz-context">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it.</p>
</div>
</div>
</section>
<!-- ROW 6 · CHAKRA PETCH -->
<section class="row row--chakra-petch">
<div class="row__meta">
<div>
<div class="row__name">06 · Chakra Petch</div>
<div class="row__family">Chakra Petch</div>
<span class="row__badge">Sci-fi geometric sans · Angled cuts</span>
</div>
<p class="row__desc">Geometric sans with distinctive sci-fi character — sharp angled cuts on letters like R, K, A. Reads as <em>Star Wars UI panel, Cyberpunk 2077 HUD, near-future tech interface</em>. Overtly sci-fi in a way Space Grotesk is not — feels closer to the "actual Star Wars typeface" territory without being a costume typeface. Distinctive at all sizes. Risk: strong character can dominate and start to feel gimmicky if overused.</p>
</div>
<div class="samples">
<div class="sample">
<div class="sample__label">Hero title · 80px 600</div>
<div class="sz-hero">"Anakin's blade. From the factory floor."</div>
</div>
<div class="sample">
<div class="sample__label">Section title · 44px 600</div>
<div class="sz-section">"Broadest catalogue. Real service."</div>
</div>
<div class="sample">
<div class="sample__label">Page title · 32px 500</div>
<div class="sz-page">Three questions. We'll pick.</div>
</div>
<div class="sample">
<div class="sample__label">Chrome eyebrow · 13px 500 uppercase (in Chakra Petch)</div>
<div class="sz-eyebrow">This week · Free spare blade in the box</div>
</div>
<div class="sample">
<div class="sample__label">Body context · Manrope 15px (locked)</div>
<p class="sz-context">Most saber sites re-list the same factory catalogue. We do too — but with more of it. Every character, every Saber Core tier, every duelling grade. If it exists in replica form, we probably stock it.</p>
</div>
</div>
</section>
<div class="legend">
<p><strong>Notes.</strong> All samples set on the current Kyber Hull carbon ground (#060605) with the brand's chrome/warm text tokens. All titles upright — italic use is being retired from ARTSABERS. Serifs dismissed on this pass — the shortlist is now Star Wars-adjacent sci-fi sans / mono / display. Manrope body baseline is locked and used in every context sample below the title stack. Eyebrows in each row use the row's own candidate font (rather than defaulting to Space Grotesk) so you can see how the font behaves at chrome-type size too — the decision may be to use one font family across titles + chrome, not two.</p>
<p style="margin-top:16px;"><strong>What to look for.</strong> (1) Which one sounds like the brand voice — workshop-manifesto but factory-direct, cinematic sci-fi but not costume-y. (2) Which one holds up across all four sizes without needing per-size overrides that dilute the family character. (3) Which one lets the ember accent and hull-plate atmospheric imagery do their work instead of competing with it. (4) Whether the font can also carry the chrome eyebrow / small-type role, or whether we need a second more-neutral font for those.</p>
</div>
</main>
</body>
</html>