A brand system built to hold together from pitch deck to product
A logo, color system, and usage guidelines built early enough to carry a robotics startup from its seed pitch deck into its first shipped product.
What the engagement involved
Professional Services
5 weeks
Fixed price
Client name withheld under NDA. Engagement details are shown to the extent our agreement permits.
Every surface, in order
The logo page of the guidelines: four approved lockups, the minimum size each surface allows, and the misuses teams keep making.
The color system: ten named tokens with hex values, contrast ratios and the four that survive on a navy surface.
One typeface, eight steps: the scale from deck display down to form labels, with the weights actually in use.
Motion as tokens: four easing curves, eight durations, and what each does when reduced motion is switched on.
The deck application: five slide layouts, the nine templates built on them, and the rules for a single slide.
The same system as product: the robot control dashboard assembled from the component kit behind it.
The brief
A robotics startup needed a brand identity before its seed round closed, one that could stretch from a pitch deck to a product UI without a redesign six months later.
A robotics startup five weeks out from closing a seed round, with a wordmark a founder had drawn and nothing else. The immediate need was a deck that didn't look like a first draft. The real need was that whatever was made for the deck would still work when the product shipped, because a rebrand six months after a raise is a distraction nobody funds.
Brand Identity
What people were running into
The founders had a wordmark and no system behind it: no defined palette, no type scale, and no rules for how the mark should scale down to an app icon.
The wordmark had no system under it. There was no palette, so every slide picked its own blue; no type scale, so headings were sized by eye; and no small-size variant, so the mark filled in and became a smudge below about forty pixels, which is roughly every place a product actually uses it.
We built a responsive logo lockup, a documented color and type system, and guidelines covering deck, site, and early product use.
Design decisions
- 01
Defined the brand's character before drawing the mark
The brand's character was settled before anything was drawn, which made the palette a decision instead of a matter of taste.
- 02
Built a responsive logo system with an app-icon variant
The mark is drawn at three optical sizes, never simply scaled, with the smallest hand-corrected to survive a sixteen-pixel icon and an etched hardware badge.
- 03
Documented usage rules for deck, site, and product surfaces
Usage rules cover deck, site and product as three separate contexts, because a rule that only describes the deck is a rule the product will break within a month.
- 04
Created reusable pitch deck templates and web design tokens
The templates were built while the founders used them, which is how the deck ended up with five layouts instead of the twenty a library would have had.
Phase by phase
Phase 1: Brand Strategy & Positioning
Technical Identity & Narrative
Analyzed autonomous robotics market positioning and pitch narrative for investor deck presentation.
- Brand Architecture Spec
- Positioning Matrix
- Identity Narrative
Phase 2: Visual Identity Engineering
Responsive Mark & Color Palette
Designed responsive logo mark, dark-mode color palette, and typography system that scales from pitch deck to hardware app icon.
- Responsive Logo Suite
- Visual Brand Guidelines
- Color & Type System
Phase 3: Pitch Deck & Web UI Kit
Investor Deck & Component Tokens
Created investor pitch deck templates, pitch landing page, and UI component styling for early hardware control dashboard.
- Pitch Deck System
- Web Design Tokens
- UI Component Kit
Phase 4: Asset Handoff & Launch
Seed Round Release & Asset Kit
Delivered the complete brand asset suite and signed off the seed deck ahead of the startup's $4.5M seed round.
- Brand Asset Package
- Seed Deck Sign-off
- Guidelines Portal
The five-week plan: four phases with their deliverables, a working session with the founders every week, the seed deck signed off in week five, and design requests down 50% in the six months after.
Responsive Logo & Icon System
A vector mark drawn to stay sharp across pitch decks, web UI and hardware badges.
The mark is drawn at three separate optical sizes instead of one file scaled: a detailed lockup for the deck, a simplified form for UI, and a single-color glyph that survives being etched at eight millimeters on a hardware badge. Each is hand-corrected at its own size, because optical correction doesn't survive scaling. The previous mark filled in at small sizes and read as a blob.
- Three drawn optical sizes, not one file scaled
- Single-color glyph tested at 8mm on hardware
- Optical corrections made per size, never inherited
The mark's three optical sizes, each with its own corrections, beside the founder's wordmark and the scaled lockup file filling in at small sizes, with the 16px app icon and 8mm etched badge tests.
The HSL scale on fixed lightness steps with the ten named tokens ringed, why the palette is dark-first for lit factory floors, and every token measured against four grounds to WCAG AA.
Dark-Mode High-Tech Palette
An HSL color system designed for high-contrast industrial control displays.
The palette is built in HSL with fixed lightness steps, so a hue can be swapped without redoing contrast, and every foreground and background pairing was measured against WCAG AA instead of eyeballed on a good monitor. It's dark-first because the product runs on industrial control displays in lit rooms, where a light interface turns into a mirror.
- HSL scale with fixed lightness steps for swappable hues
- Every pairing measured to WCAG AA, never judged by eye
- Dark-first because the product runs on lit factory floors
Investor Pitch & Product Design Tokens
The token file, with the lines a deck template and the product's primary button both read, and the deck templates, pitch site and robot console all on the same version.
Reusable typography, UI tokens and deck templates, so early product builds start from the brand instead of guessing at it.
The type scale, spacing ramp and color steps ship as a token file that the deck templates and the product both consume, so a brand change is one edit instead of a hunt. The deck templates are built on the same tokens, which is why the investor deck and the first product screens matched without anyone reconciling them by hand.
- One token file consumed by deck templates and product
- Type scale, spacing ramp and color steps defined once
- Deck and first product screens matched without reconciliation
What moved after the redesign
Deck, site, product
Assets delivered
-50%
Design requests post-launch
5 weeks
Time to brand-approved deck
The funding outcome is the company's own reported round and is context, not attribution: a brand doesn't close a round. Design requests after launch is the founders' own count of ad-hoc asks in the six months following, the figure the system was actually built to move.
Client name withheld under NDA. Figures are approximate, drawn from the engagement’s own reporting.
Principles that held
- 01
The seed deck was signed off in five weeks, ahead of a $4.5M seed round the company reports as its own.
What the deck needed was coherence, not decoration, and coherence is a system property. Every slide picking its own blue was what had made it read as early-stage.
- 02
Responsive logo system that holds up from the pitch deck down to 16px app icons.
Drawing three optical sizes instead of scaling one is the difference between a mark that works as an app icon and one that becomes a smudge at the size that matters.
- 03
Dark-mode visual identity established a sleek, high-tech industrial presence.
Dark-first followed from where the product runs, not from a preference, which is why it survived contact with the first real interface.
How design and engineering worked together
A cross-functional team of 3 worked on a fixed price basis over 5 weeks, covering Logo & mark design, Brand guidelines, Pitch deck templates. We ran a weekly demo and kept a shared board they could read at any time. Their team took over day-to-day operation before the engagement ended, with handover built into the last phase.
Five weeks, fixed, with the founders in a working session every week instead of a presentation at the end. The character work came before any drawing, and that's what made the palette decidable. Dark-first isn't a taste choice here: it follows from the product running on industrial control displays in lit rooms.
Ten tokens, three surfaces
A color that passes on the deck can fail in the product
Contrast belongs to a pairing and a use, never to a color on its own. The same violet is legible type on the site's Paper sections and unreadable as type on the console's navy, where it only works as a fill. Pick a surface to see which tokens pass there and why, then choose a row to see it drawn. Use the arrow keys once a tab is focused.
Deck · on Ink 950
Navy slides, projected. Display type is 24pt and up, so headline colors meet the 3:1 large-text bar; footnotes still meet 4.5:1.
Headlines and body. Clears every bar on the slide.
Ratios are computed in the page from each token's hex value with the WCAG 2.x relative-luminance formula. The token values, sample copy and which token plays which role on each surface are illustrative.
From a brand character to every surface
What was made for the seed deck had to still work when the product shipped. So nothing downstream picks its own color or size: every surface reads the same file, and the file follows from decisions made before anything was drawn.
- 01 · Source
Brand character
- Settled in week one, before any drawing
- Where the product runs: control displays in lit rooms
Dark-first is decided by use, never by taste
- 02 · Drawing
Mark at three optical sizes
- Deck lockup, simplified UI form, single-colour glyph
- Corrections made by hand at each size
Survives a 16px icon and an 8mm etched badge
- 03 · Engine
HSL palette and type scale
- Fixed lightness steps per hue
- Every pairing measured to WCAG AA
- One typeface, eight steps
No foreground ships without a measured ratio
- 04 · State
One token file
- Type scale, spacing ramp, colour steps
- Defined once, versioned
A brand change is one edit instead of a hunt
- 05 · Delivery
Deck, site, product
- Deck templates in Figma
- Site and console in Next.js, React, Tailwind CSS
- Usage rules per surface
Deck and product match without reconciliation
Built not to need a second rebrand
Small sizes, contrast & drift between surfaces
The mark doesn't smudge where the product uses it
The old wordmark filled in below about 40px, which is roughly every place a product puts a logo. The new mark is drawn three times, and the single-colour glyph was tested etched at 8mm on a hardware badge.
Contrast is measured, never eyeballed
Every foreground and background pairing was measured against WCAG AA instead of judged on a good monitor, and the palette is dark-first because the product runs on industrial control displays in lit rooms.
Rules for three surfaces, read from one file
Usage rules cover deck, site and product separately, because a rule that only describes the deck is one the product breaks within a month. Deck templates and product read the same token file.
A raise to close and a product still to ship? Scope your build in three minutes.
Scope your buildNearby engagements
AI & AutomationA private legal assistant grounded in verified precedents
A private knowledge assistant that searches internal case files and precedents, providing cited answers legal teams can verify in seconds.
Legal & Law Firms · 14 weeks
Product DesignAn onboarding flow that guides trial users to value
A redesigned SaaS trial onboarding experience with progressive checklists, sample data, and inline guidance that turns signups into active subscribers.
Professional Services · 10 weeks
Product DesignA design system that brought speed and consistency to 4 product teams
A token-based design system in Figma and React that eliminated component duplication across 4 product squads and cut the time from design handoff to merged frontend.
Professional Services · 14 weeks
Let's talk
Running a large platform, shaping a first MVP, or getting a product ready for a funding round? Tell us where you are. We'll shape the process around it, and stay with you after launch.
