Appto

Overview

Appto is an AI platform designed for Polish-speaking teams and businesses that need context-aware automation integrated directly into their existing workflows. The brand embodies "Functional Minimalism with Warmth"—a design philosophy that strips away unnecessary complexity while maintaining human-centered approachability. The interface uses a warm, cream-based palette (#faf6ec background, #fffef8 paper) paired with high-contrast dark text (#0a0a0a) and strategic accent colors (lime #deff44 for energy, violet #5648ff for intelligence, and burnt orange #ff5630 for action). This creates a visual language that feels both professional and inviting, avoiding the cold sterility of typical enterprise software.

The brand voice is conversational yet precise, speaking directly to business operators who value efficiency without sacrificing clarity. Appto uses active, outcome-focused language: "Złoży ofertę z maili i notatek" (It will compose an offer from emails and notes), "zaktualizuje Twój CRM" (it will update your CRM). The tone avoids marketing hyperbole—instead, it grounds itself in concrete, observable actions. Example sentence in brand voice: "Appto poznaje Twoje procesy, narzędzia i klientów — potem przejmuje rutynową pracę." (Appto learns your processes, tools, and clients—then takes over the routine work.)

Colors

The color system is built on a warm, light foundation that evokes approachability and clarity. The primary surface is #faf6ec (warm beige), with a paper-white container at #fffef8 used for elevated surfaces and cards. Text is rendered in #0a0a0a (near-black) for maximum legibility against the warm background, with secondary text at #232220 (dark gray-brown) for hierarchy. The surface stack progresses through subtle warm shifts: surface-dim (#f0ebdb) for recessed areas, surface-container-high (#faf6ec) for hover states, and surface-container-highest (#f4efe0) for pressed states—all maintaining the warm, paper-like aesthetic.

Accent colors are used strategically to guide attention and communicate function. Primary (#0a0a0a) is the dominant interactive color for buttons and links, creating s

Typography

The type system uses two primary families: Geist Variable for headlines (display, headline-lg, headline-md) and Inter Variable for body text and labels. Geist's geometric precision and variable weight (100–900) make it ideal for commanding headlines—the display style uses 58px at weight 630 with -0.02em letter-spacing, creating a bold, confident presence without feeling heavy. Headline-lg (40px, weight 620) and headline-md (28px, weight 600) maintain the same geometric clarity at smaller scales. Body text uses Inter Variable at 16px (body-md) with 400 weight and 24px line-height, providing comfortable reading rhythm at 1.5 line-height ratio. Labels use 14px (label-md) at weight 500 with 0.01em letter-spacing to add subtle emphasis without disrupting flow. The hierarchy is reinforced throug

Layout

The page uses a fluid, single-column layout with a max-width of 1100px (container-max-width), centered on larger screens. The grid is 12 columns, but the design favors generous whitespace and breathing room over dense packing. The gutter spacing is 24px, applied consistently between sections and inside containers. The spacing scale follows a semantic rhythm: xs (4px) for micro-adjustments, sm (12px) for compact spacing within components, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The hero section uses lg spacing (40px) above and below the main headline, creating visual weight and emphasis. Cards and containers use md padding (24px) internally, with lg spacing (40px) between card groups. The warm back

Elevation & Depth

Depth is conveyed through a refined shadow and inset-border system that avoids harsh drop-shadows. The elevation scale has three levels: sm (inset 0 1px rgba(255, 255, 255, 0.5), 0 8px 22px -8px rgba(10, 10, 10, 0.45)) for subtle cards and hover states, md (inset 0 1px rgba(255, 255, 255, 0.06), 0 18px 44px -22px rgba(10, 10, 10, 0.22)) for standard cards and modals, and lg (0 24px 48px rgba(10, 10, 10, 0.12)) for prominent overlays and hero sections. The inset highlight (1px solid rgba(255, 255, 255, 0.5) or 0.06) simulates light catching the top edge of a raised surface, adding tactile reali

Shapes

The shape philosophy is "Geometric Warmth"—rounded corners are used consistently but not excessively, creating a friendly, approachable interface without sacrificing professionalism. The rounded scale progresses from sm (0.25rem / 4px) for small UI elements like badges and inline buttons, DEFAULT (0.5rem / 8px) for input fields and standard components, md (0.75rem / 12px) for list items and secondary containers, lg (1rem / 16px) for primary buttons and cards, xl (1.5rem / 24px) for large cards and modals, and full (9999px) for pill-shaped elements like badges and toggle buttons. Primary button

Components

Action Elements Buttons are the primary interactive element and use a two-tier system: primary (dark background #0a0a0a, cream text #faf6ec, 44px height, 12px 20px padding, 14px label-md weight 500) for main CTAs like "Wczesny dostęp" (Early access), and secondary (transparent background, dark text, 1px outline at #aba89f) for supporting actions. The primary button hover state shifts to #232220 (primary-container) with a subtle 0 2px 4px rgba(0, 0, 10, 0.08) shadow for tactile feedback. Accent buttons use the lime secondary color (#deff44) with dark text (#141414) and weight 600, reserved for high-energy CTAs like "Zarezerwuj miejsce" in the banner. All buttons use a 150ms cubic-bezier(0.4, 0, 0.2, 1) transition on background-color and box-shadow for smooth interaction.

Containers

Do's and Don'ts

**Do**

• Do use the warm cream palette (#faf6ec, #fffef8) as the foundation—it signals approachability and clarity, differentiating Appto from cold, corporate enterprise software.
• Do reserve the lime accent (#deff44) for high-energy CTAs and success states; its saturation demands attention and should never be used for passive UI.
• Do apply the inset highlight (1px rgba(255, 255, 255, 0.5)) to all elevated surfaces to create tactile, paper-like depth without harsh shadows.
• Do use Geist Variable for all headlines (display, headline-lg, headline-md) to maintain the geometric, confident brand voice; Inter Variable is for body and labels only.
• Do maintain the 150ms cubic-bezier(0.4, 0, 0.2, 1) transition timing across all interactive elements for a cohesive, responsive feel.
• Do apply 12px backdrop-filter blur to glass surfaces (header, overlays) to create modern depth while maintaining the warm aesthetic.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff)—always use the warm-shifted versions (#0a0a0a for text, #fffef8 for paper) to maintain brand cohesion.
• Don't apply the lime accent (#deff44) to body text or passive elements; its high saturation is reserved for CTAs and status indicators only.
• Don't use harsh drop-shadows (e.g., 0 10px 40px rgba(0, 0, 0, 0.3))—always use soft, spread shadows with low opacity (0.12–0.45) to maintain the warm, paper-like aesthetic.
• Don't mix typefaces within a single headline; Geist Variable is for headlines, Inter Variable is for body—never reverse this hierarchy.
• Don't use border-radius below 8px (DEFAULT) for interactive elements; smaller radii feel cold and technical, contradicting the warm, approachable brand voice.
• Don't apply color transitions longer than 150ms; slower transitions feel sluggish and undermine the responsive, intelligent brand personality.