XPORTAL

Overview

XPORTAL is a conversational AI-powered freelancer marketplace that transforms project discovery into a natural dialogue. The brand embodies 'Precision Minimalism'—a design philosophy that strips away friction while maintaining rigorous clarity. The interface prioritizes information hierarchy through restrained typography, generous whitespace (40px section gaps, 24px component padding), and a monochromatic palette anchored by deep charcoal (#181817) that conveys professionalism and trust. The emotional response is one of calm efficiency: users feel heard, understood, and matched with confidence.

The voice is direct, conversational, and German-first (though internationally accessible). XPORTAL speaks like a knowledgeable colleague: precise without jargon, helpful without overselling. Example: 'Beschreiben Sie Ihr Projekt in einem Satz und erhalten Sie passende Freelancer-Profile — mit Begründung, warum sie passen' (Describe your project in one sentence and get matched freelancer profiles—with reasoning for why they fit). The tone avoids hype; it delivers clarity and results.

Colors

The color system is built on a neutral-first foundation with strategic accent colors for status and action. Primary (#181817, deep charcoal) is the dominant text and interactive color, used on all primary CTAs, navigation, and body copy. It conveys authority and precision. Surface colors range from pure white (#ffffff) at the base through soft grays (#f7f7f5, #ecece8) for containers and hover states, creating a subtle depth hierarchy without darkness. Outline (#aaa9a3) and outline-variant (#72726c) define borders and dividers at 1px weight.

Secondary (#17804d, forest green) is reserved for success states, saved items, and positive confirmations—appearing in badges, checkmarks, and the 'saved' state of cards (background: #e9f5ed, border: #cce3d6). Tertiary (#7a5514, warm amber) marks warni

Typography

The type system uses Inter exclusively, a geometric sans-serif that balances warmth with precision. Display (60px, 700 weight, -0.04em tracking) anchors hero moments; headline-md (30px, 520 weight) is used for section titles like 'Welchen Freelancer suchen Sie?'; body-md (16px, 400 weight, 24px line-height) carries conversational content and descriptions. Label-md (14px, 600 weight, 0.01em tracking) marks interactive elements and metadata. The weight progression (400 for body, 470–520 for headings, 600 for labels) creates clear hierarchy without excessive contrast. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (label-sm, 12px) when layered over busy backgrounds or suggestion cards to ensure legibility. Letter-spacing is negative on display/headline sizes (-0.04em to -0.0

Layout

The layout uses a fixed 12-column grid with a max-width of 1220px, centered on the viewport. The sidebar (288px fixed) anchors navigation on the left; the main chat panel occupies the flexible center; an optional details panel (340px) appears on the right. Spacing follows a semantic scale: 24px (md) for section separation and component padding, 40px (lg) for major section breaks, 12px (sm) for internal component spacing. The container max-width of 1220px ensures readability on large screens while maintaining focus. Suggestion cards (KI & Automatisierung, SAP, 1st & 2nd Level Support) use a 3-column grid with 24px gaps. The composer input sits at the bottom with a 44px minimum height and 12px internal padding. Whitespace is generous: the welcome state centers the h1 with 60px top margin, an

Elevation & Depth

Depth is achieved through subtle layering and precise shadow application rather than dramatic contrast. Level 1 (Base): the surface (#ffffff) with no shadow, establishing the ground plane. Level 2 (Cards & Inputs): 1px solid border in outline (#aaa9a3) plus box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift of 3px. Level 3 (Modals & Popovers): 1px border plus box-shadow: 0 14px 42px rgba(24, 24, 23, 0.08), a larger spread shadow suggesting 14px elevation. Hover states increase the shadow slightly (0 4px 12px rgba(0, 0, 0, 0.12)) to signal interactivity. The sidebar uses a 1px righ

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, signaling approachability without sacrificing precision. Border-radius follows a tiered scale: sm (10px) for small interactive elements like icon buttons and sidebar items; DEFAULT (12px) for primary buttons, inputs, and suggestion cards; md (14px) for secondary containers; lg (20px) for larger cards and modals; full (999px) for badges and pills. The sidebar uses 12px radius on primary navigation buttons (.sidebar-primary-button), creating a soft but structured feel. Input fields use DEFAULT (12px) to match bu

Components

Action Elements Primary buttons use backgroundColor: {colors.primary} (#181817), textColor: {colors.on-primary} (white), typography: {typography.label-md}, rounded: {rounded.DEFAULT} (12px), padding: 12px 24px, height: 48px, fontWeight: 470. On hover, shift to backgroundColor: {colors.primary-container} (#ecece8) and textColor: {colors.on-primary-container} (#363633) to create a subtle inversion. Secondary buttons are transparent with a 1px border in {colors.outline}, textColor: {colors.primary}; on hover, fill with {colors.surface-container-high} (#e5e5e1). Ghost buttons (icon-only or minimal) use transparent background, textColor: {colors.on-surface-variant}, rounded: {rounded.sm} (10px), padding: 8px 12px, height: 36px; hover state applies backgroundColor: {colors.surface-container}

Do's and Don'ts

**Do**

• Do use the full 8px spacing unit grid (4px, 12px, 24px, 40px, 64px) for all margins and padding—never use arbitrary values like 13px or 37px.
• Do apply the primary color (#181817) to all primary CTAs, active navigation states, and focus outlines; reserve secondary (#17804d) and tertiary (#7a5514) strictly for status badges and secondary information.
• Do maintain 1px solid borders in {colors.outline} (#aaa9a3) on all cards, inputs, and containers; increase to {colors.outline-variant} (#72726c) on hover to signal interactivity.
• Do use Inter exclusively with weight progression: 400 for body, 470–520 for headings, 600 for labels; apply negative letter-spacing (-0.04em to -0.015em) only on display/headline sizes, never on body text.
• Do layer shadows precisely: 0 3px 8px rgba(0, 0, 0, 0.15) for cards, 0 14px 42px rgba(24, 24, 23, 0.08) for modals; never use black shadows or opacity > 0.15.
• Do use rounded: 12px (DEFAULT) for all primary interactive elements (buttons, inputs, suggestion cards) and 20px (lg) for larger containers; reserve 10px (sm) for utility elements like icon buttons.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no RGB shortcuts. Always reference {colors.x} tokens.
• Don't apply shadows to flat elements like badges or labels; reserve shadows for elevated surfaces (cards, modals, dropdowns).
• Don't mix border-radius values arbitrarily; stick to the scale (10px, 12px, 14px, 20px, 999px) to maintain visual consistency.
• Don't use system fonts or fallback stacks; always specify Inter as the primary fontFamily with 'Inter Fallback' as the declared fallback.
• Don't apply letter-spacing to body text (body-md, body-lg); use 0em. Negative tracking is reserved for display and headline sizes only.
• Don't exceed 1px border width on cards or inputs; use color variation (outline vs. outline-variant) to signal state changes instead of thicker borders.