toolforge.ai
Web design system. Black and white carry the structure; deep signal red marks the single most important action on a view; signal yellow is reserved for caution and highlight.
v1.1.0 10 August 2026 · supersedes 1.0.0 in full
ANALYTICS|APPLICATIONS|AUTOMATION|AGENTICS
00 · HANDOFF CONTRACT — NON-NEGOTIABLE
READ BEFORE WRITING ANY CODE
This file is the specification, not a starting point. Reproduce it exactly. Do not substitute fonts, adjust colours, re-draw the mark, re-order the service line, add gradients, add rounded corners, or "improve" spacing. If a value is not in this file, ask — do not invent one.
RULE 1 — MARK COLOUR
The mark is #0B0B0B on light or #FFFFFF on dark. It is never red, never yellow, never tinted, never gradient, never outlined, never given a keyline.
RULE 2 — REVERSAL IS EXPLICIT
On a dark field every part of the lockup gets an explicit fill / color of #fff. Never let the mark, wordmark or service line inherit a colour.
RULE 3 — THE SERVICE LINE
Always these four words, always this order, always pipe-separated: ANALYTICS | APPLICATIONS | AUTOMATION | AGENTICS. Roboto Condensed 700, uppercase, letter-spacing:0.11em. Separators are pipes at #5E5E5E on dark, #B6B1A8 on light. Never abbreviate, re-word, or re-order.
RULE 4 — RED IS AN ACTION, NOT A BRAND COLOUR
One #C0111B primary action per view — never two competing buttons. Failure states are exempt: a table may show ten red cells. Red never colours the logo, body copy, headings, or a field larger than a cap bar.
RULE 5 — TYPE
Poppins for everything structural, Roboto Condensed 700 for labels and the service line, Geist Mono for data and code. No Inter, no Roboto, no system fallback as a design choice.
RULE 6 — GEOMETRY
UI is square: border-radius:0 unless named below. Avatars and status dots are 50%. The mark carries its own 5.8% corner inside the path — never add radius to its container. Borders: 1 hairline, 2 control, 3 rule, 4 ring, 6 accent, 8+ portrait ring. No shadows, no blur, no gradient fills.
THE REVERSED LOCKUP — REPRODUCE PIXEL FOR PIXEL
toolforge.ai
ANALYTICS|APPLICATIONS|AUTOMATION|AGENTICS
Three things carry an explicit white: the SVG fill, the wordmark color, and the service line color. The pipes are the only grey element. Mark height sets the lockup: wordmark cap height matches mark height, gap is 0.40 × mark height, service line sits 20px below.
COPY THIS MARKUP VERBATIM — DO NOT RETYPE IT
{{ lockupSnippet }}
KNOWN FAILURE MODES — EACH OF THESE IS A REJECTION
toolforge.ai
ANALYTICS|APPLICATIONS|AUTOMATION|AGENTICS
✕ BLACK ON BLACK
The default ink colour was left in place on a dark field. Only the pipes survive.
toolforge.ai
✕ MARK RECOLOURED
The accent was applied to the identity. The mark is only ever black or white.
ToolForge AI
✕ REDRAWN LOCKUP
Keyline added, wrong face, wrong casing, wrong name. The wordmark is toolforge.ai, lowercase.
toolforge.ai
Analytics, applications & automation
✕ SERVICE LINE REWRITTEN
Words dropped, sentence case, wrong face, no tracking. Four words, pipes, condensed bold, always.
BEFORE YOU SUBMIT
Screenshot every dark-field surface and confirm the mark, wordmark and all four service-line words are legible. Confirm no logo anywhere is red. Confirm exactly one red element per view. Confirm every font in the page is Poppins, Roboto Condensed or Geist Mono. If any check fails, the work is not done.
01
Colour
Ink
#0B0B0B
Ink 60
#45423D
Muted
#8A857C
Line
#DCD8D0
Canvas
#F1EFEA
Paper
#FFFFFF
Signal Red
#C0111B
Red Press
#96070F
Red Tint
#FBE9EA
Signal Yellow
#FFC400
Yellow Tint
#FFF6D6
Success
#157F3D
SUPPORT — REQUIRED TO BUILD, NOT OPTIONAL
Ink Line
#262626 · rule on Ink
Ink Raised
#1A1A1A · panel on Ink
Ink Sunken
#141414 · code block
Pipe Dark
#5E5E5E · separator on Ink
Pipe Light
#B6B1A8 · separator on light
Muted Rev
#B8B4AE · body on Ink
Code Rev
#D8D4CE · code on Ink
Disabled
#C6C2BA · out-of-range date
Divider
#EEEBE5 · inside a card
Zebra
#FAF9F6 · alternate row
Shimmer
#F7F5F1 · skeleton highlight
Red Press
#96070F · hover, active
Red Rev Tint
#FFD9DB · text on red
Yellow Press
#E6B000 · hover, active
Yellow Text
#8A6A00 · warn text on light
Yellow Deep
#4A3F00 · body on Yellow
Twenty-seven hexes, and no twenty-eighth. Every colour the reference page renders is on one of these three rows. If a surface needs a value that is not here, the answer is not a new hex — it is the wrong surface.
One red action per view: if two buttons are red, neither is the action. Red status marks are unlimited. Yellow carries text only at 16px and above on light surfaces; on Ink it is legible down to 12px. Below 16px on light, use yellow as a fill behind ink or as a rule.
02
Typography
Every size, tracking and leading the system uses is named here. Nothing outside these three tables appears anywhere in the reference page, and nothing here is optional to look up.
SIZE — 20 STEPS
64
Numeral — 404, hero figure
56
Display
44
Metric L — card figure
42
Wordmark, page header
40
H1 · Metric M — stat band
30
Wordmark, footer · band head
28
H2 — section head
26
404 head
24
Wordmark, nav · modal title
22
Panel title
20
H3 · card title
19
Article card title
18
Lead · metric unit
17
Button L · person name
16
Body L — long-form
15
Body — the default. Buttons, inputs, table rows, nav, card copy.
14
Small · dense table · mono data
13
Helper · caption · button S
12
Label — the default label size
11
Label S — badge in a table cell
TRACKING — BOUND TO ROLE
−0.03
Metric L and M, display numerals
−0.025
Wordmark — every size
−0.02
H1, H2, band heads
−0.01
H3, card titles
0
All body, all mono
+0.11
Service line · badge · text action
+0.13
Label — the default
+0.18
Section number only
Eight values, no ninth. A label is +0.13 unless it is one of the three named exceptions. Tightening scales with size: nothing above 28px is looser than −0.02, nothing at or below 16px is tighter than 0.
LEADING — BOUND TO SIZE
1
Metrics and numerals — single line
1.05
Display 56
1.15
H1 40
1.25
H2 28
1.35
H3 20, card title 19
1.4
Pull-quote 24
1.55
Caption 13, dense list 14
1.6
Body in a tight box
1.65
Lead 18, hero copy
1.7
Body 15 — the default
1.75
Body 16 long-form, mono block
1.9
Terminal only
Leading falls as size rises. If a size is not listed, it is not a text size — it is a numeral, and numerals are always 1.
DISPLAY / 56 / 600
Analytics that ship
H1 / 40 / 600
Pipelines, not slide decks
H2 / 28 / 600
Section heading
H3 / 20 / 600
Subsection heading
BODY / 16 / 400
Body copy runs at 16 over 1.7 on a measure of about 620 pixels. Long-form pages hold the same measure; dense product views drop to 15.
SMALL / 14 / 400
Secondary copy, captions, helper text.
LABEL / 12 / 700
EYEBROW · TABLE HEAD · METADATA
MONO / 14 / 400
forge run --pipeline=daily_revenue
03
Buttons
VARIANTS
SIZES
04
Forms
Lowercase, hyphens allowed.
Key rejected — check the prefix.
▾
CHOICE
TOGGLE & RANGE
Alerts on
Alerts off
062100
05
Status — badges, alerts, toast
DEFAULT FAILED DEGRADED HEALTHY OUTLINE MUTED Running Stopped
i
Scheduled maintenance Sunday 02:00–04:00 UTC
Pipelines queue and resume automatically.
!
Pipeline daily_revenue failed at step 4
Upstream table missing 3 partitions.
△
Run took 4× longer than the 30-day median
No action required yet.
Export queued — we'll email you when it's ready.
DISMISS
06
Cards & metrics
ROW 1 — LIGHT FIELD, RULE-CODED · THE DEFAULT
RUNS TODAY
1,284
No change vs yesterday
COMPLETED
1,277
+12% vs yesterday
P95 LATENCY
840ms
Above the 600 ms target
FAILURES
7
3 unacknowledged
Use this row for any grid of four or more metrics. The state lives in the 6px top rule and the foot line; the value itself always stays #0B0B0B so the row scans as one set.
ROW 2 — SOLID FIELD, INVERTED · FEATURE ONE METRIC ONLY
AGENTS ACTIVE
36
4 idle
UPTIME
99.98%
Thirty-day window
QUEUE DEPTH
128
Draining, 4 min to clear
INCIDENTS OPEN
2
Oldest 41 minutes
A solid card outranks everything around it. One per view, never two adjacent, never a full row of four in production — the four here are the palette, not a layout. On any solid tone field all text is #FFFFFF, except Signal Yellow, which takes #0B0B0B throughout. Hierarchy comes from size and weight, never from a tinted colour — tints on a saturated ground fall below 4.5:1.
TONE
VALUE
LIGHT FIELD
WHEN TO USE
MAX / VIEW
Neutral
#0B0B0B
Black top rule, grey foot
A count with no judgement attached. The default — reach for this first.
no limit
Positive
#157F3D
Green top rule, green foot
A target met or a favourable movement. Never for a number that is merely large.
2
Advisory
#FFC400
Yellow top rule, #8A6A00 foot; #0B0B0B on a yellow fill
Off target but not failing. No action required yet.
2
Critical
#C0111B
Red top rule, red foot
Failing, breached, or needing a person now.
1
Unavailable
—
Hairline only, foot reads —
No data for this window. Never render a zero in place of missing data.
no limit
ANATOMY
16px top rule — carries the state
2Label, Roboto Condensed 700 / 12 / +0.13em
3Value, Poppins 600 / 44 / −0.03em
4Unit, 22px regular, muted
5Foot, 14 / 500, tone colour
MEASUREMENTS
padding  24 26 26
gap      10
border   1px #DCD8D0
rule     6px tone
grid gap 20
min width 200
NEVER
✕Colour the value instead of the rule
✕Two solid cards side by side
✕Green on a number that has no target
✕Yellow text on white — use #8A6A00
✕A shadow, a radius, or a gradient
Feature card
Mark in ink, heading, two lines of copy, one text action. No shadow, one hairline.
READ MORE →
Accent card
A red cap bar marks the primary item in a set. Use once per group.
ANALYTICSAGENTICS
Person card
FOUNDER
Portrait keeps its black ring at every size down to 40px.
07
Data table
PIPELINE
OWNER
LAST RUN
DURATION
STATUS
daily_revenue
M. Pardo
06:00
4m 12s
FAILED
churn_features
A. Lin
05:30
11m 03s
OK
agent_dispatch
R. Okoye
05:00
1m 48s
SLOW
warehouse_sync
A. Lin
04:15
27m 40s
OK
4 of 128 pipelines
1 2 3 →
08
Navigation
toolforge.ai
Pipelines Agents Data Docs
WORKSPACE
Overview
Pipelines
Schedules
Alerts
Settings
WORKSPACE/PIPELINES/DAILY_REVENUE
Runs
Schema
Lineage
Settings
DROPDOWN
Last 24 hours▾
Last 7 days
Last 30 days
Custom range…
09
Overlays & feedback
Delete pipeline?
This removes daily_revenue and its 1,284 run records. Downstream schedules will fail on the next tick.
PROGRESS
Step 4 of 667%
Loading…
No runs yet
Connect a source and schedule your first pipeline.
10
Terminal, code & avatars
FORGE CLI
$ forge run --pipeline=daily_revenue
→ resolving 6 steps
→ step 1/6 extract ok 0.8s
→ step 2/6 stage ok 1.4s
→ step 3/6 model ok 12.2s
→ step 4/6 publish failed
error: partition 2026-08-04 missing from source
$ ▍
AVATARS
AL
RO
+9
TOOLTIP
Last run 4 minutes ago
11
Grid, spacing & footer
SPACING — THREE TIERS, NOT ONE SCALE
A single permitted-steps list cannot describe this system, because three different things are being spaced and they obey different laws. Every value in the reference page belongs to exactly one tier below.
TIER
PERMITTED VALUES
GOVERNS
1 · Layout
4 8 12 16 20 24 32 40 48 56 64 120
Page frame, section gaps, grid gutters, stacks between components. Strict 4px grid — no exceptions.
2 · Component
tabulated per component
Padding inside a control or card. Optically set so the box reads right, then frozen. Copy the component's literal value; never derive a new one.
3 · Lockup
ratio of mark height
Mark-to-wordmark gap is 0.40 × mark height. Service line sits 0.42 × mark height below. Clear space is 0.25 × on all four sides. These produce non-grid numbers by design.
CORNERS — TWO VALUES, NO THIRD
0
50%
UI is 0. Avatars and status dots are 50%. The mark's 5.8% corner lives inside the path — its container is square. There is no 7px and no 9px.
BORDERS — SIX ROLES
1  hairline, table row
2  control, input, button
3  section rule, active tab
4  avatar ring, sidebar active
6  accent bar, card cap, alert
8+ portrait ring (scales with Ø)
NESTING — FRAME VS BLOCK
Card — inside the frame
Band — breaks the frame
The page frame is 56px 48px 120px. Cards, tables and forms sit inside it. Only full-bleed bands — hero, footer, closing CTA — carry their own padding and break out. A block never does both.
toolforge.ai
ANALYTICS|APPLICATIONS|AUTOMATION|AGENTICS
COMPANY
About Contact Legal
12
Inputs — search, chips, upload, date
SEARCH
/
FILTER CHIPS
Failed× Owner: A. Lin× + Add filter
SEGMENTED CONTROL
Table
Graph
Log
FILE UPLOAD
Drop a .csv or .parquet here
or click to browse · 200 MB max
DATE PICKER
‹ August 2026 ›
MTWTFSS
272829303112 3456789 10111213141516 17181920212223 24252627282930
KEYBOARD
Press ⌘K to open the command palette
13
Disclosure, steps, timeline, lists
What counts as a run?
−
Any invocation that reaches step 1, including dry runs. Cancelled runs still count against the quota.
Can agents write to production?
+
How is latency measured?
+
STEPPER
1
Source
2
Schedule
3
Review
TIMELINE
Run failed at publish
06:04 · 2 min ago
Model step completed
06:03
Run started
06:00
M. Pardo acknowledged the daily_revenue failure
2 minutes ago
INCIDENT
⋯
AL
A. Lin changed the schedule to hourly
41 minutes ago
CONFIG
⋯
RO
R. Okoye deployed agent_dispatch v4
Yesterday, 18:20
DEPLOY
⋯
14
Command palette & drawer
> ESC
PIPELINES
run daily_revenue ↵
run daily_margin
ACTIONS
Open run history
Cancel all queued runs
Run detail
×
PIPELINE
daily_revenue
STATUS
FAILED
DURATION
4m 12s
15
Marketing blocks
AGENTIC ANALYTICS
Every pipeline explains itself.
Hero blocks run black. One red button, one yellow eyebrow, nothing else competes.
STARTER
$0
3 pipelines
1,000 runs / month
Community support
MOST TEAMS
TEAM
$480/mo
Unlimited pipelines
100,000 runs / month
Agents and alerting
ENTERPRISE
Talk
Private deployment
SSO and audit log
Named engineer
Ready to forge something?
Yellow bands close a page. Never more than one per page.
16
Site modules
The site nav below and the app top bar in §9 are two components, not one. Both are Ink at 76px with a 40px white mark, a 24/600 wordmark, 15/500 links and a 3px red active underline. They differ deliberately: the app bar carries a 40px avatar with a 3px white ring and no bottom border; the site nav carries a bottom border at Ink Line, no avatar, a tighter 28px link gap, and a borderless CTA. Use §9 behind a login, §16 in front of one.
toolforge.ai
Platform Solutions Docs Pricing
ANALYTICS
Warehouse modelling
Dashboards
Attribution
APPLICATIONS
Internal tools
Client portals
Integrations
AUTOMATION
Pipelines
Scheduling
Alerting
AGENTICS
Agents that read the warehouse and act on it.
SEE HOW →
TRUSTED BY
CLIENT LOGO
CLIENT LOGO
CLIENT LOGO
CLIENT LOGO
CLIENT LOGO
CLIENT LOGO
The audit landed on a Tuesday and we had the fixes shipped by Friday. Nobody had to translate anything.
Name Withheld
HEAD OF GROWTH
1.2 s
MEDIAN LCP AFTER
+38%
ORGANIC SESSIONS
9
DAYS TO SHIP
0
MANUAL REPORTS
CAPABILITY
STARTER
TEAM
ENTERPRISE
Scheduled pipelines
3
Unlimited
Unlimited
Agent actions
—
Included
Included
SSO and audit log
—
—
Included
Named engineer
—
—
Included
PERFORMANCE·6 MIN READ
What an 8-second LCP actually costs you
Field data, not lab scores, and what to do first.
AGENTICS·4 MIN READ
Giving an agent write access, safely
Scoped credentials, dry runs, and a rollback path.
ANALYTICS·9 MIN READ
Attribution without the guesswork
A modelling approach that survives audit.
CHANGELOG
2026-08-06
BREAKINGAgent tokens now scope per pipeline
Existing workspace tokens keep working until 1 October.
2026-07-29
ADDEDCommand palette
Press ⌘K anywhere to run, cancel or jump to a pipeline.
Get the monthly note
One email a month. What broke, what we fixed, what it cost.
We use one first-party cookie to count page views. No third-party trackers.
404
That page moved or never existed.
Try the command palette, or head back to the overview.
Start a conversation
Replies within one business day.