Design System
Visual language reference for The Output Company. Clean, bold, warm, with heavy rounded corners and layered shadows.
Logo
Font: Momo Trust Display (400)
Cursor: 0.55em wide (character-width block), matches text height, CSS step-end blink at 1s interval
Usage: Always pair the wordmark with the blinking block cursor to the right
The Blinker
The blinking block cursor is the standalone brand mark of The Output Company. Stripped from the wordmark, it works on its own as an avatar, icon, favicon, and visual shorthand anywhere the full logo cannot or should not appear.
What it represents
A terminal cursor that never stops blinking is a machine that never stops running. It has already produced its output and is ready for the next instruction. The Blinker signals that the engine is live, the pipeline is clear, and the only thing missing is the client's input. It represents neverending output, perpetual readiness, and the quiet confidence of a system that is always on.
Standalone Mark: Light + Dark
Large (80px)
Medium (48px)
Small (36px)
XS (24px)
Use Cases
Avatar / Profile Picture
Slack, GitHub, LinkedIn, social media profiles. Works in both circular and rounded-square crops.
Favicon / Browser Tab
Recognizable at 16x16. The blink draws the eye in a crowded tab bar.
Loading / Processing State
Replace generic spinners with The Blinker as an inline loading indicator. Feels like the system is actively thinking.
Empty State / Awaiting Input
Dashboards, empty lists, onboarding screens. The cursor waits patiently, reinforcing the "your move" message.
App Icon / PWA
iOS and Android home screens. The continuous-radius squircle pairs naturally with The Blinker's monolithic shape.
Email Signature
Jake Handy
The Output Company
Compact mark alongside name and title. Adds brand recognition without taking up real estate.
Presentation / Slide Opener
Full-bleed dark slide with just The Blinker. Striking opening or section divider for decks and keynotes.
Watermark on Deliverables
Subtle, low-opacity Blinker in the corner of screenshots, PDFs, and client-facing assets.
Specifications
- Aspect ratio: roughly 0.55 : 1 (width : height), matching a monospace character cell
- Corner radius: 1px at small sizes, 2px at large sizes. Barely rounded, not a pure rectangle
- Animation: 1s interval, step-end timing function (hard on/off, no fade)
- Light mode: foreground (#343434) blinker on background (#EEEEEE) or white
- Dark mode: light (#EDEDED) blinker on dark (#1A1A1A) background
- Clear space: center The Blinker in its container with equal padding on all sides. Minimum clear space is 2x the blinker width
- Static fallback: where animation is not possible (print, static images), show the blinker at full opacity, solid
Core Colors
Background
#EEEEEE
--background
Foreground
#343434
--foreground
Primary
#343434
--primary
Primary Foreground
#EEEEEE
--primary-foreground
Muted
#D5D5D5
--muted
Muted Foreground
#6B6B6B
--muted-foreground
Card
#FFFFFF
--card
Accent
#FFFFFF
--accent
Border
#C8C8C8
--border
Extended Palette
Recommended color variations for semantic use.
Warm Accent
#E8DDD3
Parchment tint for callout cards
Success
#4A7C59
Muted retro green
Caution
#C4943A
Amber for warnings
Destructive
#A63D40
Muted red for errors
Typography
Heading: Momo Trust Display
Body: Geist Sans
Mono: Geist Mono
const output = await build({ quality: "handcrafted" });
Shadows
Multi-layer box-shadows for depth. Soft outer diffusion + subtle ring for definition.
Small
shadow-soft-sm
Default
shadow-soft
Large
shadow-soft-lg
Extra Large
shadow-soft-xl
Border Radius
Base radius: 1.25rem (20px). Heavy rounding is a core part of the visual identity.
sm
calc(1.25rem * 0.6)
md
calc(1.25rem * 0.8)
lg
1.25rem
xl
calc(1.25rem * 1.4)
2xl
calc(1.25rem * 1.8)
3xl
calc(1.25rem * 2.2)
Spacing System
Tailwind default spacing scale. Comfortable density uses gap-6/p-6 to gap-8/p-8. Compact uses gap-4/p-4.
Iconography
Phosphor Icons is the icon library of choice. Default to the Fill weight for a bold, grounded presence across UI surfaces.
Common Icons (Fill)
Fill vs Regular
Fill reads bolder and more intentional. Regular is lighter but can feel decorative at small sizes.
Sizing Guide
16px
Inline
20px
Buttons
24px
Nav
32px
Feature
Recommended dimensions and style guidelines for social assets.
Examples
Thoughtful software development for the modern era.
Thoughtful software development for the modern era.
New project live
output.company
We're hiring
Senior engineers wanted
“Ship it like you mean it.”
output.company
Dimensions
Open Graph (OG)
1200 x 630
Link previews on most platforms
Twitter / X Card
1200 x 675
Large summary card
Instagram Post
1080 x 1080
Square feed image
Instagram Story
1080 x 1920
Full-screen vertical
LinkedIn Post
1200 x 627
Feed image
Favicon / App Icon
512 x 512
PWA icon, large favicon
Style Guidelines
- Use the brand background (#EEEEEE) or white for image backgrounds
- Feature the logo with blinking cursor as the primary mark
- Keep typography to Momo Trust Display for headlines, Geist for body
- Apply layered shadows for depth on cards or UI mockups
- Apply
p-safe-zone(10% padding on all sides) to every social image. Prevents clipping from platform crops and font kerning - Match icon usage to Fill weight Phosphor Icons
Social Media Images