overview

octrascan (lite) | main net

build axFH017/2026

epoch 282,119

epoch282,119

transactions15,924,002

supply1.00b oct

staging18

mcap$128.4m

price$0.128

recent transactions

hash	epoch	time	from	to	amount

product language

Dense, quiet explorer UI for Octra network data.

Built from the live octrascan surfaces: lite scanner header, build/status line, search, network metrics, recent transactions, epochs, staging rows, and transaction detail states.

view components inspect tokens devrel: start on octra + OCS-01

version 0.3.0-beta

Ready for product exploration; not yet frozen for SDK usage.

audience design, frontend, protocol

One source for screens, CSS variables, data states, and DeFi examples.

coverage explorer + defi

Scanner, browse, address detail, transactions, swap, lending, pools, staking.

quality gate states + a11y + contracts

Components must ship with usage, states, tokens, responsive rules, and code.

source audit

octrascan.io lite scanner

Main net page uses a compact header, build label, connection status, search, six metrics, recent transactions, recent epochs, and privacy footer.

source

octrascan.io/browse browse table

Browse includes nav links, total txs, total volume, accounts, validators, peak TPS, epochs, transactions, update list, and priority rows.

source

W3C DTCG token format

Tokens are treated as platform-agnostic design decisions with groups, aliases, semantic roles, and reusable values.

source

Carbon system structure

The kit documents color, type, spacing, component states, usage rules, accessibility, and working code examples.

source

Atlassian craft routes

World-class systems provide paths for designers, developers, content designers, patterns, tools, and release phases.

source

Polaris admin quality

Strong product systems document foundations, accessibility, IA, internationalization, components, tokens, and patterns.

source

Material interaction specs

Mature component docs define usage, behavior, specs, states, and when not to use a pattern.

source

quality bar

01

craft entry points

Document how designers, developers, and content people start. Each role needs a first useful action, not a wall of components.

design foundations developer contracts content rules

02

component completeness

A component is not done until it has purpose, anatomy, variants, states, responsive behavior, accessibility notes, and code hooks.

purpose	what problem it solves
anatomy	slots, labels, values, actions
states	default, hover, focus, disabled, loading, error
contract	classes, tokens, test strings

03

governed evolution

Every change needs a maturity level and migration path: experimental, beta, stable, deprecated, removed.

expbetastabledepr

foundations

principles

Scanner first: information density beats decoration.
Every state has a visible text fallback.
Tables remain tables on desktop; cards take over on mobile.
Use semantic tokens in components, not raw hex values.

typography

Tahoma, Arial, sans-serif - 11px base, 150% line height, 1px tracking.

SF Mono, Consolas, Monaco - hashes, epochs, amounts, addresses.

layout

38px header8px field padding220px sidebar

Use full-width bands, rule lines, and fixed table columns for scanner surfaces.

content

Labels are lowercase and literal: epoch, hash, amount, route.
Errors name the failed system: rpc timeout, proof missing, invalid epoch.
DeFi copy shows fees, slippage, settlement, and risk before action.

data density

Use tables for comparable values, detail tables for single objects, cards only for mobile fallbacks or repeated compact summaries.

motion

Motion is stateful, not decorative. Use pulse only for pending/proof/staging states and avoid ambient animation.

tokens

components

filter HTML classes are stable and copyable.

navigation

header and status

Product title, build string, and node status. Keep it one row on desktop and wrap actions on small screens.

octrascan (lite) | main net

build axFH017/2026

connecting...

input

search bar

One global query field for tx hash, address, or epoch id. Focus state uses the primary border token.

actions

buttons

Primary for submit/load, standard for navigation actions, quiet for toolbar toggles, danger for rejected destructive flows.

feedback

badges and tags

Status tags are compact and textual. Color is supportive, never the only meaning.

transfer confirmed staging rejected ocs01 pending

data display

metric row

Use for current epoch, transaction count, supply, staging, market cap, price, validators, and peak TPS.

total txs15,924,002

validators64

peak tps1,420

data display

transaction table

Fixed columns, ellipsis overflow, mono values, mobile card fallback, and hover optional for dense scanning.

hash	epoch	time	from	to	amount
8bb4f1...ad90	282119	14:08	oct3z...p2	oct7q...d1	1,000 oct
6afc21...be18	282118	14:04	oct9k...a8	oct1v...e5	normal
20c0ab...118a	282118	14:02	oct4m...c0	oct6w...b9	rejected

responsive

mobile transaction cards

Use when table columns become too tight. Labels stay identical to desktop table headers.

hash8bb4f1...ad90

epoch282119

fromoct3z...p2

amount1,000 oct

hash20c0ab...118a

epoch282118

statusrejected

amount-

feedback

loading, empty, and alerts

Scanner states are blunt and useful: loading, no recent transactions, RPC error, copied, invalid query.

loading...

no recent transactions

rpc timeout - retrying in 4s

copied token name

usage rules

do

Use semantic token names in component CSS.
Show exact fees, routes, epochs, hashes, and settlement state.
Keep actions near the data they affect.
Prefer tables for scanner and DeFi comparisons.
Make loading, empty, rejected, and staging states explicit.

don't

Do not hide risk behind color-only badges.
Do not use marketing hero layouts inside app surfaces.
Do not create one-off DeFi widgets without a reusable contract.
Do not truncate amounts, routes, or error causes without a detail view.
Do not use cards inside cards.

copy block

<table class="data-table">
  <thead>
    <tr><th>hash</th><th>epoch</th><th>amount</th></tr>
  </thead>
  <tbody>
    <tr class="row--staging">
      <td><a class="hash" href="#">8bb4...ad90</a></td>
      <td class="mono">282119</td>
      <td><span class="tag tag--staging">normal</span></td>
    </tr>
  </tbody>
</table>

patterns

scanner home

Header, search, six metrics, optional staging section, recent transactions, recent epochs, footer.

browse

Nav, aggregate metrics, epochs heading, transactions table, update list action, all transactions link.

transactions

Back link, transaction count, loading/empty state, load more button, hash/epoch/time/from/to/amount columns.

address detail

Address heading, balance summary, received/sent rows, program tags, token badges, storage/detail tables.

defi interface examples

These examples show how the octrascan kit can support DeFi products without becoming glossy or noisy. Keep the explorer DNA: precise labels, visible transaction state, dense tables, and restrained color.

pay receive

route	OCT -> pUSD
fee	0.30%
price impact	0.18%
settlement	staging

supply apy4.28%

borrow apy7.91%

utilization63%

supplied	12,400 OCT
borrowed	4,820 pUSD
liquidation	$0.081 OCT
status	safe

pool	tvl	24h vol	apr
OCT/pUSD	$2.82m	$410k	18.4%
OCT/wOCT	$1.15m	$96k	9.2%
pUSD/pBTC	$780k	$44k	6.8%

staked18,240 OCT

pending rewards42.8 OCT

unbonding2 epochs

tx	asset	side	state
91af...00ce	OCT	in	proof
2aa0...7d14	pUSD	out	relay
c83b...4419	OCT	in	done

OCT pUSD LP stake

daily pnl	+2.84%
claimable	84.20 OCT
private balance	encrypted
last sync	epoch 282119

bid	size	ask	size
0.1283	48,200	0.1285	31,800
0.1281	22,410	0.1288	18,004
0.1278	9,810	0.1291	7,550

proposal	raise OCT/pUSD pool fee from 30 bps to 35 bps
for	62.4%
against	21.8%
quorum	76.2% reached

states

state	surface	text	token rule
default	all controls	clear label	semantic background, text, border
hover	links, buttons, rows	same label	border or surface moves one step stronger
focus	inputs, buttons, tabs	same label	2px focus ring, never removed
disabled	buttons, fields	same label	muted text, soft surface, no pointer affordance
loading	tables, cards	loading...	muted text and optional skeleton rule
error	RPC, invalid query	specific error	danger support token and readable copy
selected	tabs, nav	same label	primary text and active bottom rule

contracts

component checklist

Purpose and usage scope
Anatomy and slots
Variants and states
Layout and overflow rules
Interaction and keyboard rules
Tokens used

CSS contract

.button
.button--primary
.status-chip
.search-bar input
.metrics-row .metric
.data-table
.tag--staging
.row--rejected

token contract

--oct-color-bg
--oct-color-surface
--oct-color-border
--oct-color-text
--oct-color-primary
--oct-space-02
--oct-type-mono
--oct-component-header-height

governance

release phases

phase	meaning	ship rule
experimental	new recipe or visual idea	prototype only
beta	usable, API may move	allowed with owner approval
stable	contract frozen	default for product UI
deprecated	replacement exists	migration required

contribution checklist

Appears in at least three product surfaces or one critical flow.
Uses existing tokens unless a semantic gap is proven.
Includes desktop and mobile examples.
Includes loading, empty, error, disabled, and focus states.
Names owner, maturity, migration notes, and test strings.

changelog

0.3.0

Added DeFi recipes, governance, quality bar, usage rules.

0.2.0

Added component gallery, tokens, states, accessibility.

0.1.0

Captured octrascan scanner foundations.

accessibility

Dense, quiet explorer UI for Octra network data.

craft entry points

component completeness

governed evolution

principles

typography

layout

content

data density

motion

header and status

search bar

buttons

badges and tags

metric row

transaction table

mobile transaction cards

loading, empty, and alerts

do

don't

copy block

scanner home

browse

transactions

address detail

swap ticket

lend market

liquidity pools

staking vault

bridge queue

portfolio

perp/orderbook

governance proposal

component checklist

CSS contract

token contract

release phases

contribution checklist

changelog