ITEON

Overview

ITEON is a Warsaw-based B2B software house that embodies a philosophy of pragmatic precision—understanding business problems before writing code. The brand aesthetic is "Technical Clarity": clean, confident typography (openRunde for headlines, Inter for body), a teal-to-cyan primary palette (#076a76 primary, #4fd2e5 light accent), and a light, neutral canvas (#f2f2f2 background) that keeps focus on content and interaction. The visual language rejects ornament in favor of functional elegance: generous whitespace, deliberate color hierarchy, and purposeful shadows (0 3px 8px rgba(0,0,0,0.15) on cards) that separate layers without distraction. The brand personality is direct, knowledgeable, and solution-oriented—never breathless or trendy. Example sentence: "We start with your costliest problem. A working prototype arrives in weeks, not quarters. Then we build."

Colors

The color system is anchored in a teal primary (#076a76) that appears on all CTAs, interactive states, and brand-critical UI. This primary is paired with a bright cyan accent (#4fd2e5) for secondary emphasis and hover states, creating a cohesive, professional palette rooted in trust and clarity. The surface stack is deliberately neutral: #f2f2f2 (page background), #ffffff (card surfaces), #e9ecef (container-high for hover states), and #dedede (subtle borders). Text hierarchy uses #050d0f (near-black on-surface) for headings and body copy, #273639 (on-surface-variant) for secondary text, and #4d5e62 (muted) for tertiary labels. A warm accent color (#993e02 signal, #feeee7 signal-wash) is reserved for alerts, warnings, and status indicators—never used for primary CTAs. The selection color (#

Typography

The type system pairs openRunde (a geometric, rounded sans-serif) for headlines and display text with Inter (a humanist sans-serif) for body and UI labels. This pairing communicates approachability without sacrificing authority: openRunde's rounded letterforms (60px display at 700 weight, -0.04em letter-spacing) convey modern confidence, while Inter's neutrality (16px body at 400 weight, 24px line-height) ensures legibility at all scales. Headlines use tighter line-height (68px for 60px display, 48px for 40px headline-lg) to create visual compression and impact; body text relaxes to 24px line-height (1.5x font size) for comfortable reading. Labels and UI text (12–14px) use 500–600 weight to maintain clarity at small sizes. Apply text-shadow: 0 2px 4px rgba(0,0,0,0.1) on small labels (label

Layout

The layout uses a 12-column grid with a fixed max-width of 1024px, centered on the viewport. Page rhythm is governed by a semantic spacing scale: 24px (md) for section separation, 40px (lg) for major section breaks, and 12px (sm) for component-internal spacing. The hero section uses full-width asymmetry—headline and body copy on the left (60% width), a visual element or form on the right (40% width)—creating visual tension that draws the eye. Cards and containers use 24px padding (md) with 12px internal gutters between elements. Whitespace is generous: sections breathe with 40–64px vertical spacing, and horizontal margins maintain 24px gutters on mobile, scaling to 40px on desktop. The container max-width of 1024px ensures text remains readable (60–80 characters per line) while allowing fu

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the flat aesthetic without introducing visual noise. Level 1 (base surfaces, inputs) uses no shadow or a subtle 0 2px 8px rgba(15,23,42,0.06). Level 2 (standard cards, modals) applies 0 3px 8px rgba(0,0,0,0.15), creating a soft separation from the background. Level 3 (elevated modals, floating elements) uses 0 8px 24px rgba(15,23,42,0.2), reserved for overlays and high-priority interactions. Shadows are always soft (no hard edges) and use a neutral dark tone (rgba(0,0,0,x)) rather than color-tinted shadows. Focus states on intera

Shapes

The shape philosophy is "Geometric Softness"—rounded corners that feel modern and approachable without sacrificing clarity. Buttons use 1rem (16px) border-radius, creating a pill-like silhouette that feels friendly and clickable. Cards and containers use 9999px (full) border-radius for badge-style elements and 0.75rem (12px) for standard cards, balancing softness with definition. Input fields use 0.5rem (8px) border-radius, a tighter radius that signals functional precision. The rationale: larger radii (1rem+) on interactive elements (buttons, chips) make them feel inviting and reduce visual w

Components

Action Elements Buttons are the primary interaction pattern. The primary button (background: #076a76, color: #ffffff, padding: 12px 24px, border-radius: 1rem, font-family: openRunde, font-weight: 700, font-size: 17.44px) uses the brand teal with white text. On hover, the background shifts to #02515b (primary-fixed-dim) with a 150ms ease-out transition. The secondary button (background: transparent, border: 2px solid #076a76, color: #076a76, same padding and radius) provides a lower-emphasis alternative; on hover, it fills with #4fd2e5 (primary-container) and text becomes #050d0f. Tertiary buttons (background: transparent, font-size: 12px, padding: 0 12px, height: 32px) are used for inline actions and links; they have no visible border until hover, when they gain a subtle background (#e

Do's and Don'ts

**Do**

• Do use the teal primary (#076a76) exclusively for CTAs, focus states, and brand-critical interactions—never dilute it with secondary uses.
• Do maintain 24px minimum padding inside cards and containers; whitespace is a design tool, not wasted space.
• Do apply openRunde only to headlines (28px and above); use Inter for all body and UI text to preserve legibility.
• Do use the shadow system (0 3px 8px for standard, 0 8px 24px for elevated) to separate layers; never use color alone to create depth.
• Do ensure all interactive elements (buttons, inputs, links) have a minimum 48px touch target height on mobile.
• Do apply focus rings (3px inset at rgba(7,106,118,0.1)) to all keyboard-navigable elements for WCAG AAA compliance.

**Don't**

• Don't use the warm signal color (#993e02) for primary CTAs or brand emphasis—it's reserved for alerts and warnings only.
• Don't apply border-radius smaller than 8px to buttons or primary interactive elements; it reduces affordance.
• Don't mix Inter and openRunde at the same size or weight; maintain clear typographic hierarchy (openRunde for headlines, Inter for body).
• Don't add drop shadows larger than 0 8px 24px or use color-tinted shadows (e.g., blue shadows); stick to neutral rgba(0,0,0,x) for consistency.
• Don't reduce padding below 12px inside cards or containers; the design relies on generous whitespace for clarity.
• Don't use the secondary blue (#0a66c2) or LinkedIn blue (#0077b5) in the main UI; they appear only in external links or partner logos.