Interface library

Preview

A compact overview of the visual patterns used across the Marea billing workspace.

Interface states
System preview

Billing patterns in one place

This page brings together the core visual language used throughout subscriptions, invoices, payment methods and account settings.

Dark + lightResponsiveNext.js
Subscription snapshot

Growth · Annual

Example of the connected account summary used across the billing workspace.

Team members

8 / 20

Monthly events

142,850

Next renewal

Aug 18, 2027

$348.00

Form language

Billing controls

Inputs and actions use the same compact spacing and hierarchy as the rest of the system.

Data pattern

Invoice activity

Open invoices
InvoiceDatePlanAmount
INV-2026-0818Aug 18, 2026Growth · Annual$348.00
INV-2025-0818Aug 18, 2025Starter · Annual$180.00

Billing details

Company and contact patterns

Invoice patterns

Lists and document detail

Interface states

Loading, empty and error states