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

# Brand Guidelines

> Colors, typography, and identity for uOS, veuOS, and Third Space

<div className="brand-package">
  <section className="brand-section">
    <h2 className="brand-section-title">Typography</h2>

    <div className="brand-type-grid">
      <div className="brand-type-card">
        <p className="brand-type-sample brand-type-display">Helvetica Now Display</p>
        <p className="brand-type-meta">Wordmarks, headings</p>
      </div>

      <div className="brand-type-card">
        <p className="brand-type-sample brand-type-text">Helvetica Now Text</p>
        <p className="brand-type-meta">Body copy</p>
      </div>

      <div className="brand-type-card">
        <p className="brand-type-sample brand-type-mono">Geist Mono</p>
        <p className="brand-type-meta">Code, terminal</p>
      </div>
    </div>
  </section>

  <section className="brand-section">
    <h2 className="brand-section-title">Colors</h2>

    <div className="brand-palette">
      <div className="brand-palette__row">
        <span className="brand-swatch-chip" style={{ background: "#FF00C5" }} />

        <span className="brand-palette__hex">
          {'#FF00C5'}
        </span>
      </div>

      <div className="brand-palette__row">
        <span className="brand-swatch-chip" style={{ background: "#FFFFFF", border: "1px solid rgba(126, 126, 126, 0.25)" }} />

        <span className="brand-palette__hex">
          {'#FFFFFF'}
        </span>
      </div>

      <div className="brand-palette__row">
        <span className="brand-swatch-chip" style={{ background: "#FAFAFA" }} />

        <span className="brand-palette__hex">
          {'#FAFAFA'}
        </span>
      </div>

      <div className="brand-palette__row">
        <span className="brand-swatch-chip" style={{ background: "#F3F4F6" }} />

        <span className="brand-palette__hex">
          {'#F3F4F6'}
        </span>
      </div>

      <div className="brand-palette__row">
        <span className="brand-swatch-chip" style={{ background: "#7E7E7E" }} />

        <span className="brand-palette__hex">
          {'#7E7E7E'}
        </span>
      </div>

      <div className="brand-palette__row">
        <span className="brand-swatch-chip" style={{ background: "#171719" }} />

        <span className="brand-palette__hex">
          {'#171719'}
        </span>
      </div>

      <div className="brand-palette__row">
        <span className="brand-swatch-chip" style={{ background: "#0D0D0D" }} />

        <span className="brand-palette__hex">
          {'#0D0D0D'}
        </span>
      </div>
    </div>

    <p className="brand-export-note">
      Downloads are vector SVG and 2048px transparent PNG. Color and black variants
      are for light backgrounds; white variants are white only — no background
      baked in.
    </p>
  </section>

  <section className="brand-section">
    <h2 className="brand-section-title">Logo</h2>

    <p className="brand-identity-desc">
      The geometric mark. Used on its own at small sizes — favicons, app icons,
      avatars, and compact UI. Pair with the wordmark at hero scale; do not
      substitute the mark for veuOS or Third Space lockups.
    </p>

    <div className="brand-variants brand-variants--logo">
      <div>
        <span className="brand-variant-label">Black</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--light brand-logo-tile">
          <img src="https://mintcdn.com/uos-9a805c5e/qpvwi9JzkgI89sWY/assets/brand/logo-black.svg?fit=max&auto=format&n=qpvwi9JzkgI89sWY&q=85&s=3787d40e1907cd7dedbb5883418bc4ad" alt="" className="brand-logo-mark" width="300" height="300" data-path="assets/brand/logo-black.svg" />
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/logo-black.svg" download="uos-logo-black.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/logo-black.png" download="uos-logo-black.png">PNG</a>
        </div>
      </div>

      <div>
        <span className="brand-variant-label">White</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--dark brand-logo-tile">
          <img src="https://mintcdn.com/uos-9a805c5e/yMf8CRCNR32nX9jN/assets/brand/logo-white.svg?fit=max&auto=format&n=yMf8CRCNR32nX9jN&q=85&s=5a3347060e99e850424a6bafb89995bd" alt="" className="brand-logo-mark brand-logo-mark--white" width="300" height="300" data-path="assets/brand/logo-white.svg" />
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/logo-white.svg" download="uos-logo-white.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/logo-white.png" download="uos-logo-white.png">PNG</a>
        </div>
      </div>
    </div>
  </section>

  <section className="brand-section">
    <h2 className="brand-section-title">Token</h2>
    <p className="brand-identity-font">Helvetica Now Display · oblique · OS 500</p>

    <p className="brand-identity-desc">
      The protocol token mark. Same typography as the uOS wordmark with a{" "}
      <strong>\$</strong> prefix for tickers, DEX listings, and wallet UI.
    </p>

    <div className="brand-variants">
      <div>
        <span className="brand-variant-label">Color</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--light">
          <span className="uos-wordmark brand-wordmark-lg" aria-label="$uOS">
            <span className="uos-u">\$u</span>
            <span className="uos-o">O</span>
            <span className="uos-s">S</span>
          </span>
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/uos-token-color.svg" download="uos-token-color.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/uos-token-color.png" download="uos-token-color.png">PNG</a>
        </div>
      </div>

      <div>
        <span className="brand-variant-label">Black</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--light">
          <span className="uos-wordmark brand-wordmark-lg brand-wordmark--black" aria-label="$uOS">
            <span className="uos-u">\$u</span>
            <span className="uos-o">O</span>
            <span className="uos-s">S</span>
          </span>
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/uos-token-black.svg" download="uos-token-black.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/uos-token-black.png" download="uos-token-black.png">PNG</a>
        </div>
      </div>

      <div>
        <span className="brand-variant-label">White</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--dark">
          <span className="uos-wordmark brand-wordmark-lg brand-wordmark--white" aria-label="$uOS">
            <span className="uos-u">\$u</span>
            <span className="uos-o">O</span>
            <span className="uos-s">S</span>
          </span>
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/uos-token-white.svg" download="uos-token-white.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/uos-token-white.png" download="uos-token-white.png">PNG</a>
        </div>
      </div>
    </div>
  </section>

  <section className="brand-section">
    <h2 className="brand-section-title">uOS</h2>
    <p className="brand-identity-font">Helvetica Now Display · oblique · OS 500</p>

    <p className="brand-identity-desc">
      The agency and protocol mark. A muted <strong>u</strong> leads into pink{" "}
      <strong>OS</strong> — the universal operating system, named for the user
      before the system.
    </p>

    <div className="brand-variants">
      <div>
        <span className="brand-variant-label">Color</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--light">
          <span className="uos-wordmark brand-wordmark-lg" aria-label="uOS">
            <span className="uos-u">u</span>
            <span className="uos-o">O</span>
            <span className="uos-s">S</span>
          </span>
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/uos-color.svg" download="uos-color.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/uos-color.png" download="uos-color.png">PNG</a>
        </div>
      </div>

      <div>
        <span className="brand-variant-label">Black</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--light">
          <span className="uos-wordmark brand-wordmark-lg brand-wordmark--black" aria-label="uOS">
            <span className="uos-u">u</span>
            <span className="uos-o">O</span>
            <span className="uos-s">S</span>
          </span>
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/uos-black.svg" download="uos-black.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/uos-black.png" download="uos-black.png">PNG</a>
        </div>
      </div>

      <div>
        <span className="brand-variant-label">White</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--dark">
          <span className="uos-wordmark brand-wordmark-lg brand-wordmark--white" aria-label="uOS">
            <span className="uos-u">u</span>
            <span className="uos-o">O</span>
            <span className="uos-s">S</span>
          </span>
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/uos-white.svg" download="uos-white.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/uos-white.png" download="uos-white.png">PNG</a>
        </div>
      </div>
    </div>
  </section>

  <section className="brand-section">
    <h2 className="brand-section-title">veuOS</h2>
    <p className="brand-identity-font">Helvetica Now Display · ve + uOS oblique</p>

    <p className="brand-identity-desc">
      The virtual environment. A grey italic <strong>ve</strong> prefix flows into the
      same <strong>uOS</strong> suffix used on its own.
    </p>

    <div className="brand-variants">
      <div>
        <span className="brand-variant-label">Color</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--light">
          <span className="veuos-wordmark brand-wordmark-lg" aria-label="veuOS">
            <span className="veuos-ve">
              <span className="veuos-v">v</span>
              <span className="veuos-e">e</span>
            </span>

            <span className="uos-u">u</span>
            <span className="uos-o">O</span>
            <span className="uos-s">S</span>
          </span>
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/veuos-color.svg" download="veuos-color.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/veuos-color.png" download="veuos-color.png">PNG</a>
        </div>
      </div>

      <div>
        <span className="brand-variant-label">Black</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--light">
          <span className="veuos-wordmark brand-wordmark-lg brand-wordmark--black" aria-label="veuOS">
            <span className="veuos-ve">
              <span className="veuos-v">v</span>
              <span className="veuos-e">e</span>
            </span>

            <span className="uos-u">u</span>
            <span className="uos-o">O</span>
            <span className="uos-s">S</span>
          </span>
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/veuos-black.svg" download="veuos-black.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/veuos-black.png" download="veuos-black.png">PNG</a>
        </div>
      </div>

      <div>
        <span className="brand-variant-label">White</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--dark">
          <span className="veuos-wordmark brand-wordmark-lg brand-wordmark--white" aria-label="veuOS">
            <span className="veuos-ve">
              <span className="veuos-v">v</span>
              <span className="veuos-e">e</span>
            </span>

            <span className="uos-u">u</span>
            <span className="uos-o">O</span>
            <span className="uos-s">S</span>
          </span>
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/veuos-white.svg" download="veuos-white.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/veuos-white.png" download="veuos-white.png">PNG</a>
        </div>
      </div>
    </div>
  </section>

  <section className="brand-section">
    <h2 className="brand-section-title">Third Space</h2>
    <p className="brand-identity-font">Helvetica Now Display · Third 800 · Space 400</p>

    <p className="brand-identity-desc">
      The research and thesis arm. Heavy italic <strong>Third</strong>, lighter upright{" "}
      <strong>Space</strong> — one continuous pink wordmark for the space between
      human and agent intelligence.
    </p>

    <div className="brand-variants">
      <div>
        <span className="brand-variant-label">Color</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--light">
          <span className="third-space-wordmark brand-wordmark-lg" aria-label="Third Space">
            <span className="third-space-word">Third</span> Space
          </span>
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/third-space-color.svg" download="third-space-color.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/third-space-color.png" download="third-space-color.png">PNG</a>
        </div>
      </div>

      <div>
        <span className="brand-variant-label">Black</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--light">
          <span className="third-space-wordmark brand-wordmark-lg brand-wordmark--black" aria-label="Third Space">
            <span className="third-space-word">Third</span> Space
          </span>
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/third-space-black.svg" download="third-space-black.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/third-space-black.png" download="third-space-black.png">PNG</a>
        </div>
      </div>

      <div>
        <span className="brand-variant-label">White</span>

        <div className="brand-wordmark-row brand-wordmark-row-center brand-wordmark-tile--dark">
          <span className="third-space-wordmark brand-wordmark-lg brand-wordmark--white" aria-label="Third Space">
            <span className="third-space-word">Third</span> Space
          </span>
        </div>

        <div className="brand-downloads">
          <a className="brand-download" href="/assets/brand/third-space-white.svg" download="third-space-white.svg">SVG</a>
          <a className="brand-download" href="/assets/brand/third-space-white.png" download="third-space-white.png">PNG</a>
        </div>
      </div>
    </div>
  </section>
</div>