Start from the end. The only thing a client pays for is a held meeting, so everything here is built from a week calendar: time sets the spacing, day columns make the grid, and event blocks are the components.
They decide what goes on a screen before anything is drawn. When two good ideas disagree, the one that keeps the calendar readable wins.
A held meeting lives in a calendar, so the calendar is where everything starts. Day columns are the grid, the hour sets the rhythm and event blocks are the components. If a screen cannot be read as a week filling up, it is the wrong screen.
Hatched is a forecast, solid is booked, a check means held, a strike means nobody came. The state is the message: a client pays only when a block turns solid and holds. Hue only tells one meeting from another.
A block settles when it is booked, a stamp lands when you approve, a check draws when a meeting is held. If nothing happened, nothing moves. With reduced motion every end state is already on screen.
Invented data says Example. Dylan says he is an AI agent in his first sentence. Figures name their source and their date. Nothing on a screen pretends to be more real than it is.
One primary action, in the one red, with the same words everywhere: Get my meeting plan. Everything else is secondary, outlined or a plain link, so nobody has to choose between two red buttons.
Two designed themes, Paper by day and Charcoal by night. Surfaces and ink stay quiet so the week can speak; hues tell meetings apart, states say what they cost, and red only ever means now. Click a hex or a token name to copy it.
Paper is the page, the sheet is the calendar on it, off-hours shades what sits outside working hours. Chrome is the window bar and the app sidebar.
Three steps of ink. Text uses the first, supporting copy the second, times, captions and small print the third.
Hour lines stay quiet so the blocks can speak. Anything a person has to find, like an input or an outlined button, gets the rule color.
The only saturated color in the system. It marks the present and the one thing to do next, so it never has to compete with anything.
If something is red, it is happening right now or it needs you right now. Nothing decorative is ever red, which is why a red button needs no arrow and no exclamation mark.
Five calm hues tell meetings apart and stone is the client's own time. Each hue is a pair: a tinted fill with a deep ink by day, a luminous fill with charcoal ink by night.
Live, in the theme you are viewing. The recipe for each state is fixed; only the hue changes between meetings.
A dashed edge and a hatch in the hue line, mixed at mtg-hatch-alpha. The label sits on a small sheet chip so it reads over the hatch.
The hue fill, the hue ink and a 30% hue edge. In Charcoal the fill drops to 26% and the text takes the luminous hue line.
The solid hue line with sheet text and a drawn check. In Charcoal, the luminous fill with charcoal ink. The only state that costs money.
Stone fill and stone edge at 80% opacity, the time and the name struck through. Dylan rebooks it.
Stone fill and stone ink with a 40% stone edge: the client's own meetings. Dylan books around them.
A dense stone hatch inside a solid stone edge. Busy time, or a company on the do-not-contact list.
Three translucent tokens, each with one job. They sit over the page, never over text.
WCAG 2 ratios, computed from the hex values when this page is built. Text pairs clear 4.5:1 and the edges of controls clear 3:1, in both themes.
| Pair | Paper | Charcoal | Used for |
|---|---|---|---|
| mtg-inkon paper, sheet and off-hours | 15.3:1 | 13.9:1 | All text |
| mtg-ink-2on paper, sheet and off-hours | 6.9:1 | 7.8:1 | Leads, supporting copy |
| mtg-ink-3on paper, sheet and off-hours | 4.7:1 | 5.4:1 | Times, captions, small print |
| mtg-now-inkon mtg-now | 5.2:1 | 6.2:1 | Primary buttons, the now label, pressed chips |
| mtg-nowon paper, sheet and off-hours | 4.5:1 | 5.7:1 | A field to fix, the you are here label |
| mtg-now-texton mtg-now-tint | 5.2:1 | 5.1:1 | The Example tag, counts waiting for you |
| Hue inkon its fill, five hues | 6.5:1 | 8.3:1 | Event blocks, avatars, tier cards |
| mtg-stone-inkon mtg-stone-fill | 7.1:1 | 7.9:1 | Your own meetings, no-shows |
| mtg-ruleon mtg-sheet | 3.3:1 | 3.1:1 | Input and button edges: 3:1 for parts of a control |
Bricolage Grotesque sets titles, prices and the wordmark. Hanken Grotesk sets everything you read. Every time, price and count is tabular, so columns line up like a calendar's gutter.
Live samples, in the classes the site uses. Sizes are font size over line height in pixels.
Your week, booked by an agent.
Three steps. Only the last one costs money.
Your domain never sends a cold email.
What counts as a held meeting?
$500
Dylan finds the people who buy what you sell.
You pay only for meetings that happen.
Figures as published on belkins.io
Example plan built from your answers
MON TUE WED
Oct 19 to 23, 2026
Times, prices and counts sit in columns. Bricolage draws a narrow 1, so its proportional figures drag a column out of line; every number set in the display face turns tabular figures on. Below, the same rows in Bricolage, both ways.
One 15-minute slot is 12px, so an hour is 48px. Padding, gaps and section rhythm are all counted in slots, the page is a working week, and a page reads top to bottom as one working day.
True size. Each tick is one 15-minute slot.
mtg-half-slotmtg-slotmtg-2slotmtg-3slotmtg-hourmtg-2hmtg-secmtg-3hOn the page an hour is 48px, and a 30-minute block holds one line. Inside the app an hour grows to 80px, so the same block holds two.
The content column is 1200px: a 60px time gutter and five day columns of 228px. Pages keep 24px edges on desktop and 16px on phones, and a product shot is never narrower than 560px on desktop.
Sections are hours: 08:00 at the hero, 18:00 at the footer, with the time in the gutter and a now dot that travels as you scroll. Each section pads 120px (ten slots) on desktop and 72px (six) on phones. Off-hours sections alternate with paper to keep the rhythm. This page keeps the same day.
Blocks round like every calendar's blocks, cards a little more, windows most. Shadows lift things in slots and stay warm by day, deeper by night.
mtg-block6px · Blocks, inputs, buttonsmtg-card12px · Cards, invites, toastsmtg-win16px · Product windowssheet18px · The intake sheetmtg-pill999px · Chips, today, avatarsmtg-d50% · The right side of the markmtg-shadow-cardLifted one slotmtg-shadow-popOver the weekmtg-shadow-toastToasts and invitesmtg-shadow-winProduct windowsBuilt from the same classes as meetdylan.ai and the product shots, shown at rest. Hover, tab and click them. Anything that shows data is the Harrow Line story and says Example.
Event blocks in five hues, sage, slate, plum, amber and teal, each as a forecast, booked and held, then the stone states: a no-show that is not billed, the client's own meeting and blocked time.
The signature component. One shape, six states, five hues: the state says what the meeting costs, the hue only tells meetings apart. The last row shows the stone states: a no-show, the client's own meeting and blocked time.
--s start and --d duration, against --h0 and the --row hour.<div class="ev sage booked" style="--s:630;--d:30">
<span class="l1"><span class="tm">10:30</span><span class="nm">Maya</span></span>
<span class="l2">VP Operations</span>
</div>
<!-- states: forecast, booked, held, noshow, own, blocked -->
<!-- hues: sage, slate, plum, amber, teal -->.ev.forecast.booked.held.noshow.own.blocked.l1.l2.ckEvery product shot is this one window, so the site reads as one product: the white sheet with a 1px line, 16px corners, the 44px chrome bar and a layered warm shadow, with the soft glow underneath.
.win-wrap.win.chrome.app.side.tbar.cal.nowline.panel.dayvButtons, fields and chips. The red appears once per screen; everything else is outlined, quiet and 48px tall where a thumb has to find it.
Primary is the one ask, in the now red, and reads the same everywhere. Secondary carries a rule-color edge, ghost turns red only on hover. Hover darkens, a press drops one pixel, focus draws a 2px ring.
.btn.primary.btn.secondary.btn.ghost.btn.sm.btn.lgFree preview in 30 seconds · No card · Nothing is sent without your approval
48px tall, 6px corners, a rule-color edge. Focus turns the edge red with a 3px tint halo. Errors say what to do next, in a full sentence. The site form is one field and the one ask: the smallest possible start.
.site-form.field.input.textarea.hint.err.microA choice chip carries a small dashed square, an open slot, that fills in when chosen. Chapter chips number the steps of the film and hold their timecode; the current one wears the red. Inside the app, states use the block legend and anything invented carries the Example tag.
.chips.chip.chapters.chip-s.state.sw.exThe parts that tell the story of a meeting: it lands, you approve, it is billed. Shown as they rest at the end of their motion.
Something happened somewhere else. A bold line says what, a muted line says when and who. Top right of a window, 12px corners, the toast shadow; it slides 16px in and leaves on its own.
.toastThe mark of a decision only a person makes: a plan, the first email of an angle, new spend. Sage edge and ink, caps, a 4 degree tilt and a soft shadow. Nothing goes out until it lands.
.stampx.approve-wrap.mini-btnEvery line is a meeting, never effort. A held line carries its block's hue and the price; a no-show is struck from the bill and rebooked. The total sits under a 2px rule in the display face.
.ledger.sw.held.amt.when.totWhat is approved wears the stamp; what waits for you gets the only red button. Protections are locked switches Dylan keeps on his own. Every launch has an ink toast with a ring that drains over 60 real seconds.
.rowlist.stampx.lockrow.switch.on.undo.ringFour steps, one at a time: Website, Buyers, Your plan, Hold your place. The current step wears the red, finished steps turn to ink with a check, and only the current label shows on phones. Back sits left, close right; Esc closes and the answers are kept. The plan is built before the email is asked for.
.sh-head.sh-stepsli.curli.done.sh-back.sh-x.plan-labelWhat the meeting owner reads before every call: who, why now, what they expect and who booked it. An off-hours head with the hue dot and the time, then rows that line up on an 84px label column.
.invite.iv-h.iv-t.iv-rLowercase subject, the AI disclosure first and highlighted in review. Dylan answers routine replies and hands pricing, legal and complaints to you with an amber chip. His avatar is the mark on red; people are initials.
.mail.mail-h.mail-b mark.thread.msg.handchip.typingPeople are initials in soft hue circles: no photos, no faces. Companies are monogram squares, never a real logo. Dylan is the only avatar with a mark, on the red.
.av.av.dylan.monoCounts sit in tiles at 24px, tabular, at 90% width. Credit is three slots: used ones are solid with a check, the one left is hatched like a forecast.
.tiles.tile.meter.slot.used.slot.leftSeven motions, one vocabulary, each one a beat in the story of a meeting. Only transform and opacity animate, loops pause off screen, and with reduced motion every end state is already there.
A block drops one slot, 12px, into place with a small overshoot, 70ms after the one before it. It says: this is on your calendar now.
Content enters 16px lower at zero opacity and rises into place, row by row. It says: this panel just filled in for you.
Numbers count up and ease out, in tabular figures so nothing jitters while they run. It says: this was counted, not typed in.
Dylan types after 600 to 900ms of typing dots, with small seeded variation and a beat after punctuation, so it reads the same way every time.
Slides 16px and fades in, holds long enough to read, then fades out. It says: something happened somewhere else, and here is what.
The approval mark lands from 1.15 to full size with a short press and a soft shadow. It says: you decided, and nothing went out before you did.
A held block draws its check with stroke-dashoffset, and the credit meter follows. It says: the meeting happened, so now it is billed.
The now line moves one minute per second while it is on screen, stops after forty minutes, and pauses the moment you scroll away.
Your device asks for reduced motion, so every demo shows its end state and the replay buttons rest.
Three curves. The spring overshoots a little, like a block dropped into its slot; everything else starts fast and lands softly.
cubic-bezier(.2, 1.2, .35, 1)Settle: the small overshoot of a block landing.cubic-bezier(.2, .8, .2, 1)Rise, toast, stamp, check and tick.cubic-bezier(.2, 0, 0, 1)Hover and focus, at mtg-tick (120ms).Dylan's voice is plain, confident and specific: short sentences, American spelling, no hype. Dylan is he, and he writes in the first person. When a sentence sells instead of describes, cut it.
Say what happens and what it costs, in the words a sales lead uses on a Tuesday.
Dylan books sales meetings into your calendar. You pay $500 for each one that happens.
Supercharge your pipeline with seamless, AI-powered outreach.
A range you can check beats a promise you cannot. Forecasts are ranges and say so.
6 to 13 held meetings per pass. A forecast, not a promise.
Tons of qualified meetings, fast, guaranteed.
Every invented company, person and number says Example. Real figures name their source and their month.
Trusted by 500 revenue teams.
In the first sentence of every first email, on the page and in replies. Never a fake name, never a fake person.
Hi Maya, I'm Dylan, an AI agent working with Harrow Line.
Hi Maya, Sam here from the team. Quick question about your fleet.
Ranges use "to". A break in a sentence is a comma, a colon or a period. Hyphens inside words are fine.
Oct 19 to 23. He writes, you approve.
The same four words everywhere, in the one red button. Everything else is a link or an outline.
24-hour times, the day and the date, the zone wherever a meeting is booked. Subject lines are lowercase, the way a person types them.
Booked: Thursday, Oct 22, 10:30 Eastern. Subject: fuel across your ohio sites
Next Thursday at 10.30am-ish? Subject: Quick Question About Your Fleet!!
The straight left edge is where a block meets the time gutter; the fully rounded right side turns the block into a D. Inside, a check: the meeting held. The check is cut out, not drawn on, so the mark works on any surface.
Keep a quarter of the mark's height clear on every side. At 48px that is 12px: one slot. In the lockup, the name sits a little over a quarter away.
Smallest with the check: 16px, as in the eyebrow chip. Smaller than that, use the plain block, mk-plain. The lockup sets the mark beside the word Dylan in Bricolage 600 at the same size.
Introduce Dylan with the lockup. The mark alone is for places that already say Dylan: the app, his avatar, toasts and the browser tab.
The mark is a block in the calendar, so it follows the block's rules: it never stretches, tilts or changes hue.
Don't stretch or squash it.
Don't tilt it. Only the stamp tilts.
Don't recolor it with an event hue.
Don't add shadows, outlines or glows.
Don't set the name in another typeface.
Don't crowd its clear space.
The same files this page is built from. Use them for a deck, a partner page, a mockup or your own code, and keep the rules above: one red, honest labels, time as the unit.
Every token with its light and dark value and what it is for: 32 colors, 12 type styles, 12 spacing steps, radii, shadows and 15 motion tokens.
The tokens as CSS custom properties, prefixed mtg. Paper by default, Charcoal with the visitor's system or data-theme, phone sizes for type and edges, and zero durations under reduced motion.
One path with the check cut out, so it survives any design tool. Red for Paper, coral for Charcoal, and ink or white for one-color work.
Four steps from a blank page to the system.
On meetdylan.ai the same values go by short names in the site's own base stylesheet, like --now, --paper and --slot. The downloads use the full token names, prefixed mtg, so they never collide with yours.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Hanken+Grotesk:wght@100..900&display=swap">
<link rel="stylesheet" href="https://meetdylan.ai/design/the-meeting.css">.card {
background: var(--mtg-sheet);
color: var(--mtg-ink);
border: 1px solid var(--mtg-line);
border-radius: var(--mtg-card);
padding: var(--mtg-2slot); /* 24px: half an hour */
box-shadow: var(--mtg-shadow-card);
font: var(--mtg-type-body);
}
.card h3 {
font: var(--mtg-type-h4);
letter-spacing: var(--mtg-type-h4-tracking);
}
/* the one red button */
.card .ask {
background: var(--mtg-now);
color: var(--mtg-now-ink);
border-radius: var(--mtg-block);
transition: background-color var(--mtg-tick) var(--mtg-ease);
}<!-- no attribute: follows the visitor's system -->
<html>
<!-- always Charcoal -->
<html data-theme="dark">
<!-- always Paper -->
<html data-theme="light">{
"name": "mtg-now",
"value": { "light": "#CC3417", "dark": "#FF6B4A" },
"usage": "The now line and primary actions. The only saturated accent."
}