studio hug

Overview

Studio Hug is a Swiss-Italian UX/UI design studio that transforms complex digital challenges into refined, user-centric experiences. The brand embodies "Precision Minimalism"—a design philosophy that rejects ornamentation in favor of intentional contrast, geometric clarity, and purposeful color. The aesthetic is rooted in the Swiss modernist tradition, with a contemporary edge: deep blacks (#121212) provide the canvas, while vibrant accent colors (violet #9100ff, cyan #00bbff, red #fe001e) punctuate key interactions. The visual language evokes a sense of technical sophistication paired with human warmth—every pixel serves a function, yet the overall impression is approachable and alive.

The brand voice is direct, confident, and unpretentious. Studio Hug speaks in clear, declarative sentences without marketing hyperbole. The tone is collaborative and grounded in user research, never breathless or trendy. Example: "We design interfaces that make people happy because they solve real problems." The typography system—anchored in the custom Soehne typeface—reinforces this personality: generous letter-spacing (0.02em on body text) creates breathing room, while monospace labels (Soehne Mono) signal precision and technical credibility.

Colors

The color system operates on a principle of high contrast and intentional accent deployment. The surface stack is anchored in near-black (#121212 for surface, #0a0a0a for surface-dim), creating a dark, focused canvas that reduces cognitive load and emphasizes content. All text and interactive elements sit atop this dark foundation with white (#ffffff) as the primary on-surface color, ensuring WCAG AAA contrast ratios (21:1) across all body copy.

Primary accent color is violet (#9100ff), used exclusively for interactive elements that demand user attention: hover states on links, active buttons, and focus indicators. The secondary accent is cyan (#00bbff), deployed for supporting interactive states and secondary CTAs—it provides visual relief and signals alternative actions. Tertiary red (#

Typography

The type system is built on two primary typefaces: Soehne (custom, loaded via @font-face from woff2 and woff formats) for display, headlines, and body text, and Soehne Mono for labels, form inputs, and code-like elements. Display and headline scales use Soehne at 400 weight with generous negative letter-spacing (-0.02em to -0.015em) to create visual impact and hierarchy. Body text (16px–20px) uses 400 weight with positive letter-spacing (0.02em) to enhance readability on dark backgrounds and create a sense of spaciousness. Labels and form text use Soehne Mono at 14px–12px, reinforcing the technical, precise nature of interactions. Line-height is consistently generous (1.4–1.5 unitless or 28px on 20px body) to ensure legibility and reduce eye strain on the dark surface. When displaying smal

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, providing a flexible yet structured foundation for responsive design. The gutter is consistently 24px (md spacing), applied symmetrically on desktop and adjusted to 12px (sm spacing) on mobile (max-width: 650px). White-space is treated as a first-class design element: section separation uses lg spacing (40px) to create visual breathing room and reduce cognitive load. The hero section employs a centered, narrow container (max ~800px) for the headline, ensuring optimal line length (~50–60 characters) for readability. Content cards and form fields use md spacing (24px) for internal padding, with sm spacing (12px) between form fields to create a compact, scannable layout. The design favors asymmetrical layouts ov

Elevation & Depth

Depth in this system is achieved through subtle layering and strategic use of shadows rather than dramatic z-index stacking. The base layer (Level 1) is the surface background at #121212 with no shadow. Level 2 (cards, modals, form containers) uses a 1px border in surface-variant (#33383e) paired with a soft shadow: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). This creates a gentle lift without visual heaviness. Level 3 (elevated modals, popovers) applies a stronger shadow: box-shadow: 0 12px 22px rgba(0, 0, 0, 0.16), signaling maximum prominence. Interactive elements (buttons, links) do not us

Shapes

The shape philosophy is "Technical Softness"—a balance between sharp, architectural precision and subtle human warmth. Buttons and small interactive elements use sm radius (4px / 0.25rem), creating a slightly squared appearance that reinforces the technical, no-nonsense brand personality. Form inputs and cards use md to lg radius (8px–16px / 0.75rem–1rem), softening the overall aesthetic while maintaining geometric clarity. Full-width containers and large modals use lg radius (16px / 1rem) to avoid harsh corners. Badges and pill-shaped elements use full radius (9999px) for maximum softness and

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 8px vertical × 12px horizontal padding (label-md typography, 14px Soehne Mono) with a 4px border-radius. Primary buttons have a solid background in {colors.primary} (#9100ff) with white text; on hover, the background transitions to {colors.primary-container} (#6b0099) over 250ms with ease timing. Secondary buttons are transparent with a 1px border in {colors.secondary} (#00bbff); on hover, they gain a subtle background: rgba(0, 187, 255, 0.1). Ghost buttons (used for tertiary actions) have no border or background; on hover, they gain a background in {colors.surface-container-high} (#1e1e1e) and text color shifts to {colors.primary}. All buttons include a focus state with a 2px outline in the primary acce

Do's and Don'ts

**Do**

• Do use the violet accent (#9100ff) sparingly and intentionally—reserve it for primary CTAs, focus states, and moments that demand user attention.
• Do maintain the 24px gutter and generous line-height (1.4–1.5) to ensure readability and visual breathing room on dark backgrounds.
• Do apply letter-spacing: 0.02em on all body text to enhance legibility and reinforce the precision-minimalist aesthetic.
• Do use Soehne Mono exclusively for labels, form inputs, and monospace contexts—never mix it with Soehne for body text.
• Do test all interactive elements for WCAG AAA contrast (21:1 for text, 7:1 for graphics) against the dark surface.
• Do transition all color and border changes over 250ms ease to create smooth, predictable interactions.

**Don't**

• Don't use the cyan accent (#00bbff) as a primary CTA color—it is reserved for secondary actions and supporting elements.
• Don't apply shadows heavier than 0 12px 22px rgba(0, 0, 0, 0.16)—the design favors subtle depth over dramatic layering.
• Don't mix typefaces within a single text block; Soehne and Soehne Mono are contextual, not interchangeable.
• Don't use border-radius larger than 16px (lg) on cards or containers—the technical aesthetic demands geometric clarity.
• Don't add decorative elements, gradients, or textures to the dark surface; the design philosophy is reductive and functional.
• Don't apply color transitions longer than 300ms or use easing functions other than ease or ease-in-out—the brand values responsiveness and clarity.