Namefi · Design System

At a glance

The shared building blocks — tokens and base components from @namefi-astra/ui. Reuse these instead of inventing one-off styles. Every sample below renders the real component, so this page always reflects what ships.

Foundations

Colors

Semantic

12 tokens

Brand

10 tokens

Paper surfaces and states

18 tokens

Chart

5 tokens

Foundations

Typography

Library titleA name of your own.
Library sectionComponents with a Namefi touch
Page headingManage your domains
Section headingRenewal settings
BodyYour domain renews automatically before it expires.
CaptionLast updated today
Identifiernamefi.example
Numeric value0123456789

Marketing display text and long-form reading can use larger type when the content needs it. Form inputs keep Nova’s mobile text size.

Foundations

Radius

sm
md
lg
xl
2xl
full

Components

Button

Variants

default
outline
secondary
brand-solid
brand-outline
ghost
destructive
link

Sizes

xs
sm
default
lg

States

default
disabled

Components

Badge

Variants

defaultdefault
secondarysecondary
destructivedestructive
outlineoutline
ghostghost
linklink

Components

Alert

Variants

default
destructive

Components

Card

Onchain ownership
Your domain is an NFT you fully control.
Transfer, list, or build on it — no registrar lock-in.

Components

Input & Textarea

Input states

default
disabled
invalid

With label

Components

Checkbox & Switch

Checkbox

unchecked
checked
disabled

Switch

off
on
disabled

Components

Select

States

default
disabled

Components

Tabs

Variants

Snapshot of the domain.
default
Snapshot of the domain.
line

Components

Tooltip

Placement (hover or focus)

top
bottom

Components

Avatar

Sizes

NFsm
NFdefault
NFlg
NFimage

Components

AddressWithChain

Wallet identity

short address
ENS name
—no address

Components

Separator & Skeleton

Separator

Account

Billing

horizontal
DocsAPIStatus
vertical

Skeleton

Controls in context

Shared Namefi controls with larger targets when touch needs them. Standard compositions for forms, wallets, overlays, and data.

Actions and wallet
Use the default size together; reserve small sizes for auxiliary actions.
Read only
Search and form controls
Visible labels, standard padding, and larger targets on coarse pointers.

Search by domain name.

Renewal period
Tabs and overlays
Content controls stay separate from actions. Dialogs and drawers keep their own idiomatic compositions.

Renewal and wallet information for studio.example.

Data without controls
A short, fixed list uses the semantic Table. Numbers align at the end with tabular digits.
ItemAmount (USD)
Registration23.15
Renewal170.00

Data with controls

Caller-owned state

Search, sort, column visibility, and pagination use ExtensibleDataTable. Large datasets are paged and filtered by the server; this small fixture stays in memory.

Status
studio.exampleBase
2027-01-15
Active
shop.exampleBase
2027-02-15
Active
a-long-domain-name-for-small-containers.exampleBase
2026-10-15
Renewal due
Rows per page:
Total: 3 rows
Page 1 of 1