Locomotive — Ledger Serif Agency

A design agency as a printed ledger: red projected-light hero, huge ruled serif work-index rows, ©-marks and mono annotations everywhere.

Source capture · 2026-09-05Open full image ↗

Content & mediaCreative tools

Design notes

Mood

Studied, archival, quietly theatrical. A studio presenting itself like a rare-books catalogue — precision bookkeeping wrapped around one burst of red heat.

Colors

Deep red/orange projected-light hero (#C33), then a cool off-white paper canvas with near-black ink for everything below. Black photo panels as punctuation. No accent color in the UI itself — red lives only in imagery.

Type

A transitional serif does the heavy lifting: the agency line over the hero and enormous centered work-index entries (Lightship, Wolverine Worldwide...) between hairline rules. Tiny grotesk and mono for metadata — ©2008-2026 marks, boxed OPS|DES|DEV tags, asterisks and annotation glyphs, '(13)' counters. Large serif paragraph as manifesto.

Layout

Full-bleed photo hero with serif overlay, then a strict ruled ledger: full-width index rows separated by hairlines, a two-column Extras/Articles table with label column left and entries right, dated culture rows '(2024) Locomotive in Jamaica'. Small captioned photo blocks float asymmetrically between systems.

Motion

Smooth inertial scrolling (they built Locomotive Scroll): index rows reveal with soft translate, images parallax gently, hover on an index row swaps in a work preview. Deliberate, weighty, never bouncy.

Texture

Paper-flat UI with hairline rules; photography carries all texture — projector grain, deep blacks, film contrast. No shadows, no rounding, no gradients.

Imagery

Art-directed photography with projected light: red/orange typographic projections washing over a figure for the hero, plus stark black-and-white cutout figures and macro object stills (a ring, an artifact) on black. kie-ai Seedream for the projected-light and cutout shots; Pexels only for authentic candid textures. Nothing smiling, nothing stocky.

Don't

No color-coded cards, no rounded corners, no bold sans headlines, no icon sets. Never decorate — every mark (©, ✳, boxed tags) must read as functional annotation, not ornament.

Make it your own

Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.

Your project

Use withAny AI toolCodexClaudeCursorChatGPTGeminiv0 / LovableI want toBuild a screenAudit my UIWrite a design brief

Tech stackUse the existing project stackReact / Next.jsAstroVue / NuxtSvelte / SvelteKitHTML / CSS / JavaScriptSwiftUIFlutter

Add constraints

What should the tool respect?

Preview & edit prompt

Prompt text# My project [Describe the product, audience, and screen you want to improve] Stack: Use the existing project stack Task: Implement the interface and verify the result in the existing project. ## Tool guidance (Any AI tool) Use available project tools to inspect, implement, and test. State any unavailable capabilities. # Design reference: Locomotive — Ledger Serif Agency Source: https://locomotive.ca Swipefile reference: https://swipefile.design/ref/locomotive-agency/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: a page excerpt. Do not infer unseen sections or interactions. ## Objective Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets. ## Reference notes - mood: Studied, archival, quietly theatrical. A studio presenting itself like a rare-books catalogue — precision bookkeeping wrapped around one burst of red heat. - colors: Deep red/orange projected-light hero (#C33), then a cool off-white paper canvas with near-black ink for everything below. Black photo panels as punctuation. No accent color in the UI itself — red lives only in imagery. - typography: A transitional serif does the heavy lifting: the agency line over the hero and enormous centered work-index entries (Lightship, Wolverine Worldwide...) between hairline rules. Tiny grotesk and mono for metadata — ©2008-2026 marks, boxed OPS|DES|DEV tags, asterisks and annotation glyphs, '(13)' counters. Large serif paragraph as manifesto. - layout: Full-bleed photo hero with serif overlay, then a strict ruled ledger: full-width index rows separated by hairlines, a two-column Extras/Articles table with label column left and entries right, dated culture rows '(2024) Locomotive in Jamaica'. Small captioned photo blocks float asymmetrically between systems. - motion: Smooth inertial scrolling (they built Locomotive Scroll): index rows reveal with soft translate, images parallax gently, hover on an index row swaps in a work preview. Deliberate, weighty, never bouncy. - texture: Paper-flat UI with hairline rules; photography carries all texture — projector grain, deep blacks, film contrast. No shadows, no rounding, no gradients. - dont: No color-coded cards, no rounded corners, no bold sans headlines, no icon sets. Never decorate — every mark (©, ✳, boxed tags) must read as functional annotation, not ornament. ## Acceptance criteria - Existing project conventions, design tokens, working functionality, and unrelated changes are preserved. - Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product. - Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap. - Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled. - Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported. - Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service. ## Quality bar Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.

Copy promptDownload .md

Assembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.