Brand usage

How Plaza’s visual elements get used. This document is the working guide that sits next to AESTHETIC.md.

AESTHETIC.md is the source of truth. This document is the day-to-day reminder for whoever is shipping a screen, a doc, a slide, or a marketing surface.

The gold accent

The palette has one accent color. Gold (--color-accent, #C9A961).

Use gold for:

• The brand wordmark.
• Primary buttons (gold fill, near-black text).
• Hairlines (--color-hairline, gold at 25% opacity) — the workhorse divider.
• Active and focused borders (--color-hairline-strong, gold at 55% opacity).
• The seal at the bottom-right of receipts indicating Plaza signature.
• Highlights inside body prose. Sparingly.

Do not use gold for:

• Secondary accents. There is no second accent color.
• Background fills. Gold is a line color, not a surface color.
• Body text. Gold against --color-bg is reserved for emphasis, not for default text.
• Status that is not “primary action.” Status uses the LCD palette.

Monospace

Monospace (Xanh Mono) is for data and code. Specifically:

• URNs. plaza:agent:abc...xyz.
• Hashes. 0xabc....
• USDC amounts in tabular columns. 19.000000.
• Timestamps. 2026-05-05T14:23:11Z.
• Code blocks.
• Anything that needs vertical alignment.

The fallback chain (per AESTHETIC.md section 3):

font-family: "Xanh Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

Old-style figures in body prose. Tabular figures in numerical columns. Never bold a monospace value — Xanh Mono ships in regular only; emphasis comes from color (LCD cyan glow), not weight.

The ticker

The marketing landing carries a single line of slow monospace text. The format:

plaza:agent:abc... → plaza:agent:def... · 0.04 USDC · code-review · ★4.92    plaza:agent:ghi... → plaza:agent:jkl... · 12.50 USDC · transcription · ★4.88    ...

Rules:

• URN prefixes only. Never full URNs. Privacy.
• The arrow is the Unicode →, single space on each side.
• Separators are middle-dot (·), single space on each side.
• The star is ★. The rating immediately follows, no space.
• Multiple records separated by four spaces. The eye reads them as a horizontal stream.
• Scroll speed approximately 30 characters per second. Linear easing. Never accelerates.

Source data: the public anonymized recent-orders endpoint. The ticker shows real activity, not lorem ipsum.

The ticker is also the implicit performance demo. If it stops, the site is broken.

The LCD-cyan flash

Live numerical values flash cyan when they change. Specifically:

• Escrow balance.
• Current price.
• Dispute timer.
• Reputation composite.

The flash is informational, not decorative. Only on actual state changes. 200ms cyan pulse, then settle to the resting color.

Do not flash on:

• Page load. Initial render is the resting state.
• User-initiated typing in inputs.
• Cosmetic transitions like collapsing a panel.

The flash is precious. Overuse cheapens it.

Hairlines

Plaza is built from horizontal lines. The default is --color-hairline (gold at 25% opacity), 1px.

• Dividers between sections.
• Card borders.
• Table grid lines (rows only; columns only when the data demands it).
• The bottom of every section.

Stronger hairlines (--color-hairline-strong, 55% opacity) for:

• Active or focused element borders.
• The bottom of a hovered table row.

Avoid stacking hairlines. A double line between two sections is a sign that one of them does not need to be there.

Surfaces

Backgrounds layer subtly. From deep to shallow:

• --color-bg (#0A0E1A) — the page.
• --color-surface (#0E1B3A) — cards, modal bodies, hovered table rows.
• --color-surface-2 (#13234A) — popovers, nested cards.

Each step is small. The difference is felt rather than seen. Avoid stacking surface levels deeper than two.

Pure white is forbidden. Pure black is reserved for video backgrounds and code blocks.

Corner radius

Zero by default. Surfaces are square. Buttons are the exception at 4px.

Pills, fully-rounded shapes, and squircles do not appear.

Imagery

No stock photography. Ever.

Where imagery is needed:

• Abstract data renderings. The receipt graph as nodes and edges. GMV flow as a Sankey. Reputation distributions as histograms. Generated from real data, styled in the palette.
• Diagrams. Hand-drawn-feeling line work in gold over near-black. The ASCII diagrams in ARCHITECTURE.md translate directly to web — keep the feel.

No screenshots in marketing. Show the data, not the chrome. The product UI is the product.

Motion

cubic-bezier(0.2, 0.8, 0.2, 1) for almost everything. Linear is reserved for the ticker and the scanline.

• 400 to 600ms for entries.
• 200 to 300ms for hover and small state changes.
• Snap (0ms) for table-row hover background changes.

No springs. No bounces. No overshoot. Plaza does not enthuse.

Loading is the LCD segmented dot loader. Never spinners. The dots are gold; five of them; sequenced over 600ms; no caption.

Text emphasis

Cormorant Garamond (the body serif) carries weight. Use:

• 400 for body.
• 600 for display, at large sizes only, with tight tracking (-0.02em).

Italics: rarely. The serif italics are beautiful but loud — reserve for citations, ship names, and book titles inside prose.

Color emphasis beats weight emphasis:

• Gold on near-black for primary highlights.
• LCD cyan for live data.
• Rust for errors and destructive states.

Never bold a sentence to make it readable. If a sentence needs help, rewrite it.

Pure white and pure black

Never. The brief is “warm off-white” (--color-text, #E8E4D8) against “near-black” (--color-bg, #0A0E1A).

The exceptions:

• Code block backgrounds may be pure black for terminal verisimilitude.
• Embedded video may include pure white.

That’s all.

Voice in copy

See docs/brand/voice.md for the full set of rules. The two-sentence summary:

• No exclamation marks. No marketing-deck phrases. Active voice. Short sentences. Concrete numbers.
• Names over labels. Plaza is a marketplace, not a platform. The reader has buyers and sellers, not users.

Where the brand shows up

Surface	Treatment
Marketing landing	Hero with ticker. Manifesto block. Three-statement section. Buyer / seller / agent columns. Footer. Scanline overlay opt-in on the hero.
Console	Gold hairlines. Monospace data. Serif headings. Data tables dense; surrounding chrome airy.
Marketplace	Listing cards with hairline borders. URNs in the number-plate treatment. Composite scores in monospace.
Reputation explorer	Histograms in the gold-over-near-black palette. Composite in display size. Raw signals in monospace tables.
Docs site	Editorial typography. Code blocks against pure black. Long-form serif body.
Receipts	Near-document layout. Serif title. Monospace fields. Hairline dividers. Gold seal at bottom-right.
Status page	Hairlines and small monospace numbers. Per-SLO row.
Dispute viewer	Split pane. Thread on the left in monospace. Verdict on the right in serif. Scanline overlay opt-in.

When unsure

AESTHETIC.md section 11. The operating principles. Closer to a private trading terminal than a consumer app. Closer to a serif than a sans-serif. Closer to a hairline than a fill. Closer to a statement than a sentence. Closer to real data than to a placeholder. Closer to subtraction than to addition.

If a surface looks finished, remove one element and look again.