{
"v": 1,
"endpoint": "https://your-api.example/quote",
"operations": {
"getQuote": {
"input": {
"symbol": "string"
}
}
}
}UI library
Shared styles. Interactive examples.
Typography and color
Orange for actions. Warm white or charcoal surfaces. Borders only where useful.
Dark paletteLight palette
Canvas#121311#F7F7F2
bg-canvasSurface#191A17#FDFDF9
bg-surfaceRaised#20211D#EFEFE7
bg-surface-raisedOrange#FF7847#FF7847
bg-accentAccent text#FFB28D#A63B17
text-accent-textText#F4F3EB#20211D
text-contentMuted#BFC0B5#505349
text-mutedSubtle#A2A399#64675B
text-subtleControl border#747569#828675
border-line-strongSuccess#B5D49A#3D642C
text-successWarning#FDE68A#805410
text-warningDanger#F5A1A1#A82D31
text-danger
Built for the next connection.
Inter for body text. Manrope for headings. Source Code Pro for code and addresses.
getQuote({ symbol: "BTC" })
6px controls · 12px panels · 4px spacing base · visible keyboard focus · reduced motion support
Buttons and inputs
Local preview: Untitled service · market-data
Publishing steps example
Local preview. Files and form data stay in this page.
API and identity
Example account and balances. No wallet connection or network request.
WA
Wallet
AddressNetworkAvalanche Fuji
Example wallet
- Balance
- 10.00 USDC
- AVAX for gas
- 0.3000
Fund wallet
Wallet address
EPMarket DataAI / TextProviderPending
Verified and unverified references.
Arkiv ✓Swarm · Unverified
API example
JSON
Example manifest. Stored on Swarm when published.
Example connection. Sample values and local links.
Connection details
Swarm ID
Example provider
Identity ID
0123456789…89abcdef
Loading, empty, and error
Example passes. Refresh waits briefly without contacting a network.
Pass refresh example
Example checks. Refresh changes the example balance and drive status.
Example provider checks
- Swarm drivelowown drive · 3 days leftSwarm ID
- GLM writerpresent0.099
- AVAXpresent0.3000
- USDCbalance0.00
Manifest unavailable. Retry.
Use a component
example.tsx
TSX
import { Button } from "@/components/ui";
export function ProviderIntro() {
return (
<section className="space-y-5">
<h2 className="text-2xl font-medium">Publish your API.</h2>
<div className="mt-6">
<Button href="/provider/new">Publish API</Button>
</div>
</section>
);
}Style reference: Supabase. Fonts, compact controls, and fine borders with APIritivo’s orange palette.