erikghandClaude Opus 5
a9758a92f9
El wordmark deja de depender del glifo tipográfico ≡ y pasa a un trazado SVG propio (SimboloTresLineas), que es lo que permite cumplir la instrucción de la dueña: que se lea como E, no como tres líneas sueltas. Incluye las tres versiones del logotipo (principal, negativa, secundaria) y alinea los tokens de color con el Manual de Identidad Visual v1.0. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
60 lines
4.6 KiB
TypeScript
60 lines
4.6 KiB
TypeScript
import { brandPillars } from '@/lib/content';
|
|
|
|
type Size = 'sm' | 'md' | 'lg' | 'xl';
|
|
// Widths of the mark itself. sm/md match the optical size of the type-set
|
|
// wordmark they replaced; lg/xl are sized so the tagline stays legible at the
|
|
// manual's lockup proportions.
|
|
const sizeClass: Record<Size, string> = {
|
|
sm: 'w-[72px]',
|
|
md: 'w-[87px]',
|
|
lg: 'w-[200px] md:w-[260px]',
|
|
xl: 'w-[260px] md:w-[350px]',
|
|
};
|
|
|
|
// Logotype traced from the Manual de Identidad Visual v1.0 (Aptos Regular outlines,
|
|
// so the file carries no font dependency). Geometry measured off the manual:
|
|
// bar thickness = x-height/7, gap = 2x thickness, bar length = 0.845 x-height,
|
|
// and the ≡ occupies exactly one 'e' advance, spanning x-height to baseline.
|
|
const LETTERS =
|
|
'M68.5 153L68.5 153Q48.4 153 32.9 144.6Q17.5 136.1 8.7 119.2Q0 102.3 0 76.8L0 76.8Q0 51.3 8.6 34.2Q17.2 17.2 32.6 8.6Q48 0 68.5 0L68.5 0Q85.6 0 99.3 5.6Q113.1 11.2 121.3 22.5Q129.5 33.8 129.9 51.1L129.9 51.1L104.9 51.1Q104 36.9 94.6 28.7Q85.1 20.5 68.9 20.5L68.9 20.5Q47.4 20.5 36.7 35.3Q26.1 50.1 26.1 76.8L26.1 76.8Q26.1 94.6 30.8 106.9Q35.5 119.3 45.1 125.9Q54.6 132.5 68.9 132.5L68.9 132.5Q85.1 132.5 95.3 124.1Q105.5 115.7 105.9 99.4L105.9 99.4L131 99.4Q130.5 117.3 122.3 129.2Q114 141.2 99.9 147.1Q85.9 153 68.5 153M228.7 150.4L203.4 150.4L203.4 2.6L227.2 2.6L228.1 27.8Q234.3 16.2 245.4 8.5Q256.5 0.8 274.2 0.8L274.2 0.8L277.3 0.8L277.3 24L273.8 24Q262.7 24 254.4 26.9Q246 29.7 239.8 34.8Q233.6 39.9 228.7 46.6L228.7 46.6L228.7 150.4M400.7 153.1L400.7 153.1Q376.5 153.1 361.1 143.1Q345.7 133 338.3 115.6Q330.9 98.2 330.9 76.5L330.9 76.5Q330.9 53.9 338.1 36.7Q345.3 19.4 360.1 9.7Q374.9 0 397.6 0L397.6 0Q427.8 0 445 18.2Q462.1 36.4 462.1 70.6L462.1 70.6Q462.1 72.9 462 76Q461.8 79.1 461.5 80.4L461.5 80.4L356.2 80.4Q356.3 94.9 360.8 106.9Q365.3 119 375 126.3Q384.7 133.6 400.7 133.6L400.7 133.6Q417.7 133.6 427.2 125.6Q436.8 117.6 437.2 102.6L437.2 102.6L462.3 102.6Q461.8 118.2 454.2 129.5Q446.7 140.8 433 147Q419.3 153.1 400.7 153.1M356.3 61.9L356.3 61.9L437.1 61.9Q436.6 41.3 426.3 30.4Q416 19.4 397.6 19.4L397.6 19.4Q379.1 19.4 368.6 30.3Q358 41.1 356.3 61.9M791.9 153.1L791.9 153.1Q767.8 153.1 752.4 143.1Q737 133 729.5 115.6Q722.1 98.2 722.1 76.5L722.1 76.5Q722.1 53.9 729.3 36.7Q736.5 19.4 751.3 9.7Q766.1 0 788.9 0L788.9 0Q819.1 0 836.2 18.2Q853.4 36.4 853.4 70.6L853.4 70.6Q853.4 72.9 853.2 76Q853.1 79.1 852.8 80.4L852.8 80.4L747.5 80.4Q747.6 94.9 752.1 106.9Q756.6 119 766.3 126.3Q776 133.6 791.9 133.6L791.9 133.6Q808.9 133.6 818.5 125.6Q828 117.6 828.5 102.6L828.5 102.6L853.5 102.6Q853.1 118.2 845.5 129.5Q837.9 140.8 824.3 147Q810.6 153.1 791.9 153.1M747.6 61.9L747.6 61.9L828.4 61.9Q827.9 41.3 817.6 30.4Q807.3 19.4 788.9 19.4L788.9 19.4Q770.4 19.4 759.8 30.3Q749.3 41.1 747.6 61.9M951.4 150.4L926.1 150.4L926.1 2.6L949.9 2.6L950.8 27.8Q957 16.2 968.1 8.5Q979.2 0.8 997 0.8L997 0.8L1000 0.8L1000 24L996.5 24Q985.4 24 977.1 26.9Q968.7 29.7 962.5 34.8Q956.3 39.9 951.4 46.6L951.4 46.6L951.4 150.4';
|
|
const BARS = [2.6, 65.9, 129.3];
|
|
|
|
// Lockup geometry, in the same 1000-unit space as the letters (see manual):
|
|
// the tagline sits 0.7557 x-heights below the baseline, its cap height is
|
|
// 0.2047 x-heights, and it is justified to the exact width of the mark.
|
|
const MARK_HEIGHT = 153.14;
|
|
const TAG_BASELINE = 262.13;
|
|
const TAG_SIZE = 42.38; // cap height 30.26 / Open Sans capHeight-per-em 0.714
|
|
|
|
export function Wordmark({ size = 'lg', onDark = false, showTagline = false }: { size?: Size; onDark?: boolean; showTagline?: boolean }) {
|
|
const baseColor = onDark ? 'text-white' : 'text-azul-profundo';
|
|
const pillars = [brandPillars.pillar1, brandPillars.pillar2, brandPillars.pillar3].map((p) => p.toUpperCase());
|
|
const label = showTagline ? `creeer — ${pillars.join(' · ')}` : 'creeer';
|
|
return (
|
|
<svg
|
|
viewBox={`0 0 1000 ${showTagline ? TAG_BASELINE : MARK_HEIGHT}`}
|
|
className={`font-sans h-auto ${baseColor} ${sizeClass[size]}`}
|
|
role="img"
|
|
aria-label={label}
|
|
>
|
|
<path fill="currentColor" d={LETTERS} />
|
|
<g data-accent="true" className="fill-dorado">
|
|
{BARS.map((y) => (
|
|
<rect key={y} x="529.8" y={y} width="124.9" height="21.1" rx="10.6" />
|
|
))}
|
|
</g>
|
|
{showTagline && (
|
|
// textLength pins the tagline to the width of the mark, so the lockup
|
|
// holds its proportions whatever the rendered font does.
|
|
<text x="0" y={TAG_BASELINE} textLength="1000" lengthAdjust="spacing" fontSize={TAG_SIZE} fill="currentColor">
|
|
{pillars[0]}
|
|
<tspan className="fill-dorado"> · </tspan>
|
|
{pillars[1]}
|
|
<tspan className="fill-dorado"> · </tspan>
|
|
{pillars[2]}
|
|
</text>
|
|
)}
|
|
</svg>
|
|
);
|
|
}
|