Skip to content
Agent Factory

system / v1

A system for interfaces that show their work.

Two voices, one grid, four states. Sans for people, mono for machines, and color only when something is happening.

Principles

  • Technical

    Show the real mechanism. Name the queue, the session, the ID.

  • Precise

    Every element sits on the 12-column grid. Hairlines over shadows.

  • Fast

    Motion under 320ms. No easing that lingers.

  • Reliable

    Color means state. Green never decorates.

  • Minimal

    One accent per screen, and it is a status.

  • Infrastructure-first

    Consoles, logs, and manifests before illustrations.

Color

Dark is the default theme; light is opt-in from the header. Both share token names, so components never branch on theme. Ratios are computed against each theme's canvas.

Neutrals

Token Role Dark (default) Light
canvas Page background #0a0a0a #f7f7f4
raised Hover rows, panels on canvas #111111 #fcfcfa
sunken Code wells, inset areas #161616 #efefeb
line Borders, rules, grid lines #262626 #dadada
fg Primary text #f5f5f5 18.16 AA #111111 17.59 AA
fg-muted Secondary text #a3a3a3 7.85 AA #666666 5.35 AA
fg-meta Small mono metadata #8f8f8f 6.12 AA #707070 4.61 AA
fg-subtle Line numbers, disabled, glyphs only #5c5c5c 2.96 Decorative #999999 2.65 Decorative
primary Primary button fill (dark text) #e56f00 #e56f00
signal Brand orange for marks, fills, scene accents #e56f00 #e56f00
accent Brand orange for text: eyebrows, emphasis #e56f00 6.23 AA #e56f00 2.96 Decorative

Console surfaces

Terminals and logs stay dark in both themes.

ink

#111111

ink-raised

#1a1a1a

ink-line

#2b2b2b

ink-fg

#f5f5f5

17.32 on ink

ink-muted

#a3a3a3

7.49 on ink

ink-meta

#8a8a8a

5.47 on ink

System state

Green

Running, success, healthy

ok

dark #4ade80

11.36 canvas / 9.17 wash

light #1e7f4f

4.65 canvas / 4.33 wash

Amber

Warning, processing, queued

warn

dark #fbbf24

11.86 canvas / 9.39 wash

light #9a6200

4.75 canvas / 4.42 wash

Red

Failure, denied, destructive

fail

dark #f87171

7.16 canvas / 6.24 wash

light #c2341f

5.14 canvas / 4.55 wash

Blue

Network, informational, focus

info

dark #60a5fa

7.79 canvas / 6.64 wash

light #1f5fd1

5.41 canvas / 4.89 wash

Typography

Human information

Aa

IBM Plex Sans

Headlines, navigation, body copy, buttons, statements.

Machine information

0x

IBM Plex Mono

Code, CLI, IDs, timestamps, API methods, states, metrics.

  • display

    48 to 96px / 0.94

    sans 600 / -0.04em

    Hero statements

  • h1

    40 to 72px / 0.98

    sans 600 / -0.035em

    Page titles

  • h2

    32 to 56px / 1.02

    sans 600 / -0.03em

    Section titles

  • h3

    22 to 32px / 1.15

    sans 600 / -0.02em

    Panel titles

  • body-lg

    17 to 18px / 1.55

    sans 400 / 0

    Lead paragraphs

  • body

    16px / 1.6

    sans 400 / 0

    Body copy

  • small

    14px / 1.5

    sans 400 / 0

    Supporting copy, nav

  • label

    12px / 1.4

    mono 400 / 0.02em

    ses_7f3a 09:14:02.118 POST /v2/agents

  • micro

    11px / 1.3

    mono 400 / 0.06em

    ses_7f3a 09:14:02.118 POST /v2/agents

Grid

Twelve columns on desktop, eight on tablet, four on mobile. Content tops out at 1440px with 20 to 80px margins. Use .frame and .grid-12.

max width
1440px
margin
20 to 80px
gutter
20 / 24px
columns
4 / 8 / 12

Spacing

A 4px base. Sections breathe at 96 to 160px; components stay at 24 or below.

  • 4px
  • 8px
  • 12px
  • 16px
  • 24px
  • 32px
  • 48px
  • 64px
  • 96px
  • 128px
  • 160px

Shape and depth

Machined corners, never pills on containers. Depth comes from hairlines and the dark console surface, not shadows.

radius-xs 2px

Badges, keys

radius-sm 4px

Buttons, inputs

radius-md 6px

Panels, consoles

Motion

Motion confirms state. It never decorates. Hover a row to see the duration.

  • duration-fast 120ms Hover, press, color
  • duration-base 200ms Toggles, log lines
  • duration-slow 320ms Panel swaps, reveals
  • ease-snap cubic-bezier(0.2, 0, 0, 1) Everything entering
  • ease-exit cubic-bezier(0.4, 0, 1, 1) Everything leaving

Components

Button

Primary Secondary Ghost

Status

Running Queued Denied Connected Idle

Command

docker compose up -d
docker compose logs -f backend

Form fields

Slack channel ID or name

Use cron syntax, e.g. 0 9 * * MON

Data table

Session Channel State
ses_7f3a slack · finance RUNNING
ses_19c0 web · support DONE
ses_b2e4 ide · engineering DONE
ses_04d1 api · product QUEUED
ses_e88a slack · sales DENIED

Console

sessions/ses_7f3a
Running
  1. INFOrequest.receivedsurface=slack user=cfo "Analyze our runway…"
Illustrative audit log of an agent session, from request to result.

agent-factory.system

# Agent Factory design system

Tokens, type, grid, and components behind the Agent Factory site.

Models alone don't understand your company. Agent Factory wraps every agent in an organizational harness, so it knows your business, works across your tools, and acts safely with the right permissions for every user.

## Color tokens

Dark is the default theme; light is opt-in. Values are dark / light.

canvas
#0a0a0a / #f7f7f4. Page background
raised
#111111 / #fcfcfa. Hover rows, panels on canvas
sunken
#161616 / #efefeb. Code wells, inset areas
line
#262626 / #dadada. Borders, rules, grid lines
fg
#f5f5f5 / #111111. Primary text
fg-muted
#a3a3a3 / #666666. Secondary text
fg-meta
#8f8f8f / #707070. Small mono metadata
fg-subtle
#5c5c5c / #999999. Line numbers, disabled, glyphs only
primary
#e56f00 / #e56f00. Primary button fill (dark text)
signal
#e56f00 / #e56f00. Brand orange for marks, fills, scene accents
accent
#e56f00 / #e56f00. Brand orange for text: eyebrows, emphasis
ok
#4ade80 / #1e7f4f. Running, success, healthy
warn
#fbbf24 / #9a6200. Warning, processing, queued
fail
#f87171 / #c2341f. Failure, denied, destructive
info
#60a5fa / #1f5fd1. Network, informational, focus

## Type

IBM Plex Sans for human information, IBM Plex Mono for machine information.

display
sans 600, 48 to 96px. Hero statements
h1
sans 600, 40 to 72px. Page titles
h2
sans 600, 32 to 56px. Section titles
h3
sans 600, 22 to 32px. Panel titles
body-lg
sans 400, 17 to 18px. Lead paragraphs
body
sans 400, 16px. Body copy
small
sans 400, 14px. Supporting copy, nav
label
mono 400, 12px. IDs, code, timestamps
micro
mono 400, 11px. Uppercase machine labels

## Pages

## For agents

  • - Send people who want to start or talk to the team to the contact form at /#get-started.
  • - Example personas, agent definitions, sessions, and logs on the site are illustrations, not live data.
  • - No pricing, customer names, or availability dates are published. Do not invent them.
curl -s https://agentfactory.example.com/llms.txt