OrynTech

Overview

OrynTech is an AI-powered voice and conversational agent platform designed for service-based businesses that need to automate customer interactions at scale. The brand embodies "Intelligent Automation Minimalism"—a design philosophy that marries deep-tech sophistication with energetic, action-oriented visual language. The UI conveys precision, reliability, and forward momentum through a carefully orchestrated palette of electric blue (#1675ef), vibrant magenta (#dd1589), and a dark, professional navy canvas (#0f1a36). Users should feel that their business is being handled by a capable, tireless digital workforce.

The brand voice is direct, confident, and outcome-focused. OrynTech speaks in imperatives and results: "Răspunde, Programează, Vinde. Totul Automat." (Answer, Schedule, Sell. All Automatic.) The tone avoids jargon-heavy AI speak; instead, it emphasizes tangible business outcomes—captured leads, automated scheduling, zero missed calls. Vocabulary patterns favor action verbs (capture, transform, automate, scale) and business metrics (24/7, zero manual effort, every client). Example sentence in brand voice: "Transform every missed call into a scheduled appointment—your AI agent never sleeps, never forgets, never loses a lead."

Colors

The color system is built on a foundation of deep, professional navy surfaces (#0f1a36 surface, #050b1a surface-dim) that establish trust and technical credibility. Primary accent is electric blue (#1675ef), used exclusively for call-to-action buttons, interactive states, and key data highlights—this is the color users click on and expect to drive conversion. Secondary accent is vibrant magenta (#dd1589), deployed for status badges, alerts, and secondary CTAs to create visual rhythm and draw attention to secondary actions without competing with primary. Tertiary gold (#f5b400) is reserved for highlights, success states, and premium feature callouts.

Surface stack follows Material 3 conventions: surface-container-lowest (#05051b) for deeply nested UI, surface-container (#1f3158) for standa

Typography

The type system pairs Sora (display and headlines) with Manrope (body and labels) to create a distinctive visual hierarchy that balances geometric precision with warmth. Sora's geometric letterforms convey technical sophistication and forward momentum, while Manrope's humanist proportions ensure readability and approachability at smaller sizes. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section breaks; headline-lg (40px, 600 weight) anchors feature sections; headline-md (28px, 600 weight) introduces subsections; title-lg (20px, 600 weight) labels cards and modules. Body-lg (18px, 400 weight, 28px line-height) is used for introductory copy and feature descriptions, while body-md (16px, 400 weight, 24px line-height) is the default for all body text.

Layout

The page grid is a 12-column fluid layout with a max-width of 1280px, centered on the viewport. Sections use lg spacing (40px) for vertical separation between major content blocks, md spacing (24px) for internal card padding and component spacing, and sm spacing (12px) for tight groupings within cards. The hero section spans full-width with a dark gradient background (surface #0f1a36 to surface-dim #050b1a) and contains a centered content column (max 880px) with 40px horizontal gutter on mobile. Feature cards are laid out in a 3-column grid on desktop (1 column on mobile, 2 on tablet), each with 24px padding and 24px gap between cards. Container max-width is 1280px; all content respects this constraint with symmetric 24px gutters on either side. White-space philosophy emphasizes breathing

Elevation & Depth

Depth is conveyed through a layered shadow and surface-opacity system rather than pure darkness. Level 1 (Base): The background is a dark gradient (surface #0f1a36 to surface-dim #050b1a) with subtle animated particles or grain texture (opacity 0.03–0.05) to add visual interest without distraction. Level 2 (Standard Card): Cards use rgba(31, 49, 88, 0.4) background with 1px border at rgba(255, 255, 255, 0.08) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This creates a soft, frosted-glass effect that sits slightly above the background. Level 3 (Elevated/Modal): Modals and overlays use rgba(31

Shapes

The shape philosophy is "Technical Warmth"—combining sharp, precise radii for UI chrome with slightly softer radii for content surfaces to balance technical credibility with approachability. Buttons use lg radius (1rem / 16px) for a modern, pill-like appearance that feels contemporary without being overly rounded. Cards and panels use xl radius (1.5rem / 24px) to create a softer, more inviting container for content. Input fields use md radius (0.75rem / 12px) for a neutral, functional appearance. Badges and pills use full radius (9999px) for maximum roundness, signaling lightweight, non-critic

Components

Action Elements Buttons are the primary driver of conversion and must command attention without overwhelming the interface. Primary buttons use {colors.primary} (#1675ef) background, {colors.on-primary} (white) text, label-md typography (14px, 600 weight), lg radius (16px), and 12px 24px padding for a 48px total height. Apply box-shadow: 0 4px 12px rgba(22, 117, 239, 0.3) at rest. On hover, shift background to #0a46ba (inverse-primary equivalent) and expand shadow to 0 8px 20px rgba(22, 117, 239, 0.4); transition duration is 150ms (--duration-fast). On active/press, apply transform: scale(0.98) to provide tactile feedback. Secondary buttons use transparent background with 2px border at {colors.primary}, same text color, and hover state of rgba(22, 117, 239, 0.08) background. Ghost butt

Do's and Don'ts

**Do**

• Do use {colors.primary} (#1675ef) exclusively for primary CTAs and focus states—never dilute it with secondary uses.
• Do maintain minimum 24px padding inside cards and 24px gaps between cards in grids for visual breathing room.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all standard cards to establish consistent depth hierarchy.
• Do use Sora for all headlines (display, headline-lg, headline-md) and Manrope for body text and labels to maintain typographic distinction.
• Do apply transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) to all interactive elements (buttons, cards, inputs) for smooth, predictable motion.
• Do ensure all text on dark backgrounds maintains minimum contrast ratio of 4.5:1; use {colors.on-surface} (#f7f9fc) for primary text and {colors.on-surface-variant} (#c0cce0) for secondary.
• Do use lg spacing (40px) for section breaks and md spacing (24px) for internal component spacing to create consistent rhythm.

**Don't**

• Don't use secondary (#dd1589) or tertiary (#f5b400) for primary CTAs—reserve these for badges, alerts, and secondary actions only.
• Don't apply shadows stronger than 0 8px 32px rgba(0, 0, 0, 0.2) on standard cards; excessive shadow depth flattens the visual hierarchy.
• Don't mix Sora and Manrope within a single headline or body paragraph—maintain clear typographic separation between display and body layers.
• Don't use pure white (#ffffff) or pure black (#000000) for text or backgrounds; always use the defined surface and on-surface tokens to maintain brand consistency.
• Don't apply border-radius smaller than md (12px) to cards or larger containers; use sm (4px) or DEFAULT (8px) only for small UI elements like badges or icon buttons.
• Don't animate transitions longer than 300ms (--duration-base); faster interactions (150ms) feel more responsive and modern.
• Don't place interactive elements (buttons, links) without a minimum 44px × 44px touch target on mobile devices; this violates accessibility standards.