UTXO.AG

Overview

UTXO.AG is a Swiss product studio specializing in custom AI employees and process automation for mid-sized enterprises. The brand serves forward-thinking organizations seeking to digitally transform their operations without sacrificing precision or control. The design aesthetic is Architectural Minimalism—a disciplined approach that treats interface elements as functional structures rather than decorative objects. The visual language evokes clarity, efficiency, and Swiss precision: clean geometric forms, generous white space, and a restrained color palette dominated by pure black (#000000) and white (#FFFFFF) with a deep navy accent (#002147) reserved for strategic emphasis. The emotional response is one of quiet confidence and professional competence—the UI communicates that complex processes have been distilled into elegant systems.

The brand voice is direct, measured, and enterprise-focused. UTXO speaks in concrete terms: "We build your custom AI employee—trained on your processes, integrated into your systems, productive in 30 days." The vocabulary avoids hype; instead, it emphasizes outcomes, timelines, and integration. Tone is never breathless or casual; it is precise, sometimes understated, and always grounded in operational reality. Example sentence in brand voice: "Behind it stands enterprise experience: with Masumi and Sokosumi we built the infrastructure of the AI agent economy."

Colors

The color system is rooted in monochromatic restraint with strategic accent deployment. Primary (#000000) is the dominant interactive color, used on all primary CTAs ("Book a call" buttons at 52px height with 0 26px padding, border-radius 8px), navigation elements, and text hierarchy. On-primary (#FFFFFF) provides maximum contrast for legibility. The surface stack progresses from pure white (#FFFFFF) as the base through subtle grays: surface-container-lowest (#FAFAFA), surface-container-low (#F5F5F5), surface-container (#EEEEEE), and surface-container-highest (#E5E4E2). This progression is used to create depth without relying on shadows; cards use surface-container-lowest with a 1px border at outline-variant (#E7E6E4). Secondary (#002147), a deep navy, is reserved for badges, status indica

Typography

The type system pairs Manrope (display layer) with IBM Plex Sans (body layer), creating a clear hierarchy between structural headings and content. Manrope at 600–700 weight conveys authority and is used for all headlines and hero copy; IBM Plex Sans at 400–500 weight provides neutral, highly legible body text. Display (64px, 600 weight, -0.028em letter-spacing, 72px line-height) anchors hero sections and major page divisions. Headline-lg (48px, 500 weight, -0.02em, 56px line-height) is used for section titles like "A product studio from Zug." Body-lg (18px, 400 weight, 28px line-height) is deployed for hero copy and introductory paragraphs. Body-md (16px, 400 weight, 24px line-height) is the default for all body text and form labels. Label-md (15px, 500 weight, 0.01em letter-spacing, 22px

Layout

The layout system uses a 12-column grid with a maximum container width of 1200px, centered with symmetric padding. Horizontal padding is responsive: clamp(20px, 5vw, 64px), ensuring the design breathes on mobile while maintaining structure on desktop. Vertical section spacing uses clamp(64px, 9vw, 120px) to create rhythm that scales with viewport height. The grid gap between major sections is clamp(32px, 5vw, 72px), allowing content to flow naturally across breakpoints. Two-column layouts (e.g., the "About" section) use grid-template-columns: 1.15fr 0.85fr to create visual weight distribution, collapsing to single column at 820px. White space is treated as a structural element: the hero section uses min-height: clamp(600px, 88vh, 880px) to ensure breathing room, and card padding is consist

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than dramatic layering. The elevation scale consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and fine details, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and interactive surfaces, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated overlays. Cards use surface-container-lowest (#FAFAFA) as the base with a 1px border at outline-variant (#E7E6E4) and elevation.sm shadow. On hover, cards transition to surface-container-high (#E8E8E8) with elevation.m

Shapes

The shape philosophy is Soft-Technical: rounded corners are used sparingly and consistently to signal interactivity while maintaining architectural precision. Buttons use border-radius: 8px (1rem), a subtle rounding that softens the form without compromising the geometric aesthetic. Cards use border-radius: 14px (1.5rem) to create a slightly more approachable container for content. Input fields use border-radius: 8px to align with button forms, creating a cohesive interaction family. The default rounded value (0.5rem / 8px) is applied to most interactive elements; full (9999px) is reserved for

Components

Action Elements Primary buttons (button-primary) use background: #000000, color: #FFFFFF, height: 52px, padding: 0 26px, border-radius: 8px, font-size: 15px, font-weight: 500. On hover, opacity transitions to 0.88 over 0.2s cubic-bezier(0.2, 0.8, 0.2, 1). The "Book a call" CTA in the hero uses this component and is the most prominent interactive element on the page. Secondary buttons (button-secondary) use transparent background with a 1px border at #D4D4D4, height: 38px, padding: 0 18px, and on hover receive background: #E8E8E8 with border-color: #000000. Both button variants use transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) for consistent response timing.

Containers & Surfaces Cards (card) use background: #FAFAFA, border-radius: 14px, padding: 34px, border: 1px solid #E7E6

Do's and Don'ts

**Do**

• Do use pure black (#000000) for all primary CTAs and interactive elements—it is the brand's signature accent and must remain visually dominant.
• Do maintain consistent 8px spacing increments (4px, 12px, 24px, 40px, 64px) across all padding, margins, and gaps to preserve rhythm.
• Do apply the 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) easing curve to all interactive transitions—this is the brand's motion signature.
• Do use Manrope for all headlines and display text; reserve IBM Plex Sans for body and UI labels to maintain clear hierarchy.
• Do limit border-radius to 8px (buttons, inputs) or 14px (cards) to preserve the Soft-Technical aesthetic—avoid excessive rounding.

**Don't**

• Don't use the secondary navy (#002147) as a primary interactive color—it is reserved for badges and status indicators only.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12)—the design relies on color and border definition, not depth.
• Don't mix Manrope and IBM Plex Sans within a single text block; maintain clear separation between display and body layers.
• Don't use rounded-full (9999px) for buttons or cards—this breaks the architectural character; reserve it for badges and pills.
• Don't override the backdrop-filter: blur(10px) on the header—this frosted-glass effect is essential to the brand's visual identity.