Namefi

Namefi · Resources

Design System

The single source of visual truth for the Resources site — colors, type, spacing, and components. Built so humans and LLM agents stay consistent: use these tokens and component variants instead of inventing one-off styles.

Internal reference page — noindex, nofollow

Primary action

A quiet, on-brand primary

The primary maps to the Namefi brand green (--primary: var(--brand-primary)), but a solid fill shouts on a content page. So the primary renders as an outline — transparent fill, green border and label, a faint green wash on hover. On-brand, yet it lets the writing lead. Use the solid variant only for a very positive action, usually once per view; the rest are default, secondary, or ghost.

Solid fillToo vocal
Start exploring

Competes with the content.

OutlineNow

On-brand, calm — lets content lead.

Soft tintAlt
Start exploring

A filled-but-muted middle ground.

Foundations

Color tokens

Every color is a CSS variable from packages/ui/src/styles/globals.css. Reference the token (bg-primary, text-muted-foreground) — never a raw hex.

  • --background

    page canvas · oklch(0.145 0 0)

  • --foreground

    body text · oklch(0.985 0 0)

  • --card

    raised surface · oklch(0.205 0 0)

  • --primary

    primary action · var(--brand-primary)

  • --primary-foreground

    on primary · oklch(0.205 0 0)

  • --secondary

    oklch(0.269 0 0)

  • --muted

    oklch(0.269 0 0)

  • --muted-foreground

    captions · oklch(0.708 0 0)

  • --accent

    oklch(0.269 0 0)

  • --destructive

    danger · oklch(0.704 0.191 22.216)

  • --border

    oklch(1 0 0 / 10%)

  • --ring

    focus ring · oklch(0.556 0 0)

  • --brand-primary

    Namefi green · oklch(0.7585 0.1804 155.5)

  • --chart-1

    oklch(0.488 0.243 264.376)

  • --chart-2

    oklch(0.696 0.17 162.48)

  • --chart-3

    oklch(0.769 0.188 70.08)

  • --chart-4

    oklch(0.627 0.265 303.9)

  • --chart-5

    oklch(0.645 0.246 16.439)

Foundations

Typography

Body and headings use Geist Sans; code uses Geist Mono.

DisplayOwn your name onchain
Heading 2Domains, decentralized
Heading 3A section heading
BodyThe quick brown fox registers example.eth onchain.
SmallMuted caption text for metadata and timestamps.
Monoconst domain = "namefi.io";

Components

Buttons

Variants map 1:1 to the <Button> in @namefi-astra/ui. These render the real component, so this page always reflects the shipped styles.

Components

Surfaces and badges

Cards use the .surface-card utility; inputs share the radius, border, and focus-ring tokens.

Onchain ownership

Your domain is an NFT you fully control — transfer, list, or build on it.

VerifiedDraftExpiring

Form input

Inputs share the design tokens.

Call to action

A card can host a calm default action; reserve solid for the one highest-confidence positive step.

Foundations

Radius

Derived from --radius: 0.65rem. Use the scale; don't hand-pick pixel radii.

sm
md
lg
xl
2xl
full

How to stay consistent

Rules for humans and agents

When adding UI to Resources, follow these. They mirror the repo's CLAUDE.md and rulesync rules.

Color

  • Use tokens (bg-primary, text-muted-foreground, border-border) — never hard-coded hex/oklch.
  • Default buttons are green outline; use solid only for a very positive action, usually once per view.

Components

  • Reuse @namefi-astra/ui primitives before writing new ones.
  • Match an existing variant; add a new one only on real reuse.
  • Keep "use client" at the leaf.

RTL & spacing

  • Logical CSS only: ms/me, ps/pe, start/end — never left/right.
  • Use gap, not space-x, on flex/grid. Spacing in 4px steps.

Minimal chrome

  • No divider/background/shadow unless it solves a named problem.
  • Prefer space over lines; don’t block the content area.