Dotneet design system · v1.1

One identity. Many formats.

A working reference for the product interface, presentation templates and future assets.

Calm structure. Clear evidence.

Dark surfaces give the work space. A paper receipt makes the record tangible. Lime marks the next action; status labels describe specific checks.

Base
var(--surface-base)
Panel
var(--surface-panel)
Raised
var(--surface-raised)
Action
var(--action-primary)
Action hover
var(--action-primary-hover)
Receipt paper
var(--surface-paper)
Text primary
var(--text-primary)
Text secondary
var(--text-secondary)
Text tertiary
var(--text-tertiary)
Control border
var(--border-control)
Subtle border
var(--border-subtle)
Success
var(--status-success-text)
Pending
var(--status-pending-text)
Danger
var(--status-danger-text)
Info
var(--status-info-text)
Focus (dark)
var(--focus-ring)
Focus (paper)
var(--focus-ring-paper)
Inter / JetBrains Mono

Get paid.
Keep the proof.

Use direct verbs. Describe what was checked. Keep ownership, payments and contribution quality separate.

Foundations in code

Semantic CSS variables and portable JSON tokens are included in the handoff. Font stacks use variable fonts loaded via CDN with system fallbacks.

// tokens.css --surface-base: #0A0E16; --action-primary: #CCF23F; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-md: 8px; --control-height-md: 44px; --motion-fast: 120ms ease;

8px radius · 44px controls · 760px mobile breakpoint
Visible focus · Reduced motion · 4px base spacing

Shared interface components

These are component specimens. Disabled examples do not perform application actions.

Buttons

Badges

NeutralSuccessPendingDangerInfo
Small successSmall pending

Notices

Pending

Check the existing transaction. Do not resend payment.

Success

Your profile changes were saved.

Info

This is a testnet environment. No real funds are used.

Inputs and consent

A label remains visible when the field has a value.
0 / 600

Precise status labels

Wallet control checked · specimenPayment submitted · specimenPayment + acknowledgment checked · specimenAcknowledgment withdrawn · specimenTestnet environment · specimen

Do not use “trusted person,” “verified human” or a universal reputation score.

Receipt specimen

.neetILLUSTRATIVE SAMPLE
A contribution worth keeping

ada.neet

Mobile testing that made the next release better.

Acknowledged by
mika.neet · example builder
Contribution
Mobile usability testing

50.00 NIM

Example amount · no funds were sent

Fictional example. No signature or payment has been verified.

Form field states

This field has valid input
This value is not accepted
Amount in NIM

Handle input

Normalizes to lowercase, strips .neet suffix, validates format.

Available
This name is already claimed
Checking availability…

Toast notifications

Global toast system with success (lime), error (red), info (yellow). Auto-dismisses after 5s.

Designed beyond the website.

Presentation layouts use fewer words and larger type. Social graphics center one idea. Screenshots retain the network and sample labels.

Portable asset package

Included templates cover title, problem, solution, demo, evidence, roadmap and closing slides, plus social and video frames. SVG examples, source tokens and usage rules travel with the code and the Claude handoff.

Cross-format exports should preserve readable text, sample disclosures and accurate verification language. Dotneet is an independent product using Nimiq; these assets do not imply Nimiq endorsement.