Iventions

Overview

Iventions is an international event agency that transforms ambitious visions into world-class experiences across exhibitions, congresses, and sports events. The design system embodies 'Geometric Expressionism'—a movement that marries bold, flowing abstract shapes with refined Swiss-grid precision. The brand personality is confident yet approachable: it speaks to event professionals and corporate leaders who demand both creative excellence and operational clarity. The UI evokes a sense of controlled energy: soft cream and beige surfaces (#f3efeb, #e9ecef) provide calm, while vibrant lime-yellow (#e0ff98) and luminous purple (#9c93e8) accents punctuate key moments, signaling opportunity and forward momentum. Voice: direct, ambitious, never corporate-speak. Example: 'We craft world-class spaces & events that create memories, initiate conversations and elevate ambitions.'

Colors

The color palette is built on a warm, neutral foundation (surface: #f3efeb) that conveys sophistication and approachability. Primary (#e0ff98) is the signature lime-yellow used exclusively for call-to-action buttons, links, and interactive highlights—it commands attention without aggression. Secondary (#9c93e8) is a muted purple that appears in geometric background elements, badges, and supporting UI; it provides visual rhythm and depth. Tertiary (#d1f3f5) and accent colors (#ffddc4, #bfb8ff) are reserved for data visualization, status indicators, and decorative accents. The surface stack progresses from #f7f5f2 (lowest) through #e1ddd9 (highest), enabling subtle layering without harsh contrast. On-surface text is always #1e1e1e (near-black) for maximum legibility. Inverse surfaces (#14141

Typography

The type system centers on Soehne, a humanist sans-serif that balances geometric precision with organic warmth—ideal for an agency balancing creative ambition with operational rigor. Display (128px, 500 weight, -0.048em letter-spacing) anchors hero sections with commanding presence; Headline-lg (80px) and Headline-md (48px) establish section hierarchy with tight negative spacing (-0.024em to -0.02em) that conveys confidence. Body-lg (24px, 400 weight) is used for taglines and prominent copy, while Body-md (16px) handles standard paragraph text at 24px line-height for comfortable reading. Label-md (14px, 600 weight) and Label-sm (12px, 500 weight) are applied to buttons, badges, and UI labels with 0.01em to 0.05em letter-spacing for clarity. On small labels over busy geometric backgrounds,

Layout

The layout system uses a 12-column grid (1200px breakpoint) that adapts to 8 columns at tablet (768px) and 6 columns on mobile. Container max-width is 1440px, centered with 24px gutters on all sides. The hero section spans full viewport height (100vh on desktop, 100svh on mobile) and uses a sticky positioning technique on desktop to enable parallax scrolling of background geometric shapes. Section spacing follows the lg token (40px) for major breaks, md token (24px) for subsection separation, and sm token (12px) for component-level gaps. The design favors generous white space around text and interactive elements—minimum 24px padding inside cards, 40px margin between sections. Geometric accent shapes (the purple and lime polygons) are positioned absolutely and use will-change: transform for

Elevation & Depth

Depth is achieved through a restrained shadow system and layered geometric shapes rather than dramatic drop shadows. Level 1 (Base): the warm cream surface (#f3efeb) with no shadow, establishing the visual foundation. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), paired with surface-container (#ede9e5) background, creating subtle separation. Level 3 (Elevated/Modals): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with surface-container-high (#e7e3df), used for hero overlays and prominent call-outs. Geometric shapes (the purple polygon, lime accents) layer beneath text via z

Shapes

The design philosophy is 'Geometric Precision with Organic Flow'—sharp, intentional angles in background shapes contrast with soft, approachable corner radii on interactive elements. Buttons and inputs use 0.8rem (12.8px) border-radius, balancing friendliness with formality. Cards and containers use 1.5rem (24px) for a more generous, inviting feel. The hero section features large, flowing polygon shapes (created via clip-path: polygon(...)) that suggest movement and energy—these are intentionally sharp-edged to convey dynamism. Small UI elements (badges, tags) use full (9999px) border-radius f

Components

Action Elements Buttons use a two-tier system: Primary buttons (background: #e0ff98, color: #1e1e1e, padding: 12px 24px, border-radius: 0.8rem, font-weight: 600) are reserved for primary CTAs ('Got a Project?', 'Contact'). On hover, the background shifts to #f7ffdc (primary-container) with a 200ms ease-out transition. Secondary buttons use a transparent background with a 2px solid #e0ff98 border, inverting on hover to a filled state. All buttons use label-md typography (14px, 600 weight) and maintain a 48px minimum height for touch targets.

Containers & Surfaces Cards use surface-container (#ede9e5) background with 1.5rem border-radius and 24px padding. The standard shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the background shifts to surface-container-high (#e7e3df) with a

Do's and Don'ts

**Do**

• Do use primary yellow (#e0ff98) exclusively for CTAs, links, and focus states—it is the brand's signature accent and must remain distinctive.
• Do apply geometric shapes (polygons, clip-paths) to background layers, never to text or interactive elements, to maintain clarity.
• Do maintain 24px minimum padding inside cards and 40px margin between major sections to preserve the generous, confident aesthetic.
• Do use Soehne at 500 weight for all headlines to balance geometric precision with humanist warmth.
• Do apply the standard shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and elevated surfaces—never use harsh, dark shadows.

**Don't**

• Don't use primary yellow on body text or backgrounds—it is reserved for interactive elements only.
• Don't mix rounded corners (>1rem) with sharp geometric shapes in the same visual layer; keep shapes intentional and layered.
• Don't apply more than two accent colors (secondary purple + tertiary cyan) in a single section—visual noise dilutes the brand's confidence.
• Don't use system fonts or generic sans-serifs; Soehne is non-negotiable for headlines and UI labels to maintain brand distinctiveness.
• Don't compress spacing below 12px (sm token) on mobile or 24px (md token) on desktop—the generous rhythm is core to the brand's approachability.