---
name: twin3-design
description: The complete twin3 design guidelines (communication.twin3.ai) as one file - philosophy, logo, colour, typography, brand marks, TCG cards, application scenarios and media kits.
version: 2.2
updated: 2026-09-27
canonical: https://communication.twin3.ai/
machine_readable: https://communication.twin3.ai/twin3-design.json
agent_index: https://communication.twin3.ai/llms.txt
user-invocable: true
---

# twin3 Design Guidelines · v2.2

This file mirrors every section of https://communication.twin3.ai/ in order. English is primary; Chinese terms are given in parentheses as reference.

## 00 · Philosophy: Twin, then three

### Twin (雙生)

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 gives the other its shape.

| Pair | Visual reading | Chinese |
| --- | --- | --- |
| Physical · Imaginary | An object and its reflection | 實 · 虛 |
| Stillness · Motion | The same form at rest and in flight | 靜 · 動 |
| Complete · Abstract | Every detail, and the essence behind it | 完整 · 抽象 |
| Square · Circle | One shape: half rule, half flow | 方 · 圓 |
| Human · Agent | A person and the twin that acts for them | 人 · 代理 |

These are not opposites to choose between. Each is one thing seen from two sides.

### Reading the mark

1. **Two colours.** Forest `#28382D` is the physical world: rooted, still, complete. Cream `#E5DEC4` is the imaginary world, as in the imaginary part of a complex number: light, moving, abstract. A complex number needs both parts to be whole; so does a person with an agent.
2. **The circle (規, the compass).** Continuity and wholeness, the human life without corners. One outline holds both halves: two worlds, one boundary.
3. **The squares (矩, the set square).** Rules, structure, machine precision. Each half holds a square in the other half's colour: every world carries a seed of its twin. Circle and square in one mark means human and machine are compatible.
4. **The centre seed (一, the one).** The split dot where the halves touch: the origin, and the interface through which they exchange.

### Three (三生萬物)

- **One** (一): a single point of identity, the centre of the mark.
- **One begets two** (一生二, twin): the seed divides into the physical and the 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** (三生萬物): every connection and application grows from the bond - xHuman.ID, xAgent.ID, TCG cards, the SDK and every agent built on it.

### Principles

- **Pair, don't divide.** Human and agent side by side with equal weight. Split layouts meet at a clean vertical axis, never a diagonal.
- **Carry the seed.** Each side quotes the other: cream on forest, forest on cream. One colour never stands alone for a whole composition.
- **Circles for people, squares for machines.** Round forms frame human content; squares and grids frame data, protocol and code.
- **Grow from the centre.** Compose outward from one point: concentric rings, radiating links. Motion starts at the seed and returns to it.

## 01 · Palette: paper, ink, signal

| Token | Value | Use |
| --- | --- | --- |
| `--bg` | `#F7F7F4` | Paper, main surface |
| `--bg-sub` | `#F2F1ED` | Panel |
| `--bg-raise` | `#EDECE8` | Raised panel |
| `--chip` | `#E1E0DB` | Chip, tag |
| `--ink` | `#26251E` | Primary text |
| `--ink2` | `#55544D` | Body text |
| `--muted` | `#787771` | Supporting text |
| `--green` | `#3B9878` | Human signal, live |
| `--blue` | `#3F6FD8` | Business signal |
| `--accent` | `#F54E00` | Protocol emphasis, next |
| `--allow` / `--ask` / `--deny` | `#10B981` / `#F59E0B` / `#EF4444` | L4 policy states |
| `--line` / `--line2` | `rgba(38,37,30,.10)` / `.18` | Hairlines |

Mark colours are fixed at forest `#28382D` and cream `#E5DEC4` and are never recoloured with interface colours. Small text uses `--ink` or `--ink2`; signal colours do not all meet normal-text contrast.

## 02 · Typography: two voices, one hierarchy

Geist for headings and prose; Geist Mono for endpoints, DIDs, labels, kickers and data. Dates are `YYYY-MM-DD`.

| Role | Family | Size / line height | Weight / tracking |
| --- | --- | --- | --- |
| Display hero | Geist | 56px / 1.05 | 400–700 / −0.03em |
| Section H2 | Geist | 32px / 1.15 | 400 / −0.02em |
| Card H3 | Geist | 22px / 1.25 | 400–500 / −0.02em |
| Body lead | Geist | 18–21px / 1.5 | 400 |
| Body | Geist | 15.5–16px / 1.55 | 400 |
| Kicker | Geist Mono | 12.5–13px | uppercase / 0.08em, orange `▸` prefix |
| Code, endpoints | Geist Mono | 11–12px / 1.35 | 400–500 |

Hierarchy comes from size and spacing, not heavy weights. Emphasis in headlines is orange upright text, never italics or gradients.

## 03 · Brand architecture

twin3 governs two application brands with identical typographic DNA, matching canvas proportions and a shared 38px cap-height for optical equality side by side:

- **xHuman.ID** (Personal Agent): green `#3B9878` / teal glow `#65DFB4`, BNB Chain.
- **xAgent.ID** (Business Agent): tech blue `#3F6FD8` / sky glow `#38BDF8`, Base.

Each brand publishes two canonical mark lockups:
1. **Horizontal · Light** (`logo.svg` / `logo.png`): Primary wordmark for light/paper surfaces.
2. **Horizontal · Dark** (`logo-reversed.svg` / `logo-reversed.png`): Reversed wordmark for dark/forest surfaces.

No square or avatar mark is published for either brand. Keep the horizontal wordmark intact; do not crop or stack it to force a square format.

### xHuman.ID and xAgent.ID in detail

The two product brands are the twin in product form: one for a person, one for a business. One card format, one wordmark system, one machine-readable back; only the signal colour and network change.

| | xHuman.ID | xAgent.ID |
| --- | --- | --- |
| Role | Personal Agent | Business Agent |
| Colour / glow | `#3B9878` / `#65DFB4` | `#3F6FD8` / `#38BDF8` |
| Network | BNB Chain | Base |
| Horizontal Marks | `logo.svg` (light) / `logo-reversed.svg` (dark) | `logo.svg` (light) / `logo-reversed.svg` (dark) |
| Card front | Portrait or video, name, handle, tagline, Human Score 0–255 | Claim status, LEI status, company name, website, agent ID |
| Card back | Human record, permissions, linked profiles, JSON / LLM / policy | AI-readable assets (Agent ID JSON, A2A card, design.md, llms.txt, JSON-LD) |
| Tone | Warm, personal; circles and portraits | Precise, verifiable; squares and grids |
| Kit | `assets/brands/xhuman-id-brand-kit.zip` | `assets/brands/xagent-id-brand-kit.zip` |

**One card, one embed.** Every site (xagent.id, twin3.ai, communication.twin3.ai and, after the Human ID handoff, xhuman.id) renders cards with the single official embed. Never copy card HTML, CSS or data into a site.

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

Select or press Enter to flip. Hosts may send `xagent-card:flip` to the element and listen for `xagent-card:flipped`.

xAgent.ID card surfaces take the company's own brand colour; layout, type and zones never change. twin3's own card follows this design system: Geist and Geist Mono, a paper `#F7F7F4` front with the twin3 mark, a forest `#28382D` back with cream text, orange `#F54E00` only for status.

**Do:** show both marks at the same height; green for people and blue for businesses everywhere; keep the three zones and 5 : 7 ratio; reversed wordmark on dark.
**Don't:** swap colours between brands or use twin3 forest/cream in their badges; re-set the wordmark or drop the ID badge; crop to other ratios or round beyond 14px; present an unclaimed business card as an endorsement.

## 04 · Physical standard: TCG card 2.5" × 3.5"

| Dimension | Print | CSS |
| --- | --- | --- |
| Width × height | 63.5 × 88.9 mm | `340px × 476px` |
| Aspect ratio | 5 : 7 | `aspect-ratio: 2.5 / 3.5` |
| Corner radius | 3.5 mm die-cut | `border-radius: 14px` |
| Foil border | cold foil | `1.5px solid rgba(255,255,255,.22)` |

Zones: header 36px, core and machine view 330px, footer 50px. Spec: https://communication.twin3.ai/assets/tcg-card-specification.txt · CSS: https://communication.twin3.ai/assets/tcg-card.css

## 05 · Visual in context

| Medium | Size | Rule |
| --- | --- | --- |
| Link preview (OG) | 1200 × 630 | Paper field, mark top-left, two-line promise, 80px margin |
| X header | 1500 × 500 | Split forest/cream at centre, mirrored mark on the seam, keep lower-left 400 × 200 clear |
| LinkedIn banner | 1584 × 396 | Paper, text centred-left, mark right |
| Instagram post | 1080 × 1080 | Mark centred, wordmark and the three-line genesis below |
| Story / Reels | 1080 × 1920 | Physical left, imaginary right; keep top 250px and bottom 340px free |
| Slides | 1920 × 1080 | Paper title, forest section dividers, split closing slide, 96px margins |
| Video | 1920 × 1080 | End card holds ≥ 2s; motion grows from the seed; lower-third on a forest plate |
| Business card | 90 × 54 mm (+3 mm bleed) | Paper front, split back with mirrored mark |
| Sticker | 60 mm die-cut | Mark on a cream disc; one-colour print on apparel |
| Letterhead | A4, 20 mm margins | Small mark top-left, hairline rules |
| Icons | 16–512px | Use the square avatar file for social profiles |

**Do:** clear space = one inner square (15% of mark width); mirrored mark on split fields; reversed mark (cream outline) on forest or dark photos; keep the axis upright with physical (forest) on the left.

**Don't:** recolour, rotate, stretch, outline, shadow or gradient the mark; separate the halves or drop the squares or seed; render below 16px on screen or 6 mm in print.

Mark variants: `standard`, `reversed`, `mirrored`, `ink`, `white` (in the web kit).

## 06 · Media kits

All under `https://communication.twin3.ai/assets/media/`. Each contains SVG sources, PNG renders and a README.

- `twin3-social-kit.zip` - OG card, X header, LinkedIn banner, Instagram post and story
- `twin3-presentation-kit.zip` - title, section and closing slides
- `twin3-video-kit.zip` - end card, transparent lower-third, watermark
- `twin3-print-kit.zip` - business card front and back, sticker, A4 letterhead
- `twin3-web-kit.zip` - favicons, ICO, square avatar, email signature, five mark variants
- `twin3-media-kit-all.zip` - everything

## 07 · Downloads and files for agents

- `design.md` - this file, the whole page in Markdown
- `twin3-design.json` - tokens, philosophy, rules and asset URLs as structured data
- `llms.txt` - index for AI agents
- `assets/twin3-tokens.css`, `assets/twin3-logo.svg`, `assets/twin3-logo-avatar.svg`, `assets/twin3-design-kit.zip`
- `assets/brands/xhuman-id/` - `logo.svg`, `logo.png`, `logo-reversed.svg`, `logo-reversed.png`
- `assets/brands/xagent-id/` - `logo.svg`, `logo.png`, `logo-reversed.svg`, `logo-reversed.png`
- `assets/brands/xhuman-id-brand-kit.zip`, `assets/brands/xagent-id-brand-kit.zip` - complete kits
- `legacy.html` - v1 Forest / Cream archive; do not mix with v2

For agents: treat the fixed values here (colours, sizes, do/don't) as constraints. Placeholder text in kit files (Your Name, YYYY-MM-DD) must be replaced before publishing.