utxo.ag

Overview

utxo.ag is a Swiss product studio that builds custom AI employees and process automation systems for mid-sized enterprises. The brand embodies "Applied Minimalism"—a design philosophy that strips away ornament to reveal functional clarity, combining Swiss precision with approachable directness. The visual identity evokes calm confidence: a monochromatic palette (pure black #000000 on pure white #FFFFFF) paired with subtle gray accents (#5B5B5B, #9A9A9A) creates an environment where complex AI concepts feel manageable and trustworthy. Users experience the interface as a capable partner, not a daunting technology.

The brand voice is precise, measured, and human-centered. Vocabulary favors concrete nouns ("process," "system," "employee") over abstract marketing language. Tone is never breathless or hyperbolic; instead, it delivers information with quiet confidence. Example: "Help us understand your processes. We'll help you reduce them." The sentence structure is direct (subject-verb-object), avoiding jargon while respecting the intelligence of enterprise decision-makers. Personality is collaborative and pragmatic—the brand positions itself as a thinking partner, not a vendor.

Colors

The color system is rooted in monochromatic restraint, reflecting Swiss design tradition and the brand's focus on clarity over decoration. Primary (#000000) is deployed on all interactive elements—buttons, links, active states—creating a visual hierarchy that is immediately legible. On-primary (#FFFFFF) ensures maximum contrast (21:1 WCAG AAA) on dark backgrounds. The surface stack progresses from pure white (surface: #FFFFFF) through five container variants down to the tertiary background (surface-container-highest: #E5E4E2), providing subtle depth without visual noise. Secondary (#5B5B5B) and its lighter variant on-surface-variant (#5B5B5B) are used for body text, navigation labels, and disabled states, maintaining readability while signaling reduced emphasis. Tertiary (#002147) is reser

Typography

The type system pairs Manrope (display/headlines) with IBM Plex Sans (body/labels), creating a deliberate contrast between geometric warmth and technical clarity. Manrope's slightly rounded letterforms (particularly visible in the 'a' and 'e') humanize the brand while maintaining geometric precision—appropriate for a company building AI systems. IBM Plex Sans, with its monospace-inspired proportions, grounds body copy in technical credibility. Display (64px, 600 weight, -0.028em tracking) is used for hero headlines and sets the visual anchor; its tight negative tracking (-0.028em) creates visual tension that draws the eye. Headline-lg (48px, 500 weight) is deployed for section titles and maintains the -0.02em tracking to preserve the geometric aesthetic. Body-md (16px, 400 weight, 24px lin

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centered on the viewport. Horizontal padding scales fluidly: clamp(20px, 5vw, 64px) ensures the design breathes on mobile (20px gutters) while maintaining spacious margins on desktop (64px). Vertical section spacing uses clamp(64px, 9vw, 120px) to create rhythm that adapts to viewport height—smaller screens get tighter spacing, larger screens get generous breathing room. The grid gap between columns is clamp(32px, 5vw, 72px), allowing content blocks to feel connected yet distinct. Two-column layouts (e.g., about section) use a 1.15fr / 0.85fr ratio, giving slightly more weight to text content while reserving space for imagery or illustrations. Container max-width of 1200px prevents line-length from exceeding 75 characters

Elevation & Depth

Depth in this system is achieved through subtle layering and strategic use of shadows, avoiding the heavy drop-shadows common in contemporary design. The base level (Level 1) is the white surface (#FFFFFF) with no shadow. Level 2 (cards, input fields) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow with 3px blur and 8px spread that suggests the element is slightly raised. Level 3 (modals, dropdowns, elevated cards on hover) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger shadow with 8px blur that creates clear separation from the background. The header uses a 1px border

Shapes

The shape philosophy is "Geometric Warmth"—combining Swiss precision with approachable softness. Buttons use rounded: lg (1rem / 16px) for a friendly, modern appearance that avoids both sharp corners (which feel cold) and excessive rounding (which feels childish). Cards and containers use rounded: xl (1.5rem / 24px), creating a more pronounced curve that signals these are distinct content zones. Input fields use rounded: DEFAULT (0.5rem / 8px), a subtle radius that feels technical and precise—appropriate for form interactions. The pixel-grid background in the hero uses border-radius: 4px on in

Components

Action Elements Buttons are the primary call-to-action mechanism and use three distinct variants. Button-primary (height: 52px, padding: 0 26px, background: #000000, color: #FFFFFF, border-radius: 16px) is deployed for primary actions like "Book a call." The 52px height ensures touch-target compliance (minimum 48px) with breathing room. On hover, opacity transitions to 0.88 over 0.2s, creating a subtle dimming effect that signals interactivity without color shift. Button-secondary uses a transparent background with a 1px border (#D4D4D4), height 38px, and padding 0 18px—ideal for tertiary actions or navigation. Button-ghost (height: 38px, transparent background) is used for inline links and navigation items, with text-color transitioning from #5B5B5B to #000000 on hover. All buttons us

Do's and Don'ts

**Do**

• Do use black (#000000) for all primary interactive elements—buttons, links, active states—to create immediate visual hierarchy and maintain the monochromatic aesthetic.
• Do apply the full spacing scale (md: 24px for section padding, lg: 40px for major separations) to create rhythm and breathing room; avoid cramping content.
• Do pair Manrope headlines with IBM Plex Sans body text consistently; the contrast between geometric warmth and technical clarity reinforces the brand's positioning.
• Do use the outline-variant (#E7E6E4) as a 1px border on all containers; it defines edges without harsh contrast and maintains the clean aesthetic.
• Do transition interactive elements (buttons, cards, inputs) over 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); this easing curve feels natural and responsive.
• Do reserve tertiary (#002147) for accent moments—badges, special highlights, future interactive states—to introduce a single note of brand color without overwhelming the monochromatic palette.

**Don't**

• Don't use multiple accent colors or gradients; the brand's strength is its monochromatic restraint. Avoid introducing secondary colors beyond black, white, and gray unless explicitly approved.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12); excessive shadows make the interface feel heavy and undermine the clean aesthetic.
• Don't use border-radius values smaller than 0.5rem (8px) on buttons or cards; the brand requires geometric warmth, not sharp corners.
• Don't mix typefaces beyond Manrope (display) and IBM Plex Sans (body); introducing additional fonts dilutes the carefully calibrated type system.
• Don't set line-height below 1.4 for body text; the generous line-height (1.5 for body-md) is essential for readability and the calm, spacious aesthetic.
• Don't animate elements for longer than 0.3s or use easing curves other than cubic-bezier(0.2, 0.8, 0.2, 1); the brand's interactions should feel snappy and precise, not sluggish or bouncy.