Compare commits

...

2 Commits

Author SHA1 Message Date
Roberto
b23c4ef255 Merge branch 'develop' of https://git.muticolturano.com/Adiuva/adiuva into develop 2026-04-08 09:54:12 +02:00
Roberto
801ae43000 Add logo brand 2026-04-08 09:53:48 +02:00
8 changed files with 518 additions and 0 deletions

View File

@@ -0,0 +1,385 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>adiuvAI — Brand Identity</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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg-light: #f4edf3; --bg-dark: #0c0c0c;
--text: #040404; --text-light: #fbfbfb;
--primary: #fbc881; --secondary: #8a8ea9;
--muted: #c8c3cd; --border: #c8c3cd;
--radius: 10px;
}
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg-light); color: var(--text); -webkit-font-smoothing: antialiased; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.section-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; }
/* ── COMPASS ANIMATION ── */
.compass-needle { animation: compass-settle 5s ease-in-out infinite; transform-origin: 32px 32px; }
@keyframes compass-settle {
0% { transform: rotate(0deg); }
20% { transform: rotate(4deg); }
50% { transform: rotate(-3deg); }
80% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
/* ── HERO ── */
.hero { background: var(--bg-dark); padding: 96px 32px 80px; text-align: center; }
.hero-mark { width: 96px; height: 96px; margin: 0 auto 32px; }
.hero-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 16px; }
.hero-name { font-size: clamp(40px,6vw,64px); font-weight: 700; color: var(--text-light); letter-spacing: -2px; line-height: 1; margin-bottom: 16px; }
.hero-name span { color: var(--primary); }
.hero-tagline { font-size: 16px; color: rgba(251,251,251,.45); max-width: 420px; margin: 0 auto; line-height: 1.6; }
/* ── SECTIONS ── */
.section { padding: 72px 32px; border-bottom: 1px solid var(--border); }
.section:last-of-type { border-bottom: none; }
.section-dark { background: var(--bg-dark); border-bottom: 1px solid #1a1a1a; }
.section h2 { font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 8px; letter-spacing: -.5px; }
.section-dark h2 { color: var(--text-light); }
.section > p { font-size: 14px; color: var(--secondary); line-height: 1.7; max-width: 560px; margin-bottom: 40px; }
.section-dark > p { color: rgba(251,251,251,.4); }
/* ── CONCEPT GRID ── */
.concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width:700px) { .concept-grid { grid-template-columns: 1fr; } }
.concept-mark-wrapper { background: var(--bg-dark); border-radius: var(--radius); padding: 56px 48px; display: flex; justify-content: center; align-items: center; }
.concept-text .point { display: flex; gap: 12px; margin-bottom: 22px; align-items: flex-start; }
.point-icon { width: 26px; height: 26px; background: rgba(251,200,129,.1); border: 1px solid rgba(251,200,129,.22); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; font-size: 12px; }
.point-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.point-desc { font-size: 13px; color: var(--secondary); line-height: 1.65; margin: 0; }
/* ── VARIANTS ── */
.variants-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.variant-full { grid-column: 1 / -1; }
@media (max-width:700px) { .variants-grid { grid-template-columns: 1fr; } }
.logo-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); transition: transform .18s ease, box-shadow .18s ease; }
.logo-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.10); }
.logo-card-dark { border-color: #1e1e1e; }
.logo-card-dark:hover { box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.card-inner { padding: 40px 32px; display: flex; align-items: center; justify-content: center; min-height: 120px; }
.card-inner-light { background: var(--bg-light); }
.card-inner-dark { background: var(--bg-dark); }
.card-inner-white { background: #fff; }
.card-inner img { max-width: 100%; max-height: 72px; object-fit: contain; }
.card-meta { padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); background: #fff; }
.card-meta-dark { border-top-color: #1e1e1e; background: #0e0e0e; }
.card-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); }
.card-meta-dark .card-label { color: rgba(251,251,251,.3); }
.card-filename { font-size: 11px; font-family: monospace; color: var(--muted); }
.card-meta-dark .card-filename { color: rgba(251,251,251,.2); }
/* ── PALETTE ── */
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 12px; }
.color-chip { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(0,0,0,.06); }
.color-swatch { height: 80px; display: flex; align-items: flex-end; padding: 8px 10px; }
.color-hex { font-size: 11px; font-family: monospace; font-weight: 500; opacity: .65; }
.color-info { padding: 10px; background: #fff; }
.color-name { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.color-role { font-size: 11px; color: var(--secondary); }
/* ── TYPE ── */
.type-specimen { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; }
.type-row { padding: 20px 0; border-bottom: 1px solid #f0eaef; }
.type-row:last-child { border-bottom: none; padding-bottom: 0; }
.type-meta { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.type-xl { font-size: 48px; font-weight: 700; letter-spacing: -2px; line-height: 1; }
.type-xl span { color: var(--primary); }
.type-lg { font-size: 28px; font-weight: 600; letter-spacing: -.8px; }
.type-md { font-size: 16px; font-weight: 400; line-height: 1.6; }
.type-sm { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary); }
/* ── DEV REF ── */
.dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width:700px) { .dev-grid { grid-template-columns: 1fr; } }
.code-block { background: #0e0e0e; border: 1px solid #1e1e1e; border-radius: var(--radius); padding: 24px; overflow-x: auto; }
.code-block pre { font-family: monospace; font-size: 12px; line-height: 1.7; color: #e1e2e8; }
.ck { color: #a1c9fd; } .cs { color: #fbc881; } .cc { color: rgba(225,226,232,.28); font-style: italic; }
.file-tree { background: #0e0e0e; border: 1px solid #1e1e1e; border-radius: var(--radius); padding: 24px; }
.file-tree-title { font-size: 11px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; color: rgba(251,251,251,.28); margin-bottom: 16px; }
.fi { display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-start; }
.fi:last-child { margin-bottom: 0; }
.fi-icon { font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.fi-name { font-family: monospace; font-size: 12px; color: #fbc881; flex-shrink: 0; }
.fi-desc { font-size: 12px; color: rgba(225,226,232,.3); line-height: 1.5; }
/* ── FOOTER ── */
.footer { background: var(--bg-dark); padding: 48px 32px; text-align: center; }
.footer-name { font-size: 20px; font-weight: 700; color: var(--text-light); letter-spacing: -.5px; margin-bottom: 4px; }
.footer-name span { color: var(--primary); }
.footer-sub { font-size: 12px; color: rgba(251,251,251,.28); letter-spacing: .06em; }
</style>
</head>
<body>
<!-- HERO -->
<section class="hero">
<div class="container">
<div class="hero-mark">
<svg viewBox="0 0 64 64" fill="none" width="96" height="96">
<g class="compass-needle">
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
<path d="M16,32 L48,32 L32,60 Z" fill="#FFFFFF" opacity="0.75"/>
<circle cx="32" cy="32" r="2.5" fill="#FFFFFF" opacity="0.2"/>
</g>
</svg>
</div>
<p class="hero-label">Brand Identity</p>
<h1 class="hero-name">adiuv<span>AI</span></h1>
<p class="hero-tagline">Il tuo compasso nel lavoro quotidiano — l'AI che ti indica sempre la direzione giusta.</p>
</div>
</section>
<!-- DESIGN CONCEPT -->
<section class="section">
<div class="container">
<p class="section-label">Design Concept</p>
<h2>Il Compasso</h2>
<p>Non il gesto dell'aiuto, ma il suo significato più profondo: qualcuno che ti indica la strada. Un ago di bussola che oscilla e si ferma sempre a nord.</p>
<div class="concept-grid">
<div class="concept-mark-wrapper">
<svg viewBox="0 0 64 64" fill="none" width="140" height="140">
<g class="compass-needle">
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
<path d="M16,32 L48,32 L32,60 Z" fill="#FFFFFF" opacity="0.65"/>
<line x1="16" y1="32" x2="48" y2="32" stroke="#fff" stroke-width="0.5" opacity="0.15"/>
<circle cx="32" cy="32" r="2.5" fill="#fff" opacity="0.2"/>
</g>
<!-- Annotations -->
<text x="34" y="14" font-size="4" fill="rgba(251,200,129,.6)" font-family="Inter,sans-serif" letter-spacing=".05em">NORD · AI</text>
<line x1="32" y1="17" x2="32" y2="20" stroke="rgba(251,200,129,.4)" stroke-width=".6"/>
<text x="34" y="52" font-size="4" fill="rgba(255,255,255,.35)" font-family="Inter,sans-serif" letter-spacing=".05em">SUD · YOU</text>
<line x1="32" y1="47" x2="32" y2="50" stroke="rgba(255,255,255,.2)" stroke-width=".6"/>
</svg>
</div>
<div class="concept-text">
<div class="point">
<div class="point-icon"></div>
<div>
<div class="point-title">Nord dorato = l'AI</div>
<p class="point-desc">La punta superiore (#fbc881) punta sempre verso l'alto — verso l'obiettivo. È l'AI: calda, orientata, che guida senza invadere.</p>
</div>
</div>
<div class="point">
<div class="point-icon"></div>
<div>
<div class="point-title">Sud scuro = l'utente</div>
<p class="point-desc">La punta inferiore (#040404) è ancorata alla realtà. L'utente con le sue attività, i suoi progetti, il suo lavoro concreto.</p>
</div>
</div>
<div class="point">
<div class="point-icon"></div>
<div>
<div class="point-title">L'oscillazione (animazione)</div>
<p class="point-desc">Il mark oscilla leggermente come un vero ago prima di fermarsi — trovare il nord. Un dettaglio quasi impercettibile, fedele alla brand personality "calma, mai appariscente".</p>
</div>
</div>
<div class="point">
<div class="point-icon"></div>
<div>
<div class="point-title">Il diamante (forma)</div>
<p class="point-desc">Due triangoli che formano un rombo. Forma archetipica, funziona a 16px come a 512px. La divisione orizzontale racconta la relazione senza bisogno di parole.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- LOGO VARIANTS -->
<section class="section" style="background:#faf5f9;">
<div class="container">
<p class="section-label">Logo Variants</p>
<h2>7 File Canonici</h2>
<p>Ogni variante usa gli stessi due triangoli — cambiano solo colore e scala.</p>
<div class="variants-grid">
<div class="logo-card variant-full">
<div class="card-inner card-inner-light" style="min-height:100px;">
<img src="logo-full.svg" alt="adiuvAI full logo">
</div>
<div class="card-meta">
<span class="card-label">Full Logo</span>
<span class="card-filename">logo-full.svg</span>
</div>
</div>
<div class="logo-card logo-card-dark variant-full">
<div class="card-inner card-inner-dark" style="min-height:100px;">
<img src="logo-white.svg" alt="adiuvAI white">
</div>
<div class="card-meta card-meta-dark">
<span class="card-label">White Variant</span>
<span class="card-filename">logo-white.svg</span>
</div>
</div>
<div class="logo-card logo-card-dark">
<div class="card-inner card-inner-dark" style="min-height:140px;">
<img src="logo-mark.svg" alt="mark" style="width:80px;height:80px;">
</div>
<div class="card-meta card-meta-dark">
<span class="card-label">Mark</span>
<span class="card-filename">logo-mark.svg</span>
</div>
</div>
<div class="logo-card">
<div class="card-inner card-inner-white" style="min-height:140px;">
<img src="logo-icon.svg" alt="icon" style="max-width:110px;max-height:110px;">
</div>
<div class="card-meta">
<span class="card-label">App Icon</span>
<span class="card-filename">logo-icon.svg</span>
</div>
</div>
<div class="logo-card">
<div class="card-inner card-inner-light">
<img src="logo-wordmark.svg" alt="wordmark" style="max-height:40px;">
</div>
<div class="card-meta">
<span class="card-label">Wordmark</span>
<span class="card-filename">logo-wordmark.svg</span>
</div>
</div>
<div class="logo-card logo-card-dark">
<div class="card-inner card-inner-dark" style="flex-direction:column;gap:8px;">
<img src="favicon.svg" alt="favicon" style="width:64px;height:64px;image-rendering:pixelated;">
<span style="font-size:10px;color:rgba(251,251,251,.25);font-family:monospace;">16×16 px</span>
</div>
<div class="card-meta card-meta-dark">
<span class="card-label">Favicon</span>
<span class="card-filename">favicon.svg</span>
</div>
</div>
<div class="logo-card variant-full">
<div class="card-inner card-inner-white" style="min-height:100px;">
<img src="logo-black.svg" alt="black">
</div>
<div class="card-meta">
<span class="card-label">Black Variant</span>
<span class="card-filename">logo-black.svg</span>
</div>
</div>
</div>
</div>
</section>
<!-- COLOR PALETTE -->
<section class="section">
<div class="container">
<p class="section-label">Color Palette</p>
<h2>Colori Brand</h2>
<p>Estratti direttamente da globals.css. Canvas rosato caldo in light; monocromo rigoroso in dark.</p>
<div class="palette-grid">
<div class="color-chip">
<div class="color-swatch" style="background:#fbc881;"><span class="color-hex" style="color:rgba(4,4,4,.5);">#fbc881</span></div>
<div class="color-info"><div class="color-name">Golden</div><div class="color-role">Nord · AI · Accent</div></div>
</div>
<div class="color-chip">
<div class="color-swatch" style="background:#f4edf3;"><span class="color-hex" style="color:rgba(4,4,4,.35);">#f4edf3</span></div>
<div class="color-info"><div class="color-name">Canvas Light</div><div class="color-role">Sfondo light mode</div></div>
</div>
<div class="color-chip">
<div class="color-swatch" style="background:#0c0c0c;"><span class="color-hex" style="color:rgba(251,251,251,.35);">#0c0c0c</span></div>
<div class="color-info"><div class="color-name">Canvas Dark</div><div class="color-role">Sfondo dark mode</div></div>
</div>
<div class="color-chip">
<div class="color-swatch" style="background:#040404;"><span class="color-hex" style="color:rgba(251,251,251,.35);">#040404</span></div>
<div class="color-info"><div class="color-name">Ink</div><div class="color-role">Sud · utente · testo</div></div>
</div>
<div class="color-chip">
<div class="color-swatch" style="background:#fbfbfb;border:1px solid #e8e0e7;"><span class="color-hex" style="color:rgba(4,4,4,.28);">#fbfbfb</span></div>
<div class="color-info"><div class="color-name">Paper</div><div class="color-role">Testo dark mode</div></div>
</div>
<div class="color-chip">
<div class="color-swatch" style="background:#8a8ea9;"><span class="color-hex" style="color:rgba(251,251,251,.65);">#8a8ea9</span></div>
<div class="color-info"><div class="color-name">Slate</div><div class="color-role">Secondario · muted</div></div>
</div>
<div class="color-chip">
<div class="color-swatch" style="background:#c8c3cd;"><span class="color-hex" style="color:rgba(4,4,4,.38);">#c8c3cd</span></div>
<div class="color-info"><div class="color-name">Lavender</div><div class="color-role">Bordi · muted</div></div>
</div>
<div class="color-chip">
<div class="color-swatch" style="background:#323232;"><span class="color-hex" style="color:rgba(251,251,251,.35);">#323232</span></div>
<div class="color-info"><div class="color-name">Graphite</div><div class="color-role">Dark surfaces</div></div>
</div>
</div>
</div>
</section>
<!-- TYPOGRAPHY -->
<section class="section" style="background:#faf5f9;">
<div class="container">
<p class="section-label">Typography</p>
<h2>Geist · System Sans-Serif</h2>
<p>Geometrico, pulito, sicuro. @fontsource/geist nell'app; system-ui come fallback.</p>
<div class="type-specimen">
<div class="type-row"><div class="type-meta">Display · 48px · 700</div><div class="type-xl">adiuv<span>AI</span></div></div>
<div class="type-row"><div class="type-meta">Heading · 28px · 600</div><div class="type-lg">Workspace intelligente, locale, caldo.</div></div>
<div class="type-row"><div class="type-meta">Body · 16px · 400</div><div class="type-md">adiuvAI organizza i tuoi progetti, task e note in un workspace calmo — con un AI che ti guida silenziosamente verso gli obiettivi.</div></div>
<div class="type-row"><div class="type-meta">Label · 11px · 600 · Tracked</div><div class="type-sm">Brand Identity · Design System · 2026</div></div>
</div>
</div>
</section>
<!-- DEVELOPER REFERENCE -->
<section class="section-dark section">
<div class="container">
<p class="section-label">Developer Reference</p>
<h2>Tailwind Config · File Tree</h2>
<p>Token da aggiungere al blocco @theme di globals.css (Tailwind 4).</p>
<div class="dev-grid">
<div class="code-block">
<pre><span class="cc">// globals.css — @theme inline</span>
<span class="ck">--brand-golden</span>: <span class="cs">#fbc881</span>; <span class="cc">/* nord · AI */</span>
<span class="ck">--brand-canvas</span>: <span class="cs">#f4edf3</span>; <span class="cc">/* light bg */</span>
<span class="ck">--brand-void</span>: <span class="cs">#0c0c0c</span>; <span class="cc">/* dark bg */</span>
<span class="ck">--brand-ink</span>: <span class="cs">#040404</span>; <span class="cc">/* sud · user */</span>
<span class="ck">--brand-slate</span>: <span class="cs">#8a8ea9</span>; <span class="cc">/* secondary */</span>
<span class="ck">--brand-lavender</span>: <span class="cs">#c8c3cd</span>; <span class="cc">/* border */</span>
<span class="ck">--brand-graphite</span>: <span class="cs">#323232</span>; <span class="cc">/* dark surface */</span>
<span class="ck">--brand-paper</span>: <span class="cs">#fbfbfb</span>; <span class="cc">/* light text */</span></pre>
</div>
<div class="file-tree">
<div class="file-tree-title">assets/logo/</div>
<div class="fi"><span class="fi-icon"></span><span class="fi-name">logo-mark.svg</span><span class="fi-desc">Compasso canonico · 64×64 · animato</span></div>
<div class="fi"><span class="fi-icon"></span><span class="fi-name">logo-full.svg</span><span class="fi-desc">Mark + wordmark · 320×72 · animato</span></div>
<div class="fi"><span class="fi-icon">T</span><span class="fi-name">logo-wordmark.svg</span><span class="fi-desc">Solo testo · 200×40</span></div>
<div class="fi"><span class="fi-icon"></span><span class="fi-name">logo-icon.svg</span><span class="fi-desc">App icon · 512×512</span></div>
<div class="fi"><span class="fi-icon">·</span><span class="fi-name">favicon.svg</span><span class="fi-desc">Semplificato · 16×16</span></div>
<div class="fi"><span class="fi-icon"></span><span class="fi-name">logo-white.svg</span><span class="fi-desc">Variante bianca · su sfondo scuro</span></div>
<div class="fi"><span class="fi-icon"></span><span class="fi-name">logo-black.svg</span><span class="fi-desc">Variante nera · su sfondo chiaro</span></div>
<div class="fi" style="margin-top:12px;padding-top:12px;border-top:1px solid #1e1e1e;">
<span class="fi-icon">🌐</span><span class="fi-name">brand-showcase.html</span><span class="fi-desc">Questa pagina</span>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-name">adiuv<span>AI</span></div>
<div class="footer-sub">Brand Identity · roberto · 2026</div>
</div>
</footer>
</body>
</html>

10
assets/logo/favicon.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
<!--
adiuvAI — Favicon 16×16
Same compass needle, scaled to canvas.
North: M8,1 L13,8 L3,8 Z
South: M3,8 L13,8 L8,15 Z
-->
<path d="M8,1 L13,8 L3,8 Z" fill="#fbc881"/>
<path d="M3,8 L13,8 L8,15 Z" fill="#040404"/>
</svg>

After

Width:  |  Height:  |  Size: 325 B

View File

@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 70" fill="none">
<!-- adiuvAI — Black variant (light backgrounds, no color) -->
<g transform="translate(2,2)">
<path d="M32,4 L48,32 L16,32 Z" fill="#1A1A1A" opacity="0.55"/>
<path d="M16,32 L48,32 L32,60 Z" fill="#1A1A1A"/>
<circle cx="32" cy="32" r="2.5" fill="#1A1A1A" opacity="0.2"/>
</g>
<text x="65" y="42"
font-family="Geist, system-ui, -apple-system, sans-serif"
font-size="30" letter-spacing="-0.5">
<tspan font-weight="400" fill="#1A1A1A" opacity="0.7">adiuv</tspan><tspan font-weight="700" fill="#1A1A1A">AI</tspan>
</text>
</svg>

After

Width:  |  Height:  |  Size: 646 B

35
assets/logo/logo-full.svg Normal file
View File

@@ -0,0 +1,35 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 70" fill="none">
<!--
adiuvAI — Full logo (mark + wordmark)
Mark: translate(4,4) — canonical paths from logo-mark.svg
-->
<style>
.compass-needle {
animation: compass-settle 5s ease-in-out infinite;
transform-origin: 32px 32px;
}
@keyframes compass-settle {
0% { transform: rotate(0deg); }
20% { transform: rotate(4deg); }
50% { transform: rotate(-3deg); }
80% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
</style>
<g transform="translate(2,2)">
<g class="compass-needle">
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
<path d="M16,32 L48,32 L32,60 Z" fill="#040404"/>
<line x1="16" y1="32" x2="48" y2="32"
stroke="#040404" stroke-width="0.5" opacity="0.12"/>
<circle cx="32" cy="32" r="2.5" fill="#040404" opacity="0.18"/>
</g>
</g>
<text x="65" y="42"
font-family="Geist, system-ui, -apple-system, sans-serif"
font-size="30" letter-spacing="-0.5">
<tspan font-weight="400" fill="#040404">adiuv</tspan><tspan font-weight="700" fill="#fbc881">AI</tspan>
</text>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

14
assets/logo/logo-icon.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--
adiuvAI — App icon 512×512
Mark scaled 6.5× — translate(48,48) scale(6.5)
-->
<rect width="512" height="512" rx="112" fill="#f4edf3"/>
<g transform="translate(48,48) scale(6.5)">
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
<path d="M16,32 L48,32 L32,60 Z" fill="#040404"/>
<line x1="16" y1="32" x2="48" y2="32"
stroke="#040404" stroke-width="0.5" opacity="0.12"/>
<circle cx="32" cy="32" r="2.5" fill="#040404" opacity="0.18"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 564 B

41
assets/logo/logo-mark.svg Normal file
View File

@@ -0,0 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
<!--
adiuvAI — "Il Compasso" (The Compass Needle)
A compass needle split at its equator:
North (top) → golden = the AI, always pointing toward your goal
South (bottom) → dark = the user, grounded in reality
CANONICAL PATHS (derive all variants from these):
North: M32,4 L48,32 L16,32 Z
South: M16,32 L48,32 L32,60 Z
Center: line x1=16 y1=32 x2=48 y2=32 (1px hairline separator)
The shape oscillates like a compass finding north — settles on upward guidance.
-->
<style>
.compass-needle {
animation: compass-settle 5s ease-in-out infinite;
transform-origin: 32px 32px;
}
@keyframes compass-settle {
0% { transform: rotate(0deg); }
20% { transform: rotate(4deg); }
50% { transform: rotate(-3deg); }
80% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
</style>
<g class="compass-needle">
<!-- North — AI (golden) -->
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
<!-- South — Human (dark) -->
<path d="M16,32 L48,32 L32,60 Z" fill="#040404"/>
<!-- Hairline equator -->
<line x1="16" y1="32" x2="48" y2="32"
stroke="#040404" stroke-width="0.5" opacity="0.12"/>
<!-- Center pivot -->
<circle cx="32" cy="32" r="2.5" fill="#040404" opacity="0.18"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 70" fill="none">
<!-- adiuvAI — White variant (dark backgrounds) -->
<g transform="translate(2,2)">
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
<path d="M16,32 L48,32 L32,60 Z" fill="#FFFFFF" opacity="0.85"/>
<circle cx="32" cy="32" r="2.5" fill="#FFFFFF" opacity="0.25"/>
</g>
<text x="65" y="42"
font-family="Geist, system-ui, -apple-system, sans-serif"
font-size="30" letter-spacing="-0.5">
<tspan font-weight="400" fill="#FFFFFF" opacity="0.85">adiuv</tspan><tspan font-weight="700" fill="#FFFFFF">AI</tspan>
</text>
</svg>

After

Width:  |  Height:  |  Size: 637 B

View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 30" fill="none">
<text x="2" y="25"
font-family="Geist, system-ui, -apple-system, sans-serif"
font-size="30" letter-spacing="-0.5">
<tspan font-weight="400" fill="#040404">adiuv</tspan><tspan font-weight="700" fill="#fbc881">AI</tspan>
</text>
</svg>

After

Width:  |  Height:  |  Size: 332 B