ZyroPay

Overview

ZyroPay is a permission layer for autonomous agents that spend money on Cardano. It is built for the moment an AI assistant wants to pay for work: the agent asks, a human approves with a passkey, funds are held in Masumi escrow, and an on-chain result confirms delivery. The aesthetic is a restrained Dark Minimalism with a single cool accent, closer to a hardware wallet than a consumer fintech app, so trust reads as precision rather than decoration. The emotional response is calm control: the interface shows exactly what will move, and nothing more.

The voice is declarative, short, and unhurried. Sentences are imperative or factual ("Ask. Decide. Prove."), never hype. Vocabulary is literal: passkey, escrow, receipt, preprod. Example sentence: "Escrow by default. Proof on delivery."

Colors

Primary (#f3f4f6 on canvas, #111111 on light CTA) carries the interface: the primary CTA is an inverted pill, #111111 on white in the light surface and #ffffff text on the dark canvas. Canvas (#060709) is the page background; #0c0d11 is the showcase surface and #1b1c1f through #3a3c41 form the metal stack used for the phone frame. Secondary (#2f6bff) is a rare signal accent for live status and links, never for large fills. Tertiary (#fff1de) is a warm highlight used only as a glowing dot on chips and the spotlight gradient. Error (#d93025) and success (#127548) appear only inside the product mockup.

Surface stack: canvas (#060709) → raised panel (#0c0d11) → control fill (#1b1c1f). Text uses #f3f4f6 for headings and #a9adb6 for body copy, with #868a94 for tertiary labels. Borders are alway

Typography

The system uses Inter as a single family with a variable weight axis. Headlines run at weight 500 with aggressive negative tracking (-0.038em to -0.042em) and line-height near 1.0, so the hero reads as a dense block. Body copy at 16–18px weight 400 with line-height 1.55 keeps long lede text legible on the dark canvas. Labels use weight 600 at 14–16px with normal tracking. Apply text-wrap: balance to headings and text-wrap: pretty to paragraphs. Small status labels sit on busy backgrounds without shadow; no text-shadow is used anywhere.

Layout

The grid is fluid with a 1200px container max-width and a two-column hero (copy left, phone stage right) that collapses to one column on narrow viewports. Section rhythm relies on large vertical gaps of roughly 48px (clamp 28px–48px) between a title block and its showcase. Gutters are 24px. Spacing steps used in the product UI are 8px, 10px, 12px, 14px, 16px and 18px; the marketing layout uses the 48px step for section separation and the 16px step inside cards.

Elevation & Depth

Depth comes from a single heavy shadow and translucent insets rather than stacked cards. The showcase frame uses box-shadow: inset 0 0 0 1px #ffffff24, 0 50px 120px -50px #000000e6. The phone is layered with 0 10cqw 22cqw -6cqw rgb(0 0 0 / 0.32) and 0 26cqw 50cqw -16cqw rgb(0 0 0 / 0.28). Interactive chips use backdrop-filter: blur(10px) over a #ffffff14 fill, and the warm accent dot carries box-shadow: 0 0 10px 1px #fff1de99.

Shapes

Architectural Softness: pill geometry (999px) for every button, chip and segmented control, and 28px radius for the showcase frame and large panels, 20px for inner cards and the mobile app's rows. Buttons are fully rounded so the primary action reads as a token; containers stay at 20–28px so the layout keeps a calm rectangular rhythm. Circular avatars and dots use 50%.

Components

Action Elements The primary button is an inverted pill: background #f3f4f6, text #0b0c10, padding 13px 18px, height 48px, weight 600. On hover (hover:hover and pointer:fine only) the fill moves to #ffffff, and on :active it scales to 0.97 over 160ms with cubic-bezier(0.16, 1, 0.3, 1). The secondary button is an outlined pill with a 1px #ffffff24 inset ring and a #ffffff0f hover fill. Unreleased actions use a striped placeholder fill (repeating-linear-gradient at 135deg, 6px stripes of #ffffff06) with secondary text.

Containers & Surfaces The showcase frame is a 16:9 panel with 28px radius, #0c0d11 fill and a 1px #ffffff24 inset ring. Cards in the product use #1c1c1e (dark) or #f2f2f2 (light) at 20px radius with no border. Transitions on surfaces run 200ms ease for background-color

Do's and Don'ts

**Do**

• Use the inverted pill (#f3f4f6 on #060709) for every primary action and keep it the only solid-filled control on a screen.
• Keep #2f6bff to status and link signals; never use it as a large background fill.
• Set headlines at weight 500 with letter-spacing between -0.038em and -0.042em.
• Keep the phone mockup dark-framed with metal gradient edges so the product reads as hardware.

**Don't**

• Don't add gradients or glow to buttons; the warm #fff1de glow is reserved for a single dot accent.
• Don't use pure white (#ffffff) as a page background; the canvas is #060709.
• Don't round primary containers below 20px or buttons below full pill radius.
• Don't use text-shadow on any text; separation comes from weight and color contrast.