Graphite components

Every seenry-ui and contract class in Graphite, in each of its states. Hover and focus are pinned with data-state so they read side by side; everything is live too. Copy markup from the source, without the gx- gallery wrappers.

Foundations

The values every component reads from tokens.css.

Color

Three surface greys and a hairline do all the structure. Hue is reserved for status marks, the failure series and app logos.

--bg --surface --surface-2 --hover --line --text --text-2 --text-3 --ok --warn --bad --info --idle

  • Page--bg
  • Card--surface
  • Selected--surface-2
  • Hover--hover
  • Line, strong--line-strong
  • Names and values--text
  • Secondary--text-2
  • Meta and icons--text-3
  • Primary fill--accent, the text color
  • Healthy--ok
  • Needs review--warn
  • Failing--bad
  • Informational--info
  • Idle or scheduled--idle
  • Series 1--chart-1, neutral
  • Failure--chart-2
  • Series 3--chart-3
  • Series 4--chart-4
  • Gridline--chart-grid

Type

Inter at 400 and 500 only. Hierarchy comes from size and grey, never weight above 500, capitals or tracking.

--type-title --type-heading --type-label --type-body --type-small --type-micro --type-stat --type-code

  • Stat24/32 · 500$1,284.60
  • Title20/28 · 500Lead enrichment
  • Heading16/24 · 500Budget this month
  • Label14/20 · 500Approve 38 enriched leads
  • Body14/20 · 400Runs pause before any CRM write until a person approves.
  • Small13/18 · 400Lead enrichment · 12m ago
  • Micro12/16 · 500Agents
  • Code12/16 · system monorun_8F2KQ4 · claude-sonnet-4-5

Radius, space and size

Radius 6 for controls, 10 for cards, 12 for dialogs. Space runs on 4px; cards pad 14 and sit 20 apart.

--r-sm --r-lg --r-xl · --space-1 … --space-8 · --control-h --row-h --nav-h --topbar-h

  • 4 · kbd, badge
  • 6 · controls
  • 10 · cards
  • 12 · dialogs
Control
32 · 28 small · 36 large · 44 on phones
Row
40 list and table rows · 52 on phones
Nav item
30 · sidebar 240 · topbar 48
Card
14 padding · 20 gap · 1px hairline · no shadow

Icons

Lucide 0.469.0, outline, 16px, stroke 1.5 in the meta grey; they rise to the text color on hover and selection.

<i data-lucide="name"></i>

  • house
  • inbox
  • activity
  • search
  • plus
  • settings
  • bell
  • calendar
  • download
  • copy
  • ellipsis
  • check
  • circle-alert
  • triangle-alert
  • pause
  • play
  • plug
  • credit-card

Actions

Buttons, chips and shortcuts.

Button

One filled primary per view, for the one action of the screen. Everything else is the default grey or ghost.

.ui-button data-variant="primary | ghost | danger" data-size="sm | lg" data-icon data-loading

Default
Rest
Hover
Focus
Disabled
Loading
Primary
Rest
Hover
Focus
Disabled
Loading
Ghost
Rest
Hover
Focus
Disabled
Loading
Danger
Rest
Hover
Focus
Disabled
Loading
Small, 28
Default, 32
Large, 36
Icon only
With shortcut

Chip

Filters above a list or activity feed. Pressed fills one grey step; the count stays quiet.

.ui-chip aria-pressed .ui-chips

Rest
Hover
Focus
Selected
With icon
Disabled

Kbd

Only for a real shortcut, written beside the action it triggers.

.ui-kbd

⌘K
Single
G R
Sequence
Open trace T
In a menu

Inputs

Fields, choices and controls that take a value.

Input

A visible label above, help or error below in the small size. Errors turn the border and message red; nothing else changes.

.ui-field .ui-label .ui-input .ui-help .ui-error data-invalid .ui-control .ui-affix .ui-addon

Empty
Hover
Focus
Filled
Disabled
Error
Prefix and suffix
Search
Addon

Textarea

Multi-line input with the same border, focus and error rules as the field.

.ui-textarea

Filled
Focus
Disabled

Select and combobox

Native select for short fixed lists; the combobox suggests from a datalist and still accepts anything typed.

.ui-select .ui-combobox <input list> + <datalist>

Select
Select, focus
Select, disabled
Combobox
Combobox, error

Checkbox, radio and switch

Checkbox for independent choices, radio for one of several, switch for a setting that applies at once.

.ui-choice .ui-radio-group .ui-switch role="switch"

Checkbox
Checked
Disabled
Run on
Radio group
Switch, off
Switch, on
Switch, focus
Switch, disabled

Slider

A 4px track filled to the value with the number beside it. Use for a bounded amount where the position means something.

.ui-slider <input type="range"> + <output> --pct

Default
Focus
Disabled

Segmented control

Two to four mutually exclusive views of the same content.

.ui-segmented aria-pressed

Default
Hover on Failed

Option card

A larger selectable row for one-question steps, with the logo or icon that makes it recognisable.

.ui-option

Rest
Hover
Selected
Disabled

Feedback

State, progress and messages.

Status and badge

State is a word with a 6px mark, never a filled pill or color alone. Badges are outlined categories.

.ui-status data-status="ok | warn | bad | info | idle" .ui-badge

Healthy
ok
Needs review
warn
Failing
bad
Running
info
Scheduled
idle
Monthly Beta
Badge

Alert

One sentence about the page, with the icon carrying the hue and at most one action.

.ui-alert data-status

Salesforce sync runs every 15 minutes

Changes approved now reach Salesforce by 10:15.

HubSpot reconnected

3 queued runs resumed.

38 enriched leads are waiting for approval

Runs pause before CRM writes, as the approval policy requires.

Google Sheets token expired

Ad spend digest failed 3 times since Oct 26.

Progress and meter

Progress is work under way; meter is usage against a limit and only takes a status color past its thresholds.

<progress class="ui-progress"> <meter class="ui-meter" low high optimum> .ui-usage

Importing contacts1,240 of 2,000
Progress
Reading company sitesStarting
Progress, loading
Model spend$1,284 of $2,500
Meter, within limit
Knowledge8.6 of 10 GB
Meter, near limit
Seats15 of 15
Meter, over limit

Skeleton and toast

Skeletons match the shape that is loading. Toasts confirm a result and leave on their own.

.ui-skeleton SeenryUI.toast(message, {description}) data-toast-message

Skeleton list
Settings saved

New runs use these defaults.

Toast
Trigger a toast

Empty state

Say what is missing, why it matters, and one next step.

.ui-empty

No API keys yet

Create a key to trigger agents from your own services.

Data display

Records, rows, facts and history.

Avatar and logo

Initials on the raised grey; app logos are the only brand color in the room, bare at 16 or in a 24 tile.

.ui-avatar .ui-avatar-group .ui-logo[data-brand] .ui-logo-tile

MR DO
Avatar
Group
Logos
Logo tiles

Card and stat

Cards are the surface grey with a hairline, never a shadow. Three stats at most, each with what it is compared to.

.ui-card .ui-card-head data-flush data-link .ui-stat-strip

Weekly digest

Runs, spend and failures every Monday at 8:00.

Static

Inbox triage

5,208 runs · 99.4% success

Link, hover
Runs
18,204
12.4% vs previous 14 days
Success rate
97.8%
409 failed runs
Model spend
$1,284.60
budget $2,500

List

Rows of a name and one line of meta, with a logo or avatar before and a status or value after.

.ui-list .ui-list-item .ui-list-meta aria-current="true"

Table and filter bar

Sortable headers in the meta grey, numbers right aligned in tabular figures, the first column as the name.

.ui-filter-bar .ui-table-wrap .ui-table data-ui-table th[data-sort] .num

4 agents
AgentStatusRunsSpend
Lead enrichmentNeeds review6,412$412.80
Inbox triage (hover)Healthy5,208$186.20
Ad spend digestFailing1,122$137.40
Release notesScheduled412$58.40

Data list and detail

Label and value pairs on hairlines: the facts of one record.

.ui-data-list .ui-detail .ui-detail-head .ui-detail-row

Owner
Dana Okafor
Model
claude-sonnet-4-5
Trigger
New list members
Created
Sep 2, 2026
Waiting for approval

Approve 38 enriched leads

Writes 38 contacts to HubSpot.

Runrun_8F2KQ4
Usage184,220 tokens · $1.92

Timeline

Activity history: a mark, who did what, one line of detail, and when. Marks are a status dot, an avatar or an app tile.

.ui-timeline .ui-timeline-item data-status

  1. Run run_8F2KQ4 paused for approval38 contacts, 31 account matches
  2. Dana Okafor raised the spend limit to $2.50Was $1.50
  3. Run run_8E2LQ0 failedSalesforce returned REQUEST_LIMIT_EXCEEDED
  4. HubSpot connectedby Maya Ruiz

Code

Mono at 12px for IDs, model names and payloads. Blocks sit on the field surface with a caption and a copy button.

code.ui-code figure.ui-code data-copy .ui-mono

Trigger the agent with POST /v1/agents/agt_3KD92P/runs and an API key.

curl
curl https://api.halyard.app/v1/agents/agt_3KD92P/runs \
  -H "Authorization: Bearer $HALYARD_KEY" \
  -d '{"list_id": "q4-webinar", "dry_run": true}'  # returns run_id

Chart

Counts over time are square-topped bars on a zero baseline; failures stack on top in the only red series.

.ui-chart .ui-chart-legend .ui-chart-axis --chart-1 … --chart-5

Runs per day

Succeeded and failed

  • Succeeded
  • Failed
00.5k1k1.5k2k

Overlays

Layers above the page. They are the only surfaces with a shadow.

Dialog, sheet and command menu

Dialogs confirm one decision; sheets hold a related task; the command menu opens with ⌘K.

.ui-dialog .ui-sheet .ui-command data-dialog-open

Delete Northbeam?

All 6 agents stop and 18,204 runs are erased.
Dialog
↑ ↓ to move · Enter to select
Command menu
Live

Pause Lead enrichment?

Scheduled runs stop until you resume. The run waiting for approval stays in the queue.

Run run_8F2KQ4

Started
Oct 28, 09:41
Duration
3m 12s
Usage
184,220 tokens · $1.92
↑ ↓ to move · Enter to select

Accordion

Optional detail on a page, separated by hairlines.

details.ui-accordion

What counts as a run?
One trigger, start to finish, including retries.
Who can approve CRM writes?
Admins and the agent owner.

App shell and patterns

How components compose into screens.

Shell pieces

The sidebar, top bar and page header every block is framed with. Under 768px the sidebar becomes a drawer opened by the menu button.

.ui-shell .ui-sidebar .ui-topbar [data-nav-toggle] .ui-page-header .ui-section-head

Overview

6 agents across 9 integrations · Oct 15 – Oct 28

Agents

Manage agents

Settings group and danger zone

A label and one line of help on the left, the control on the right; destructive actions live in their own outlined group.

.ui-settings-group .ui-settings-row .ui-danger

Agent defaults

Each agent can override these.

Approve CRM writesPause before HubSpot and Salesforce writes.

Danger zone

These actions affect every member of Northbeam.

Delete workspaceRemoves 6 agents and 18,204 runs. This cannot be undone.

Auth

One centered column on the page color: mark, title, providers, a divider, fields and the legal line. See the sign-in block for the full page.

.ui-auth .ui-auth-providers .ui-auth-divider .ui-auth-legal

Sign in to Halyard

Agents for revenue and marketing ops

or with email

By continuing you agree to the Terms and Privacy Policy.

Blocks

Whole screens for one product, Halyard, an agent console for revenue and marketing ops. Start a new screen from the nearest one.

blocks/*.html

Dashboard

Stats, runs per day, review queue, agents table

List and detail

Filterable runs with the selection open beside it

Detail

One agent: alert, facts, budget, activity timeline

Settings

Grouped fields, switches, integrations, danger zone

Billing

Plan, usage meters, payment method, invoices

Onboarding

Stepper, one question, the empty state after setup

Sign in

SSO, email, create account and the error state