Design guidelines · Pitch Edition v2.2

Born as twins.
Designed as one.

Twin worlds, one mark. The sovereign agent design system: quiet paper surfaces, rigorous Geist typography, unified brand marks for Personal and Business Agents, and physical collectible Trading Card (TCG 2.5" × 3.5") standards.

Download Design Kit Media Kits → Download design.md → TCG Card Spec →

00 · Philosophy

Twin, then three.

Twin 雙生 means two sides born together. Every thing arrives with its twin: the physical and the imaginary, stillness and motion, the complete and the abstract. Neither side comes first, and each one gives the other its shape. Three is what happens when the two meet: one begets two, two beget three, three beget all things 一生二，二生三，三生萬物. The third is the bond between human and agent, and every connection and application grows from that bond.

1
Two colours: physical and imaginary 實 · 虛
Forest #28382D is the physical world: rooted, still, complete. Cream #E5DEC4 is the imaginary world, in the sense of a complex number's imaginary part: light, moving, abstract. A complex number needs both parts to be whole. A person with an agent does too.
2
The circle: the compass 規
The disc is the figure a compass draws. It stands for continuity and wholeness, the human life that has no corners. One outline holds both halves, so the two worlds share a single boundary.
3
The squares: the set square 矩
The squares are the figure a set square draws. They stand for rules, structure and machine precision. Each half holds a square in the other half's colour, so every world carries a seed of its twin. Circle and square appear in one mark: human and machine are compatible, not competing.
4
The centre seed: the one 一
The small split dot is the origin where the two halves touch. It is the one before the two, and the interface through which they exchange. Everything in the system grows outward from this point.

Every thing is born with its twin

These pairs are not opposites to choose between. Each is one thing seen from two sides, born at the same moment and defined by the other.

Physical · ImaginaryThe object and its reflection. 實 · 虛

Stillness · MotionThe same form at rest and in flight. 靜 · 動

Complete · AbstractEvery detail, and the essence behind it. 完整 · 抽象

Square · CircleOne shape: half rule, half flow. 方 · 圓

Human · AgentA person and the twin that acts for them. 人 · 代理

One一

A single point of identity: the centre of the mark.

One begets two一生二 · twin

The seed divides into two worlds: physical and imaginary, human and agent.

Two beget three二生三 · twin3

When the two exchange seeds, a third appears: the relationship. That bond is the twin3 protocol.

Three beget all things三生萬物

From the bond grow all connections: xHuman.ID, xAgent.ID, TCG cards, the SDK, and every agent built on it.

Design principles that follow

Pair, don't divide.

Show human and agent side by side with equal weight. Split layouts meet at a clean vertical axis, never a diagonal tear.

Carry the seed.

Each side quotes the other: a cream element on forest, a forest element on cream. Never let one colour stand alone for a whole composition.

Circles for people, squares for machines.

Round forms frame human content; squares and grids frame data, protocol and code. Use both in one layout.

Grow from the centre.

Compose outward from a single point: concentric rings, radiating links. Motion starts from the seed and returns to it.

AI · Philosophy · JSON

{
  "twin": {
    "meaning": "Two sides born together; each gives the other its shape.",
    "zh": "雙生",
    "pairs": [
      {
        "en": [
          "Physical",
          "Imaginary"
        ],
        "zh": [
          "實",
          "虛"
        ],
        "reading": "An object and its reflection"
      },
      {
        "en": [
          "Stillness",
          "Motion"
        ],
        "zh": [
          "靜",
          "動"
        ],
        "reading": "The same form at rest and in flight"
      },
      {
        "en": [
          "Complete",
          "Abstract"
        ],
        "zh": [
          "完整",
          "抽象"
        ],
        "reading": "Every detail, and the essence behind it"
      },
      {
        "en": [
          "Square",
          "Circle"
        ],
        "zh": [
          "方",
          "圓"
        ],
        "reading": "One shape: half rule, half flow"
      },
      {
        "en": [
          "Human",
          "Agent"
        ],
        "zh": [
          "人",
          "代理"
        ],
        "reading": "A person and the twin that acts for them"
      }
    ]
  },
  "mark_anatomy": [
    {
      "element": "forest half",
      "color": "#28382D",
      "means": "physical world: rooted, still, complete",
      "zh": "實"
    },
    {
      "element": "cream half",
      "color": "#E5DEC4",
      "means": "imaginary world: light, moving, abstract",
      "zh": "虛"
    },
    {
      "element": "circle",
      "means": "compass: continuity, wholeness, the human",
      "zh": "規"
    },
    {
      "element": "squares",
      "means": "set square: rules, structure, the machine; each half carries a seed of its twin",
      "zh": "矩"
    },
    {
      "element": "centre seed",
      "means": "the one: origin and interface of exchange",
      "zh": "一"
    }
  ],
  "genesis": [
    {
      "en": "One",
      "zh": "一"
    },
    {
      "en": "One begets two",
      "zh": "一生二",
      "is": "twin"
    },
    {
      "en": "Two beget three",
      "zh": "二生三",
      "is": "twin3, the bond between human and agent"
    },
    {
      "en": "Three beget all things",
      "zh": "三生萬物",
      "is": "xHuman.ID, xAgent.ID, TCG cards, SDK, every agent"
    }
  ],
  "principles": [
    "Pair, don't divide",
    "Carry the seed",
    "Circles for people, squares for machines",
    "Grow from the centre"
  ]
}

AI · twin3 mark · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
  <path d="M 512 32 A 480 480 0 0 0 512 992 Z" fill="#28382d"/>
  <path d="M 512 32 A 480 480 0 0 1 512 992 Z" fill="#e5dec4"/>
  <circle cx="512" cy="512" r="480" fill="none" stroke="#28382d" stroke-width="32"/>
  <rect x="200" y="440" width="150" height="150" fill="#e5dec4"/>
  <rect x="670" y="440" width="150" height="150" fill="#28382d"/>
  <path d="M 512 480 A 32 32 0 0 0 512 544 Z" fill="#e5dec4"/>
  <path d="M 512 480 A 32 32 0 0 1 512 544 Z" fill="#28382d"/>
</svg>

01 · Palette

Paper, ink, signal.

Surfaces remain neutral to let content breathe. Saturated signals carry semantic meaning: Human signals and data sovereignty in green; Business agents in tech blue; protocol emphasis and active states in orange.

Paper--bg · #F7F7F4

Panel--bg-sub · #F2F1ED

Raised--bg-raise · #EDECE8

Chip--chip · #E1E0DB

Primary Ink--ink · #26251E

Secondary Ink--ink2 · #55544D

Human Signal--green · #3B9878

Business Signal--blue · #3F6FD8

Protocol Emphasis--accent · #F54E00

L4 Allow Policy--allow · #10B981

L4 Ask Policy--ask · #F59E0B

L4 Deny Policy--deny · #EF4444

AI · Palette · CSS

:root {
  --bg: #F7F7F4;
  --bg-sub: #F2F1ED;
  --bg-raise: #EDECE8;
  --chip: #E1E0DB;
  --ink: #26251E;
  --ink2: #55544D;
  --muted: #787771;
  --green: #3B9878;
  --blue: #3F6FD8;
  --accent: #F54E00;
  --allow: #10B981;
  --ask: #F59E0B;
  --deny: #EF4444;
  --mark-forest: #28382D;
  --mark-cream: #E5DEC4;
  --line: rgba(38, 37, 30, .10);
  --line2: rgba(38, 37, 30, .18);
}

02 · Typography

Two voices. One hierarchy.

Geist anchors narrative headings and body prose. Geist Mono powers machine endpoints, DIDs, protocol telemetry, and structured data tables.

Geist Sans

Human context.
Agent capability.

Headlines and narrative text use regular 400 weight. Hierarchy is established through size, spacing, and geometry rather than heavy font weights.

Geist Mono

256D · 00–FF

did:twin3:bnb:0x892a...f4

Use monospace for machine addresses, status badges, kickers, and code. Dates strictly adhere to YYYY-MM-DD.

Pitch Typography Scale Matrix
Role	Family	Size / Line Height	Weight / Tracking
Display Hero	Geist	56px / 1.05	700 / −0.03em
Section H2	Geist	32px / 1.15	700 / −0.02em
Card H3	Geist	22px / 1.25	750 / −0.02em
Body Lead	Geist	18px / 1.55	400 / −0.005em
Body Regular	Geist	15.5px / 1.55	400 / normal
Kicker Label	Geist Mono	12.5px / 1	600 / 0.08em (Uppercase)
Code & Endpoints	Geist Mono	11px / 1.35	500 / normal

AI · Typography · CSS

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&family=Geist+Mono:wght@400;500&display=swap');
:root {
  --sans: 'Geist', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.t3-display { font: 400 56px/1.05 var(--sans); letter-spacing: -0.03em; }
.t3-h2 { font: 400 32px/1.15 var(--sans); letter-spacing: -0.02em; }
.t3-h3 { font: 500 22px/1.25 var(--sans); letter-spacing: -0.02em; }
.t3-lead { font: 400 18px/1.55 var(--sans); }
.t3-body { font: 400 16px/1.55 var(--sans); }
.t3-kicker { font: 400 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.t3-kicker::before { content: '▸ '; color: #F54E00; }
.t3-code { font: 400 12px/1.35 var(--mono); }

AI · Full tokens stylesheet · CSS

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500&family=Geist+Mono:wght@400;500&display=swap');
:root {
  --bg:#F7F7F4; --bg-sub:#F2F1ED; --bg-raise:#EDECE8; --chip:#E1E0DB;
  --ink:#26251E; --ink2:#55544D; --muted:#787771;
  --green:#3B9878; --accent:#F54E00; --grey:#B9B8B4;
  --line:rgba(38,37,30,.10); --line2:rgba(38,37,30,.18);
  --sans:'Geist',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --W:1600px; --H:900px;
  --bg-paper:var(--bg); --bg-paper-sub:var(--bg-sub);
  --surface:var(--bg-sub); --surface-raised:var(--bg-raise);
  --ink-primary:var(--ink); --ink-secondary:var(--ink2); --ink-muted:var(--muted);
  --font-display:var(--sans); --font-serif:var(--sans); --font-sans:var(--sans);
  --font-ui:var(--sans); --font-mono:var(--mono); --terracotta:var(--accent);
  --hairline:var(--line); --hairline-strong:var(--line2);
  --radius-card:4px; --radius-button:4px; --radius-image:12px;
  --display-lg:52px; --lh-display:1.1; --track-display:-.028em;
  --lh-body:1.55; --track-kicker:.08em; --ease:cubic-bezier(.2,.72,.2,1);
}
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--sans); font-weight:400; text-wrap:balance; }
h1 { font-size:var(--display-lg); line-height:var(--lh-display); letter-spacing:var(--track-display); }
p { color:var(--ink2); text-wrap:pretty; }
b,strong { font-weight:500; }
code,.mono { font-family:var(--mono); }
.t3-kicker { font:400 13px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.t3-kicker::before { content:'▸ '; color:var(--accent); }
.t3-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:4px; font:400 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.t3-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.t3-live { color:var(--green); background:rgba(59,152,120,.12); }
.t3-built { color:var(--muted); background:var(--chip); }
.t3-next { color:var(--accent); background:rgba(245,78,0,.09); }
:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

03 · Brand Architecture

xHuman.ID & xAgent.ID

Twin3 governs two turnkey application brands: xHuman.ID (Personal Agent) and xAgent.ID (Business Agent). Both marks share an identical typographic DNA, matching 432 × 68 canvas proportions, and unified 38px cap-height to guarantee 1:1 optical equality when rendered side-by-side.

Horizontal · Light

SVG PNG

Horizontal · Dark

SVG PNG

xHuman.ID (Personal Agent)

Your sovereign digital twin and privacy gatekeeper. Green brand accent represents human life, soul vectors, and cryptographic personhood.

• Primary Color: #3B9878 (Green) / #65DFB4 (Teal Glow)
• Target Network: BNB Chain
• Available format: Horizontal wordmark
• Square / avatar mark: Not published
• Variants: Light (Paper) & Reversed (Dark / Forest)

Horizontal · Light

SVG PNG

Horizontal · Dark

SVG PNG

xAgent.ID (Business Agent)

24/7 autonomous sales and commerce front desk for SMEs. Blue brand accent represents corporate integrity, GLEIF verification, and Base network rails.

• Primary Color: #3F6FD8 (Tech Blue) / #38BDF8 (Sky Glow)
• Target Network: Base Chain
• Available format: Horizontal wordmark
• Square / avatar mark: Not published
• Variants: Light (Paper) & Reversed (Dark / Forest)

Optical Baseline Alignment Proof

Both marks share identical baseline alignment, x-height, and badge proportions across all container widths:

Shared 38px Baseline & Cap-Height

The twin in product form

xHuman.ID and xAgent.ID are the two sides of the twin3 mark made into products: one for a person, one for a business. Both share one card format, one wordmark system and one machine-readable back. Only the signal colour and the network change.

Personal Agent · BNB Chain

Business Agent · Base

#3B9878Human green#65DFB4Teal glow#26251EInk

#3F6FD8Tech blue#38BDF8Sky glow#26251EInk

Front · for people

Back · agent view

Live embed · select to flip

Back · agent view

Front: full-bleed portrait or video, display name, handle, tagline, Human Score (0–255).
Back: human record, permissions (AI training, commercial use, remix, derivative works), linked profiles, JSON / LLM / policy tabs.
Footer: serial №, micro QR to xhuman.id/<handle>.
Tone: warm and personal. Circles and portraits lead.

Front: claim status, LEI status, company name, official website and agent ID.
Back: AI-readable assets (Agent ID JSON, A2A agent card, design.md, llms.txt, JSON-LD) with their status.
Skin: the card surface takes the company's own brand system; layout, type and zones never change. twin3's own card follows this page: paper front for people, forest back for machines. Partner skin example ↗
Tone: precise and verifiable. Squares and data grids lead.

xHuman.ID brand kit ↓ xAgent.ID brand kit ↓

Select a card to open it at full resolution.

Do

Show both marks at the same height; they share a 38px cap-height and baseline.
Keep green for people and blue for businesses, everywhere: badges, links, charts.
Keep the three card zones and the 5 : 7 ratio in print, web and embeds.
Use the reversed wordmark on dark or photographic surfaces.

Don't

Swap colours between the brands or use the twin3 forest/cream in their badges.
Re-set the wordmark in another typeface or drop the ID badge.
Crop cards to other ratios or round corners beyond 14px.
Show a business card skin as an endorsement: unclaimed profiles must say so.

AI · Brand rules · YAML

brand_system:
  mark:
    colours: {forest: "#28382D", cream: "#E5DEC4"}
    layout: "forest (physical) left, cream (imaginary) right"
    clear_space: "one inner square = 15% of mark width"
    min_size: {screen: 16px, print: 6mm}
    variants: [standard, reversed, mirrored, ink, white]
    never: [recolour, rotate, stretch, outline, shadow, gradient, separate halves, remove squares or seed]
  products:
    xHuman.ID: {role: Personal Agent, colour: "#3B9878", glow: "#65DFB4", chain: BNB Chain}
    xAgent.ID: {role: Business Agent, colour: "#3F6FD8", glow: "#38BDF8", chain: Base}
    wordmark: "Georgia 700, lower-case x in brand colour, ID badge 70x40 radius 10 in brand colour"
    pairing: "same height side by side; shared 38px cap-height and baseline"
    dark_surfaces: "use logo-reversed.svg"
    never: [swap brand colours, use twin3 forest/cream in badges, re-set the wordmark, drop the ID badge]

AI · xHuman.ID wordmark · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362 64" width="362" height="64">
  <style>
    .name-text { font-family: Georgia, serif; font-size: 56px; font-weight: 700; }
    .badge-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 24px; font-weight: 800; }
  </style>
  <text x="4" y="46" class="name-text">
    <tspan fill="#3B9878">x</tspan><tspan fill="#26251E">Human.</tspan>
  </text>
  <rect x="284" y="11" width="70" height="40" rx="10" fill="#3B9878"/>
  <text x="319" y="39" fill="#FFFFFF" class="badge-text" text-anchor="middle">ID</text>
</svg>

AI · xAgent.ID wordmark · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312 64" width="312" height="64">
  <style>
    .name-text { font-family: Georgia, serif; font-size: 56px; font-weight: 700; }
    .badge-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 24px; font-weight: 800; }
  </style>
  <text x="4" y="46" class="name-text">
    <tspan fill="#3F6FD8">x</tspan><tspan fill="#26251E">Agent.</tspan>
  </text>
  <rect x="234" y="11" width="70" height="40" rx="10" fill="#3F6FD8"/>
  <text x="269" y="39" fill="#FFFFFF" class="badge-text" text-anchor="middle">ID</text>
</svg>

04 · Physical Standards

Standard Trading Card (TCG 2.5" × 3.5")

Every Personal and Business Agent manifests as a standard physical collectible trading card (TCG 2.5" × 3.5" / 63.5mm × 88.9mm, 14px die-cut corner radius). Digital cards render as interactive 3D digital twins with identical geometry.

ZONE 1: HEADER (36px) xHuman.ID · SERIES 01

ZONE 2: CORE & MACHINE VIEW (330px) Front: Full-bleed Media, Soul Score (0–255), Name
Back: DID, Endpoints (llms.txt), L4 Shield Rules (Allow/Ask/Deny), L6 Escrow

ZONE 3: FOOTER (50px) № 3518 · QR · ⇄ FLIP

TCG Physical & Digital Convergence Tokens

Dimension	Physical (Print)	Digital Token (CSS)	Sleeve & Binder Compatibility
Width	2.50 inches (63.5 mm)	`340px`	Standard 2.5" × 3.5" Toploader
Height	3.50 inches (88.9 mm)	`476px`	Standard 35pt Magnetic Case
Aspect Ratio	5 : 7 (1 : 1.400)	`aspect-ratio: 2.5 / 3.5;`	Exact physical match
Corner Radius	3.5 mm die-cut	`border-radius: 14px;`	Dragon Shield / Ultra Pro fit
Foil Border	Cold foil sheen	`border: 1.5px solid rgba(255,255,255,0.22);`	Inner specular glow

Complete integration documentation and embed contracts are available in TCG-CARD-SPECIFICATION.md ↗.

AI · Card embed · HTML

<div data-company-card data-host="example.com"></div>
<script defer src="https://xagent.id/assets/company-card-embed.js"></script>

AI · Card skeleton · HTML + CSS

<article class="tcg-card" data-brand="xhuman">
  <header class="tcg-zone tcg-zone-header">
    <img src="https://communication.twin3.ai/assets/brands/xhuman-id/logo-reversed.svg" alt="xHuman.ID" height="14">
    <span class="tcg-series">SERIES 01 · BNB Chain</span>
  </header>
  <div class="tcg-zone tcg-zone-core">
    <img class="tcg-media" src="portrait.jpg" alt="">
    <h3 class="tcg-name">Display Name</h3>
    <p class="tcg-handle">handle</p>
    <p class="tcg-score">Human Score <b>128</b> / 255</p>
  </div>
  <footer class="tcg-zone tcg-zone-footer">
    <span class="tcg-serial">№ 0001</span>
    <img class="tcg-qr" src="qr.svg" alt="xhuman.id/handle">
    <button class="tcg-flip" type="button">⇄ Flip</button>
  </footer>
</article>
<style>
.tcg-card { width: 340px; aspect-ratio: 2.5 / 3.5; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.22); background: linear-gradient(155deg, #131b28, #0d121b); color: #f1f5f9; display: grid; grid-template-rows: 36px 1fr 50px; padding: 14px; box-sizing: border-box; }
.tcg-card[data-brand="xhuman"] { --tcg-accent: #65DFB4; }
.tcg-card[data-brand="xagent"] { --tcg-accent: #60A5FA; }
.tcg-zone { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tcg-zone-core { flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.tcg-series, .tcg-handle, .tcg-serial { font: 11px ui-monospace, Menlo, monospace; color: #94a3b8; }
.tcg-name { font: 700 22px/1.2 system-ui, sans-serif; margin: 0; }
.tcg-score b { color: var(--tcg-accent); }
</style>

AI · Canonical card stylesheet · CSS

:root {
  --tcg-card-width: 340px;
  --tcg-card-height: 476px;
  --tcg-aspect-ratio: 2.5 / 3.5;
  --tcg-border-radius: 14px;
  --tcg-border: 1.5px solid rgba(255, 255, 255, 0.22);
  --tcg-box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
  --tcg-inner-glow: inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.4);
  --tcg-bg-card: #0d121b;
  --tcg-bg-back: linear-gradient(155deg, #131b28 0%, #0d121b 100%);
  --tcg-ink: #f1f5f9;
  --tcg-muted: #94a3b8;
  --tcg-muted-dim: #64748b;
  --tcg-accent-human: #65dfb4;
  --tcg-accent-agent: #60a5fa;
  --tcg-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.tcg-card-stage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.tcg-card-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transform-origin: top center;
}

.tcg-card-perspective {
  perspective: 1200px;
  display: flex;
  justify-content: center;
}

.tcg-card {
  width: var(--tcg-card-width) !important;
  max-width: var(--tcg-card-width) !important;
  min-width: var(--tcg-card-width) !important;
  height: var(--tcg-card-height) !important;
  max-height: var(--tcg-card-height) !important;
  min-height: var(--tcg-card-height) !important;
  aspect-ratio: var(--tcg-aspect-ratio) !important;
  border-radius: var(--tcg-border-radius) !important;
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
}

.tcg-card-face {
  position: absolute;
  inset: 0;
  width: var(--tcg-card-width) !important;
  height: var(--tcg-card-height) !important;
  border-radius: var(--tcg-border-radius) !important;
  border: var(--tcg-border) !important;
  box-shadow: var(--tcg-box-shadow), var(--tcg-inner-glow) !important;
  box-sizing: border-box;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tcg-card-rim {
  position: absolute;
  inset: 0;
  border-radius: var(--tcg-border-radius);
  pointer-events: none;
  z-index: 10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.tcg-flip-control {
  display: flex;
  justify-content: center;
}

.tcg-flip-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--tcg-muted);
  border-radius: 999px;
  padding: 6px 16px;
  font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tcg-flip-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--tcg-ink);
  border-color: rgba(255, 255, 255, 0.24);
}

.tcg-footnote {
  margin: 0;
  text-align: center;
  font-size: 11px;
  color: var(--tcg-muted-dim);
}

05 · Visual in Context

One mark, every medium.

Each scenario applies the philosophy directly: a split field for the physical and the imaginary, the mark at the seam, circles for people and squares for data. Previews below are the actual files in the media kits.

Link preview (Open Graph)

Paper field, mark top-left, two-line promise with the second line in accent. Concentric rings with a single square as quiet texture.

1200 × 630 · safe margin 80px

X / Twitter header

Forest and cream meet at the centre axis; the mirrored mark sits on the seam so each half lands on its twin colour. Keep the lower-left clear for the profile avatar.

1500 × 500 · avatar zone lower-left 400 × 200

Vertical story / Reels cover

Physical on the left, imaginary on the right; the word block is paper so it belongs to neither side. Top 250px and bottom 340px stay free of UI overlap.

1080 × 1920 · 9:16

Presentation title

Paper slide, Geist 96px title, accent on the second line, mono footer rule. Section dividers flip to forest; the closing slide returns to the split.

1920 × 1080 · margins 96px

Video end card & motion

Motion grows from the centre seed: rings expand, the two halves slide together, then hold 2s. Lower-thirds use a forest plate with the reversed mark.

1920 × 1080 · hold ≥ 2s · watermark 256px

Business card

Front on paper with name and mono details; back is the split field with the mirrored mark. Both files include 3mm bleed and a dashed die line.

90 × 54 mm trim · 96 × 60 mm with bleed

Sticker & merchandise

The mark alone on a cream disc. For apparel, print one colour: forest on light fabric, cream on dark fabric, using the knockout mark.

60 mm die-cut circle · min 6 mm in print

Letterhead & documents

Small mark and wordmark top-left, hairline rules top and bottom, dates in YYYY-MM-DD. Body in Geist 11pt.

A4 210 × 297 mm · margins 20 mm

App icon, favicon & avatar

Use the square avatar file for social profiles so circle crops never show a white edge. Favicons down to 16px keep the squares legible.

16 · 32 · 48 · 180 · 192 · 512 px

Do

Keep clear space equal to one inner square (15% of mark width).
Use the mirrored mark on split forest/cream fields.
Use the reversed mark (cream outline) on forest or dark photos.
Keep the vertical axis upright: left is physical (forest), right is imaginary (cream).

Don't

Recolour the mark with interface colours (green, blue, orange).
Rotate, stretch, outline or add shadows and gradients.
Separate the halves or remove the squares or centre seed.
Render smaller than 16px on screen or 6mm in print.

AI · Scenario specs · YAML

media:
  og_card: {size: 1200x630, bg: paper, rule: "mark top-left, two-line promise, 80px margin"}
  x_header: {size: 1500x500, rule: "forest|cream split at centre, mirrored mark on seam, keep lower-left 400x200 clear"}
  linkedin_banner: {size: 1584x396, bg: paper}
  instagram_post: {size: 1080x1080, rule: "mark centred, wordmark and genesis line below"}
  story: {size: 1080x1920, rule: "physical left, imaginary right; keep top 250px and bottom 340px free"}
  slides: {size: 1920x1080, margins: 96px, rule: "paper title, forest section divider, split closing"}
  video_end_card: {size: 1920x1080, hold: ">= 2s", motion: "grows from the centre seed"}
  business_card: {trim: 90x54mm, bleed: 3mm, rule: "paper front, split back with mirrored mark"}
  sticker: {size: 60mm die-cut, rule: "mark on cream disc"}
  letterhead: {size: A4, margins: 20mm}
  icons: {sizes: [16, 32, 48, 180, 192, 512], rule: "square avatar file for social profiles"}

06 · Media Kits

Ready-to-use packs by medium.

Every pack contains editable SVG sources, rendered PNGs and a README with usage rules. Replace placeholder text before publishing.

Social mediaOG card, X header, LinkedIn banner, Instagram post and story.ZIP · SVG + PNG ↓ PresentationTitle, section divider and closing slides at 16:9.ZIP · SVG + PNG ↓ Video & motionEnd card, transparent lower-third and corner watermark.ZIP · SVG + PNG ↓ PrintBusiness card front and back, sticker, A4 letterhead. Millimetre SVGs with bleed.ZIP · SVG + PNG ↓ Web & productFavicons, square avatar, email signature and five mark variants.ZIP · SVG + PNG + ICO ↓ Complete media kitAll five packs in one archive.ZIP · ALL ↓

AI · Kit URLs · YAML

social: https://communication.twin3.ai/assets/media/twin3-social-kit.zip
presentation: https://communication.twin3.ai/assets/media/twin3-presentation-kit.zip
video: https://communication.twin3.ai/assets/media/twin3-video-kit.zip
print: https://communication.twin3.ai/assets/media/twin3-print-kit.zip
web: https://communication.twin3.ai/assets/media/twin3-web-kit.zip
all: https://communication.twin3.ai/assets/media/twin3-media-kit-all.zip
xhuman_id: https://communication.twin3.ai/assets/brands/xhuman-id-brand-kit.zip
xagent_id: https://communication.twin3.ai/assets/brands/xagent-id-brand-kit.zip

07 · Assets & Specifications

Downloads & Developer Resources

All assets and canonical specifications are kept synchronized with the production deployment.

Full page as design.md (for people and agents) MD ↗ AI agent index llms.txt ↗ Machine-readable design system JSON ↗ TCG Card Specification MD ↗ Canonical TCG Card Stylesheet CSS ↗ Pitch Tokens Stylesheet CSS ↗ xHuman.ID Horizontal Logo SVG ↗ xHuman.ID Horizontal Dark Logo SVG ↗ xHuman.ID Retina Raster PNG ↗ xHuman.ID Dark Retina Raster PNG ↗ xAgent.ID Horizontal Logo SVG ↗ xAgent.ID Horizontal Dark Logo SVG ↗ xAgent.ID Retina Raster PNG ↗ xAgent.ID Dark Retina Raster PNG ↗ twin3 Protocol Logo SVG ↗ xHuman.ID Complete Brand Kit ZIP ↓ xAgent.ID Complete Brand Kit ZIP ↓ Complete Pitch Design Kit ZIP ↗

AI · Agent files · YAML

design_md: https://communication.twin3.ai/design.md
design_json: https://communication.twin3.ai/twin3-design.json
llms_txt: https://communication.twin3.ai/llms.txt
tokens_css: https://communication.twin3.ai/assets/twin3-tokens.css
tcg_spec: https://communication.twin3.ai/assets/tcg-card-specification.txt
tcg_css: https://communication.twin3.ai/assets/tcg-card.css
xhuman_id_horizontal_light: https://communication.twin3.ai/assets/brands/xhuman-id/logo.svg
xhuman_id_horizontal_dark: https://communication.twin3.ai/assets/brands/xhuman-id/logo-reversed.svg
xhuman_id_square_mark_status: not_published
xagent_id_horizontal_light: https://communication.twin3.ai/assets/brands/xagent-id/logo.svg
xagent_id_horizontal_dark: https://communication.twin3.ai/assets/brands/xagent-id/logo-reversed.svg
xagent_id_square_mark_status: not_published

Born as twins.Designed as one.

Twin, then three.

Every thing is born with its twin

Design principles that follow

Paper, ink, signal.

Two voices. One hierarchy.

xHuman.ID & xAgent.ID

xHuman.ID (Personal Agent)

xAgent.ID (Business Agent)

Optical Baseline Alignment Proof

The twin in product form

Do

Don't

Standard Trading Card (TCG 2.5" × 3.5")

TCG Physical & Digital Convergence Tokens

One mark, every medium.

Link preview (Open Graph)

X / Twitter header

Vertical story / Reels cover

Presentation title

Video end card & motion

Business card

Sticker & merchandise

Letterhead & documents

App icon, favicon & avatar

Do

Don't

Ready-to-use packs by medium.

Downloads & Developer Resources

Born as twins.
Designed as one.