utxo AG

Overview

utxo AG is a Swiss product studio specializing in custom AI CoWorkers for small and mid-sized enterprises. The design system embodies 'Refined Minimalism'—a philosophy that strips away ornament to reveal process and clarity. The aesthetic is deliberately austere: a near-monochromatic palette of whites (#FFFFFF), off-whites (#FAFAFA), and deep blacks (#000000) with surgical precision in spacing and typography. The brand personality is methodical, trustworthy, and process-oriented; the UI conveys that AI integration is not magic but engineering. The emotional response is calm confidence: users feel they are in capable hands.

The voice is direct and technical without being cold. Sentences are short, active, and outcome-focused. Example: 'Your process, automated. Productive in 30 days.' The vocabulary favors concrete nouns (system, process, workflow, integration) over abstract adjectives. The brand avoids hype; instead, it emphasizes reproducibility, integration depth, and measurable timelines. Accent colors—navy (#002147), petrol (#0b5563), moss (#2c6e49), clay (#8a4b16), and plum (#5b3a7a)—are deployed sparingly, only on interactive elements and data visualization, ensuring they command attention without overwhelming the neutral canvas.

Colors

The color system is built on a 'neutral-first' philosophy: the vast majority of the interface is white, off-white, and light gray, creating a clean, distraction-free canvas. Primary (#000000) is pure black, used for text, buttons, and critical interactive elements. It is not a near-black; it is absolute, providing maximum contrast and legibility. On-primary (#FFFFFF) is pure white, ensuring 21:1 contrast on primary buttons. The surface stack progresses from bright (#FFFFFF) through container-lowest (#FAFAFA), container-low (#F0F0F0), container (#EDEDED), container-high (#E5E4E2), to container-highest (#D4D4D4), allowing for subtle visual hierarchy without introducing color. Outline (#D4D4D4) and outline-variant (#E7E6E4) define borders and dividers with 1px precision.

Secondary (#0b5563,

Typography

The type system pairs Manrope (display, headlines) with IBM Plex Sans (body, labels), creating a clear hierarchy between structural and content layers. Manrope is used exclusively for h1–h4 and titles, with weights 500–600 and tight letter-spacing (-0.028em to -0.015em) to reinforce authority and compactness. IBM Plex Sans handles all body copy, labels, and UI text at weights 400–500, with generous line-height (1.4–1.5) for readability. Display (64px, 600 weight, -0.028em) anchors hero sections and major page titles. Headline-lg (48px, 500 weight, -0.022em) is used for section headers. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) are the primary reading sizes, with 28px and 24px line-heights respectively. Label-md (15px, 500 weight) is applied to buttons and interactive labels

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centered with auto margins. The page rhythm is built on a semantic spacing scale: unit (8px), xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Section separation uses lg spacing (40px) for visual breathing room; internal component spacing uses md (24px) for padding and gap. The gutter (24px) is applied to left/right padding on all full-width sections, scaling to 5vw on tablet and 6vw on mobile for responsive flexibility. Container max-widths vary by section (900px, 1020px, 820px, 980px) to create visual rhythm and prevent monotony. White-space is treated as a first-class design element: generous margins between sections (clamp(40px, 5vw, 56px)) and internal padding (clamp(20px, 3vw, 32px)) create a sense of spaciousne

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color or blur. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for fine dividers and hover states; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns; lg (0 30px 60px -38px rgba(0, 0, 0, 0.35)) for modals and elevated surfaces. Cards use a 1px solid border at #E7E6E4 (outline-variant) combined with md shadow to create a crisp, layered appearance. The stage-card (product showcase) uses lg shadow (0 30px 60px -38px rgba(0, 0, 0, 0.35)) to lift it from the page. Interactive elements (but

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used strategically to soften hard edges without introducing softness. The rounded scale progresses from sm (4px) for small UI elements (checkboxes, minor dividers) to full (9999px) for pills and badges. Buttons use DEFAULT (8px) for a subtle, professional appearance; cards and larger containers use lg (14px) or xl (20px) to create visual warmth without compromising the minimal aesthetic. The stage-card (product showcase) uses 18px border-radius to distinguish it as a primary focal point. Input fields use DEFAULT (8px) to ali

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses #000000 background, #FFFFFF text, 52px height, 0 26px padding, 8px border-radius, and 15px font-size (label-md). On hover, opacity reduces to 0.86 (transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1)). The button-secondary uses a transparent background with a 1px solid border (#D4D4D4), same height and padding, and on hover the border color shifts to #000000. The button-ghost uses rgba(255, 255, 255, 0.7) background for secondary CTAs on light backgrounds. All buttons use IBM Plex Sans at 500 weight, ensuring legibility and consistency.

Containers & Surfaces Cards use a 1px solid border (#E7E6E4), 20px border-radius, 24px padding, and md shadow (0 3px 8px rgba(0, 0, 0, 0.15)). On h

Do's and Don'ts

**Do**

• Do use the primary black (#000000) for all critical CTAs and primary navigation; it commands attention and ensures accessibility (21:1 contrast on white).
• Do apply lg spacing (40px) between major sections to create visual breathing room and reduce cognitive load.
• Do use Manrope exclusively for headlines and titles with tight letter-spacing (-0.028em to -0.015em) to reinforce authority.
• Do reserve accent colors (navy, petrol, moss, clay, plum) for data visualization, badges, and secondary interactive elements only.
• Do use the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on cards and dropdowns to create subtle depth without visual noise.
• Do apply 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) transitions on all interactive state changes (hover, focus, active).

**Don't**

• Don't use near-black or near-white; stick to pure #000000 and #FFFFFF for maximum contrast and clarity.
• Don't apply accent colors to large surface areas; they should appear only on interactive elements and data points.
• Don't use border-radius larger than 20px on cards or containers; it compromises the 'refined' aesthetic.
• Don't mix Manrope and IBM Plex Sans in the same headline; use Manrope for all h1–h4 and titles.
• Don't apply shadows larger than lg (0 30px 60px -38px rgba(0, 0, 0, 0.35)) to avoid visual heaviness.
• Don't use opacity changes on buttons without also changing the background color; opacity alone is insufficient for state indication.