XPORTAL Freelancer

Overview

XPORTAL Freelancer is a conversational AI platform that reimagines how businesses discover and connect with freelancers through natural dialogue rather than rigid form-filling. The brand embodies "Transparent Minimalism"—a design philosophy that prioritizes clarity, user agency, and honest communication through restrained, purposeful interfaces. The aesthetic combines a clean, light-neutral palette (white surfaces with warm grays at #181817 and #5f5f5a) with a single, confident accent in forest green (#17804d) that signals trust and growth. The UI evokes a sense of calm professionalism: every interaction feels deliberate, every choice remains visible to the user, and the system never presumes to fill in gaps.

The brand voice is direct, respectful, and German-first (though internationally accessible). It avoids marketing hyperbole and instead speaks in concrete, actionable language. Tone examples: "Kein Formular: Schreiben Sie einfach los" (No form: just start writing) and "Sie treffen jede Entscheidung" (You make every decision). The vocabulary favors clarity over cleverness—terms like "Transparente Unterstützung" (Transparent Support) and "nachvollziehbare Auswahl" (traceable selection) reinforce the brand's commitment to explainability. Example sentence in brand voice: "Die KI strukturiert Ihre Anfrage nach festen, überprüfbaren Regeln — Sie sehen jede Entscheidung."

Colors

The color system is built on a foundation of warm, sophisticated neutrals that create a sense of professional calm. The primary surface is pure white (#ffffff), supported by a carefully calibrated stack: surface-dim (#f7f7f5) for subtle backgrounds, surface-bright (#fbfbfa) for raised elements, and surface-container shades ranging from #ecece8 (light hover) to #d6d6d0 (strong borders). Text hierarchy is anchored in deep ink (#181817 for primary text, #5f5f5a for secondary), with muted accents at #72726c for tertiary information. The primary accent color is forest green (#17804d)—used exclusively for CTAs, success states, and key interactive elements. This green is never used decoratively; it signals actionable moments and user agency. Its container pair (#e9f5ed) provides a soft background

Typography

The type system balances serif and sans-serif to create visual hierarchy and personality. Display and headline text uses Georgia serif (40px, 400 weight, -0.02em letter-spacing) to convey editorial authority and approachability—a deliberate choice that softens the technical nature of the platform. All body and UI text uses Inter sans-serif (15px base, 400 weight, 1.5 line-height) for clarity and screen legibility. The weight scale is precise: body text sits at 400, labels and buttons at 590 (a custom weight between regular and semibold), and navigation items at 650 for emphasis without heaviness. Headline-md (24px, 600 weight) is used for section titles and card headers, while label-sm (12px, 700 weight, 0.09em letter-spacing) is reserved for metadata, timestamps, and section labels. All t

Layout

The layout follows a three-column grid model (sidebar 264px, main content fluid, details panel 340px) that adapts to a two-column layout on smaller screens. The main content area uses a max-width of 1280px to prevent excessive line lengths and maintain focus. Spacing is semantic and hierarchical: the unit is 8px, with scales for xs (4px, micro-adjustments), sm (12px, component padding), md (24px, section separation), lg (40px, major section breaks), and xl (64px, page-level spacing). The gutter (24px) is used consistently for horizontal padding on containers. Vertical rhythm is maintained through consistent line-height (1.5 for body, 1.3 for headlines) and spacing multiples—sections are separated by lg (40px), cards within sections by md (24px), and elements within cards by sm (12px). The

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy, dramatic shadows common in modern design. The elevation scale uses three levels: sm (0 3px 8px rgba(0, 0, 0, 0.06)) for subtle card lifts and hover states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for interactive elements and dropdowns, and lg (0 14px 42px rgba(24, 24, 23, 0.08)) for modals and overlays. Shadows are always soft and diffuse, never sharp or directional. Interactive elements (buttons, cards) receive a 1px border at {colors.outline} (#aaa9a3) to define their edges without relying on shadow alone. On hover, cards

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used consistently but never excessively, creating a sense of approachability without sacrificing clarity. The radius scale is: sm (6px) for small UI elements like icon buttons and badges, DEFAULT (10px) for primary buttons and input fields, md (14px) for cards and suggestion buttons, lg (20px) for modals and large containers, and full (999px) for pill-shaped elements (badges, avatars). Buttons use DEFAULT (10px) to feel friendly but not rounded to the point of ambiguity. Cards use md (14px) to create visual softness while maintaining

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 44px height (control-lg) for touch-friendly targets. Primary buttons (button-primary) use {colors.primary} (#17804d) background with white text, label-md typography (14px, 590 weight), and DEFAULT radius (10px). On hover, the background darkens to #0f6340 (a 20% darkening for sufficient contrast). On focus, apply a 2px outline at {colors.primary} with a 2px offset and a 0 0 0 4px box-shadow using {colors.primary-container} for a soft focus ring. Secondary buttons use a transparent background with a 1px border at {colors.outline}, transitioning to {colors.surface-container} on hover. Ghost buttons (button-ghost) are used for tertiary actions and have no background or border by default, only text color at

Do's and Don'ts

**Do**

• Do use the forest green (#17804d) accent exclusively for primary CTAs, success states, and moments of user agency—never use it for decorative elements or backgrounds.
• Do maintain the 1.5 line-height minimum for all body text and ensure at least 44px touch targets for all interactive elements.
• Do apply the 2px focus outline with a 2px offset (0 0 0 4px box-shadow) to all interactive elements for accessibility without breaking the minimalist aesthetic.
• Do use the serif Georgia font for display and headline text to convey editorial authority; reserve Inter sans-serif for body, labels, and UI text.
• Do respect the user's choices by showing transparent, traceable decision-making in the UI—never hide or presume information.
• Do use the shadow scale consistently: sm for subtle lifts, md for interactive elements, lg for modals only.

**Don't**

• Don't use the primary green (#17804d) for backgrounds, borders, or non-interactive elements—it is reserved for actionable moments only.
• Don't apply shadows heavier than lg (0 14px 42px rgba(24, 24, 23, 0.08)) or use sharp, directional shadows that create artificial depth.
• Don't mix serif and sans-serif within a single text block or use serif fonts for body text, labels, or UI copy.
• Don't create interactive elements smaller than 44px in height or 44px in width; this breaks touch accessibility and the brand's approachable aesthetic.
• Don't use color alone to convey state changes—always pair color with border, shadow, or text weight changes for clarity.
• Don't apply border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the cohesive, intentional aesthetic.