--- name: Workhorse slug: workhorse version: 1.1.0 lastUpdated: 2026-05-21 canonicalUrl: /brand/workhorse --- # Workhorse Brand Spec > Independent design studio since 2014. Strategic design partners for experts, entrepreneurs, and enterprise. Brands that help experts execute. This is the agent-optimized brand spec. It mixes the human-authored brand book with structured sections from the JSON tokens. Use it to author on-brand copy, generate assets, or wire tokens into a client repo. ## How to use this spec If you are an AI agent (Cursor, Claude Code, ChatGPT, internal Workhorse session agent, or other) generating copy or assets for this brand, treat this document as canonical: 1. **Read the Voice section first.** Tone words, guidelines, banned terms, preferred terms. 2. **Match the surface.** When you write a hero, CTA, newsletter intro, social caption, press quote, or any other surface, find that surface under "Surface do/don't" and follow the do/don't pattern explicitly. 3. **Call prompts by id.** When the user asks for something that maps to a `promptKit` entry (e.g. `newsletter-intro`, `hero-line`, `agency-pitch`), use that prompt's template structure and example output. 4. **Cite the spec.** When you produce on-brand copy, end with a short footer like `(brand · v1.1.0)`. 5. **Never use banned terms.** Prefer `preferredTerms`. The list at the bottom of the Voice section is opinionated for a reason. 6. **Spec.json is also available.** Same content, structured as JSON, at `/brand/workhorse/spec.json`. Use it when you need programmatic access to a specific section. --- ## Foundation **Founding belief.** Brands are not a facade, they're the foundation. **Tagline.** Opinionated about practice. Open about platform. **Homepage line.** Brands that help experts execute. **Descriptor.** Strategic design partners for experts, entrepreneurs, and enterprise. **Value proposition.** Brands that help experts execute. **Origin.** Independent design studio founded 2014. Originally based in a 1902 carriage house on Capitol Hill, Washington D.C. Partners: Abe Garcia and TJ Cichecki. ## Audience Experts, entrepreneurs, and enterprise leaders who need their brand to work as hard as they do. - Smart people leading organizations, businesses, and communities - Cultural institutions, civic organizations, professional enterprises - Operators who treat design as infrastructure, not decoration - Founders building AI-native products who need a brand stack their agents respect ### The Expert *Author, scholar, practitioner, or specialist building a public-facing practice* An expert in their field whose work outpaces their visual presentation. Knows their audience but cannot give them a coherent surface to engage with. Wants a partner who can read a body of work and give it form without losing the substance. **Needs:** Identity that respects the depth of the work; A publishing surface that holds long-form thinking; Help articulating the practice without reducing it **Avoids:** Studios that lead with mood boards before research; Identities that look like every other thought-leader site; Generic positioning that flattens the field **Channels:** Direct referral from prior clients or collaborators; Speaker introductions at industry conferences; Notes essays and long-form writing ### The Entrepreneur *Founder or operator of a growing organization* Building a company in a space where the brand has to do real strategic work. Past the seed stage, into the years when the brand decides the next round, the next hire, the next category. Needs a partner who can hold the long view while shipping weekly. **Needs:** Strategic positioning that survives a Series B pitch; Identity systems that scale with the team; Tokens and components their developers can ship from; AI-ready brand context their agents actually respect **Avoids:** Studios that hand off PDFs and disappear; Identities that break the moment a junior designer touches them; Positioning written by people who never met the company **Channels:** Direct outreach via the platform site; Engagement tier landing pages ($4,500, $95,000, $145,000, $12,500); Peer recommendations across the founder community ### The Enterprise Leader *VP, Director, or Chief of Brand at a cultural, civic, or professional institution* Operates inside an institution with weight. Museum, library, festival, agency, professional association. Cares about institutional credibility and long-arc cohesion. Procurement-aware. Wants a studio that has worked in their world before. **Needs:** A studio with eleven years of institutional work; Documented systems that survive team turnover; Procurement-friendly engagement structure; References from peer institutions **Avoids:** Studios that scale into agencies the moment work shows up; Identities optimized for VC pitches, not institutional gravity; Process that lacks rigor on stakeholder review **Channels:** Direct referral from peer institutions; Procurement RFPs (we hold institutional case studies for review); Industry conferences and sector events ## Voice **Tone:** Direct, Informed, Confident, Plain-spoken, Precise ### Guidelines 1. **Write like you would explain it to a smart client across a table.** *(from Authentic)* No jargon, no filler, no corporate distance. Plain language that respects the reader's intelligence. If a sentence sounds like it belongs in a pitch deck, cut it. 1. **Be specific. Name the thing.** *(from Precise)* Don't say 'deliverables.' Say wordmark, event signage, component library. Specificity builds trust. Vagueness signals that you haven't thought it through. 1. **Have a point of view and state it plainly.** *(from Discerning)* Hedging weakens everything. 'We believe that perhaps' is noise. Say what you think and why. Clients hire Workhorse for judgment. 1. **Write for the long term. No trend language.** *(from Committed)* Avoid buzzwords that will date the writing in two years. Synergy, paradigm shift, disrupt. If the word would embarrass you in 2030, do not use it in 2026. 1. **Lead with the thinking, not the feeling.** *(from Intelligent)* Workhorse copy should read as informed. Reference the research, the context, the history when it serves the point. Depth and substance over inspirational platitudes. 1. **No em dashes. House style.** *(from Precise)* Use commas, semicolons, periods, colons, or parens. Em dashes have become a crutch in brand writing and Workhorse does not use them anywhere: body copy, captions, data, commits. 1. **Active voice. Say who did what.** *(from Authentic)* We designed the identity system, not the identity system was designed. Passive voice hides the actor. Workhorse does not hide. 1. **Short sentences carry more weight than long ones.** *(from Precise)* Mix sentence lengths for rhythm, but when you have something important to say, say it short. The strongest statements in any piece of writing are usually the shortest. ### Surface do/don't #### `hero` *Hero copy works in 4-9 words and reads as a thesis, not a slogan. Studio register or platform register depending on the surface.* **Do:** - The creative ops platform for AI-native brands. - Strategic design partners for experts, entrepreneurs, and enterprise. - Brands are not a facade, they're the foundation. - Brands that empower, influence, and endure. **Don't:** - Empowering brands through innovative design solutions. - Your trusted partner for all things branding. - We help businesses unlock their full potential. - Where strategy meets creativity meets execution. #### `subhead` *The subhead earns the hero. Concrete, no metaphor inflation.* **Do:** - Build, publish, and grow with agentic workflows that respect the brand context. - Independent design studio since 2014. Capitol Hill, Washington D.C. - Two registers, one brand. The studio inside the work, and the platform that scales it. **Don't:** - Comprehensive brand solutions for the modern enterprise. - Industry-leading expertise across the entire branding spectrum. - Your one-stop shop for all things creative. #### `cta` *CTAs are concrete next actions. Workhorse copy treats the reader as an adult.* **Do:** - Start an engagement - See the work - Read Notes - Book a discovery call **Don't:** - Get started - Learn more - Click here - Discover Workhorse #### `press_quote` *Pull-quote lines stand alone, hold weight, and read as a thesis.* **Do:** - Brands are not a facade, they're the foundation. - Opinionated about practice. Open about platform. - We named ourselves Workhorse because we meant it. - Every visual decision traces back to a strategic one. **Don't:** - Workhorse is a leading provider of brand and design services. - Our team brings passion and creativity to every project. - We strive to deliver excellence through thoughtful design. #### `bio_short` *40 words. Studio identity, what we do, who we serve, year. No fluff.* **Do:** - Workhorse is an independent design studio founded 2014. Strategic design partners for experts, entrepreneurs, and enterprise. Identity systems, design infrastructure, and the creative ops platform for AI-native brands. Capitol Hill, Washington D.C. **Don't:** - Workhorse is a creative collective passionate about helping brands tell their stories through innovative, thoughtful design solutions tailored to each unique client's needs and goals. #### `newsletter` *Notes essays open with the question or the observation, not the marketing wrapper. Process-honest, AI + Workhorse register.* **Do:** - We've been working on something we are not sure how to talk about yet. This is a draft of trying. - Three years of building the platform inside the studio. Here is what we got wrong, and where the model is going next. - An honest read of where AI fits inside an identity engagement, and where it does not. **Don't:** - Excited to share our latest insights on the future of branding! - Did you know that Workhorse has been doing amazing work since 2014? - In today's rapidly evolving design landscape, brands face unprecedented challenges. #### `meta_description` *Under 160 characters. Studio register or platform register, never both.* **Do:** - Independent design studio since 2014. Strategic design partners for experts, entrepreneurs, and enterprise. Capitol Hill, Washington D.C. - Creative ops platform for AI-native brands. Build, publish, grow with agentic workflows and brand context every agent respects. **Don't:** - Workhorse is a leading provider of comprehensive branding and design services dedicated to helping organizations achieve their creative goals. ### Prompt kit Pre-baked prompts. Agents call by `id`. #### `studio-pitch` · Open a studio outreach email *Surfaces: `email_subject`, `email_body`* ``` Write the opening 2 paragraphs of a Workhorse outreach email to {organization} about a {engagement-type} engagement (Discovery Sprint $4,500, Brand Foundation $95,000, Studio Engagement $145,000, or Studio Retainer $12,500/mo). Studio register: strategic design partners for experts, entrepreneurs, and enterprise. Reference one specific thing about {organization} that drew us in. No fluff. No 'we are excited to.' ``` #### `about-blurb` · Write a 40-word studio blurb *Surfaces: `bio_short`* ``` Write a 40-word Workhorse blurb tailored for {context} (e.g. partner directory, conference speaker bio, RFP response, podcast intro). Studio register: independent since 2014, Capitol Hill, strategic design partners for experts/entrepreneurs/enterprise. Mention 2014 and the descriptor if length allows. ``` #### `engagement-line` · Write a hero line for an engagement page *Surfaces: `hero`* ``` Write 3 hero headline options (4-9 words each) for a Workhorse engagement page. Engagement: {tier} ({Discovery Sprint $4,500 / Brand Foundation $95,000 / Studio Engagement $145,000 / Studio Retainer $12,500/mo}). Studio register. Reference the actual outcome the tier delivers, not generic 'transform your brand.' ``` #### `platform-line` · Write a platform-page hero line *Surfaces: `hero`* ``` Write 3 hero headline options (4-9 words each) for the Workhorse platform page. Platform register: 'creative ops platform for AI-native brands.' Reference one of the platform capabilities (agentic workflows, brand context, doc-to-site pipeline, design tokens, multi-agent brand stack). Honest, process-aware, no SaaS overpromise. ``` #### `post-engagement` · Announce a project ship *Surfaces: `newsletter`, `social_caption`, `announcement`* ``` Write a 60-90 word announcement for a Notes essay or social post about a recently shipped engagement for {client}. Lead with what we shipped (specific deliverables: identity, site, system, etc.), then a single sentence on what made it interesting, then a CTA to read the case study. Workhorse voice: direct, informed, no hype. ``` #### `press-quote` · Pull-quote line for press *Surfaces: `press_quote`* ``` Write 5 standalone pull-quote lines (under 12 words each) on the topic of {topic}. Workhorse voice: thesis, not slogan. Each must work as a poster line. No 'we strive to.' No generic empowerment language. ``` #### `notes-intro` · Open a Notes essay *Surfaces: `newsletter`* ``` Open a Notes essay on {topic}. 60-100 words. Process-honest, AI + Workhorse register. Lead with the question, the observation, or the honest unknown. Avoid 'excited to share' and 'in today's rapidly evolving.' Treat the reader as a peer. ``` #### `rfp-response` · Open an institutional RFP response *Surfaces: `email_body`, `announcement`* ``` Write the opening section of a Workhorse RFP response for {institution} responding to {scope}. 2-3 paragraphs. Reference the 11-year studio, prior institutional work (museums, libraries, festivals, civic orgs), and one specific aspect of the institution's mission that aligns. Procurement-aware tone, but not stiff. ``` #### `engagement-recap` · Write an engagement recap line *Surfaces: `microcopy`, `subhead`* ``` Write a 1-2 sentence recap line for a Workhorse engagement for {client}. Mention the deliverable shape (identity system, design system, website, platform build, etc.) and the outcome the work earned. For use in a homepage carousel or work index. Under 30 words. ``` ### Banned terms `utilize`, `leverage`, `synergy`, `world-class`, `best-in-class`, `industry-leading`, `thought leader`, `passionate about`, `we strive to`, `we aim to`, `trusted partner`, `your one-stop shop`, `unleash`, `unlock your potential`, `begin your journey`, `discover`, `click here`, `learn more`, `get started`, `innovative solutions`, `cutting-edge`, `next-generation`, `paradigm shift`, `disrupt` ### Preferred terms `Workhorse`, `Studio`, `Engagement`, `Brand Foundation`, `Discovery Sprint`, `Studio Retainer`, `Identity system`, `Design system`, `Living system`, `Brand context`, `Brand stack`, `AI-native brand`, `Creative ops`, `Doc-to-site pipeline`, `Strategic design partners`, `Experts, entrepreneurs, enterprise`, `Capitol Hill`, `since 2014`, `Notes`, `Worktable` ## Color | Token | Hex | Role | Notes | |---|---|---|---| | `yellow.100` | `#FFF4B8` | | | | `yellow.300` | `#FFE066` | | | | `yellow.500` | `#FED100` | | Workhorse Yellow, primary brand accent | | `yellow.700` | `#C5A44E` | | Gold variant for print/foil contexts | | `ink.0` | `#FFFFFF` | | | | `ink.100` | `#FAFAFA` | | | | `ink.300` | `#A0A0A0` | | | | `ink.500` | `#2B2B2B` | | | | `ink.700` | `#141414` | | Card and elevated surfaces | | `ink.900` | `#0A0A0A` | | Signature near-black background | | `black.pure` | `#000000` | | | | `black.rich` | `#0a0a0a` | | Primary background — the signature near-black | | `black.deep` | `#111111` | | Surface-2, deeper layer | | `black.card` | `#141414` | | Card/container surface | | `black.elevated` | `#1a1a1a` | | Surface-3, elevated layer | | `black.secondary` | `#202020` | | Secondary backgrounds | | `gray.border` | `#2b2b2b` | | Primary border/divider | | `gray.muted` | `#a0a0a0` | | Muted text, secondary labels | | `gray.subtle` | `#71717a` | | Subtle text, tertiary | | `white.pure` | `#ffffff` | | | | `white.soft` | `#fafafa` | | Off-white for light contexts | | `accent.yellow` | `#fed100` | | Workhorse signature yellow — primary accent, CTAs, highlights | | `accent.gold` | `#c5a44e` | | Gold variant for print/foil contexts (from DC DOX collateral) | ## Typography ### Families - **Maison Neue** (`primary`): 'Maison Neue', 'Maison Neue Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif *Maison Neue — clean, modern grotesque. Workhorse primary typeface.* - **Maison Neue Mono** (`mono`): 'Maison Neue Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace *Monospace for code and technical contexts* ### Scale | Token | Value | Use | |---|---|---| | `display` | `clamp(2.5rem, 8vw, 6rem)` | Hero headlines, max impact | | `h1` | `clamp(2.5rem, 8vw, 6rem)` | Page titles | | `h2` | `clamp(2rem, 5vw, 3.75rem)` | Section headings | | `h3` | `clamp(1.75rem, 3.5vw, 2.75rem)` | Sub-section headings | | `h4` | `clamp(1.5rem, 2.5vw, 2rem)` | Card headings | | `h5` | `clamp(1.25rem, 1.5vw, 1.5rem)` | Small headings | | `h6` | `clamp(1.1rem, 1.2vw, 1.25rem)` | Label-scale headings | | `body` | `1.125rem` | 18px — body text | | `body-sm` | `1rem` | 16px — compact body | | `small` | `0.875rem` | 14px — secondary text | | `xs` | `0.75rem` | 12px — labels, metadata | ## Spacing | Token | Value | Use | |---|---|---| | `space.1` | `0.25rem` | 4px — micro | | `space.2` | `0.5rem` | 8px — tight | | `space.3` | `0.75rem` | 12px — compact | | `space.4` | `1rem` | 16px — base | | `space.5` | `1.25rem` | 20px | | `space.6` | `1.5rem` | 24px — comfortable | | `space.8` | `2rem` | 32px — spacious | | `space.10` | `2.5rem` | 40px | | `space.12` | `3rem` | 48px — section gap | | `space.16` | `4rem` | 64px — large section padding | | `space.20` | `5rem` | 80px | | `space.24` | `6rem` | 96px — major section padding | | `space.32` | `8rem` | 128px — hero/editorial breathing room | ## Motion **Pace.** deliberate **Choreography.** sequential **Signature.** opacity-led with short rise **Forbidden.** - Bounce or overshoot on any element. - Spring physics on text. - Crossfades shorter than 200ms. - Per-letter type animation. - Cursor-tracking parallax on body content. **Duration:** `fast`=150ms, `normal`=300ms, `slow`=500ms, `dramatic`=700ms **Easing:** `default`=cubic-bezier(0.16, 1, 0.3, 1), `in`=cubic-bezier(0.4, 0, 1, 1), `out`=cubic-bezier(0, 0, 0.2, 1), `linear`=cubic-bezier(0, 0, 1, 1) ### Presets - **`fadeUp`** Default text entrance. Headlines, body, captions. - **`fadeIn`** Quiet appearance. Use when translation would compete with surrounding motion. - **`scaleRise`** Imagery and full-bleed plates. The only place scale is allowed on entrance. - **`ledgerStrike`** Horizontal rule sweep. Precedes a headline reveal in editorial layouts. - **`stagger`** Delay between sibling elements. Caps so long lists don't drag past the viewer. - **`hoverLift`** Interactive cards and CTAs. Two-pixel lift, never more. - **`exitFade`** Element leaving the frame. Quick fade, no translation. ### Motion narrative # Workhorse — Motion narrative Motion at Workhorse is editorial. The page reads, the motion serves the reading. Anything that asks the viewer to wait, or to watch, or to react, has to earn that ask. ## How motion feels Deliberate. Opacity-led. A short rise on entrance, a clean exit. The signature easing curve (fast start, gentle land) is in `motion.json` and every preset reuses it. The studio reads first as confident, then as quiet. Motion follows. A Workhorse hover is a two-pixel lift, not a card pop. A Workhorse page transition is a fade and a translate, not a wipe. ## Choreography Elements enter in order. Ledger rule first, headline second, body third, action last. This sequence is a brand tell. Avoid all-at-once group reveals (everything fading up together reads as a template). The stagger preset caps at four hundred eighty milliseconds total. Long lists don't get a full stagger; they get a fade-in on the container. ## What motion does well at Workhorse - Signals where the eye should land first. - Holds the viewer through a single line of text. - Marks the boundary between sections without a hard rule line. - Carries an artifact (a brand book opening, a sign on a wall) from off-frame to in-frame. ## What motion does poorly at Workhorse - Reaction physics. The studio doesn't bounce. - Per-letter type animation. Reads as 2010s motion graphics. - Crossfades shorter than two hundred milliseconds. Read as flicker. - Cursor-tracking parallax on body content. Distracting and accessibility-hostile. - Loops that demand attention. Continuous motion (marquees) earn their place at low contrast only. ## Reduced motion Every preset has a reduced-motion equivalent: same opacity behavior, no translate, no scale. Reduced motion is not a degraded version of the brand. It is the brand at rest. ## Generated motion direction When AI choreographs a Remotion composition or a page sequence, the brief includes: - The personality (deliberate, opacity-led, sequential). - The preset library (fadeUp, scaleRise, ledgerStrike, stagger). - The forbidden list (bounce, per-letter type, swipes). The result is a motion plan that uses preset names, not invented timings. If the plan calls for something outside the preset library, that is a signal to either add a preset to the brand or to drop the move. ## Logo ### Wordmark The primary Workhorse mark. Use for the largest and most recognizable applications: site header, brand book cover, primary signage, document headers. - **Default**: `/logo.svg` - **On dark**: `/logo.svg` - **On light**: `/logo.svg` - **On brand**: `/media/workhorse/logo/wordmark-on-brand.svg` - **Reversed**: `/media/workhorse/logo/wordmark-reversed.svg` - **Monochrome black**: `/media/workhorse/logo/wordmark-mono-black.svg` - **Monochrome white**: `/media/workhorse/logo/wordmark-mono-white.svg` ### Wordmark, horizontal lockup The horizontal lockup. Reserve for narrow placements where vertical space is limited: footer rows, small headers, embedded contexts. - **Default**: `/logo-horizontal.svg` - **On dark**: `/logo-horizontal.svg` - **On light**: `/logo-horizontal.svg` - **On brand**: `/media/workhorse/logo/wordmark-horizontal-on-brand.svg` - **Reversed**: `/media/workhorse/logo/wordmark-horizontal-reversed.svg` - **Monochrome black**: `/media/workhorse/logo/wordmark-horizontal-mono-black.svg` - **Monochrome white**: `/media/workhorse/logo/wordmark-horizontal-mono-white.svg` **Clear space.** Clear space around the wordmark equals the cap height of the W. Maintain regardless of production size. **Min size.** Wordmark: 140px wide on screen, 0.875 inch wide in print. Below these sizes, switch to the horizontal lockup or omit the mark. **Hierarchy.** - The wordmark is the primary brand mark across all surfaces. - The horizontal lockup is reserved for narrow placements (footer rows, small headers, embedded contexts) where vertical space is limited. - Sub-brand marks (Notes, Worktable) follow their own visual identity and are not lockup-combined with the parent Workhorse wordmark. ## Imagery **Primary direction.** Documentary photography of the studio working. Real people, real rooms, real tools. Print on the wall, paper on the table, hands on the work. No mood lighting, no stock gloss, no aspirational empty space. ### Studio at work People working. Hands on a layout, a sketch, a screen. Backs to the camera as often as faces. Caught moments, not posed moments. ### Artifacts and process The output and the marks made along the way. Prints, pasteups, notes, brand books opened on a desk. Tools where they were last used. ### Rooms The studio itself. Walls with work pinned up, the worktable mid-session, the bench between projects. The room as a record of what is happening this week. ### Events and installs Onsite work. Install day, opening night, the crew on a job. Wide enough to read the room, tight enough to read the work. ### Field reference The world the work lives in. Storefronts, signage in context, the printed piece in the reader's hand. Documents the client's audience and environment. **Principles.** - Photograph the work, not the brand. The brand shows up because the work is in frame. - Daylight where possible. If lighting is staged, it should still read as a working room, not a set. - Hands and tools at human scale. Avoid hero-shot product photography. - Real rooms, real wear. Coffee rings, masking tape, paper edges. Don't retouch the practice out of the photo. - People in the work, not modeling the work. Eyes on the page, not on the camera. **Direction questions.** - Does the photo show something happening, or something arranged? - Could a client recognize their own work session in this image? - What does the photo say about the practice that the headline can't? **Do.** - Wide shots that establish a room before tight shots of the work. - Black-and-white for archival or era-marker contexts. - Color when the artifact's color is part of the story. - Crop to keep the work as the subject, even when people are present. **Don't.** - Stock photography of teams smiling at laptops. - Lifestyle imagery with no relationship to the practice. - Drone shots, lens flare, anamorphic crop on documentary subjects. - AI-generated faces that read as composite or uncanny. - Mood-board pastels, gradient overlays, or color-graded warmth that wasn't in the room. ### Image generation defaults **Default provider.** `openai-gpt-image-1` **Alternates.** `replicate-flux-dev`, `ideogram-v2` **Style suffix.** Documentary photography. Daylight or working-studio light. Real rooms, real tools, real hands at work. Slight grain, no gloss. 35mm or medium-format feel. Not stock, not lifestyle. **Negative prompt.** stock photography, lifestyle, mood lighting, lens flare, hero shot, gradient overlay, smiling team at laptop, motivational poster aesthetic, AI-uncanny face **Aspect ratios.** `square`=1:1, `vertical`=4:5, `landscape`=3:2, `wide`=16:9 ### Imagery direction # Workhorse — Imagery direction Photography for Workhorse is documentary. Real rooms, real people, real work in progress. The studio shows up because the work is in frame, not because anyone is performing the studio. ## What we shoot The shoot archive at `src/data/shoots.ts` is the source of truth. Five working themes: 1. **Studio at work.** Hands on a layout, sketch, screen. Backs to the camera as often as faces. 2. **Artifacts and process.** Prints, pasteups, notes, brand books open on a desk. Tools where they were last used. 3. **Rooms.** The studio itself. Walls with work pinned up. The worktable mid-session. 4. **Events and installs.** Onsite work. Install day, opening night, the crew on a job. 5. **Field reference.** The world the work lives in. Storefronts, signage in context, the printed piece in a reader's hand. ## Composition Wide shots establish a room before tight shots establish the work. Hands and tools sit at human scale. Crop to keep the work as the subject, even when people are present. Daylight where possible. When light is staged, it still reads as a working room, not a set. Black-and-white belongs to archival and era-marker contexts. Color belongs to artifacts whose color is part of the story. ## How to evaluate an image Three questions, in order: 1. Does the photo show something happening, or something arranged? 2. Could a client recognize their own work session in this image? 3. What does the photo say about the practice that the headline can't? If a photo passes all three, it earns the slot. ## Don't Stock photography of teams smiling at laptops. Lifestyle imagery with no relationship to the practice. Drone shots, lens flare, anamorphic crop on documentary subjects. AI-generated faces that read as composite. Mood-board pastels, gradient overlays, or color grading that wasn't in the room. ## Generated imagery When the work needs an image that doesn't exist in the archive, generation extends the same register. The provider gets a style suffix that names the look (documentary, daylight, working studio, slight grain, no gloss) and a negative prompt that rules out stock and lifestyle. The result has to read as a photograph from a working session, not as a render. Generated faces are the riskiest output. Default to backs of heads, hands, or framing that keeps faces partial. A face in clear focus is a real shoot, not a generation. ## Video direction # Workhorse — Video direction Workhorse video is short, editorial, and quiet. It moves like the typography does: clean entrance, brief hold, clean exit. The viewer should be able to read every frame. ## Pacing A Workhorse sizzle runs four to eight seconds. Type holds for at least one full beat before the next cut. Two beats is better. Three beats is risky only if the line earns it. Cuts are hard cuts. Crossfades belong to imagery transitions, not text. Match cuts on motion are welcome (a horizontal sweep continuing across a cut feels native). Whip pans, swipes, and zoom-in transitions don't. ## Type behavior Text enters opacity-first with a short eight to twelve pixel rise. No per-letter animation. No type that scales up on entry. The headline arrives in one piece. Stagger is fine across multiple text elements (ledger first, headline second, body third), at sixty milliseconds between siblings, capped at four hundred eighty milliseconds total. Anything longer drags. ## Footage style If we cut to footage, it follows the same documentary register as photography. Working hands, the worktable, a print being pinned. Footage shot specifically for a sizzle should be locked-off or on a slow dolly, never handheld unless the handheld read is the point. B-roll vocabulary the brand owns: hands on paper, marker on a board, a brand book turning, sign install, screen scroll, ink press. Avoid: city skylines, generic office cutaways, slow-motion coffee pours. ## Voiceover and music Voiceover is rare. When present, it sits low in the mix and reads a single sentence, not a paragraph. The reader sounds like the studio (precise, plain) and not like a trailer narrator. Music is optional. If used, it stays under the type and never pushes for emotion the visual hasn't earned. Avoid swelling strings, drop-stings, and percussion that times to the cut. ## Logo and chrome The wordmark appears once, at the end, on its own held frame. The mark does not animate (no draw-on, no rebuild). It appears, it holds, it cuts. If a sponsor or co-brand mark is required, it sits at minimum clear-space from the Workhorse mark and on its own frame. ## Don't - Bounce, overshoot, or spring on any element. - Per-letter type animation. - Cursor-tracking parallax in pre-recorded video. - Auto-generated captions burned into the master. (Closed captions stay in the player.) - Stock B-roll of generic creative teams. ## Illustration # Workhorse — Illustration direction Workhorse uses illustration sparingly. The studio's primary visual language is typography, photography, and editorial layout. Illustration earns a slot when a photograph can't do the work and a chart isn't the right vehicle. ## When to reach for illustration Three valid contexts: 1. **Diagrams.** A process flow, a system architecture, a relationship between parts. The reader should follow it without legend overload. 2. **Iconography.** Inline marks at small sizes where a photo can't work. UI affordance, list bullet, metric glyph. 3. **Brand signature pieces.** Standalone marks that belong to the brand itself, like the cowboy gallop. These are illustration as identity, not decoration. ## Style Flat or near-flat. Single weight line. One or two color stops drawn from the active palette. No gradients, no inner shadow, no dimensional shading. Line weight scales with the artwork: hairline for inline glyphs, one to two pixel for diagrams, heavier strokes reserved for signature pieces where the line itself is the subject. The cowboy gallop is the reference for what brand-owned illustration looks like at Workhorse. Confident silhouette, period accuracy, visible craft. ## Color Illustration pulls from semantic tokens, never invents its own palette. Default to ink on background. Use accent for the load-bearing element only (the highlighted node in a diagram, the active state on an icon). ## Don't - Stock illustration packs (Storyset, undraw, isometric tech). They read as generic AI-era brand wallpaper. - Mascot illustrations or anthropomorphized objects. - Hand-drawn doodle aesthetic. The studio looks composed, not playful. - Gradient mesh, blur shapes, abstract blob backgrounds. - 3D renders unless the subject is genuinely three-dimensional (an installation, a printed object). 3D for its own sake reads as 2020s startup default. ## Generated illustration If illustration is generated, the provider gets the same line-weight and palette guidance the human illustrator works to. The negative prompt rules out the patterns above (gradient mesh, isometric, blob). The result still has to look like a Workhorse drawing, not a generic vector asset. ## Sub-brands ### Notes (`notes`) *Studio Publication* Workhorse Notes is the studio's typographic publication. Institutional voice, mono masthead set in CSS, no illustrations. Lives at /notes as a peer in the public nav between Work and How It Works. Built on the Worktable system. Process-honest essays from the studio about brand, system, AI, and the practice of design. ### Worktable (`worktable`) *Design System* Worktable is the unified design system that spans pre-login and post-login Workhorse surfaces. Warm canvas, scarce FED100, ochre work-state, mono-as-data, ledger-over-grid, opacity-led motion. Replaces the prior two-register split. Specimens: buttons, integrations, and the editorial button + motion subsystem. Source CSS at src/styles/worktable.css. ### Workhorse Platform (`platform`) *Product* The creative ops platform for AI-native brands. Build, publish, and grow with agentic workflows + brand context every agent on your stack respects. Open core public-first, license-keyed premium plugins. Renderer-agnostic block contract: schema is canonical, renderers pluggable. The platform is the distribution arm of the studio. ### Workhorse Studio (`studio`) *Studio Practice* The Workhorse studio practice. Strategic design partners for experts, entrepreneurs, and enterprise. Four engagement tiers: Discovery Sprint ($4,500), Brand Foundation ($95,000), Studio Engagement ($145,000), Studio Retainer ($12,500/mo). Eleven years of work for cultural institutions, civic organizations, and professional enterprises. ## Page archetypes Closed set of page shapes the brand ships. When an agent generates a new page, it picks an archetype and follows its section list as the canonical structure. ### Engagement Page Single-tier engagement landing (Discovery Sprint, Brand Foundation, Studio Engagement, Studio Retainer). Carries the price floor, the deliverable shape, the studio voice, and the next-action CTA. **Sections:** 1. Tier eyebrow (price + tier name) 2. Hero line (4-9 word thesis specific to this tier) 3. Description (2-3 sentences on the deliverable shape) 4. What you get (concrete deliverables, not generic outcomes) 5. When this tier fits (audience self-selection) 6. Process timeline (week-by-week or phase-by-phase) 7. Recent engagements (case-study cards filtered to this tier) 8. Next action (book a call, start the engagement) ### Case Study (Editorial) Per-engagement editorial case study at /work/. Variable shape per archetype (System / Cultural / Campaign / Program). Always cross-links to the brand book and design system if those exist. **Sections:** 1. Hero image (single iconic photo, not slide deck) 2. Project meta (headline, description, services, client, year) 3. Editorial chapters with chapter dividers 4. Real assets (photography, banners, screenshots, applied work) 5. Metrics editorial (by the numbers) 6. Closer 7. System artifacts (link to /brand/, /system/, Figma) ### Notes Essay A long-form essay on /notes. Process-honest, AI + Workhorse register. Institutional voice. No illustrations. Mono masthead set in CSS. **Sections:** 1. Mono masthead 2. Title (institutional, no clickbait) 3. Author + date 4. Lede (60-100 words, no marketing wrapper) 5. Body (clear sections, short paragraphs, specific) 6. Pull quote(s) when earned 7. Footnote-style citations where relevant 8. Subscribe block (peer voice, not push) ### Platform Page Product surface for the Workhorse Platform (creative ops platform for AI-native brands). Platform register, not studio register. Honest about what's shipped vs what's planned. **Sections:** 1. Hero (4-9 word thesis on the platform's value prop) 2. Manifesto pull (Opinionated about practice. Open about platform.) 3. Capabilities (block contract, doc-to-site pipeline, brand context, agentic workflows) 4. Live brand books directory (cross-link to /brand) 5. Live design systems directory (cross-link to /system) 6. Honest body (what's shipped, what's open, what's missing) 7. Engagement tier ladder 8. Next action ### RFP Response Procurement-aware response surface for institutional RFPs. Used for cultural, civic, and enterprise opportunities. **Sections:** 1. Cover page (RFP reference, our reference, date) 2. Executive summary (2-3 paragraphs) 3. Studio overview (11 years, sector experience, team) 4. Approach to the brief (specific to the RFP) 5. Proposed scope and deliverables 6. Timeline (week-by-week or phase-by-phase) 7. Pricing structure 8. Relevant case studies (institution-aligned) 9. References 10. Appendix (capability statement, GSA reference if applicable) ## Applications ### wrkhrs.co Homepage (`digital`) The platform-led public homepage. Worktable specimen, AI + Workhorse editorial voice, manifesto pull and engagement tiers. Source: src/app/(public)/page.hardcoded.tsx, src/styles/home.css. Locked 2026-04-30. ### /work — Studio Portfolio (`digital`) Editorial case-study index and per-engagement detail pages. Three archetype framework (System, Cultural, Campaign) with a fourth Program archetype. Editorial pacing per study, not template-uniform. ### /notes — Studio Publication (`digital`) The Notes publication. Studio essays and process-honest writing. Lives at /notes, peer in public nav with Work and How It Works. ### /system/[slug] — Productized Design Systems (`product`) Productized live design system viewer. Per-client surface offering Foundations, Components, Patterns, and Screens scoped to that client's tokens. Pilot on Demme, Resume Place registered. Replaces the static brand-book PDF as a long-arc deliverable. ### /brand/[slug] — Live Brand Books (`product`) Web-first, AI-readable brand books. Foundation, audience, voice (with surface-keyed do/dont, sample copy, and a prompt kit agents can call by id), color, typography, logo, sub-brands, and applications. Spec at /brand//spec.{json,md}. Resume Place is the v1 pilot. Workhorse itself shipped 2026-04-30. ### Engagement Tiers (`product`) Four engagement tiers price-anchored and ladder-published: Discovery Sprint ($4,500), Brand Foundation ($95,000), Studio Engagement ($145,000), Studio Retainer ($12,500/mo). Each tier has a dedicated landing surface. The studio works inside the platform; the platform makes the studio scalable. ### Identity System (`print`) Workhorse business identity: wordmark, horizontal lockup, FED100 yellow accent. Letterhead, business cards, capability statement issued on Capitol Hill letterhead from the carriage house. --- ## Brand Book (human-authored prose) # Workhorse Brand Book A brand-first design system for builders. This document defines the visual language of Workhorse Collective — not as a style guide to be followed, but as a system to build with. --- ## Brand Position **Workhorse is an interdisciplinary design and brand consultancy for science, art, and culture.** We don't chase trends. We build systems — visual languages that hold up under pressure, flex across media, and make an audience feel something before they read a word. ### Brand Descriptors | Column 1 | Column 2 | Column 3 | |----------|----------|----------| | Strategic | Precise | Restrained | | Editorial | Confident | Intentional | | Cultured | Bold (not loud) | Rigorous | ### Voice - **Direct.** No hedging. Say it or don't. - **Confident.** Earned authority, not arrogance. - **Concise.** If you can say it in fewer words, do. - **Warm but not casual.** Professional without being corporate. --- ## Color System Dark-first. The brand lives on near-black. Yellow is the signal, not the surface. ### Primitives | Token | Value | Role | |-------|-------|------| | `black.rich` | `#0a0a0a` | Primary background | | `black.deep` | `#111111` | Secondary surface | | `black.card` | `#141414` | Card/container | | `black.elevated` | `#1a1a1a` | Elevated surface | | `black.secondary` | `#202020` | Tertiary background | | `gray.border` | `#2b2b2b` | Dividers, borders | | `gray.muted` | `#a0a0a0` | Secondary text | | `gray.subtle` | `#71717a` | Tertiary text | | `white.pure` | `#ffffff` | Primary text (on dark) | | `accent.yellow` | `#fed100` | Signature accent — CTAs, highlights | | `accent.gold` | `#c5a44e` | Print/foil contexts | ### Usage Rules 1. **Background is always `#0a0a0a`** unless a case study section explicitly calls for white 2. **Yellow (`#fed100`) is reserved for:** primary CTAs, active states, eyebrow labels, accent rules, and focus rings 3. **Never use yellow as a background color.** It's a signal, not a surface. 4. **Gray hierarchy is deliberate:** `#2b2b2b` for structure, `#a0a0a0` for secondary text, `#71717a` for tertiary 5. **White sections** use `#ffffff` bg with `#18181b` text — the light variant is a contrast tool, not the default --- ## Typography ### Typefaces **Primary:** Maison Neue A clean, modern grotesque. Versatile across weights but the brand leans light. **Mono:** Maison Neue Mono For code, data, and technical contexts. ### Type Scale (Fluid) | Token | Value | Use | |-------|-------|-----| | `display` | `clamp(2.5rem, 8vw, 6rem)` | Hero headlines | | `h1` | `clamp(2.5rem, 8vw, 6rem)` | Page titles | | `h2` | `clamp(2rem, 5vw, 3.75rem)` | Section headings | | `h3` | `clamp(1.75rem, 3.5vw, 2.75rem)` | Sub-sections | | `h4` | `clamp(1.5rem, 2.5vw, 2rem)` | Cards | | `h5` | `clamp(1.25rem, 1.5vw, 1.5rem)` | Small headings | | `body` | `1.125rem` (18px) | Body text | | `small` | `0.875rem` (14px) | Secondary text | | `xs` | `0.75rem` (12px) | Labels, metadata | ### Weight Strategy | Weight | Value | When | |--------|-------|------| | Light | 300 | **All headings.** This is the signature Workhorse weight. | | Normal | 400 | Body text | | Medium | 500 | Subtle emphasis within body text | | Semibold | 600 | Labels, buttons, uppercase meta text | | Bold | 700 | Use sparingly — for brand marks only | ### Heading Rules - **Line height: 0.95** — headings stack tight - **Letter spacing: -0.02em** — slightly tighter than default - **Weight: 300** — light, always. This is non-negotiable. - **Max width: ~900px** — headings never run edge to edge ### Label Rules - **All uppercase** - **Weight: 600** - **Letter spacing: 0.08em** - **Size: 0.75rem (12px)** - **Color: muted** (never primary) --- ## Spacing Generous. Editorial. The work needs room to breathe. ### Scale | Token | Value | Use | |-------|-------|-----| | `space-1` | 4px | Micro gaps | | `space-2` | 8px | Tight spacing | | `space-4` | 16px | Base unit | | `space-6` | 24px | Comfortable gaps | | `space-8` | 32px | Component padding | | `space-12` | 48px | Section gaps | | `space-16` | 64px | Section padding | | `space-24` | 96px | Major section padding | | `space-32` | 128px | Hero-scale breathing room | ### Containers | Token | Value | Use | |-------|-------|-----| | `narrow` | 800px | Prose, reading content | | `max` | 1140px | Standard content | | `wide` | 1400px | Galleries, grids | | `full` | 1920px | Full-width elements | --- ## Motion Understated. No bounce. No overshoot. | Token | Value | Use | |-------|-------|-----| | `fast` | 150ms | Hover states | | `normal` | 300ms | Standard transitions | | `slow` | 500ms | Reveals, page transitions | | `dramatic` | 700ms | Hero animations | **Signature easing:** `cubic-bezier(0.16, 1, 0.3, 1)` — fast start, gentle landing. --- ## Border Radius Angular. The brand is editorial, not bubbly. - **Default: 0** — sharp corners for images, sections, galleries - **Interactive elements: 6px** — buttons, inputs get subtle softening - **Cards: 8px** — barely there - **Never round images.** Case study imagery is always rectangular. --- ## Layout Patterns ### Case Study Page Sequence A case study page follows this editorial rhythm: 1. **CaseStudyHero** — Full-viewport, image/video, title + metadata 2. **ProjectMeta** — Asymmetric 2-col: headline left, description + services right 3. **PullQuote** — Full-bleed statement (image bg optional) — the first "breath" 4. **MasonryGallery** — Dense grid of deliverables 5. **SectionDivider** — "/" mark or numbered break 6. **MediaShowcase** — Single hero-scale image, centered 7. **PressQuote** — Editorial quote with attribution 8. **MasonryGallery** — Second gallery pass 9. **BrandAssetsGrid** — Logo/mark system display 10. **PullQuote** — Closing statement 11. **CTA** — "Let's build something great" ### Pacing Rules - **Never stack two galleries without a text/quote break between them** - **Every 2-3 content blocks, insert a pacing device** (divider, quote, or whitespace) - **Alternate dark/light sections** to create visual rhythm - **Full-bleed images always followed by generous whitespace** ### Grid System - **Work grid:** 3-column on desktop, 2 on tablet, 1 on mobile - **Masonry:** Dense auto-flow, items can span 1-3 columns and 1-2 rows - **Gap:** 4px for masonry (tight, editorial), 1rem for brand assets --- ## Component Inventory ### Case Study Blocks | Block | Purpose | |-------|---------| | `CaseStudyHero` | Full-viewport hero with metadata | | `ProjectMeta` | Asymmetric editorial intro | | `PullQuote` | Full-bleed statement with optional bg image | | `PressQuote` | Inline editorial quote with attribution | | `MasonryGallery` | Dense image grid with span/tall support | | `MediaShowcase` | Single/pair/fullbleed image display | | `BrandAssetsGrid` | Logo and mark system display | | `TypographyShowcase` | Typeface specimen presentation | | `SectionDivider` | Pacing marks, numbers, rules, whitespace | ### Site Blocks | Block | Purpose | |-------|---------| | `HeroVideo` | Homepage hero with autoplay video | | `WorkGrid` | Portfolio grid with category/year metadata | | `CTASimple` | "Let's build something great" conversion block | | `SiteCta` | Site-wide CTA with button + email + address | | `SiteFooter` | Minimal footer with nav links | --- ## Case Study: DC/DOX Film Festival ### Design Data (extracted from production deliverables) **Brand Identity:** - Primary typeface: Tomato Grotesk (bold, display) - Secondary typeface: Space Mono (monospace, technical) - Color: Black backgrounds, gold/yellow accent (#fed100 range) - Forward slash "/" as brand device/section marker **Deliverables produced:** - Logo system (wordmark, circle mark, circular badge, year mark, arrow icon) - Festival laurels (Official Selection, Award variants) - Print collateral (posters, programs, badges, invitations) - Digital (website, social media, email campaigns) - Video (promo reels, motion graphics) - Environmental (signage, wayfinding) **Brand Descriptors:** Bold, Curious, Captivating, Intimate, Intelligent, Intentional, Momentous, Visionary **Press:** Washingtonian, Washington City Paper, WTOP, Roll Call, Deadline --- ## For Builders This design system is not a rulebook — it's a toolkit. Every token, every component, every pattern is here to help you build faster while maintaining the visual standard. **When in doubt:** - Go darker, not lighter - Go lighter weight, not bolder - Give it more space, not less - Use yellow only when it matters The brand is the work. Let the work speak.