Explore

Office of Otto

PRO

office-of-otto.com

Visit website
Screenshot of Office of Otto
Creative StudioPublished
  • Animation
  • Light
  • Editorial
  • Large type

Palette

Typography

  • Primary

    Unknown
    Weights
    400, 500
    Fallback
    Arial, Helvetica, sans-serif

  • Secondary

    Unknown
    Weights
    400
    Fallback
    Arial, Helvetica, sans-serif

About this design

An ultra-minimal creative-studio landing page built as a pale-blue typographic field, with a compressed central index and a saturated teal animated footer stage.

Prompts

Pro access

Six prompts, in build order. Pro unlocks all six, ready to paste into your AI tool.

  • Main build prompt
  • Build frontend
  • Generate assets
  • Add animations
  • Responsive polish
  • Final visual polish

Build Recipe

Framework

  • Astro
Agent
Claude Code
Model
Claude Fable 5.1This is a precision CSS and typographic-layout build with a restrained looping motion region, best served by sustained visual iteration rather than a heavy graphics stack.

Creative tools

  • Nano Banana
  • Recraft

Special requirements

Careful optical tuning of very small typography; a lightweight, visually subtle looping lower-stage animation; strict avoidance of generic UI components.

AI Replicability

88 / 100

The flat colour system, sparse composition, and typographic index reproduce reliably with current frontend tools. The main judgement call is tuning the lower-band loop so it feels purposeful without disturbing the page's severe restraint.

Main remaining challenge

Achieving the precise balance between almost illegibly small information, expansive blank space, and a lower-stage animation that feels active rather than visually noisy.

The design and branding of Office of Otto belong to their authors. InspoToCode documents its visual language as a reference; anything you build from it should carry your own branding, copy and assets.

Design analysis

Pro analysis

Understand why the design works

The written breakdown of this design: composition, hierarchy, spacing, imagery and the decisions behind the details — the part that tells you what to keep and what to change.

Upgrade to Pro