590 lines
17 KiB
HTML
590 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>mifi Ventures — Option 1 vs Plus Jakarta Sans (600/700)</title>
|
||
|
||
<!-- Preconnect -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
|
||
<!-- Fonts: Inter, Fraunces, Plus Jakarta Sans -->
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
|
||
<style>
|
||
:root {
|
||
--bg: #0b0b0f;
|
||
--card: rgba(255, 255, 255, 0.06);
|
||
--border: rgba(255, 255, 255, 0.1);
|
||
--text: rgba(255, 255, 255, 0.92);
|
||
--muted: rgba(255, 255, 255, 0.68);
|
||
--muted2: rgba(255, 255, 255, 0.52);
|
||
--shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
background: radial-gradient(
|
||
1200px 700px at 20% 0%,
|
||
rgba(120, 90, 255, 0.15),
|
||
transparent 55%
|
||
),
|
||
radial-gradient(
|
||
900px 600px at 80% 20%,
|
||
rgba(0, 210, 255, 0.1),
|
||
transparent 55%
|
||
),
|
||
var(--bg);
|
||
color: var(--text);
|
||
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto,
|
||
"Helvetica Neue", Arial, sans-serif;
|
||
padding: 28px;
|
||
}
|
||
|
||
header {
|
||
max-width: 1120px;
|
||
margin: 0 auto 18px;
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
h1 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
p.lede {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
max-width: 90ch;
|
||
}
|
||
|
||
.grid {
|
||
max-width: 1120px;
|
||
margin: 18px auto 0;
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 14px;
|
||
}
|
||
|
||
@media (min-width: 980px) {
|
||
.grid {
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
}
|
||
}
|
||
|
||
.card {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 16px 16px 18px;
|
||
box-shadow: var(--shadow);
|
||
backdrop-filter: blur(10px);
|
||
min-height: 520px;
|
||
display: grid;
|
||
grid-template-rows: auto auto 1fr auto;
|
||
gap: 12px;
|
||
}
|
||
|
||
.card h2 {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.tag {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.pill {
|
||
padding: 4px 8px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
color: var(--muted2);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.mock {
|
||
border: 1px dashed rgba(255, 255, 255, 0.18);
|
||
border-radius: 14px;
|
||
padding: 16px;
|
||
display: grid;
|
||
gap: 16px;
|
||
align-content: start;
|
||
}
|
||
|
||
.row {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.label {
|
||
font-size: 11px;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--muted2);
|
||
}
|
||
|
||
.surface {
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 12px;
|
||
padding: 14px;
|
||
background: rgba(0, 0, 0, 0.18);
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.surface.light {
|
||
background: rgba(255, 255, 255, 0.92);
|
||
color: #0b0b0f;
|
||
border-color: rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.hint {
|
||
font-size: 12px;
|
||
opacity: 0.65;
|
||
}
|
||
|
||
/* Wordmark base */
|
||
.wordmark {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 0.22em; /* slightly tighter than default word space */
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
font-variant-ligatures: common-ligatures; /* keep ligatures on */
|
||
font-feature-settings: "liga" 1, "clig" 1;
|
||
}
|
||
.wordmark .mifi {
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
/* Size scale */
|
||
.size-hero {
|
||
font-size: 52px;
|
||
}
|
||
.size-header {
|
||
font-size: 30px;
|
||
}
|
||
.size-signature {
|
||
font-size: 18px;
|
||
}
|
||
.size-micro {
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* Tracking helpers */
|
||
.track-tight {
|
||
letter-spacing: -0.015em;
|
||
} /* ~ -1.5% */
|
||
.track-tight2 {
|
||
letter-spacing: -0.02em;
|
||
} /* ~ -2% */
|
||
.track-loose {
|
||
letter-spacing: 0.03em;
|
||
} /* ~ +3% */
|
||
.track-loose2 {
|
||
letter-spacing: 0.045em;
|
||
} /* ~ +4.5% */
|
||
|
||
/* ---------------------------------
|
||
Option 1 (old): Inter + Fraunces
|
||
--------------------------------- */
|
||
.opt1 .mifi {
|
||
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial,
|
||
sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
.opt1 .ventures {
|
||
font-family: Fraunces, Georgia, "Times New Roman", Times, serif;
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-variation-settings: "opsz" 36;
|
||
}
|
||
|
||
/* ---------------------------------
|
||
Jakarta 600: Plus Jakarta + Fraunces
|
||
--------------------------------- */
|
||
.jak600 .mifi {
|
||
font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system,
|
||
Segoe UI, Roboto, Arial, sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
.jak600 .ventures {
|
||
font-family: Fraunces, Georgia, "Times New Roman", Times, serif;
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-variation-settings: "opsz" 36;
|
||
}
|
||
|
||
/* ---------------------------------
|
||
Jakarta 700: Plus Jakarta + Fraunces
|
||
--------------------------------- */
|
||
.jak700 .mifi {
|
||
font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system,
|
||
Segoe UI, Roboto, Arial, sans-serif;
|
||
font-weight: 700;
|
||
}
|
||
.jak700 .ventures {
|
||
font-family: Fraunces, Georgia, "Times New Roman", Times, serif;
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-variation-settings: "opsz" 36;
|
||
}
|
||
|
||
/* Footer notes */
|
||
.spec {
|
||
margin: 0;
|
||
padding-left: 16px;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
line-height: 1.45;
|
||
}
|
||
.spec li {
|
||
margin: 4px 0;
|
||
}
|
||
|
||
code.k {
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||
"Liberation Mono", "Courier New", monospace;
|
||
font-size: 11px;
|
||
color: rgba(255, 255, 255, 0.75);
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding: 2px 6px;
|
||
border-radius: 8px;
|
||
}
|
||
.surface.light code.k {
|
||
color: rgba(0, 0, 0, 0.65);
|
||
background: rgba(0, 0, 0, 0.04);
|
||
border-color: rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.divider {
|
||
height: 1px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
margin: 8px 0 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<header>
|
||
<h1>mifi Ventures — Option 1 vs Plus Jakarta Sans (600/700)</h1>
|
||
<p class="lede">
|
||
Three side-by-side mockups. Each card shows:
|
||
<strong>mifi alone</strong> and <strong>mifi Ventures</strong> together,
|
||
at hero/header/signature/micro sizes, plus a light-surface invoice
|
||
preview. Ligatures are enabled to let Plus Jakarta do its thing with
|
||
<code class="k">fi</code>.
|
||
</p>
|
||
</header>
|
||
|
||
<main class="grid">
|
||
<!-- OLD OPTION 1 -->
|
||
<section class="card">
|
||
<div>
|
||
<h2>Old Option 1 — Inter 600 + Fraunces 500</h2>
|
||
<div class="tag">
|
||
<span class="pill">Baseline</span>
|
||
<span class="pill">Clean</span>
|
||
<span class="pill">Familiar</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mock opt1">
|
||
<div class="row">
|
||
<div class="label">Hero — mifi alone</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-hero">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
</div>
|
||
<div class="hint">Solo mark test</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Hero — full lockup</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-hero">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
<span class="ventures track-loose2">Ventures</span>
|
||
</div>
|
||
<div class="hint">Landing / hero</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Header</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-header">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
<span class="ventures track-loose2">Ventures</span>
|
||
</div>
|
||
<div class="hint">Nav / sticky header</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Invoice (light)</div>
|
||
<div class="surface light">
|
||
<div class="wordmark size-header">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
<span class="ventures track-loose2">Ventures</span>
|
||
</div>
|
||
<div class="hint">PDF invoice header</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Email signature</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-signature">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
<span class="ventures track-loose2">Ventures</span>
|
||
</div>
|
||
<div class="hint">Signature legibility</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Micro — mifi alone</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-micro">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
</div>
|
||
<div class="hint">Favicon-ish / tiny footer</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ul class="spec">
|
||
<li><code class="k">mifi</code> Inter 600, tracking −2%</li>
|
||
<li>
|
||
<code class="k">Ventures</code> Fraunces 500, tracking +4.5%, opsz
|
||
~36
|
||
</li>
|
||
<li>Ligatures ON (Inter won’t change; Jakarta will)</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- JAKARTA 600 -->
|
||
<section class="card">
|
||
<div>
|
||
<h2>Jakarta Variant — Plus Jakarta 600 + Fraunces 500</h2>
|
||
<div class="tag">
|
||
<span class="pill">More character</span>
|
||
<span class="pill">Technical-warm</span>
|
||
<span class="pill">Ligature magic</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mock jak600">
|
||
<div class="row">
|
||
<div class="label">Hero — mifi alone</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-hero">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
</div>
|
||
<div class="hint">
|
||
Solo mark test (watch the <code class="k">fi</code>)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Hero — full lockup</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-hero">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
<span class="ventures track-loose2">Ventures</span>
|
||
</div>
|
||
<div class="hint">Landing / hero</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Header</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-header">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
<span class="ventures track-loose2">Ventures</span>
|
||
</div>
|
||
<div class="hint">Nav / sticky header</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Invoice (light)</div>
|
||
<div class="surface light">
|
||
<div class="wordmark size-header">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
<span class="ventures track-loose2">Ventures</span>
|
||
</div>
|
||
<div class="hint">PDF invoice header</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Email signature</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-signature">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
<span class="ventures track-loose2">Ventures</span>
|
||
</div>
|
||
<div class="hint">Signature legibility</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Micro — mifi alone</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-micro">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
</div>
|
||
<div class="hint">Favicon-ish / tiny footer</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ul class="spec">
|
||
<li>
|
||
<code class="k">mifi</code> Plus Jakarta Sans 600, tracking −2%,
|
||
ligatures ON
|
||
</li>
|
||
<li>
|
||
<code class="k">Ventures</code> Fraunces 500, tracking +4.5%, opsz
|
||
~36
|
||
</li>
|
||
<li>Same lockup mechanics as Option 1 for apples-to-apples</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- JAKARTA 700 -->
|
||
<section class="card">
|
||
<div>
|
||
<h2>Jakarta Variant — Plus Jakarta 700 + Fraunces 500</h2>
|
||
<div class="tag">
|
||
<span class="pill">More authority</span>
|
||
<span class="pill">Sharper silhouette</span>
|
||
<span class="pill">Still friendly</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mock jak700">
|
||
<div class="row">
|
||
<div class="label">Hero — mifi alone</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-hero">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
</div>
|
||
<div class="hint">Solo mark test (700 weight)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Hero — full lockup</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-hero">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
<span class="ventures track-loose2">Ventures</span>
|
||
</div>
|
||
<div class="hint">Landing / hero</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Header</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-header">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
<span class="ventures track-loose2">Ventures</span>
|
||
</div>
|
||
<div class="hint">Nav / sticky header</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Invoice (light)</div>
|
||
<div class="surface light">
|
||
<div class="wordmark size-header">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
<span class="ventures track-loose2">Ventures</span>
|
||
</div>
|
||
<div class="hint">PDF invoice header</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Email signature</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-signature">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
<span class="ventures track-loose2">Ventures</span>
|
||
</div>
|
||
<div class="hint">Signature legibility</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="label">Micro — mifi alone</div>
|
||
<div class="surface">
|
||
<div class="wordmark size-micro">
|
||
<span class="mifi track-tight2">mifi</span>
|
||
</div>
|
||
<div class="hint">Favicon-ish / tiny footer</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ul class="spec">
|
||
<li>
|
||
<code class="k">mifi</code> Plus Jakarta Sans 700, tracking −2%,
|
||
ligatures ON
|
||
</li>
|
||
<li>
|
||
<code class="k">Ventures</code> Fraunces 500, tracking +4.5%, opsz
|
||
~36
|
||
</li>
|
||
<li>700 may feel more “mark-like” vs “UI-like”</li>
|
||
</ul>
|
||
</section>
|
||
</main>
|
||
|
||
<div
|
||
style="
|
||
max-width: 1120px;
|
||
margin: 18px auto 0;
|
||
color: rgba(255, 255, 255, 0.62);
|
||
font-size: 12px;
|
||
line-height: 1.55;
|
||
"
|
||
>
|
||
<div class="divider"></div>
|
||
<p style="margin: 12px 0 0">
|
||
Tip: If you want to exaggerate the Plus Jakarta ligature effect for
|
||
testing, temporarily set the tracking on <code class="k">mifi</code> to
|
||
<code class="k">-0.01em</code> (less tight) and bump the hero size to
|
||
<code class="k">60px</code>. Then revert once you pick the winner.
|
||
</p>
|
||
</div>
|
||
</body>
|
||
</html>
|