Karovita

Overview

Karovita is a unified enterprise resource planning and customer relationship management platform built for Persian-speaking businesses seeking intelligent, accessible digital transformation. The design system embodies "Professional Clarity"—a philosophy that marries corporate trust with modern accessibility, using a clean, light-first aesthetic with strategic blue accents to convey reliability and forward momentum. The interface prioritizes information hierarchy and task completion, transforming complex business workflows into intuitive, scannable experiences. The brand voice is precise, respectful, and solution-oriented: direct without being cold, professional without being distant. Example: "Karovita consolidates your entire business—from HR and operations to customer management and sales—into one intelligent system."

Colors

The color system is anchored in a professional light palette (surface: #f8fafc, on-surface: #333333) that ensures legibility and reduces cognitive load across long work sessions. Primary (#2563eb) is the signature brand blue used exclusively for call-to-action buttons, active states, links, and focus indicators—it conveys trust and actionability. Secondary (#ff6900, a warm orange) provides energetic contrast for highlights, badges, and supporting interactive elements. Tertiary (#578cad, a muted slate-blue) is reserved for informational UI, secondary headings, and status indicators. The surface stack (surface-container-lowest through surface-container-highest) creates visual depth through subtle gray increments (ranging from #f5f7fb to #d9dde1), allowing cards and modals to float above the

Typography

The type system is built on Yekanbakh, a Persian-optimized sans-serif that maintains excellent legibility at small sizes (12px label-sm) and scales confidently to large headlines (40px headline-lg). The hierarchy follows a 1.4x scale: display (60px, 700 weight) anchors hero sections; headline-lg (40px, 700 weight) and headline-md (28px, 600 weight) structure content; body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry primary content; label-md (14px, 600 weight) and label-sm (12px, 500 weight) label UI controls. Line-height is set generously (1.6em for body, 1.5em for labels) to support RTL reading comfort. Letter-spacing is minimal (-0.04em on display, 0.01em on body) to maintain Persian character integrity. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) on small labels (lab

Layout

The layout uses a 12-column grid with a fixed max-width of 1280px, centered with symmetric gutters of 24px on desktop. The spacing scale is semantic: unit (8px) is the base increment; xs (4px) is used for micro-spacing within components; sm (12px) separates inline elements; md (24px) is the primary section and component padding; lg (40px) separates major content blocks; xl (64px) is reserved for hero-to-content transitions. Container padding follows the gutter token (24px) on desktop, reducing to 16px on tablet and 12px on mobile. The page rhythm emphasizes white space: sections are separated by lg spacing (40px), cards within sections by md spacing (24px). This creates a breathing, scannable experience that respects the cognitive load of business software. The RTL direction is native to t

Elevation & Depth

Depth is conveyed through subtle layering rather than dramatic shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like badges and small cards; md (0 4px 12px rgba(0, 0, 0, 0.08)) for primary cards and modals; lg (0 3px 8px rgba(0, 0, 0, 0.15)) for dropdown panels and floating elements. Cards use a 1px solid border in surface-variant (#ededed) to define edges without relying on shadow alone. On hover, cards transition to a 1px 1px 4px 1px border with the primary color (#2563eb) on the bottom edge, creating a subtle lift effect. No blur or b

Shapes

The shape philosophy is "Geometric Approachability"—rounded corners are used strategically to soften the corporate aesthetic while maintaining clarity. Buttons use lg radius (1rem / 16px), creating a friendly, clickable appearance without appearing playful. Cards and containers use xl radius (1.5rem / 24px) to define distinct content zones. Input fields and smaller UI elements use DEFAULT radius (0.5rem / 8px) for subtle definition. Icon boxes and badges use full radius (9999px) when circular or pill-shaped. The rationale: larger radius on primary interactive elements (buttons, cards) builds t

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses backgroundColor: {colors.primary} (#2563eb), textColor: white, padding: 15px 27px, height: 48px, and rounded: lg (16px). On hover, the background darkens to #1e40af and a subtle box-shadow (0 4px 12px rgba(37, 99, 235, 0.2)) appears over 0.3s ease. The secondary button (button-secondary) uses a white background with a 1px outline-variant border, padding: 22px 24px 14px, and on-surface-variant text (#69727d). On hover, the background shifts to surface-container-high and the border to outline. Both buttons use label-md typography (14px, 600 weight) with a 16px computed font-size override for accessibility.

Containers & Surfaces Cards (card) are the primary content container, with ba

Do's and Don'ts

**Do**

• Do use primary (#2563eb) exclusively for CTAs, active states, and focus indicators—never for backgrounds or body text.
• Do maintain md (24px) spacing between major sections and sm (12px) between inline elements to create breathing room in dense business interfaces.
• Do apply lg radius (16px) to all buttons and xl radius (24px) to cards to signal approachability without sacrificing professionalism.
• Do use the surface-container stack (surface-container-lowest through surface-container-highest) to create visual hierarchy through subtle gray increments rather than heavy shadows.
• Do set line-height to 1.6em on body text and 1.5em on labels to support RTL reading comfort and accessibility.
• Do transition all interactive color and border changes over 0.3s ease to provide smooth, non-jarring feedback.

**Don't**

• Don't use secondary (#ff6900) or tertiary (#578cad) for primary CTAs—reserve them for badges, highlights, and supporting elements.
• Don't apply shadows heavier than lg (0 3px 8px rgba(0, 0, 0, 0.15)) or use blur/backdrop-filter effects; maintain a flat, accessible aesthetic.
• Don't use sharp corners (0px radius) on interactive elements; reserve that treatment for dividers and structural lines only.
• Don't mix Yekanbakh with system fonts or generic sans-serif fallbacks in production—always load the full Yekanbakh weight range (400, 500, 600, 700, 900) via @font-face.
• Don't reduce padding below sm (12px) on form inputs or buttons; maintain the 48px minimum height for touch targets.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; use on-surface (#333333) and surface (#f8fafc) to reduce eye strain in long work sessions.