Video · Patterns

Patterns

Title sequences, transition templates, and recurring tutorial-frame compositions for Towbook video.

Tutorial frame layouts

Recurring 16:9 compositions used across Towbook tutorial videos. Always rendered on a black canvas, with the top-left identity bar reserved for badges and the bulk of the frame dedicated to a single amber headline + one supporting element.

Layout 01 · Headline + body + device

16:9 · 1920 × 1080

Use for product or feature intros — short amber headline paired with a single line of supporting body copy and one device crop. Headline stays under three words so the body copy carries the explanation.

16:9
Towbook Intelligence Towbook
Towbook Intelligence

The power of AI and Towbook together — built to empower an even better you.

towbook.com/tutorials
12:215G ●
Cloud Towing
BC
Bill Cloud
Driver
📞 Dispatching
🏷 Stickering
📥 Impounds
💬 Chat
📍 Map
⚙ Settings
↩ Sign out
canvas: #050608
headline: --color-tb-amber · 700 · -2%
badges: bg #0E0E0E · 1px #1F1F1F
grid: 7 / 5 columns · 56px gutter

Layout 02 · Screenshot + feature list

16:9 · 1920 × 1080

Used when stacking 4 – 8 capabilities. Screenshot lives flush-left and bleeds slightly under the headline column. List items use the same amber headline treatment, set one item per line, no bullets.

16:9
Towbook Accounts Tutorial Towbook
DashboardDispatchAccountsReportsSettings
Accounts & Customers
NameAddressPhone
ABC Motor Club 211 N Riverside Ave, St. Clair, MI (810) 320-5063
Axel Auto Repair 3410 Lapeer Road, Port Huron, MI (810) 320-5063
Cawood Automotive 2516 Pine Grove Avenue, Port Huron, MI (810) 987-3030
City of St. Clair 547 N. Carney Drive, Saint Clair, MI (810) 329-7121
CVS 1545 Fred W Moore Hwy, Saint Clair, MI (810) 326-1381
Dan's Towing 201 N Riverside, Ste E6, St. Clair, MI (810) 320-5063
Enterprise - Corporate 600 Corporate Park Dr, St. Louis, MO (855) 266-9565
Gunn Transport 311 South Bend, Brown City, MI (810) 321-4567
  • Cash Calls
  • Police Contracts
  • Dealerships
  • Body Shops
  • Fleet Customers
  • Motor Clubs
canvas: #050608
list item: 1 per line, no bullets
screenshot: bleed-left, drop shadow
item count: 4 – 8 max
Shared rules
  • ●Headline color is always --color-tb-amber. Never use brand blue for the headline — it disappears against the navy gradient in our intro animation.
  • ●Identity bar sits at x: 56px, y: 56px with a 4px gap between the wordmark tile and each badge.
  • ●Keep title-safe margins of 5% on every side — anything outside may be cropped by player chrome on TV.