> ## Documentation Index
> Fetch the complete documentation index at: https://aipkg.org/llms.txt
> Use this file to discover all available pages before exploring further.

# AI•Pkg Brand Guidelines

> Official brand identity guidelines for AI•Pkg — colors, logo usage, typography, and visual standards.

export const TypographySpecimen = () => {
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => {
    const linkId = 'aipkg-poppins-font';
    if (!document.getElementById(linkId)) {
      const link = document.createElement('link');
      link.id = linkId;
      link.rel = 'stylesheet';
      link.href = 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap';
      document.head.appendChild(link);
      link.onload = () => setLoaded(true);
    } else {
      setLoaded(true);
    }
  }, []);
  const scale = [{
    level: 'Display',
    size: '36px',
    lineHeight: '1.2',
    weight: '700',
    weightName: 'Bold',
    sample: 'Ship your AI packages.',
    usage: 'Hero sections, landing pages'
  }, {
    level: 'H1',
    size: '28px',
    lineHeight: '1.3',
    weight: '700',
    weightName: 'Bold',
    sample: 'AI•Pkg Brand Guidelines',
    usage: 'Page titles'
  }, {
    level: 'H2',
    size: '22px',
    lineHeight: '1.35',
    weight: '600',
    weightName: 'SemiBold',
    sample: 'Color Palette',
    usage: 'Section headers'
  }, {
    level: 'H3',
    size: '18px',
    lineHeight: '1.4',
    weight: '600',
    weightName: 'SemiBold',
    sample: 'Core Purple Palette',
    usage: 'Subsection headers'
  }, {
    level: 'Body',
    size: '16px',
    lineHeight: '1.6',
    weight: '400',
    weightName: 'Regular',
    sample: 'AI•Pkg manages your AI platform plugins across Claude Code, Cursor, Windsurf, and more with a single package format.',
    usage: 'Paragraphs, descriptions'
  }, {
    level: 'Small',
    size: '14px',
    lineHeight: '1.5',
    weight: '500',
    weightName: 'Medium',
    sample: 'Published March 2026 · Palette variant: Chromatic',
    usage: 'Captions, labels, metadata'
  }];
  const mono = {
    level: 'Code',
    size: '14px',
    lineHeight: '1.6',
    weight: '400',
    weightName: 'Regular',
    sample: 'aipkg install @example/my-plugin@1.2.0',
    usage: 'Code snippets, CLI, API refs'
  };
  return <div className="not-prose" style={{
    fontFamily: 'system-ui, sans-serif'
  }}>
      <style>{`
        .ts-row {
          border-bottom: 1px solid rgba(120,64,174,0.08);
          padding: 16px 0;
          transition: background 0.15s;
        }
        .ts-row:last-child { border-bottom: none; }
        .ts-row:hover { background: rgba(120,64,174,0.03); }
        .ts-tag {
          display: inline-block; padding: 2px 7px; border-radius: 4px;
          font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
          text-transform: uppercase; background: rgba(120,64,174,0.1);
          color: #7840AE; font-family: monospace; white-space: nowrap;
        }
      `}</style>

      {!loaded && <div style={{
    textAlign: 'center',
    padding: 32,
    color: '#888',
    fontSize: 13
  }}>Loading Poppins font…</div>}

      <div style={{
    opacity: loaded ? 1 : 0,
    transition: 'opacity 0.4s',
    background: 'rgba(120,64,174,0.04)',
    border: '1px solid rgba(120,64,174,0.12)',
    borderRadius: 12,
    padding: '4px 20px 12px'
  }}>

        <div style={{
    display: 'flex',
    gap: 6,
    padding: '12px 0 8px',
    borderBottom: '1px solid rgba(120,64,174,0.12)',
    marginBottom: 4
  }}>
          <span style={{
    fontSize: 11,
    fontWeight: 700,
    textTransform: 'uppercase',
    letterSpacing: '0.08em',
    color: '#888',
    width: 64,
    flexShrink: 0
  }}>Level</span>
          <span style={{
    fontSize: 11,
    fontWeight: 700,
    textTransform: 'uppercase',
    letterSpacing: '0.08em',
    color: '#888',
    flex: 1
  }}>Specimen</span>
          <span style={{
    fontSize: 11,
    fontWeight: 700,
    textTransform: 'uppercase',
    letterSpacing: '0.08em',
    color: '#888',
    width: 160,
    flexShrink: 0,
    textAlign: 'right'
  }}>Spec</span>
        </div>

        {scale.map(s => <div key={s.level} className="ts-row" style={{
    display: 'flex',
    gap: 6,
    alignItems: 'baseline'
  }}>
            <div style={{
    width: 64,
    flexShrink: 0,
    paddingTop: 4
  }}>
              <span className="ts-tag">{s.level}</span>
            </div>
            <div style={{
    flex: 1
  }}>
              <div style={{
    fontFamily: "'Poppins', system-ui, sans-serif",
    fontSize: s.size,
    lineHeight: s.lineHeight,
    fontWeight: s.weight,
    color: '#1a1a2e'
  }}>
                {s.sample}
              </div>
              <div style={{
    fontSize: 11,
    color: '#aaa',
    marginTop: 3
  }}>{s.usage}</div>
            </div>
            <div style={{
    width: 160,
    flexShrink: 0,
    textAlign: 'right'
  }}>
              <div style={{
    fontSize: 11,
    color: '#7840AE',
    fontFamily: 'monospace'
  }}>{s.size} / {s.lineHeight}</div>
              <div style={{
    fontSize: 11,
    color: '#999',
    fontFamily: 'monospace'
  }}>{s.weightName} ({s.weight})</div>
            </div>
          </div>)}

        {}
        <div className="ts-row" style={{
    display: 'flex',
    gap: 6,
    alignItems: 'baseline'
  }}>
          <div style={{
    width: 64,
    flexShrink: 0,
    paddingTop: 4
  }}>
            <span className="ts-tag" style={{
    background: 'rgba(14,128,119,0.1)',
    color: '#0E8077'
  }}>{mono.level}</span>
          </div>
          <div style={{
    flex: 1
  }}>
            <div style={{
    fontFamily: "'JetBrains Mono', 'Cascadia Code', monospace",
    fontSize: mono.size,
    lineHeight: mono.lineHeight,
    fontWeight: mono.weight,
    color: '#1a1a2e',
    background: 'rgba(14,128,119,0.06)',
    padding: '6px 10px',
    borderRadius: 6,
    border: '1px solid rgba(14,128,119,0.12)'
  }}>
              {mono.sample}
            </div>
            <div style={{
    fontSize: 11,
    color: '#aaa',
    marginTop: 3
  }}>{mono.usage}</div>
          </div>
          <div style={{
    width: 160,
    flexShrink: 0,
    textAlign: 'right'
  }}>
            <div style={{
    fontSize: 11,
    color: '#0E8077',
    fontFamily: 'monospace'
  }}>{mono.size} / {mono.lineHeight}</div>
            <div style={{
    fontSize: 11,
    color: '#999',
    fontFamily: 'monospace'
  }}>JetBrains Mono</div>
          </div>
        </div>
      </div>

      {}
      <div style={{
    marginTop: 16,
    padding: '14px 20px',
    background: 'rgba(120,64,174,0.04)',
    border: '1px solid rgba(120,64,174,0.1)',
    borderRadius: 12
  }}>
        <div style={{
    fontSize: 11,
    color: '#888',
    marginBottom: 8,
    fontWeight: 600,
    textTransform: 'uppercase',
    letterSpacing: '0.06em'
  }}>
          Poppins — Characteristic Letterforms
        </div>
        <div style={{
    fontFamily: "'Poppins', system-ui, sans-serif",
    fontSize: 42,
    fontWeight: 600,
    color: '#7840AE',
    letterSpacing: '-0.01em',
    lineHeight: 1.1,
    opacity: loaded ? 1 : 0,
    transition: 'opacity 0.4s'
  }}>
          Ag  Pk  Ii
        </div>
        <div style={{
    fontSize: 11,
    color: '#aaa',
    marginTop: 6,
    lineHeight: 1.6
  }}>
          Pointed A apex · Open single-story g · Rounded P bowl · Angular k arms · High x-height
        </div>
      </div>
    </div>;
};

export const ColorWheelHarmony = () => {
  const [activeId, setActiveId] = React.useState(null);
  const cx = 150, cy = 150;
  const dotRadius = 108;
  const innerRadius = 48;
  const wheelRadius = 130;
  const hueToXY = (hue, r) => {
    const angleRad = (hue - 90) * Math.PI / 180;
    return {
      x: cx + r * Math.cos(angleRad),
      y: cy + r * Math.sin(angleRad)
    };
  };
  const brandColors = [{
    id: 'purple',
    name: 'Core Purple',
    hue: 270,
    hex: '#7840AE',
    label: '270°',
    note: 'Box & structure'
  }, {
    id: 'teal',
    name: 'Teal (Servers)',
    hue: 175,
    hex: '#0E8077',
    label: '175°',
    note: 'Infrastructure'
  }, {
    id: 'amber',
    name: 'Amber (Database)',
    hue: 40,
    hex: '#B98112',
    label: '40°',
    note: 'Storage & data'
  }, {
    id: 'blue',
    name: 'Blue (Prompt)',
    hue: 215,
    hex: '#3061A6',
    label: '215°',
    note: 'Interaction'
  }, {
    id: 'red',
    name: 'Red (Code)',
    hue: 355,
    hex: '#B32C38',
    label: '355°',
    note: 'Creation'
  }];
  const separations = [{
    from: 'teal',
    to: 'amber',
    deg: 135,
    label: '135°'
  }, {
    from: 'teal',
    to: 'blue',
    deg: 40,
    label: '40°'
  }, {
    from: 'teal',
    to: 'red',
    deg: 180,
    label: '180°'
  }, {
    from: 'amber',
    to: 'blue',
    deg: 175,
    label: '175°'
  }, {
    from: 'amber',
    to: 'red',
    deg: 45,
    label: '45°'
  }, {
    from: 'blue',
    to: 'red',
    deg: 140,
    label: '140°'
  }];
  const colorMap = Object.fromEntries(brandColors.map(c => [c.id, c]));
  const getLineStatus = sep => {
    if (!activeId) return 'idle';
    if (sep.from === activeId || sep.to === activeId) return 'active';
    return 'dim';
  };
  const getDotStatus = c => {
    if (!activeId) return 'idle';
    if (c.id === activeId) return 'active';
    const linked = separations.some(s => (s.from === activeId || s.to === activeId) && (s.from === c.id || s.to === c.id));
    if (linked) return 'linked';
    return 'dim';
  };
  const stops = Array.from({
    length: 37
  }, (_, i) => {
    const hue = i * 10;
    return `hsl(${hue}, 75%, 58%) ${hue}deg`;
  }).join(', ');
  return <div className="not-prose" style={{
    fontFamily: 'system-ui, sans-serif'
  }}>
      <style>{`
        .cw-dot { cursor: pointer; transition: transform 0.15s; transform-origin: center; }
        .cw-dot:hover { transform: scale(1.25); }
        .cw-sep-line { transition: opacity 0.15s, stroke-width 0.15s; }
        .cw-legend-row {
          display: flex; align-items: center; gap: 10px;
          padding: 7px 10px; border-radius: 7px; cursor: pointer;
          transition: background 0.15s; font-size: 13px;
        }
        .cw-legend-row:hover { background: rgba(120,64,174,0.07); }
      `}</style>

      <div style={{
    display: 'flex',
    gap: 24,
    flexWrap: 'wrap',
    alignItems: 'flex-start'
  }}>

        {}
        <div style={{
    flexShrink: 0
  }}>
          <svg width="300" height="300" viewBox="0 0 300 300">
            {}
            <foreignObject x="20" y="20" width="260" height="260">
              <div style={{
    width: 260,
    height: 260,
    borderRadius: '50%',
    background: `conic-gradient(from -90deg, ${stops})`
  }} />
            </foreignObject>

            {}
            <circle cx={cx} cy={cy} r={innerRadius} fill="white" />

            {}
            <text x={cx} y={cy - 4} textAnchor="middle" fontSize="10" fill="#471B78" fontWeight="700">HSL</text>
            <text x={cx} y={cy + 10} textAnchor="middle" fontSize="9" fill="#888">Wheel</text>

            {}
            {separations.map((sep, i) => {
    const fromColor = colorMap[sep.from];
    const toColor = colorMap[sep.to];
    const fromPt = hueToXY(fromColor.hue, dotRadius);
    const toPt = hueToXY(toColor.hue, dotRadius);
    const status = getLineStatus(sep);
    return <line key={i} className="cw-sep-line" x1={fromPt.x} y1={fromPt.y} x2={toPt.x} y2={toPt.y} stroke={status === 'active' ? '#471B78' : 'rgba(71,27,120,0.2)'} strokeWidth={status === 'active' ? 1.5 : 0.75} strokeDasharray={status === 'active' ? '4 3' : '3 4'} opacity={status === 'dim' ? 0.2 : 1} />;
  })}

            {}
            {brandColors.map(c => {
    const pt = hueToXY(c.hue, dotRadius);
    const status = getDotStatus(c);
    const r = c.id === 'purple' ? 13 : 10;
    return <g key={c.id} className="cw-dot" onMouseEnter={() => setActiveId(c.id)} onMouseLeave={() => setActiveId(null)} style={{
      opacity: status === 'dim' ? 0.35 : 1
    }}>
                  {}
                  <circle cx={pt.x} cy={pt.y} r={r + 2} fill="white" opacity={0.9} />
                  {}
                  <circle cx={pt.x} cy={pt.y} r={r} fill={c.hex} />
                  {}
                  {status === 'active' && <circle cx={pt.x} cy={pt.y} r={r + 4} fill="none" stroke={c.hex} strokeWidth={1.5} opacity={0.6} />}
                  {}
                  <text x={hueToXY(c.hue, dotRadius + 20).x} y={hueToXY(c.hue, dotRadius + 20).y + 3} textAnchor="middle" fontSize="8" fill={status === 'active' ? c.hex : '#666'} fontWeight={status === 'active' ? '700' : '400'} fontFamily="monospace">{c.label}</text>
                </g>;
  })}
          </svg>
        </div>

        {}
        <div style={{
    flex: 1,
    minWidth: 200
  }}>
          <div style={{
    fontSize: 11,
    fontWeight: 600,
    textTransform: 'uppercase',
    letterSpacing: '0.08em',
    color: '#888',
    marginBottom: 8
  }}>Brand Hue Positions</div>
          {brandColors.map(c => <div key={c.id} className="cw-legend-row" style={{
    background: activeId === c.id ? `${c.hex}12` : 'transparent'
  }} onMouseEnter={() => setActiveId(c.id)} onMouseLeave={() => setActiveId(null)}>
              <div style={{
    width: 14,
    height: 14,
    borderRadius: '50%',
    background: c.hex,
    flexShrink: 0,
    border: '2px solid rgba(255,255,255,0.4)',
    boxShadow: `0 0 0 1px ${c.hex}40`
  }} />
              <div style={{
    flex: 1
  }}>
                <span style={{
    fontWeight: 600,
    color: activeId === c.id ? c.hex : '#333'
  }}>{c.name}</span>
                <span style={{
    color: '#888',
    marginLeft: 6,
    fontSize: 11
  }}>{c.note}</span>
              </div>
              <code style={{
    fontSize: 11,
    color: '#888',
    background: 'rgba(0,0,0,0.05)',
    padding: '1px 5px',
    borderRadius: 3
  }}>{c.label}</code>
            </div>)}

          <div style={{
    marginTop: 16,
    borderTop: '1px solid rgba(120,64,174,0.1)',
    paddingTop: 12
  }}>
            <div style={{
    fontSize: 11,
    fontWeight: 600,
    textTransform: 'uppercase',
    letterSpacing: '0.08em',
    color: '#888',
    marginBottom: 8
  }}>Icon-to-Icon Separations</div>
            <div style={{
    display: 'flex',
    flexWrap: 'wrap',
    gap: 6
  }}>
              {separations.map((s, i) => <span key={i} style={{
    fontSize: 11,
    padding: '3px 8px',
    borderRadius: 12,
    background: 'rgba(120,64,174,0.07)',
    color: '#7840AE',
    border: '1px solid rgba(120,64,174,0.15)',
    fontFamily: 'monospace'
  }}>
                  {s.label}
                </span>)}
            </div>
            <p style={{
    margin: '8px 0 0',
    fontSize: 11,
    color: '#999',
    lineHeight: 1.5
  }}>
              Minimum 40° separation between every pair. All ≥ 30° from core purple (270°).
            </p>
          </div>
        </div>
      </div>
    </div>;
};

export const BrandGradientShowcase = () => {
  const [copied, setCopied] = React.useState(null);
  const copy = (text, key) => {
    navigator.clipboard.writeText(text).then(() => {
      setCopied(key);
      setTimeout(() => setCopied(null), 1800);
    });
  };
  const gradients = [{
    id: 'front',
    name: 'Box Front Face',
    surface: 'Main isometric front face',
    start: {
      hex: '#C279F0',
      name: 'Purple Light',
      label: 'Top'
    },
    end: {
      hex: '#7840AE',
      name: 'Purple Primary',
      label: 'Bottom'
    },
    direction: 'to bottom',
    css: 'linear-gradient(to bottom, #C279F0, #7840AE)'
  }, {
    id: 'lid',
    name: 'Box Lids (Left & Right)',
    surface: 'Both isometric lid panels',
    start: {
      hex: '#C279F0',
      name: 'Purple Light',
      label: 'Top'
    },
    end: {
      hex: '#9A66E2',
      name: 'Purple Soft',
      label: 'Bottom'
    },
    direction: 'to bottom',
    css: 'linear-gradient(to bottom, #C279F0, #9A66E2)'
  }, {
    id: 'ribbon',
    name: 'Right Ribbon Fade',
    surface: 'Right ribbon wrap — fades to transparent',
    start: {
      hex: '#F1E8F1',
      name: 'Lavender Pale 100%',
      label: 'Top'
    },
    end: {
      hex: '#F1E8F1',
      name: 'Lavender Pale 25%',
      label: 'Bottom'
    },
    direction: 'to bottom',
    css: 'linear-gradient(to bottom, #F1E8F1, rgba(241,232,241,0.25))',
    checkered: true
  }];
  return <div className="not-prose" style={{
    fontFamily: 'system-ui, sans-serif'
  }}>
      <style>{`
        @keyframes fadeCheck { 0%,100%{opacity:0} 20%,80%{opacity:1} }
        .grad-card {
          background: rgba(120,64,174,0.05);
          border: 1px solid rgba(120,64,174,0.12);
          border-radius: 12px; overflow: hidden;
          transition: border-color 0.2s;
        }
        .grad-card:hover { border-color: rgba(120,64,174,0.3); }
        .grad-copy-btn {
          background: none; border: 1px solid rgba(120,64,174,0.2);
          border-radius: 5px; padding: 3px 9px; font-size: 11px;
          cursor: pointer; color: #7840AE; transition: all 0.15s;
          font-family: 'JetBrains Mono', monospace;
        }
        .grad-copy-btn:hover { background: rgba(120,64,174,0.1); border-color: #7840AE; }
      `}</style>

      <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
    gap: 16
  }}>
        {gradients.map(g => <div key={g.id} className="grad-card">
            {}
            <div style={{
    position: 'relative',
    height: 120
  }}>
              {g.checkered && <div style={{
    position: 'absolute',
    inset: 0,
    backgroundImage: 'repeating-conic-gradient(#ddd 0% 25%, white 0% 50%)',
    backgroundSize: '16px 16px'
  }} />}
              <div style={{
    position: 'absolute',
    inset: 0,
    background: g.css
  }} />
              {}
              <div style={{
    position: 'absolute',
    top: 10,
    left: 0,
    right: 0,
    display: 'flex',
    justifyContent: 'center'
  }}>
                <span style={{
    background: 'rgba(0,0,0,0.45)',
    color: '#fff',
    fontSize: 10,
    padding: '2px 8px',
    borderRadius: 20,
    fontFamily: 'monospace',
    backdropFilter: 'blur(4px)'
  }}>{g.start.hex}</span>
              </div>
              <div style={{
    position: 'absolute',
    bottom: 10,
    left: 0,
    right: 0,
    display: 'flex',
    justifyContent: 'center'
  }}>
                <span style={{
    background: 'rgba(0,0,0,0.45)',
    color: '#fff',
    fontSize: 10,
    padding: '2px 8px',
    borderRadius: 20,
    fontFamily: 'monospace',
    backdropFilter: 'blur(4px)'
  }}>{g.end.hex}</span>
              </div>
            </div>

            {}
            <div style={{
    padding: '12px 14px'
  }}>
              <div style={{
    fontWeight: 700,
    fontSize: 13,
    color: '#471B78',
    marginBottom: 3
  }}>{g.name}</div>
              <div style={{
    fontSize: 11,
    color: '#888',
    marginBottom: 10
  }}>{g.surface}</div>

              <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: 5,
    marginBottom: 10
  }}>
                {[g.start, g.end].map((stop, i) => <div key={i} style={{
    display: 'flex',
    alignItems: 'center',
    gap: 7
  }}>
                    <div style={{
    width: 10,
    height: 10,
    borderRadius: 2,
    background: stop.hex,
    flexShrink: 0,
    border: '1px solid rgba(0,0,0,0.1)'
  }} />
                    <span style={{
    fontSize: 11,
    color: '#666',
    flex: 1
  }}>{stop.name}</span>
                    <span style={{
    fontSize: 10,
    color: '#999',
    fontFamily: 'monospace'
  }}>{stop.label}</span>
                  </div>)}
              </div>

              <button className="grad-copy-btn" onClick={() => copy(g.css, g.id)} style={{
    width: '100%'
  }}>
                {copied === g.id ? '✓ Copied!' : 'Copy CSS'}
              </button>
            </div>
          </div>)}
      </div>
    </div>;
};

export const LogoAnatomy = () => {
  const [hovered, setHovered] = React.useState(null);
  const elements = [{
    id: 'box',
    label: 'Box Body',
    color: '#7840AE',
    gradient: 'linear-gradient(to bottom, #C279F0, #7840AE)',
    hex: '#C279F0 → #7840AE',
    role: 'Core structural form — the isometric package in the primary purple gradient.',
    zone: {
      left: '26.8%',
      top: '24%',
      width: '46%',
      height: '36%'
    }
  }, {
    id: 'ribbon-left',
    label: 'Left Ribbon',
    color: '#8A57C6',
    gradient: '#8A57C6',
    hex: '#8A57C6',
    role: 'Ribbon wrap sweeping across the left face. Purple Medium — slightly lighter than the box to add depth.',
    zone: {
      left: '22%',
      top: '11%',
      width: '46%',
      height: '16%'
    }
  }, {
    id: 'ribbon-right',
    label: 'Right Ribbon Tab',
    color: '#F1E8F1',
    gradient: 'linear-gradient(to bottom, #F1E8F1, rgba(241,232,241,0.25))',
    hex: '#F1E8F1 → 25%',
    role: 'Vertical right ribbon with a fade-out gradient. Lavender Pale creates contrast without competing with the box.',
    zone: {
      left: '59.2%',
      top: '48%',
      width: '6.4%',
      height: '20%'
    }
  }, {
    id: 'servers',
    label: 'Servers Icon',
    color: '#0E8077',
    gradient: '#0E8077',
    hex: '#0E8077',
    role: 'Infrastructure & hosting capability. Deep teal at 175° — near-complementary to purple, creating strong visual tension.',
    zone: {
      left: '59.2%',
      top: '13.2%',
      width: '13.2%',
      height: '12.4%'
    }
  }, {
    id: 'database',
    label: 'Database Icon',
    color: '#B98112',
    gradient: '#B98112',
    hex: '#B98112',
    role: 'Storage & data capability. Warm amber at 40° — the strongest warm-cool contrast in the icon set.',
    zone: {
      left: '27.6%',
      top: '12.8%',
      width: '13.6%',
      height: '13.6%'
    }
  }, {
    id: 'prompt',
    label: 'Prompt Icon',
    color: '#3061A6',
    gradient: '#3061A6',
    hex: '#3061A6',
    role: 'Interaction & input capability. Royal blue at 215° — bridges the cool-tone range between teal and purple.',
    zone: {
      left: '43.2%',
      top: '3.6%',
      width: '13.6%',
      height: '13.6%'
    }
  }, {
    id: 'code',
    label: 'Code Icon',
    color: '#B32C38',
    gradient: '#B32C38',
    hex: '#B32C38',
    role: 'Creation & syntax capability. Warm crimson at 355° — forms the warm pole of the palette with amber.',
    zone: {
      left: '43.2%',
      top: '21.2%',
      width: '13.6%',
      height: '13.6%'
    }
  }, {
    id: 'wordmark',
    label: 'Wordmark',
    color: '#471B78',
    gradient: '#471B78',
    hex: '#471B78',
    role: 'AI•Pkg letterforms set in Poppins SemiBold. Purple Deep — the darkest value, providing visual "ink" weight.',
    zone: {
      left: '14%',
      top: '76%',
      width: '72%',
      height: '22%'
    }
  }];
  const hoveredEl = elements.find(e => e.id === hovered);
  const svgMarkup = `<svg width="100%" height="100%" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="250" fill="white"/>
<path d="M53.89 193.01H64.76L82.78 231.71H70.57L67.29 224.26H50.24L47.72 231.71H35.87L53.89 193.01ZM63.89 215.72L59.22 203.32L53.64 215.72H63.89Z" fill="#471B78"/>
<path d="M85.81 192.63H96.28V231.71H85.81V192.63Z" fill="#471B78"/>
<path d="M104.27 192.31H122.41C133.28 192.31 139.12 198.79 138.86 206.24C138.61 214.65 132.77 220.94 122.41 220.94H115.12V231.71H104.27V192.31ZM121.16 212.19C126.74 212.19 128.05 208.91 128.05 206.24C128.05 202.96 125.46 200.62 121.16 200.62H114.61V212.19H121.16Z" fill="#471B78"/>
<path d="M143.79 190.36H154.39V211.73L165.13 201.12H177.15L165.46 213.63L178.92 231.71H165.96L157.91 220.01L154.39 223.88V231.71H143.79V190.36Z" fill="#471B78"/>
<path d="M181.04 239.9L185.11 232.63C188.4 235.04 191.92 236.16 195.61 236.16C201.19 236.16 202.63 232.82 202.63 227.92V226.36C200.76 229.16 197.73 230.41 193.79 230.41C184.86 230.41 179.28 223.31 179.28 215.15C179.28 206.99 185.37 201.06 193.28 201.06C197.73 201.06 200.76 202.44 202.63 205.11V201.51H212V226.75C212 237.66 206.42 243.88 195.1 243.88C189.26 243.88 184.59 242.32 181.04 239.9ZM195.61 222.38C200.21 222.38 201.91 218.64 201.91 215.43C201.91 211.76 199.01 208.97 195.35 208.97C190.75 208.97 188.95 212.25 188.95 215.43C188.95 219.1 191.61 222.38 195.61 222.38Z" fill="#471B78"/>
<path d="M145.5 136.5L169.5 126L166.5 121.5L145.5 131V136.5Z" fill="#7840AE" fill-opacity="0.68"/>
<path d="M67.72 82.5V142.68C67.72 146.28 68.71 148.11 72.04 149.73L124.69 173L177.92 148.61C181.08 147.06 182.01 145.07 182.01 141.35V82.5L125.29 60.5L67.72 82.5Z" fill="url(#la_grad0)" stroke="#471B78" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M124 112.5L112.18 138.1C111.39 139.73 110.38 139.93 108.73 139.22L69.5 121V115L124 93.5V112.5Z" fill="#7840AE"/>
<path d="M124 113L138.4 136.99C139.19 138.39 140.2 138.96 141.85 138.1L180 121.5V111L124 93.5V113Z" fill="#7840AE"/>
<path d="M148.26 127.5V161.23L163.85 153.72V120.5L148.26 127.5Z" fill="#F1E8F1" stroke="#471B78" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M124.69 109.06L141.82 129.39C142.45 130.25 143.08 130.11 144.33 129.39L197.18 105.33C198.12 104.83 197.66 104.04 197.18 103.43L183.76 83.82C182.51 82.2 181.43 82.2 179.21 83.01L124.69 108.11V109.06Z" fill="url(#la_grad1)" stroke="#471B78" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M123.51 108.62L109.86 129.41C108.92 130.88 108.44 130.96 107.03 130.11L52.67 105.33C51.42 104.76 51.89 104.04 52.67 103.02L65.94 84.11C67.19 82.49 68.49 82.06 70.14 82.63L123.51 107.58V108.62Z" fill="url(#la_grad2)" stroke="#471B78" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M124 108V172.1" stroke="#471B78" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M163.578 50.0788L158.806 38.5795C155.123 29.7034 144.341 29.0562 135.267 29L129.283 29.2959L83 37.2311L84.7102 37.6475C88.0861 44.1393 97.6932 47.7748 109.688 47.3014C118.837 47.067 137.14 43.9758 150.539 46.1568C156.569 47.2271 161.742 47.2461 163.578 50.0788Z" fill="#8A57C6" stroke="#471B78" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M181.12 35.21C189.98 38.39 194.5 41.24 194.5 49C194.5 52.06 190.96 54.82 187.5 57.5L181.12 52.06V35.21Z" fill="#8A57C6" stroke="#471B78" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M125.29 105.04C124.38 96.11 128.08 83.28 149.41 73.61C153.71 71.61 172.24 66.81 178.89 63.02C184.59 59.88 189.91 57.22 194.31 50.05V60.84C194.31 70.45 184.91 75.77 170.61 79.61C157.51 83.36 141.03 86.13 137.92 99.91L125.29 105.04Z" fill="url(#la_grad3)"/>
<path d="M125.29 106.04C124.38 97.11 128.08 84.28 149.41 74.61C153.71 72.61 170.61 67.81 177.26 64.02C182.96 60.88 189.91 58.22 194.31 51.05V61.84C194.31 71.45 184.91 76.77 170.61 80.61C157.51 84.36 141.03 87.13 137.92 100.91L125.29 106.04Z" stroke="#471B78" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M68.99 35.21C60.13 38.39 56.16 41.52 55.61 48.96C55.36 52.49 57.28 55.33 60.74 58.41L68.99 52.91V35.21Z" fill="#8A57C6" stroke="#471B78" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M55.61 48.39V60.84C55.61 70.45 63.78 75.18 73.65 78.71L79.95 80.73L105.29 90.71L104.71 82.81C104.08 78.08 101.31 73.93 96.52 72.12C88.78 69.19 69.78 64.16 64.08 59.06C60.01 56.07 56.23 52.81 55.61 48.39Z" fill="#F1E8F1" stroke="#471B78" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M148 43H181V54H148V43Z" fill="#EFF4F4" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M148 54H181V61.2244C181 62.9883 178.958 64 177.675 64H151.416C149.405 64 148 62.4306 148 59.6031V54Z" fill="#0E8077" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M148 43H181V35.7756C181 34.0117 178.958 33 177.675 33H151.416C149.405 33 148 34.5694 148 37.3969V43Z" fill="#EFF4F4" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M152.85 39.9405C154.48 39.9405 155.3 38.0805 154.28 36.6805C153.37 35.3905 151 36.0405 151 37.7405C151 38.9905 151.85 39.9405 152.85 39.9405Z" fill="#471B78"/>
<path d="M152.99 50.05C154.62 50.05 155.44 48.19 154.42 46.79C153.51 45.5 151.14 46.15 151.14 47.85C151.14 49.03 152.05 50.05 152.99 50.05Z" fill="#471B78"/>
<path d="M152.85 60.9405C154.48 60.9405 155.3 59.0805 154.28 57.6805C153.37 56.3905 151 57.0405 151 58.7405C151 59.9905 151.84 60.9405 152.85 60.9405Z" fill="#471B78"/>
<path d="M173 38H176.11" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M173 48H176.11" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M173 59H176.11" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M72.77 32H99.51C101.75 32 102.44 33.83 102.44 35.59V62.77C102.44 64.89 101.13 66.14 98.86 66.14H72.84C70.32 66.14 69 64.89 69 62.52V35.44C69 33.69 70.32 32 72.77 32Z" fill="#EFECE5" stroke="#471B78" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M94.87 39.9V58.06C94.87 60.18 89.96 61.23 85.73 61.23C81.5 61.23 76.11 60.18 76.11 58.06V39.9H94.87Z" fill="#B98112" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M85.2108 44C91.23 44 95 42.3204 95 40.2718C95 38.2136 91.23 37 85.2108 37C79.1917 37 76 38.2136 76 40.2718C76 42.3204 79.1917 44 85.2108 44Z" fill="#F4F3EF" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M76.11 46.23C76.11 48.34 79.95 49.6 85.57 49.6C91.19 49.6 94.87 48.34 94.87 46.23" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M76.11 52.12C76.11 54.23 79.95 55.49 85.57 55.49C91.19 55.49 94.87 54.23 94.87 52.12" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M111.84 9H138.3C140.75 9 141.44 10.83 141.44 12.32V39.91C141.44 42.03 139.95 43.28 137.86 43.28H112.24C109.72 43.28 108 41.96 108 39.3V11.95C108 10.26 109.01 9 111.84 9Z" fill="#E7EAED" stroke="#471B78" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M114.11 20.76H122.02" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M118.62 25.08H128.02" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M119.43 29.11H135.11" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M120.25 33.15H129.03" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M116.16 37.91H122.83" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M108 16.04H141.44V12.3C141.44 10.54 140.13 9 138.24 9H112.24C109.86 9 108 10.33 108 12.59V16.04Z" fill="#3061A6" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M112.4 14.0057C113.26 14.0057 113.7 13.0257 113.15 12.2657C112.53 11.4757 111.18 11.9957 111.31 12.9557C111.39 13.5657 111.88 14.0057 112.4 14.0057Z" fill="#471B78"/>
<path d="M115.68 14.0057C116.54 14.0057 116.98 13.0257 116.43 12.2657C115.81 11.4757 114.46 11.9957 114.6 12.9557C114.67 13.5657 115.16 14.0057 115.68 14.0057Z" fill="#471B78"/>
<path d="M118.68 14.0057C119.54 14.0057 119.98 13.0257 119.43 12.2657C118.81 11.4757 117.46 11.9957 117.6 12.9557C117.67 13.5657 118.16 14.0057 118.68 14.0057Z" fill="#471B78"/>
<path d="M112.18 53.12H138.92C141.16 53.12 141.85 54.95 141.85 56.71V83.89C141.85 86.01 140.54 87.26 138.27 87.26H112.25C109.73 87.26 108.41 86.01 108.41 83.64V56.56C108.41 54.81 109.73 53.12 112.18 53.12Z" fill="#EEE6E7" stroke="#471B78" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M108.41 60.16H141.85V56.42C141.85 54.66 140.54 53.12 138.65 53.12H112.65C110.27 53.12 108.41 54.45 108.41 56.71V60.16Z" fill="#B32C38" stroke="#471B78" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M112.81 58.1257C113.67 58.1257 114.11 57.1457 113.56 56.3857C112.94 55.5957 111.59 56.1157 111.72 57.0757C111.8 57.6857 112.29 58.1257 112.81 58.1257Z" fill="#471B78"/>
<path d="M116.09 58.1257C116.95 58.1257 117.39 57.1457 116.84 56.3857C116.22 55.5957 114.87 56.1157 115.01 57.0757C115.08 57.6857 115.57 58.1257 116.09 58.1257Z" fill="#471B78"/>
<path d="M119.09 58.1257C119.95 58.1257 120.39 57.1457 119.84 56.3857C119.22 55.5957 117.87 56.1157 118.01 57.0757C118.08 57.6857 118.57 58.1257 119.09 58.1257Z" fill="#471B78"/>
<path d="M119.43 69.05L115.34 74.41L119.43 78.92" stroke="#471B78" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M130.47 69.05L134.56 73.93L130.47 78.92" stroke="#471B78" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M126.79 67.36L122.42 82.2" stroke="#471B78" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="la_grad0" x1="124.866" y1="103.828" x2="124.866" y2="173" gradientUnits="userSpaceOnUse">
<stop stop-color="#C279F0"/>
<stop offset="1" stop-color="#7840AE"/>
</linearGradient>
<linearGradient id="la_grad1" x1="161.454" y1="82.0293" x2="161.454" y2="130.11" gradientUnits="userSpaceOnUse">
<stop stop-color="#C279F0"/>
<stop offset="1" stop-color="#9A66E2"/>
</linearGradient>
<linearGradient id="la_grad2" x1="87.8005" y1="82.3672" x2="87.8005" y2="130.801" gradientUnits="userSpaceOnUse">
<stop stop-color="#C279F0"/>
<stop offset="1" stop-color="#9A66E2"/>
</linearGradient>
<linearGradient id="la_grad3" x1="159.799" y1="50.0469" x2="159.799" y2="105.039" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E8F1"/>
<stop offset="1" stop-color="#F1E8F1" stop-opacity="0.25"/>
</linearGradient>
</defs>
</svg>`;
  return <div className="not-prose" style={{
    fontFamily: 'system-ui, sans-serif'
  }}>
      <style>{`
        .la-zone {
          position: absolute;
          cursor: crosshair;
          border-radius: 4px;
          transition: background 0.15s ease, outline 0.15s ease;
        }
        .la-zone:hover { background: rgba(120, 64, 174, 0.12); outline: 2px solid rgba(120, 64, 174, 0.5); }
        .la-chip {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: 500;
          border: 1px solid rgba(255,255,255,0.08); cursor: default;
          transition: opacity 0.15s;
        }
        .la-chip:hover { opacity: 0.8; }
      `}</style>

      <div style={{
    display: 'flex',
    gap: 24,
    flexWrap: 'wrap',
    alignItems: 'flex-start'
  }}>

        {}
        <div style={{
    width: 280,
    height: 280,
    flexShrink: 0,
    borderRadius: 12,
    overflow: 'hidden',
    border: '1px solid rgba(120,64,174,0.15)'
  }} dangerouslySetInnerHTML={{
    __html: svgMarkup
  }} />

        {}
        <div style={{
    flex: 1,
    minWidth: 220
  }}>
          <div style={{
    background: hoveredEl ? `${hoveredEl.color}14` : 'rgba(120,64,174,0.06)',
    border: `1px solid ${hoveredEl ? `${hoveredEl.color}40` : 'rgba(120,64,174,0.15)'}`,
    borderRadius: 10,
    padding: '16px 18px',
    marginBottom: 14,
    minHeight: 90,
    transition: 'all 0.2s ease'
  }}>
            {hoveredEl ? <>
                <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: 10,
    marginBottom: 8
  }}>
                  <div style={{
    width: 14,
    height: 14,
    borderRadius: '50%',
    background: hoveredEl.gradient,
    flexShrink: 0,
    border: '2px solid rgba(255,255,255,0.3)'
  }} />
                  <span style={{
    fontWeight: 700,
    fontSize: 14,
    color: hoveredEl.color
  }}>{hoveredEl.label}</span>
                  <code style={{
    fontSize: 11,
    background: 'rgba(0,0,0,0.08)',
    padding: '2px 6px',
    borderRadius: 4,
    color: '#555',
    marginLeft: 'auto'
  }}>{hoveredEl.hex}</code>
                </div>
                <p style={{
    margin: 0,
    fontSize: 12,
    lineHeight: 1.6,
    color: '#444'
  }}>{hoveredEl.role}</p>
              </> : <p style={{
    margin: 0,
    fontSize: 12,
    color: '#888',
    lineHeight: 1.6
  }}>
                Hover over a chip below to learn about each logo element.
              </p>}
          </div>

          <div style={{
    display: 'flex',
    flexWrap: 'wrap',
    gap: 6
  }}>
            {elements.map(el => <div key={el.id} className="la-chip" style={{
    background: hovered === el.id ? `${el.color}20` : 'rgba(120,64,174,0.06)',
    color: hovered === el.id ? el.color : '#555',
    borderColor: hovered === el.id ? `${el.color}50` : 'rgba(120,64,174,0.15)'
  }} onMouseEnter={() => setHovered(el.id)} onMouseLeave={() => setHovered(null)}>
                <div style={{
    width: 8,
    height: 8,
    borderRadius: '50%',
    background: el.color,
    flexShrink: 0
  }} />
                {el.label}
              </div>)}
          </div>
        </div>
      </div>
    </div>;
};

# AI•Pkg Brand Guidelines

AI•Pkg is an AI package management platform. The brand identity is built around a **purple isometric package box** with four floating icon elements — each representing a core capability — rendered in distinct, color-theory-validated accent colors.

This guide defines the official color palette, logo construction, usage rules, and visual standards for all AI•Pkg materials.

***

## Logo Overview

The AI•Pkg logo consists of two primary elements: the **isometric package box** (rendered in the core purple palette) and four **floating capability icons** that appear to be emerging from or entering the box. Below the box sits the **AI•Pkg wordmark** in Purple Deep.

<CardGroup cols={2}>
  <Card title="Primary Logo" icon="box-open">
    The full-color logo on a white or light background. This is the default usage for most contexts.
  </Card>

  <Card title="Icon-Only Mark" icon="cube">
    The isometric box with floating icons, without the wordmark. Use when space is constrained or the brand name appears elsewhere nearby.
  </Card>
</CardGroup>

### Logo Anatomy

Hover over any chip to identify each element, its color family, and its role in the unified mark.

<LogoAnatomy />

<br />

The logo is composed of these structural groups:

| Element           | Description                                                      | Color Family             |
| ----------------- | ---------------------------------------------------------------- | ------------------------ |
| **Box Body**      | Isometric package with front face, lid panels, and center crease | Core Purple (gradient)   |
| **Box Ribbons**   | Left ribbon and right swooping ribbon                            | Purple Medium + Lavender |
| **Wordmark**      | "AI•Pkg" letterforms beneath the box                             | Purple Deep              |
| **Servers Icon**  | Three-tier rack with status indicators (top-right)               | Teal                     |
| **Database Icon** | Cylinder with horizontal striations (bottom-left)                | Amber                    |
| **Prompt Icon**   | Terminal window with text lines (top-center)                     | Blue                     |
| **Code Icon**     | Editor window with angle brackets (center-right)                 | Red                      |

<Note>
  The four floating icons always appear as a complete set. Never isolate a single icon from the logo for standalone use — they are part of the unified mark.
</Note>

***

## Color Palette

The AI•Pkg palette is divided into two families: the **Core Purple** palette (used for the box, ribbons, strokes, and wordmark) and the **Chromatic Icon** palette (one distinct color per floating icon element).

### Core Purple Palette

These colors form the structural foundation of the logo and all primary brand materials.

<Color variant="table">
  <Color.Row title="Core Purple">
    <Color.Item name="Purple Deep" value="#471B78" />

    <Color.Item name="Purple Primary" value="#7840AE" />

    <Color.Item name="Purple Medium" value="#8A57C6" />

    <Color.Item name="Purple Light" value="#C279F0" />

    <Color.Item name="Purple Soft" value="#9A66E2" />

    <Color.Item name="Lavender Pale" value="#F1E8F1" />
  </Color.Row>
</Color>

| Token              | HEX       | Role                                            |
| ------------------ | --------- | ----------------------------------------------- |
| **Purple Deep**    | `#471B78` | Strokes, outlines, wordmark, dark accents       |
| **Purple Primary** | `#7840AE` | Box face fills, general-purpose brand purple    |
| **Purple Medium**  | `#8A57C6` | Ribbons and secondary structural fills          |
| **Purple Light**   | `#C279F0` | Gradient top stop on box face and lid gradients |
| **Purple Soft**    | `#9A66E2` | Gradient bottom stop on lid panels              |
| **Lavender Pale**  | `#F1E8F1` | Box side panel, ribbon highlight, light accents |

### Gradients

The box uses linear gradients to create the isometric 3D effect. These should be preserved exactly as specified. Click **Copy CSS** on any swatch to copy the gradient definition.

<BrandGradientShowcase />

<Warning>
  Never flatten the box gradients to solid fills. The dimensional gradient is essential to the isometric visual identity.
</Warning>

### Chromatic Icon Palette

Each of the four floating capability icons has its own color family. These were selected using HSL color-wheel analysis to ensure a minimum 40° hue separation between every pair and at least 30° separation from the core purple (270°).

<Color variant="table">
  <Color.Row title="Teal (Servers — Infrastructure)">
    <Color.Item name="Teal Accent" value="#0E8077" />

    <Color.Item name="Teal Background" value="#E5EFEE" />

    <Color.Item name="Teal Panel" value="#EFF4F4" />
  </Color.Row>

  <Color.Row title="Amber (Database — Storage)">
    <Color.Item name="Amber Accent" value="#B98112" />

    <Color.Item name="Amber Background" value="#EFECE5" />

    <Color.Item name="Amber Panel" value="#F4F3EF" />
  </Color.Row>

  <Color.Row title="Blue (Prompt — Interaction)">
    <Color.Item name="Blue Accent" value="#3061A6" />

    <Color.Item name="Blue Background" value="#E7EAED" />

    <Color.Item name="Blue Panel" value="#F0F1F3" />
  </Color.Row>

  <Color.Row title="Red (Code — Creation)">
    <Color.Item name="Red Accent" value="#B32C38" />

    <Color.Item name="Red Background" value="#EEE6E7" />

    <Color.Item name="Red Panel" value="#F3F0F0" />
  </Color.Row>
</Color>

<Tabs>
  <Tab title="Servers — Teal">
    **Hue position:** 175° · **Semantic meaning:** Infrastructure, reliability, uptime

    | Role           | HEX       | RGB             | Usage                             |
    | -------------- | --------- | --------------- | --------------------------------- |
    | **Accent**     | `#0E8077` | `14, 128, 119`  | Server middle panel fill          |
    | **Background** | `#E5EFEE` | `229, 239, 238` | *Reserved for UI contexts*        |
    | **Panel**      | `#EFF4F4` | `239, 244, 244` | Server top and bottom panel fills |

    The teal accent provides strong visual contrast against the warm purple box. It sits near purple's complement on the color wheel, creating natural tension and energy.
  </Tab>

  <Tab title="Database — Amber">
    **Hue position:** 40° · **Semantic meaning:** Storage, value, data richness

    | Role           | HEX       | RGB             | Usage                         |
    | -------------- | --------- | --------------- | ----------------------------- |
    | **Accent**     | `#B98112` | `185, 129, 18`  | Database cylinder body fill   |
    | **Background** | `#EFECE5` | `239, 236, 229` | Database container background |
    | **Panel**      | `#F4F3EF` | `244, 243, 239` | Database cylinder top fill    |

    Gold/amber paired with purple is a classic regal combination — authoritative and warm. The amber accent provides the strongest warm-cool contrast in the icon set.
  </Tab>

  <Tab title="Prompt — Blue">
    **Hue position:** 215° · **Semantic meaning:** Interaction, input, command

    | Role           | HEX       | RGB             | Usage                              |
    | -------------- | --------- | --------------- | ---------------------------------- |
    | **Accent**     | `#3061A6` | `48, 97, 166`   | Prompt window title bar fill       |
    | **Background** | `#E7EAED` | `231, 234, 237` | Prompt window container background |
    | **Panel**      | `#F0F1F3` | `240, 241, 243` | *Reserved for UI contexts*         |

    A controlled royal blue that reads as professional and structured. Positioned between teal and purple on the wheel, bridging the cool-tone range without overlapping either.
  </Tab>

  <Tab title="Code — Red">
    **Hue position:** 355° · **Semantic meaning:** Creation, syntax, building

    | Role           | HEX       | RGB             | Usage                            |
    | -------------- | --------- | --------------- | -------------------------------- |
    | **Accent**     | `#B32C38` | `179, 44, 56`   | Code editor title bar fill       |
    | **Background** | `#EEE6E7` | `238, 230, 231` | Code editor container background |
    | **Panel**      | `#F3F0F0` | `243, 240, 240` | *Reserved for UI contexts*       |

    A warm crimson-red that conveys energy and creation. Paired with the amber database, it forms the warm pole of the palette, while teal and blue form the cool pole — creating balanced visual weight.
  </Tab>
</Tabs>

### Color Harmony Visualization

The four icon hues are placed on the color wheel with verified angular separation. Hover over any color in the diagram to see its connections.

<ColorWheelHarmony />

<br />

| Pair               | Hue Distance | Status             |
| ------------------ | ------------ | ------------------ |
| Servers ↔ Database | 135°         | Well-separated     |
| Servers ↔ Prompt   | 40°          | Distinguishable    |
| Servers ↔ Code     | 180°         | Complementary      |
| Database ↔ Prompt  | 175°         | Near-complementary |
| Database ↔ Code    | 45°          | Distinguishable    |
| Prompt ↔ Code      | 140°         | Well-separated     |

<Tip>
  All four icon accents achieve ≥3.5:1 contrast ratio against white, meeting WCAG AA requirements for large text and graphical elements.
</Tip>

***

## Logo Usage

### Clear Space

Maintain a minimum clear space around the logo equal to the height of the "A" in the wordmark on all sides. No other graphic elements, text, or visual clutter should enter this boundary.

### Minimum Size

The full logo (box + wordmark) should not be reproduced smaller than **48px wide** on screen or **12mm wide** in print. The icon-only mark (box without wordmark) should not be smaller than **32px wide** on screen or **8mm wide** in print.

### Background Requirements

<CardGroup cols={2}>
  <Card title="Preferred: White" icon="check">
    The logo was designed for white or very light backgrounds. This is the default and preferred usage.
  </Card>

  <Card title="Acceptable: Light Neutral" icon="check">
    Light grey (`#F5F5F5` or lighter) or light warm-neutral backgrounds are acceptable.
  </Card>

  <Card title="Acceptable: Dark" icon="moon">
    On dark backgrounds (`#1A1A2E` or similar), the logo remains legible because the box gradients and icon backgrounds provide their own contrast. The wordmark may need to be rendered in white (`#FFFFFF`) instead of Purple Deep.
  </Card>

  <Card title="Avoid: Colored" icon="xmark">
    Avoid placing the logo on saturated colored backgrounds, especially purples, blues, or teals that compete with the palette.
  </Card>
</CardGroup>

### Logo Don'ts

<Steps>
  <Step title="Don't recolor the box">
    The purple box is the brand anchor. Never change its gradient fills, stroke color, or ribbon colors.
  </Step>

  <Step title="Don't isolate individual icons">
    The four floating icons are part of the unified mark. Never extract a single icon (e.g., the database cylinder) for standalone use as a brand element.
  </Step>

  <Step title="Don't rotate or skew">
    The isometric perspective is carefully constructed. Never rotate, skew, distort, or apply 3D transforms to the logo.
  </Step>

  <Step title="Don't add effects">
    No drop shadows, glows, bevels, or other raster effects should be applied to the logo. The SVG is designed to be used as-is.
  </Step>

  <Step title="Don't swap icon colors">
    Each icon has a specific assigned color (teal=servers, amber=database, blue=prompt, red=code). These semantic assignments are fixed and should not be swapped.
  </Step>

  <Step title="Don't outline the wordmark">
    The AI•Pkg wordmark is set in a specific custom letterform. Never convert it to an outlined stroke, apply a different typeface, or retype it.
  </Step>
</Steps>

***

## Typography

### Primary Typeface

The AI•Pkg wordmark is set in **Poppins SemiBold** — a geometric sans-serif with a pointed "A" apex, single-story open "g", angular "k" arms, and a high x-height. Poppins is the recommended primary typeface for all brand materials to maintain consistency with the wordmark.

| Role                 | Typeface       | Weight         | Usage                                        |
| -------------------- | -------------- | -------------- | -------------------------------------------- |
| **Headlines**        | Poppins        | Bold (700)     | Page titles, section headers, hero text      |
| **Subheadings**      | Poppins        | SemiBold (600) | Card titles, sidebar labels, feature names   |
| **Body**             | Poppins        | Regular (400)  | Paragraphs, descriptions, documentation text |
| **Code / Technical** | JetBrains Mono | Regular (400)  | Code snippets, CLI commands, API references  |
| **Small / Captions** | Poppins        | Medium (500)   | Labels, metadata, footnotes                  |

<Info>
  **Why Poppins?** The wordmark's letterform geometry — pointed A apex, open single-story g, rounded P bowl, and angular k — matches Poppins most closely among available typefaces. Using Poppins throughout brand materials creates a cohesive typographic identity that extends naturally from the logo. Poppins is open-source (Google Fonts) and has excellent multi-language support.
</Info>

### Type Scale Specimen

The scale uses a **1.25 ratio** (Major Third) for consistent visual rhythm. The specimen below loads Poppins live.

<TypographySpecimen />

<br />

| Level   | Size            | Line Height | Usage                        |
| ------- | --------------- | ----------- | ---------------------------- |
| Display | 36px / 2.25rem  | 1.2         | Hero sections, landing pages |
| H1      | 28px / 1.75rem  | 1.3         | Page titles                  |
| H2      | 22px / 1.375rem | 1.35        | Section headers              |
| H3      | 18px / 1.125rem | 1.4         | Subsection headers           |
| Body    | 16px / 1rem     | 1.6         | Default body text            |
| Small   | 14px / 0.875rem | 1.5         | Captions, labels, metadata   |
| Code    | 14px / 0.875rem | 1.6         | Monospace content            |

***

## Iconography

When creating custom icons or illustrations for AI•Pkg materials beyond the logo, follow these principles:

<CardGroup cols={2}>
  <Card title="Stroke-Based" icon="pen-line">
    Prefer 2px rounded-cap strokes on a transparent background, matching the logo's illustration style.
  </Card>

  <Card title="Isometric When Applicable" icon="cube">
    For 3D or dimensional illustrations, use the same isometric projection angle as the box logo.
  </Card>

  <Card title="Use Brand Colors" icon="palette">
    All icon and illustration colors should be drawn from the defined brand palette — core purples for structural elements, chromatic accents for category-specific elements.
  </Card>

  <Card title="Consistent Weight" icon="ruler">
    Maintain consistent stroke weight and corner radius across all iconography. The logo uses 2–2.5px strokes with round caps.
  </Card>
</CardGroup>

***

## Voice & Tone

AI•Pkg's brand voice is **technical, confident, and approachable** — the kind of voice that can explain a complex package dependency graph without being condescending about it.

| Attribute        | Do                                                | Don't                                          |
| ---------------- | ------------------------------------------------- | ---------------------------------------------- |
| **Precise**      | "Resolves transitive dependencies in under 200ms" | "Super fast dependency resolution"             |
| **Confident**    | "AI•Pkg manages your AI packages"                 | "AI•Pkg tries to help with package management" |
| **Approachable** | "Get started in three commands"                   | "Initiate the bootstrapping protocol"          |
| **Honest**       | "Currently supports Python and Node.js"           | "Works with everything"                        |

***

## Digital Applications

### Favicon

Use the isometric box icon-only mark (without wordmark or floating icons) as the favicon. At 16×16 and 32×32, the floating icons are too small to render clearly.

### Social Media Avatar

Use the full icon-only mark (box with floating icons) on a white circular or rounded-square background. Ensure the clear space rules are respected within the avatar boundary.

### Documentation Site

The AI•Pkg documentation uses the brand purple as the primary accent color for navigation, links, and interactive elements:

<Color variant="table">
  <Color.Row title="Documentation Site Tokens">
    <Color.Item name="Primary links" value="#7840AE" />

    <Color.Item name="Hover state" value="#8A57C6" />

    <Color.Item name="Active / Focus" value="#471B78" />

    <Color.Item name="Code highlights" value="#C279F0" />
  </Color.Row>

  <Color.Row title="Semantic Callout Colors">
    <Color.Item name="Info" value="#3061A6" />

    <Color.Item name="Warning" value="#B98112" />

    <Color.Item name="Error" value="#B32C38" />

    <Color.Item name="Success" value="#0E8077" />
  </Color.Row>
</Color>

***

## CSS Custom Properties

For web implementations, use these CSS custom properties:

```css theme={null}
:root {
  /* Core Purple Palette */
  --aipkg-purple-deep: #471B78;
  --aipkg-purple-primary: #7840AE;
  --aipkg-purple-medium: #8A57C6;
  --aipkg-purple-light: #C279F0;
  --aipkg-purple-soft: #9A66E2;
  --aipkg-lavender-pale: #F1E8F1;

  /* Chromatic Icon Accents */
  --aipkg-teal: #0E8077;
  --aipkg-teal-bg: #E5EFEE;
  --aipkg-teal-panel: #EFF4F4;

  --aipkg-amber: #B98112;
  --aipkg-amber-bg: #EFECE5;
  --aipkg-amber-panel: #F4F3EF;

  --aipkg-blue: #3061A6;
  --aipkg-blue-bg: #E7EAED;
  --aipkg-blue-panel: #F0F1F3;

  --aipkg-red: #B32C38;
  --aipkg-red-bg: #EEE6E7;
  --aipkg-red-panel: #F3F0F0;

  /* Semantic Mapping */
  --color-primary: var(--aipkg-purple-primary);
  --color-primary-hover: var(--aipkg-purple-medium);
  --color-primary-active: var(--aipkg-purple-deep);
  --color-info: var(--aipkg-blue);
  --color-success: var(--aipkg-teal);
  --color-warning: var(--aipkg-amber);
  --color-error: var(--aipkg-red);
}
```

***

## Tailwind CSS Configuration

For Tailwind CSS projects, extend the default theme:

```js theme={null}
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        aipkg: {
          'purple-deep': '#471B78',
          'purple': '#7840AE',
          'purple-medium': '#8A57C6',
          'purple-light': '#C279F0',
          'purple-soft': '#9A66E2',
          'lavender': '#F1E8F1',
          'teal': { DEFAULT: '#0E8077', bg: '#E5EFEE', panel: '#EFF4F4' },
          'amber': { DEFAULT: '#B98112', bg: '#EFECE5', panel: '#F4F3EF' },
          'blue': { DEFAULT: '#3061A6', bg: '#E7EAED', panel: '#F0F1F3' },
          'red': { DEFAULT: '#B32C38', bg: '#EEE6E7', panel: '#F3F0F0' },
        },
      },
    },
  },
}
```

***

## Asset Checklist

<Steps>
  <Step title="Primary Logo SVG">
    Full-color logo with box, floating icons, and wordmark. Format: SVG (vector).
  </Step>

  <Step title="Icon-Only Mark SVG">
    Box with floating icons, no wordmark. Format: SVG (vector).
  </Step>

  <Step title="Favicon Package">
    16×16, 32×32, and 180×180 (Apple Touch) PNG exports of the box-only mark.
  </Step>

  <Step title="Social Media Kit">
    Avatar (512×512), banner (1500×500), and Open Graph image (1200×630) templates.
  </Step>

  <Step title="Color Palette File">
    `.ase` (Adobe Swatch Exchange) and `.sketchpalette` exports of the full brand palette.
  </Step>
</Steps>

***

<Note>
  **Version:** 1.0 · **Last updated:** March 2026 · **Palette variant:** Chromatic (Option B)
</Note>