Initial commit... a site is born (again? finally?)
This commit is contained in:
BIN
logos/avatar.af
Normal file
BIN
logos/avatar.af
Normal file
Binary file not shown.
BIN
logos/favicon cutout block.af
Normal file
BIN
logos/favicon cutout block.af
Normal file
Binary file not shown.
BIN
logos/favicon.af
Normal file
BIN
logos/favicon.af
Normal file
Binary file not shown.
BIN
logos/mifi-ventures-wordmark.af
Normal file
BIN
logos/mifi-ventures-wordmark.af
Normal file
Binary file not shown.
BIN
logos/wordmark with tagline.af
Normal file
BIN
logos/wordmark with tagline.af
Normal file
Binary file not shown.
589
logos/wordmark.html
Normal file
589
logos/wordmark.html
Normal file
@@ -0,0 +1,589 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user