paul.atlan/ia-qua-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(logo): logo IA qu'à exact (qu'à adaptatif) + palette Mint & Ocean

Browse Source
This commit is contained in:
Paul Atlan 2026-05-30 22:21:23 +02:00
parent fdf0756810
commit d526634a07
2 changed files with 48 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/logo.svg
View File

@ -1,17 +1 @@
<svg viewBox="0 0 500 220" role="img" aria-label="IA qu'à — L'IA pour les PME" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="logoAccentGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#34D399"/>
<stop offset="100%" stop-color="#2563EB"/>
</linearGradient>
</defs>
<g transform="translate(250, 110)">
<text x="-5" y="16" font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif" font-weight="700" font-size="68" text-anchor="end" letter-spacing="0.01em">
<tspan fill="url(#logoAccentGradient)">IA</tspan>
</text>
<text x="5" y="16" font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif" font-weight="300" font-size="66" text-anchor="start" fill="#334155" letter-spacing="-0.01em">
<tspan>qu</tspan><tspan fill="url(#logoAccentGradient)" dx="1">&#8217;</tspan><tspan dx="1">à</tspan>
</text>
<text x="127" y="56" font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif" font-weight="600" font-size="18" text-anchor="end" fill="url(#logoAccentGradient)" letter-spacing="3px" opacity="0.9">L'IA POUR LES PME</text>
</g>
</svg>
<svg viewBox="0 0 500 220" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="overflow-visible" role="img" aria-label="IA qu'à — L'IA pour les PME"><defs><linearGradient id="logoAccentGradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#34D399"/><stop offset="100%" stop-color="#2563EB"/></linearGradient><linearGradient id="yHighlightGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#34D399"/><stop offset="50%" stop-color="#2563EB"/><stop offset="51%" stop-color="#E2E8F0"/><stop offset="100%" stop-color="#E2E8F0"/></linearGradient></defs><g transform="translate(250, 110)"><text x="-5" y="16" font-family="&quot;Space Grotesk&quot;, &quot;Inter&quot;, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-weight="900" font-size="68" text-anchor="end" letter-spacing="0.01em" id="classic-text-ia"><tspan fill="url(#logoAccentGradient)">IA</tspan></text><text x="5" y="16" font-family="&quot;Space Grotesk&quot;, &quot;Inter&quot;, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-weight="300" font-size="66" text-anchor="start" fill="#E2E8F0" letter-spacing="-0.01em"><tspan>qu</tspan><tspan fill="url(#logoAccentGradient)" font-weight="300" dx="1">'</tspan><tspan dx="1">à</tspan></text><text x="127" y="56" font-family="&quot;Space Grotesk&quot;, &quot;Inter&quot;, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-weight="600" font-size="18" text-anchor="end" fill="url(#logoAccentGradient)" letter-spacing="3px" opacity="0.9">L'IA POUR LES PME</text></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

66
src/components/BrandLogo.astro
View File

@ -1,56 +1,70 @@
---
/**
* BrandLogo — lockup "IA qu'à" + baseline "L'IA POUR LES PME"
* (palette Mint & Ocean Blue, color package §1 ; preset "Pure Swiss Typography" de Paul).
* Space Grotesk : "IA" 700 + "qu'à" 300. "IA"/apostrophe/baseline en dégradé mint→ocean,
* "qu'à" en slate adaptatif clair/sombre. Double sens assumé : "IA qu'à" ↔ "Y'a qu'à".
* BrandLogo — logo "IA qu'à" de Paul, EXACT (export logo-designer, preset
* "Pure Swiss Typography", palette Mint & Ocean Blue). Géométrie / poids /
* baseline repris à l'identique. Seule adaptation : "qu'à", figé en #E2E8F0
* dans l'export (pour fond sombre), devient slate adaptatif clair/sombre.
* viewBox recadré sur le contenu pour un rendu net dans la navbar.
*/
interface Props {
class?: string;
}
const { class: className = "h-10 w-auto" } = Astro.props;
const gid = "iaGrad-" + Math.random().toString(36).slice(2, 8);
const ff =
"'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
---
<svg
viewBox="0 0 188 62"
viewBox="150 62 250 112"
role="img"
aria-label="IA qu'à — L'IA pour les PME"
class={className}
style="overflow:visible"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
<linearGradient id={gid} x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#34D399"></stop>
<stop offset="100%" stop-color="#2563EB"></stop>
</linearGradient>
</defs>
<!-- Wordmark -->
<g transform="translate(250, 110)">
<text
x="2"
y="38"
font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif"
font-size="38"
letter-spacing="-0.01em"
x="-5"
y="16"
font-family={ff}
font-weight="900"
font-size="68"
text-anchor="end"
letter-spacing="0.01em"
>
<tspan fill={`url(#${gid})`} font-weight="700">IA</tspan>
<tspan class="fill-slate-700 dark:fill-slate-100" font-weight="300" dx="6"
>qu</tspan
>
<tspan fill={`url(#${gid})`} font-weight="300">&#8217;</tspan>
<tspan class="fill-slate-700 dark:fill-slate-100" font-weight="300">à</tspan>
<tspan fill={`url(#${gid})`}>IA</tspan>
</text>
<!-- Baseline -->
<text
x="3"
y="55"
font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif"
font-size="9.2"
x="5"
y="16"
font-family={ff}
font-weight="300"
font-size="66"
text-anchor="start"
letter-spacing="-0.01em"
class="fill-slate-700 dark:fill-slate-100"
>
<tspan>qu</tspan><tspan fill={`url(#${gid})`} font-weight="300" dx="1"
>'</tspan
><tspan dx="1">à</tspan>
</text>
<text
x="127"
y="56"
font-family={ff}
font-weight="600"
letter-spacing="1.6"
font-size="18"
text-anchor="end"
fill={`url(#${gid})`}
letter-spacing="3px"
opacity="0.9">L'IA POUR LES PME</text
>
</g>
</svg>