Silent payments
A fresh address every time.
Loading page…
Loading page…
The reusable content language promoted from apps/website into @coldharbor/ui. These components preserve the site's motivated hover states and print hierarchy while resolving every reusable decision through shared tokens. Campaign artwork, pinned scroll scenes, and page choreography remain website-owned composition.
Labels, a centered tick rule, corner studs, and a real status indicator. They are server-safe; the relay pulse freezes under reduced motion.
Corner marks decorate the plate without stealing pointer events or entering the accessibility tree.
<DossierLabel tone="vermilion">Article IV</DossierLabel>
<DossierRelayStatus label="Relay online" />
<DossierRule ornament="✦" />
<DossierCornerTicks />--ch-font-family-mono--ch-ornament--ch-primary--ch-info--ch-fg-mutedThe website's exact editorial stack: Reglo for compressed display titles, Pirata for the human script line, and Ioskeley Mono for metadata. Sizes are fluid, balanced, and bounded rather than tied to one screenshot.
A fresh destination
every time.
Unlinkable destinations
The separator is part of the heading component, so the red bearing tick never drifts away from its title.
<DossierMetaLabel items={["Protocol 352"]} separator="star" ornaments="ends" surface="ink" />
<DossierTitle size="lg" tone="bone">One public code.</DossierTitle>
<DossierSubtitle tone="bone">A fresh destination every time.</DossierSubtitle>--font-reglo--font-pirata--ch-font-family-mono--ch-primary--ch-fgSolid ink, paper-filled outline, and inline ledger treatments share one accessible copy interaction. Press any copy value to see the struck COPIED stamp; assistive technology receives the same confirmation through a live region.
Ledger output:
<DossierCopyField value={address} variant="outline">{shortAddress}</DossierCopyField>
<DossierCopyField value={address} variant="inline" />
<DossierInput variant="ink" aria-label="Payment code" />The fieldset is semantic HTML. Its centered legend naturally interrupts the outer keyline, while a pointer-inert inner rule creates the printed double frame.
<DossierFieldset legend="Output ledger (unlinkable destinations)">
<DossierSpecTable rows={rows} />
</DossierFieldset>The shield is available as a brass outline or a solid vermilion heraldic chip. Compass pins preserve the map's engraved rings, bearing glow, ink label, stem, and bead.
<DossierCoinShield glyph="₿" label="Bitcoin" variant="outline" />
<DossierCoinShield glyph="ɱ" label="Monero" variant="filled" tone="vermilion" />
<DossierCompassPin label="Relay" tone="relay" />Dispatch is a navigation link, not a default Button style. Hover lifts the cut plate and advances the terminal glyph; chapter navigation draws its rule from the reading edge. Both expose visible keyboard focus.
Hover, focus, press, and active states are intrinsic to the components.
<DossierDispatchLink href="/wallet">
Enter the wallet <span aria-hidden>↗</span>
</DossierDispatchLink>
<DossierChapterLink href="#security" active={section === "security"}>
Security
</DossierChapterLink>--ch-primary--ch-primary-hover--ch-primary-fg--ch-focus--ch-motion-duration-fast--ch-motion-ease-outThese layout primitives use CSS only. Split and rail compositions remain stacked on narrow or near-square viewports, and only become columns when both width and landscape aspect are safe. Cards use intrinsic auto-fit without breakpoint bookkeeping.
Stack first. Split only when the frame can hold both panels without compressing their reading measure.
No resize observer, duplicated markup, or JavaScript media-query state.
Resize the styleguide: the pair remains one column until at least 48rem and a 23:20 aspect ratio.
<DossierResponsiveGrid layout="split">…</DossierResponsiveGrid>
<DossierResponsiveGrid layout="rail">…</DossierResponsiveGrid>
<DossierResponsiveGrid layout="cards" compact>…</DossierResponsiveGrid>Two content structures from the website hero: concise proof points warm on hover; numbered article summaries establish the next reading sequence without becoming cards.
A fresh address every time.
Secrets never leave your device.
Privacy is structural, not a mode.
<DossierFeatureRail items={[
{ label: "No telemetry", icon: <Radio /> },
]} />
<DossierArticleRail items={[
{ number: "01", title: "Silent payments", body: "A fresh address every time." },
]} />Hover or keyboard-focus the card: its course note surfaces, the plate lifts, medallion keyline warms, and folded corner opens. tilt only sets the resting registration angle.
<DossierWaypointCard
href="#technology"
number="03"
title="Technology"
description="Local-first architecture"
note="Local-first, always."
marker={<Anchor />}
tilt={-0.4}
/>--ch-paper-bone--ch-ornament--ch-primary--ch-bg--ch-shadow-raiseA native details/summary control: keyboard and screen-reader behavior remain platform-native. Give siblings the same group name to enforce a one-open-at-a-time dossier without client state.
Keys are generated by the device and never serialized into an application service.
Transactions are signed in local memory; only signed bytes leave the device.
Open either boundary; the matching native name closes its sibling.
<DossierDisclosure
group="trust-boundaries"
number="01"
label="Key creation, on device"
detail="Keys never leave the device."
marker={<KeyRound />}
/>--ch-primary--ch-primary-hover--ch-ornament--ch-surface--ch-fg--ch-fg-mutedUse these exports for reusable website-derived content and hover behavior. Keep campaign imagery, GSAP timelines, pinned scenes, torn transition masks, and route composition inside the marketing app.