// Shared logo components for Anthony Intelligence. // Five directions, all expose ({ size, color, accent, muted }) props. const AI_INK = '#0B0C0E'; const AI_PAPER = '#F6F5F2'; const AI_ACCENT = '#0E5BA8'; const AI_MUTED = 'rgba(11,12,14,0.55)'; // ───────── 1. Wordmark — clean lowercase grotesk with a centered dot function LogoWordmark({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); return ( anthony intelligence ); } // ───────── 2. Mark + wordmark — solid "A" triangle with a horizontal signal rule function LogoTriangle({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.15; return ( AnthonyIntelligence ); } // ───────── 3. Stacked editorial — tracked uppercase with rule function LogoStacked({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.6)'); return ( ANTHONY INTELLIGENCE ); } // ───────── 4. Serif legacy — italic display serif with sans subtag function LogoSerif({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.62)'); return ( Anthony INTELLIGENCE ); } // ───────── 5. Signet monogram — square frame, classical "A" with a beam function LogoSignet({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.6)'); const h = size * 1.25; return ( {/* Serif-style "A" */} Anthony INTELLIGENCE ); } // ───────── 6. Long-bar — small mark + extended cobalt rule + tracked wordmark function LogoBar({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.6)'); const h = size * 0.85; return ( AnthonyIntelligence ); } // ───────── 7. Arch — solid Romanesque arch (architectural / legacy) function LogoArch({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.15; return ( {/* Arch silhouette: half-circle top, vertical sides, baseline */} AnthonyIntelligence ); } // ───────── 8. Compass — precision crosshair circle (instrument vocabulary) function LogoCompass({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.2; return ( {/* tick marks N/E/S/W */} {/* small "A" apex inside the dial */} AnthonyIntelligence ); } // ───────── 9. AI Initials — geometric "AI" ligature mark function LogoInitials({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.6)'); const h = size * 1.35; return ( {/* A: two diagonals + crossbar, geometric */} {/* I: solid cobalt bar */} Anthony INTELLIGENCE ); } // ───────── 10. Notch — solid square with triangular notch cut from top (A neg-space) function LogoNotch({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.6)'); const h = size * 1.2; return ( {/* Square with triangular notch cut from top edge */} AnthonyIntelligence ); } // ═════════ Geometric A variations ═════════════════════════════════════ // Five close siblings of LogoTriangle — same lockup, mark varied. // ───────── 11. Outline A — hairline triangle function LogoOutline({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.15; return ( AnthonyIntelligence ); } // ───────── 12. Slit A — accent slit carved through the solid triangle function LogoSlit({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.15; return ( {/* slit carved through the lower-third — sits on top of the triangle */} AnthonyIntelligence ); } // ───────── 13. Capped A — small architectural cap above the apex function LogoCapped({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.25; return ( {/* cap above apex */} AnthonyIntelligence ); } // ───────── 14. Vertical A — stacked badge lockup: mark / rule / name function LogoVertical({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); return ( AnthonyIntelligence ); } // ───────── 15. Echo A — hairline accent triangle offset behind a solid front function LogoEcho({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.2; return ( {/* echo behind, hairline cobalt */} {/* solid front triangle */} AnthonyIntelligence ); } // Shared wordmark helper for mark-first variants function AfterMark({ size, color, m }) { return ( AnthonyIntelligence ); } // ───────── 16. Bisect A — solid triangle with a vertical cobalt centerline function LogoBisect({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.15; return ( ); } // ───────── 17. Stepped A — triangle built from stacked horizontal bars function LogoStepped({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.15; return ( ); } // ───────── 18. Bevel A — triangle with chamfered tips function LogoBevel({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.15; return ( ); } // ───────── 19. Apex A — chevron only (no baseline), with rule below function LogoApex({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.05; return ( ); } // ───────── 20. Mosaic A — Sierpinski quad: 3 ink subs + inverted accent center function LogoMosaic({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.15; return ( ); } // ═════════ Apex variations ═════════════════════════════════════════════ // Five close siblings of LogoApex — same chevron lockup, mark varied. // ───────── 21. Bold Apex — heavy-weight chevron function LogoBoldApex({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.05; return ( ); } // ───────── 22. Pediment Apex — chevron with short vertical legs (classical pediment) function LogoPediment({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.0; return ( {/* Wider flatter chevron with short vertical legs dropping at each end */} ); } // ───────── 23. Crossed Apex — chevron + horizontal crossbar (A's upper top) function LogoCrossed({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.05; return ( ); } // ───────── 24. Double Apex — small chevron stacked above a larger one function LogoDoubleApex({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.1; return ( {/* small chevron above */} {/* larger chevron below */} ); } // ───────── 25. Stepped Apex — chevron drawn as two right-angle "L" steps function LogoSteppedApex({ size = 32, color = AI_INK, accent = AI_ACCENT, muted }) { const m = muted || (color === AI_INK ? AI_MUTED : 'rgba(255,255,255,0.55)'); const h = size * 1.05; return ( {/* Two L-shaped strokes mirrored, meeting at top center */} ); } // Map for variant lookups const LOGOS = { wordmark: { Component: LogoWordmark, label: 'Wordmark', note: 'Clean lowercase grotesk' }, triangle: { Component: LogoTriangle, label: 'Geometric A', note: 'Solid mark + wordmark' }, stacked: { Component: LogoStacked, label: 'Stacked Editorial', note: 'Tracked uppercase with rule' }, serif: { Component: LogoSerif, label: 'Serif Legacy', note: 'Italic display + sans subtag' }, signet: { Component: LogoSignet, label: 'Signet Monogram', note: 'Bordered classical mark' }, bar: { Component: LogoBar, label: 'Long-bar', note: 'Mark + extended rule + tracked' }, arch: { Component: LogoArch, label: 'Arch', note: 'Romanesque arch silhouette' }, compass: { Component: LogoCompass, label: 'Compass', note: 'Precision crosshair dial' }, initials: { Component: LogoInitials, label: 'AI Initials', note: 'Geometric AI ligature' }, notch: { Component: LogoNotch, label: 'Notched Square', note: 'Square with A-notch cutout' }, outline: { Component: LogoOutline, label: 'Outline A', note: 'Hairline triangle' }, slit: { Component: LogoSlit, label: 'Slit A', note: 'Rule carved through mark' }, capped: { Component: LogoCapped, label: 'Capped A', note: 'Architectural finial' }, vertical: { Component: LogoVertical, label: 'Vertical A', note: 'Stacked badge lockup' }, echo: { Component: LogoEcho, label: 'Echo A', note: 'Hairline echo behind solid' }, bisect: { Component: LogoBisect, label: 'Bisect A', note: 'Vertical cobalt centerline' }, stepped: { Component: LogoStepped, label: 'Stepped A', note: 'Stacked bars widening' }, bevel: { Component: LogoBevel, label: 'Bevel A', note: 'Chamfered corners' }, apex: { Component: LogoApex, label: 'Apex A', note: 'Chevron only — minimal' }, mosaic: { Component: LogoMosaic, label: 'Mosaic A', note: 'Sierpinski quad-triangle' }, boldApex: { Component: LogoBoldApex, label: 'Bold Apex', note: 'Heavy-weight chevron' }, pediment: { Component: LogoPediment, label: 'Pediment Apex', note: 'Wide chevron with legs' }, crossed: { Component: LogoCrossed, label: 'Crossed Apex', note: 'Chevron + crossbar' }, doubleApex: { Component: LogoDoubleApex, label: 'Double Apex', note: 'Two stacked chevrons' }, steppedApex: { Component: LogoSteppedApex, label: 'Stepped Apex', note: 'Right-angle steps' }, }; Object.assign(window, { LogoWordmark, LogoTriangle, LogoStacked, LogoSerif, LogoSignet, LogoBar, LogoArch, LogoCompass, LogoInitials, LogoNotch, LogoOutline, LogoSlit, LogoCapped, LogoVertical, LogoEcho, LogoBisect, LogoStepped, LogoBevel, LogoApex, LogoMosaic, LogoBoldApex, LogoPediment, LogoCrossed, LogoDoubleApex, LogoSteppedApex, LOGOS, AI_INK, AI_PAPER, AI_ACCENT, AI_MUTED });