Argent — Interface Field Manual

01

Foundations / The material

A quiet palette,
a strict ruler.

Argent is built from a small set of decisions: two appearances, one ink accent, a 4 px half-step, a narrow type ramp, and negative space used as structure rather than decoration.

07 PLATES
LIGHT / DARK
AA CONTRAST

01.1 COLOR

Two appearances, one structure.

The chrome is neutral. Colour is reserved for state, data and brand injection. Every pair below is designed to carry the same component without re-styling it.

SOFT SILVER / LIGHTDEFAULT

bg#E8E9EB

surface#FCFCFD

sunken#F3F4F6

ink#14161A

ink-2#555A61

ink-3#6F747B

Success Warning Danger Info

GRAPHITE / DARKOPTIONAL

bg#08090A

surface#111214

sunken#0C0D0F

ink#F4F4F6

ink-2#A6A9AF

ink-3#8A8D94

Success Warning Danger Info

01.2 TYPE

One voice for the tool, one for the story.

The interface speaks in PuHuiTi / PingFang. The manual and editorial moments may borrow a serif. Specs and measurements speak in mono. Nothing else enters the chrome.

Quiet
instrument.

DisplayIowan Old Style / 400 / 88 · 0.96 / −0.035 emEDITORIAL ONLY

Signals, not noise.

Heading 1Sans / 600 / 30 · 1.15 / −0.025 emPAGE TITLE

A smaller statement.

Heading 2Sans / 600 / 22 · 1.25 / −0.018 emSECTION

A line of interface text sits at 14 px with a 1.55 line height. It is quiet enough to read for an hour and clear enough to act on.

BodySans / 400 / 14 · 1.55DEFAULT

Field label / helper / caption

LabelSans / 500 / 12 · 1.45FORM

00:24.00 1.35× 0.5 PX #14161A

MonoSF Mono / 400 / 11 · tabularSPEC / DATA

01.3 SPACE

The ruler is the layout.

A 4 px half-step and an 8 px base. Space groups; borders only clarify. The same ruler governs page gutters, panel insets and the gap between a label and its control.

4

8

12

16

20

24

32

40

48

64

80

4–8label → control
icon → text

12–16control → control
tile inset

24–32group → group
panel inset

48–64section → section
page gutter

01.4 RADIUS & ELEVATION

Soft corners, hard edges.

Radius communicates nesting. Elevation is reserved for things that leave the page.

4

8

12

20

999

1REST

2ISLAND

3OVERLAY

01.5 MOTION

Settle, never bounce.

Feedback arrives quickly and leaves softly. Everything that changes position settles without overshoot.

150 mshover / washease-out

140 mspress / scale0.97

320 mspill / panelsettle

01.6 BRAND

One accent, injected.

Graphite is the default. A product may inject its own primary without touching the rest of the system.

View live

01.7 DENSITY

Two speeds, one system.

Compact reduces row height and inset, not type size. It is a preference, not a second design.

A

Ada Lovelaceada@argent.io

Owner

G

Grace Hoppergrace@argent.io

Admin

K

Ken Thompsonken@argent.io

Member

02

Layout / Where things live

Primary work,
secondary context.

A screen is not one space. It is a hierarchy: persistent chrome, primary work, secondary context, and transient overlays. Negative space is the material that keeps them apart.

05 PLATES
4 SPACE ROLES
3 DENSITIES

02.1 APP SHELL

Anatomy of a workspace.

One persistent frame, one primary surface, one optional context panel. The inspector is not a second page; it is a subordinate rhythm. The same shell works for analytics, settings and editors.

ARGENTA

01 CHROME 02 PRIMARY 03 SECONDARY NEGATIVE SPACE

ChromePersistent. 56 px. Hairline seam, no shadow.

PrimaryThe work. Tables, canvas, forms, reading.

SecondaryContext. Inspector, detail, preview, filters.

TertiaryTransient. Menus, dialogs, sheets, toasts.

02.2 NEGATIVE SPACE

Space is a group, not a gap.

Related things sit closer. Unrelated things sit farther. A border is the last resort, not the first.

8

24

GROUPED

FENCED

Rule of thumbIf you need a divider to explain the relationship, the spacing is already wrong.

02.3 SUB-SPACE

One screen, three rhythms.

The primary space is generous. The secondary space is tighter. The transient space is denser still.

PRIMARY40 / 32 / 24

SECONDARY20 / 16 / 8

TERTIARY12 / 8 / 4

Do not let the inspector inherit the page's 40 px rhythm. It is a different instrument.

02.4 SPLIT & INSPECTOR

Context arrives, it does not take over.

A secondary panel opens beside the work. On narrow screens it becomes a sheet. The primary surface never reflows to a smaller font.

PRIMARY

SECONDARY

320 PX

02.5 PAGE RHYTHM

The page is a stack of decisions.

A page has a title, a reason to act, and a sequence of increasingly specific groups. The rhythm below is the default; density and content can compress it, never invert it.

TITLE / 16

ACTIONS / 24

STATS / 32

WORK / 48

03

Actions / What can be done

One primary.
Everything else quiet.

An action declares its weight before its label. Primary is an ink capsule. Secondary is a surface. Quiet is a wash. Danger is red, and it still asks. Icon-only actions keep a tooltip and a label for screen readers.

04 PLATES
6 STATES
1 PRIMARY / SURFACE

03.1 VARIANTS & SIZES

A small vocabulary of weight.

Three sizes, five weights. A toolbar usually holds one primary and a row of quiet icons; a dialog holds one primary and one quiet cancel.

PRIMARY

SECONDARY

QUIET

DANGER

ICON

Open live

03.2 STATES

Every state is visible before it is needed.

Forced-state specimens: hover, focus, pressed, disabled and loading. The press is a 0.97 scale; loading keeps the width and replaces the label with a spinner.

RESTHOVERFOCUSPRESSEDDISABLEDLOADING

PRIMARY

SECONDARY

QUIET

DANGER

ICON

03.3 ANATOMY

The button is a small machine.

Height, inset, gap and icon size are one set. Do not mix a 30 px control into a 40 px row.

36 H 18 PAD GAP 8 RADIUS 10

Font 13.5 / 600Icon 17 pxFocus 2 px / +2

03.4 GROUPS

Related actions share a body.

A group is for siblings. A split button is for a primary with a smaller menu. A toggle group is a segmented control that acts.

A split button is one intent with a secondary path. Never use it for two equal actions.

04

Forms / Asking well

A field is a sentence
with a slot.

Label, control, help, error. The label is persistent, the placeholder is never the label, and the error appears next to the thing that failed. Choice controls are native first; custom chrome is only a skin.

04 PLATES
8 STATES
NATIVE INPUTS

04.1 FIELD STATES

Rest is not enough.

Every field has a rest, hover, focus, filled, error, disabled and read-only state. Focus is a 3 px soft ring plus a one-step stronger border; error uses the same geometry with a red ink.

Rest

Hover

Focus

Filled

ErrorEnter a complete email address.

SuccessVerified.

Disabled

Read only

04.2 CHOICE

Use the native control.

Checkboxes, radios, switches, sliders and steppers keep native semantics; the skin is a token layer.

04.3 COMPLEX FIELDS

The field has a job.

Search, select, textarea, tags and a file well. Each has one affordance and one clear empty state.

Select

Search

⌘K

Note Optional

A form is a sequence, not a grid.

Start with the smallest useful group, then expand. The actions sit at the end of the group, not in a separate universe. Validation is inline first, summary second.

WORKSPACE PROFILE

Make it recognizable.

This appears in invitations, exports and the command palette.

Verified

Workspace nameLowercase, no spaces. Used in URLs.

Owner

Description

Allow members to invite othersAdmins can always invite.

Unsaved changes

05

Navigation / Where am I

A map, not a maze.

Navigation is a small set of repeated decisions: a rail for destinations, tabs for sibling views, breadcrumbs for depth, a stepper for progress. Keep one active thing per level.

02 PLATES
3 TAB FORMS
1 ACTIVE / LEVEL

05.1 TABS & SEGMENTS

Switch views without moving the page.

Use pill tabs inside a panel, underlined tabs for a page, and a segmented control for a quick mode. A vertical tab list is a compact rail.

PILL TABS / IN-PANEL

UNDERLINE TABS / PAGE

VERTICAL TABS / SETTINGS

05.2 WAYFINDING

Depth should be visible.

A breadcrumb for hierarchy, pagination for volume, a stepper for progress. None of them should be decorative: each answers a question the user is already asking.

BREADCRUMB

PAGINATION

…1–25 of 312

STEPPER

SourceConnected

02

Mapping3 of 7 fields

03

ReviewPending

04

DonePending

06

Feedback / What just happened

Tell the truth,
then get out of the way.

Banners stay. Toasts pass. Skeletons preserve the shape of the answer. Empty states explain the next move. A destructive action asks once, clearly, with the consequence in the sentence.

04 PLATES
4 BANNERS
3 LOADING STATES

06.1 BANNERS

A banner is a sentence with a job.

Inline, persistent, dismissible. The action sits inside the banner, not far away. Colour is status, not decoration.

06.2 TRANSIENT

Toasts pass.

A toast confirms a completed action and gets out of the way. It never contains a decision the user must make.

LINEAR / 62%

SUCCESS / 100%

Spinner is a last resort; prefer a skeleton.

06.3 LOADING

Keep the shape of the answer.

Skeletons are preferable to a spinner. Use a shimmer only while the layout is stable; never animate the whole page.

06.4 EMPTY / ERROR / SAVED

The state is a page too.

Empty explains why and what next. Error names the failure and offers a way forward. Saved is quiet: a check and a time, not a celebration.

No signals yet

Connect a source and we will start collecting events. It takes about a minute.

We could not load this view

The query took too long. Try a shorter window, or check the source connection.

All changes saved

Last saved just now. You can close this page; we will keep the draft.

Synced 4s ago

07

Data / Reading the work

Dense, but never
crowded.

Tables, lists and charts are the primary space. They get the generous rhythm. Numerals are tabular, status is a badge, and the row is the unit of selection. The empty and loading states preserve the same geometry.

04 PLATES
ROW 44
EMPTY / LOADING / SORTED

07.1 TABLE

The row is the unit.

A toolbar for scope, a header for sort, a row for selection, a footer for pagination. The table is not a grid of cards; it is a reading surface.

Signal	Owner	Events	Status	Updated
North star retention Retention · production	AAda	12,480	Live	2m ago
Weekly activation Growth · staging	GGrace	8,104	Live	8m ago
Paywall funnel Revenue · production	KKen	3,912	Paused	1h ago
Enterprise cohort Accounts · production	LLin	1,206	Draft	3h ago
Trial conversion Revenue · production	MMira	902	Failed	Yesterday

1–5 of 312

…

1 selectedNorth star retention

07.2 LOADING & EMPTY

Same shape, different truth.

Skeletons keep the columns. Empty explains why and offers the one next action.

No records in this window

Try a wider date range or clear the status filter.

07.3 STATS & CHART

The number and its shape.

A stat is a label, a value and a change. The chart explains the change; neither is decoration.

Events7D

128.4k

+18.2%vs last week

Conversion

4.8%

+0.4points

Latency

182ms

−12msp95

EVENTS / 7 DAYS128,420

7D30D90D

07.4 LIST, KEY–VALUE, TIMELINE

Records outside a table.

Use a list when rows are not comparable. Use key–value when the object is the subject. Use a timeline when order is the meaning.

A

Ada Lovelace

Owner · ada@argent.io

Admin

G

Grace Hopper

Editor · grace@argent.io

Member

Plan

Business

Seats

24 / 30

Region

us-east-1

Renewal

Nov 12, 2026

Schema updatedAda · 2 minutes ago

Source reconnectedGrace · 18 minutes ago

Export failedSystem · 1 hour ago

08

Overlays / Temporary space

Borrowed attention,
returned quickly.

A tooltip explains. A popover offers. A dialog interrupts. A sheet gives context a temporary room. Use the lightest overlay that can do the job, and always return focus.

03 PLATES
ESC CLOSES
FOCUS RETURNS

08.1 TOOLTIP, POPOVER, MENU

The smallest possible interruption.

Tooltip on hover. Popover on click. Menu for actions. Each surface is solid, top-lit and keyboard-dismissible; no glass, no mystery.

TOOLTIP

POPOVER

MENU / SPECIMEN

08.2 DIALOG

Interrupt for a reason.

A dialog owns the task. It has one primary, one quiet exit, and a consequence in its first sentence. The backdrop is a dim, not a blur.

DIALOG / 480 PXRename signal

Name

08.3 SHEET & COMMAND

Context and intent.

A sheet is a secondary space that arrives from the right. A command palette is a search field for the whole product.

PRIMARY

SHEET

09

Patterns / Repeated decisions

The second time,
make it a pattern.

A pattern is a decision that has earned repetition: disclosure, dirty state, destructive confirmation, bulk work, onboarding. The components are the letters; the patterns are the sentences.

05 PLATES
9 PATTERNS
RECOVERY FIRST

09.1 PROGRESSIVE DISCLOSURE

Show the next thing, not everything.

A summary is a promise. Opening it should not move the page under the user's pointer.

01 / SOURCEProduction events

Connected 12 days ago. 3.4M events. Last sync 2 minutes ago.

Host

events.production

Owner

Ada

02 / MAPPING7 fields mapped

Two fields still need a type. Keep the defaults if you are unsure.

03 / ACCESSWorkspace only

Only members with the Analyst role can query this source.

09.2 UNSAVED CHANGES

Make the state visible.

Dirty is not an error. It is a fact. Keep the actions in place and never lose the draft on navigation.

Unsaved changes

Your changes are kept locally until you publish.

09.3 DESTRUCTIVE ACTION

Ask once, with the consequence.

A destructive dialog names the object, the scope and the recovery. Prefer undo for small things; confirm for irreversible things.

DANGER ZONEDelete this workspace

Removes 24 projects, 3,000 events and every saved view.

SavedSmall changes can undo from the toast.

09.4 WIZARD

One decision per step.

A wizard is progressive disclosure with a progress model. The step title is the question; the footer is the commitment. Back is always available; the primary only moves forward.

SourceConnected

02

Mapping3 of 7 fields

03

ReviewPending

04

DonePending

STEP 02 / MAPPING

Match your fields.

We found 7 fields. Three already match a known type; the rest can use the default.

event_idMatched.

occurred_atMatched.

properties.plan

properties.amount

Step 2 of 4

09.5 PERMISSION & BULK

The missing thing is still a state.

A permission gate explains the role, then offers the request. A bulk bar names the count and the exception.

Analyst access required

Ask Ada for the Analyst role to query production signals.

12 selected3 cannot be moved

09.6 KEYBOARD

A shortcut is a promise.

Every shortcut has a visible command. Every command works without a pointer. Do not invent a second grammar.

Command palette⌘KSave⌘SPublish⌘↵Close overlayEscMove selection↑↓

10

Motion / How it behaves

Change should
feel inevitable.

Motion is feedback, not decoration. It confirms a press, carries a selection, or explains where a surface came from. It never delays the user and it never overshoots its destination.

03 PLATES
150 / 320 / 380 MS
REDUCED MOTION

10.1 TOKENS

Three durations, one curve.

Hover is a wash. Press is a scale. Selection is a settle. Everything else waits.

HOVER150 msease-out

PRESS140 ms0.97 scale

SETTLE380 mscubic-bezier(.22,.8,.2,1)

10.2 PANEL SWAP

Neither frame is empty.

The old content leaves while the new content arrives. A crossfade, not a relay.

VIEW A / OVERVIEW

VIEW B / SIGNALS

320 ms / drift 14 px

10.3 REDUCED MOTION

Ask first, then remove it.

Keep the feedback, drop the travel. The system respects the preference and still confirms the action.

Motion onTurn off to preview the reduced-motion path.

11

Examples / Four compositions

The same system,
four different rooms.

The lab is the vocabulary. The examples are sentences. Each one uses the same tokens, controls and states, but changes the composition for its domain.

04 EXAMPLES
ONE SYSTEM
NO VERTICAL LOCK-IN

01 / ANALYTICS

Pulse

A dense operations dashboard: stat cards, a chart, a selectable table and a context inspector.

Open example

02 / SETTINGS

Atelier Settings

Forms, roles, a sticky save bar and a danger zone — a page built around consequences.

Open example

03 / ONBOARDING

Relay Import

A four-step wizard: connect, map, review, finish. Progressive disclosure with a progress model.

Open example

04 / DOMAIN TOOL

Motion

The original study: a recorder and editor workspace. Same system, a domain-specific composition.

Open example

The quietinstrument.

Make it recognizable.

No signals yet

We could not load this view

All changes saved

No records in this window

Match your fields.

Pulse

Atelier Settings

Relay Import

Motion

The quiet
instrument.