Skip to content

Headings, type roles, colours, buttons, badges, the hairline cell and the motion primitives, rendered with the same components every page uses. Sizes are the desktop step; the heading scale shrinks at 992px, 768px and 480px.

Heading scale

Verifiable compute

h1 / .t-hero72px · 1.15 · 400 · −1.5px

Verifiable compute

h2 / .t-section48px · 1.2 · 400

Verifiable compute

h3 / .t-h336px · 1.1 · 500

Verifiable compute

h4 / .t-h428px · 1.1 · 400

Verifiable compute

h5 / .t-h524px · 1.1 · 400 · #ffffff

Verifiable compute

h6 / .t-h620px · 1.2 · 400

Body, small and metadata

Long-form body copy, as the article and case templates set it.

.t-body-lg18px · 1.3 · 400

Default paragraph copy. Plain p is already this size and colour.

p / .t-body16px · 1.3 · 400 · #8f8f8f

Captions, figure credits and row meta.

.t-small14px · 1.3 · 400

Metadata beside a title.

.t-meta14px · 1.3 · 400 · #8f8f8f

Section eyebrow

.t-eyebrow14px · 1.3 · uppercase · #8f8f8f

The trailing clause of a heading.

.gray#ffffff80, applied inside a heading

Neutral scale

#000000--n1 / bgPage background
#181818--n2 / surface, lineSurfaces and hairlines
#3a3a3a--n3 / line-strongStrong lines, nav pill
#707070--n4 / subtleCaptions and markers
#8f8f8f--n5 / mutedBody text
#dfdfdf--n6 / fg-softSoft white labels
#efefef--n7Reserved near-white
#ffffff--n8 / fgHeadings and buttons

Accent and status colours

#265ff3--accent / primaryThe single accent
#638efd--accent-soft / primary-softHover and focus ring
#3ecf8e--positiveLive status
#b9a4ff--status-researchResearch status
#ffffff80--grayHeading accent clause

Buttons

Primary button

White pill, blue halves on hover

Nav button

Grey pill used in the navbar

Text button

Plain white label beside a primary

Status badges

Live

On-chain VRF verification, the registry, stake and heartbeat accounts

In development

Work with code in the tree that does not complete the path

Planned

Fees, rewards, slashing, data and price feeds, the indexer and the API

Research

AI inference, which has no runtime

The hairline cell

Hairline frame

Every cell carries a 1px #181818 outline and four 11px corner dots that sit over the grid line.

Shared borders

CellGrid is a zero-gap grid with a 0.5px border, so adjacent cells share one line.

cell-hover

Adding cell-hover turns the frame blue on hover or focus inside the cell. This cell has it.

Motion primitives

TitleRevealWords rise out of a mask, 0.04s apart.
First child
Second child
Third child
GroupRevealEach direct child fades up 75px, staggered.
This block slid up
SlideUpOne block fades up 50px when it enters the viewport.
MaskUpContent rises out of a mask, used for buttons and short copy.
80 bytes
CounterCounts from zero once over two seconds, at 85% of the viewport.
Hover this line
RollTextEach character rolls up on hover of the nearest roll-trigger.