Docs menu

YONDER docs

Brand

YONDER: your piece lands where only you can find it. The name is the destination, not the route. Buy the coin, and the piece is delivered to a one-time stealth address that only your wallet keys can open.

Status

The mark

A stealth helmet bust with a single glowing visor line: the mark and the motion both come from that one idea. Matte black ceramic is the machine and the frame. Lime is the visor, the coin and the piece it delivers. The collectible reads as quiet hardware built to disappear, precise rather than loud.

The tile above is the site's own illustrative preview, drawn by docs/js/docs-tile.js. It is not what the contract draws; see the palette note below.

Colour tokens

The site's own chrome, the black terminal-night pages this documentation and the landing page sit on. Dark theme only.

Ground#0B0D0C
Ink#E9F2ED
Ink soft#8FA39A
Accent#8EE303
Accent deep#5FA300
Tint#141816
Glow#8EE303
Card#141816
TokenMeaning
--groundThe page background. Near-black terminal night, never pure white.
--inkText and quiet parts. The near-white that reads as the site's real foreground.
--accentThe visor, the coin and the piece. The one lime that appears as fill.
--accent-deepThe only green allowed to carry text, when green text is needed at all.
--tintThe panel and card surface, for callouts, code and the glass pane's darkest shade.
--glowGlow and highlight only, such as the active page marker. Never used for text.
--cardDark panel. The helmet's plinth and the frame.

Piece artwork palette

Two different pictures share the name "the piece," and they are not the same drawing. The illustrative tile these docs use to preview every trait combination is a shared family renderer, all flat fills, no gradients, no filters and no outlines. What the collection contract itself draws is much simpler: it does not encode the four traits at all. contracts/src/YonderCollection.sol mints with a plain on-chain image, one rounded square tinted by a hue taken from the token's id and the stealth address it sits at, over a near-black background, with a plain word marking the piece's state. No frame, glass, character or headwear appears in that on-chain image; the four traits live only in this site's preview arithmetic.

GroupHex valuesWhere it is used
Ground#0B1518The on-chain tile's own background, behind everything.
Hue squarehsl(hue, 55%, 44%)The one panel the contract draws, its hue picked by the token's id and stealth address, not by any trait.
Centre mark#EFFFEBA plain circle at the centre of every on-chain piece.
State label#0B1518The plain word (for example "STEALTH") printed under the circle.

The lime, white and deep-green palette used on this site's illustrative tiles belongs to the shared preview renderer, not to the deployed contract; it is not repeated here so the two are not mistaken for one artwork.

Type

Display headings set in Geologica. Body copy in Public Sans. Mono only where the content is machine data: hashes, addresses, amounts and code, never for ordinary prose.

Do and do not

Do

  • Let the object (the hook, the piece) carry the page. Chrome stays quiet.
  • Write plain words a stranger can read in seconds.
  • Design phone first. 390 and 360 are the real canvas.
  • Use mono only for real data.

Do not

  • Add a colour outside the tokens or the piece palette above, a gradient on text, or a glassmorphism blur.
  • Use beige, brown, or a random colour tangent.
  • Stack a card inside a card, or use a side-stripe border for emphasis.
  • Use developer jargon in a label a buyer will read.