Skip to content
Todkett

Design system

The building blocks of todkett.com. The look borrows from the control panels that run automated work: a calm grey panel, one safety-yellow signal for the action that matters, and status lights that tell you what state things are in. Every animation shows an automation doing its job, and each has a still version for people who turn motion off.

Color

Grey panels carry the page. Yellow is rare on purpose: it marks the primary action or the active state, nothing else. Status colors always come with a text label.

  • PanelLight #eef0ec, dark #141617Page background
  • SurfaceLight #fafbf9, dark #1c1f21Cards, panels and inputs
  • RecessedLight #e2e5e0, dark #262a2cHover fills and secondary buttons
  • GraphiteLight #1a1d1f, dark #eceeeaText and icons
  • Graphite softLight #50575c, dark #a3aaa6Supporting text
  • RuleLight #c9cec8, dark #2e3336Decorative dividers
  • Control outlineLight #7c837e, dark #6b7370Input and button outlines
  • SignalLight #ffc21a, dark #ffc21aPrimary action and active state only
  • RunLight #0f7350, dark #3dd68cCompleted, healthy
  • WaitLight #8a5300, dark #f5b54aPending, needs review
  • StopLight #b42318, dark #ff6b5eErrors, blocked

Text contrast on the panel: graphite 14.8:1 light and 15.5:1 dark; supporting text 6.4:1 and 7.7:1. Graphite on yellow 10.5:1. All pairings are checked against WCAG AA by an automated test.

Type

One family, Archivo, self-hosted. Headlines use its condensed widths and heavy weights so they read like stencilled panel labels; body text runs at normal width for comfort.

  • Automate the work that repeats.Display. 48 to 116px, weight 800, width 68%. One per page, in the hero.
  • Free tools that run in your browserHeading 1. 40 to 72px, weight 800, width 72%.
  • Sales follow-ups, handledHeading 2. 32 to 52px, weight 750, width 76%.
  • Check a resume against a job postHeading 3. 24px, weight 650, width 90%.
  • Tell us which workflow eats your week. We map it, price it and build it.Lead. 18 to 21px, weight 400. Intros under headings.
  • Plain rules run first, so bad input is stopped before it costs anything. Every run is logged.Body. 17px on 27px, weight 400. Lines stay under 75 characters.
  • Runs in your browser. Files never leave your device.Small. 14px, weight 500, width 94%. Captions, labels and meta.

Buttons

Yellow means the one action we most want on that screen. Everything else is outlined or quiet. Buttons say exactly what happens next.

Primary, in three sizes

Secondary actions

Icon only (named for screen readers) and disabled

Press Tab to see the focus ring: a 2px graphite outline in light mode, yellow in dark.

Cards and status

Each card type has its own shape because each does a different job. Tool cards answer the pointer with a soft glow; use-case and case-study cards stay still.

Runs in your browser

ATS resume checker

Compare a resume with a job post and see which keywords are missing. Your file never leaves your device.

Free tool
Sales

Reply to every new lead within five minutes

New form entries are checked, deduplicated and answered with a drafted reply your team approves.

Sample: about 6 hours saved a week
Case study, logistics company

Invoices matched to purchase orders without manual checks

Sample outcome: month-end close went from four days to one.

DoneWaiting for approvalStopped by a guardDraft

Motion patterns

Motion is used only to show an automation doing its job or to answer something you did. Turn on reduced motion in your device settings and each pattern shows its finished, still state.

1. Run panel

Plays once on page load: the checks tick through, then the light turns from amber to green. Pure CSS, so it adds no JavaScript to the hero. Reduced motion shows the finished run.

Lead follow-upDone
  1. New enquiry from the website formTrigger
  2. Email address is realRule check
  3. Not already in the CRMRule check
  4. Within today's limitGuard
  5. Reply drafted for reviewAI step
Example run. Plain rule checks happen before any AI step.

2. Scroll story

As you scroll, the wire fills and each step lights up while the record beside it fills in (wide screens). GSAP ScrollTrigger loads only when this section comes near, with Lenis smoothing wheel scrolling on this page. Reduced motion loads neither and shows every step as done.

  1. A request arrives

    A form entry, an email or a webhook starts the run. At this point nothing about it is trusted.

    Record status: Received

  2. Plain rules check it first

    Required fields, a real email address, size limits and duplicates are checked with simple rules. No AI is involved, so this step costs nothing and cannot be talked around.

    Record status: Checked

  3. Guards decide whether it continues

    Rate limits, a daily budget and a kill switch stop floods and runaway costs. Anything risky waits for a person to approve it.

    Record status: Cleared

  4. Only then does the AI step run

    A model drafts, sorts or summarises the clean input. Every result is logged, so you can see exactly what happened and why.

    Record status: Done

3. Live estimate

Move a slider and the total eases to the new value (a Motion spring) while the bars resize. This is the interaction style for the ROI calculator. Reduced motion updates the numbers instantly.

12 min
40 times
3 people

Time back each month if 80% of it is automated

hours

About 83 hours back each month.

Time spent now104 h
Time spent after21 h

Bars are drawn against one full-time month (160 hours) or the current total, whichever is larger.

Card and outcome text on this page is sample content. Back to the home page