Otto

Overview

Otto is a mindfulness-focused productivity tool that combines Pomodoro interval timing with intelligent website blocking, designed for the perpetually distracted knowledge worker. The brand embodies "Friendly Minimalism" — a design philosophy that balances approachable, conversational warmth with clean, purposeful interfaces. The visual identity centers on a vibrant blue-to-purple gradient ecosystem (primary blue #4f83fa transitioning through secondary magenta #e088ff) layered over serene landscape imagery, evoking calm focus rather than frantic urgency. The UI conveys emotional intelligence: Otto is positioned as a supportive companion, not a stern taskmaster. Voice: conversational, empathetic, occasionally playful. Example: "Here's a little question for you. Does this sound like you? You sit down to work, and suddenly three hours have vanished into the browser void."

The design system prioritizes clarity and trust through generous whitespace, readable typography at 16px body baseline, and purposeful color application. Every interaction feels intentional—buttons use full-radius pill shapes (border-radius: 9999px) to soften the interface, while the primary CTA ("Add to Chrome — it's Free") employs white backgrounds with subtle shadows (0 3px 8px rgba(0,0,0,0.15)) to command attention without aggression. The brand personality is self-aware: it acknowledges procrastination without judgment, celebrates small wins, and speaks to users as peers, not subjects.

Colors

Otto's color system is built on a dynamic gradient foundation that transitions from a vibrant sky blue (#4f83fa, primary) through secondary magenta (#e088ff) to tertiary slate (#61657d), creating visual energy while maintaining focus hierarchy. The primary blue (#4f83fa) is reserved exclusively for interactive elements—buttons, links, focus states, and key CTAs—ensuring users instantly recognize clickable surfaces. The secondary magenta (#e088ff) and its lighter variant (#eaafff) function as accent highlights, used sparingly on badges, decorative elements, and premium feature callouts to create visual interest without overwhelming the interface. Tertiary slate (#61657d) anchors the system as a supporting neutral, used for secondary text, disabled states, and subtle dividers.

The surface s

Typography

Otto's type system uses Inter as the primary typeface across all scales, chosen for its exceptional legibility at small sizes (12px labels) and its modern, friendly character that reinforces the brand's approachable personality. The hierarchy spans eight levels: display (80px, 700 weight, -0.04em tracking) for hero headlines, headline-lg (40px, 600 weight) for section titles, headline-md (28px, 600 weight) for subsections, title-lg (20px, 600 weight) for card headers, body-lg (18px, 400 weight, 28px line-height) for introductory paragraphs, body-md (16px, 400 weight, 24px line-height) for standard body copy, label-md (14px, 600 weight, 20px line-height, 0.01em tracking) for button text and form labels, and label-sm (12px, 500 weight, 16px line-height, 0.05em tracking) for badges and metada

Layout

Otto uses a fluid 12-column grid system with a maximum container width of 1280px (80rem), centered on viewport with auto margins. The page rhythm is built on an 8px unit scale, with semantic spacing tokens: xs (4px) for micro-adjustments, sm (12px) for compact spacing within components, md (24px) for standard padding and margin between elements, lg (40px) for section separation, and xl (64px) for major layout breaks. The gutter between grid columns is 24px, maintained consistently across breakpoints to preserve visual rhythm. Hero sections use full-viewport height with generous padding (40px top/bottom on desktop, 20px on mobile) to create breathing room around the primary CTA. Card-based sections employ lg spacing (40px) between cards and xl spacing (64px) between section groups. The desi

Elevation & Depth

Otto's elevation system uses soft, diffuse shadows to create subtle depth without harsh contrast, reinforcing the calm, approachable aesthetic. The shadow palette consists of three levels: sm (0 1px 2px rgba(0,0,0,0.06)) for subtle elevation on interactive elements like list items and badges, md (0 4px 12px rgba(0,0,0,0.08)) for standard cards and button hover states, and lg (0 16px 40px rgba(0,0,0,0.12)) for modals, dropdowns, and elevated overlays. Primary buttons use md elevation (0 4px 12px rgba(0,0,0,0.08)) in default state, increasing to lg on hover to signal interactivity. Cards transit

Shapes

Otto's shape philosophy is "Soft-Technical Friendliness"—combining rounded corners with purposeful geometry to balance approachability with clarity. Buttons and primary CTAs use full-radius pill shapes (border-radius: 9999px) to create a welcoming, non-threatening appearance that encourages interaction. Cards and containers use lg radius (1rem / 16px) to soften edges without appearing overly playful. Input fields and form elements use DEFAULT radius (0.5rem / 8px) for a slightly more structured feel that signals functional purpose. Badges and small accent elements use full radius (9999px) to e

Components

Action Elements Buttons are the primary interaction pattern and use three distinct variants. The primary button (button-primary) applies background-color: {colors.primary} (#4f83fa), text-color: white, border-radius: 9999px, padding: 12px 24px, height: 48px, and box-shadow: 0 3px 8px rgba(0,0,0,0.15). On hover (button-primary-hover), the background shifts to {colors.primary-fixed-dim} (#4f83fa with increased saturation) and shadow expands to 0 4px 12px rgba(0,0,0,0.12), creating a subtle lift. Active state (button-primary-active) darkens to #3d5fa8 and reduces shadow to 0 2px 4px rgba(0,0,0,0.1) for tactile feedback. Secondary buttons (button-secondary) use transparent backgrounds with 1px white borders (rgba(255,255,255,0.5)) and white text, ideal for secondary CTAs on gradient backgr

Do's and Don'ts

**Do**

• Do use the primary blue (#4f83fa) exclusively for interactive elements—buttons, links, focus states—to create instant recognition of clickable surfaces.
• Do apply generous whitespace (lg spacing: 40px) between major sections to reduce cognitive load and reinforce the calm, focused aesthetic.
• Do use full-radius pill shapes (border-radius: 9999px) on primary CTAs to create a welcoming, non-threatening appearance that encourages interaction.
• Do maintain 16px minimum font size for body copy with 1.5x+ line-height to maximize readability and accessibility across all devices.
• Do layer soft shadows (0 3px 8px rgba(0,0,0,0.15)) on interactive elements to signal elevation and interactivity without harsh contrast.
• Do use Inter typeface consistently across all scales to reinforce the modern, friendly brand character.

**Don't**

• Don't use secondary magenta (#e088ff) or tertiary slate (#61657d) as primary CTA colors—reserve these for badges, accents, and supporting elements only.
• Don't apply sharp corners (0px border-radius) to buttons or primary containers; the brand relies on rounded shapes to communicate approachability.
• Don't exceed lg elevation (0 16px 40px rgba(0,0,0,0.12)) on standard cards or buttons; reserve this for modals and critical overlays to maintain visual hierarchy.
• Don't reduce line-height below 1.5x font size for body copy; Otto's calm aesthetic depends on generous vertical spacing to reduce visual tension.
• Don't use pure black (#000000) or pure white (#ffffff) as text colors on colored backgrounds; always use on-surface or on-primary variants for accessibility.
• Don't mix typefaces; Inter is the sole typeface family across all scales—avoid system fonts or serif alternatives that would fragment the visual identity.