Arabic.AI

Overview

Arabic.AI is an enterprise infrastructure platform delivering sovereign, deployable AI capabilities purpose-built for Arabic-first organizations. The design system embodies 'Architectural Minimalism'—a discipline that marries technical precision with warm, approachable aesthetics. The brand uses bold typography (Big Shoulders Display at 148px, 800 weight), a restrained color palette anchored by deep purple (#3f1993) and cream backgrounds (#f6f4ef), and generous whitespace to convey both sophistication and accessibility. The emotional response is one of clarity and confidence: users feel they are interacting with enterprise-grade infrastructure, not a generic SaaS wrapper.

The voice is direct, technical without jargon, and unapologetically Arabic-first. Sentences are declarative and outcome-focused: 'Four surfaces. One Arabic-first brain.' The brand avoids breathless marketing language; instead, it speaks in concrete capabilities and deployment options. Vocabulary emphasizes sovereignty, deployability, and regional leadership. Example sentence: 'Built for regulated industries. Deployable in your cloud, your VPC, or fully air-gapped.'

Colors

The color system is anchored by a deep, saturated purple (#3f1993) that serves as the primary accent—used exclusively on CTAs ('Book a demo'), interactive elements, and brand identity markers. This purple is never used as a background; instead, it appears as a focal point against the warm cream surface (#f6f4ef, rgb(246, 244, 239)). The secondary accent is a muted blush-red (#b91c3b), reserved for status indicators and secondary CTAs. A tertiary teal (#0e9488) provides a third accent for success states and complementary highlights.

The surface stack is deliberately warm and minimal: the page background is cream (#f6f4ef), with container layers stepping down through surface-container-highest (#e8e4d9, a darker cream used for the suite accordion tray) to surface-container-lowest (#fdf8f3).

Typography

The type system uses three distinct families to create hierarchy and personality. Display and headline scales (display, headline-lg, headline-md) use Big Shoulders Display at weights 800–900, with aggressive negative letter-spacing (-0.02em to -0.015em) and tight line-heights (0.86–0.92) to create visual impact and urgency. Body text uses DM Sans at 400–600 weight with generous line-height (1.5 for body-lg, 1.5 for body-md) to ensure readability at smaller sizes. Monospace labels (JetBrains Mono, 12px, 500 weight, 0.08em letter-spacing) are used for eyebrows, section indices, and technical metadata, reinforcing the engineering-forward brand identity.

The pairing communicates 'precision meets warmth': Big Shoulders' geometric boldness conveys technical confidence, while DM Sans' humanist p

Layout

The page uses a 12-column grid with a max-width of 1280px (container-max-width: 1280px). The hero section establishes the rhythm: 96px top padding, 72px bottom padding, with a full-width background gradient overlay (radial-gradient blending blush and purple at 60% opacity). Section spacing is consistent at 120px top and bottom padding, creating a predictable cadence. The section-head layout uses a 160px fixed left column (for the section index in monospace) paired with a 1fr flexible column for the title and intro text, with 48px gap between them. This creates visual breathing room and allows the eye to scan the index independently of the headline.

Whitespace is semantic: lg spacing (40px) separates major content blocks, md spacing (24px) groups related elements, and sm spacing (12px) tig

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of background color shifts rather than aggressive drop shadows. The elevation scale uses four levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle hover states on interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and panels, lg (0 8px 32px rgba(0, 0, 0, 0.1)) for elevated modals or expanded suite panels, and xl (0 16px 40px rgba(0, 0, 0, 0.12)) for the deepest layers. The suite accordion uses a two-layer approach: the outer tray has a darker cream background (#e8e4d9) with a 1px border (color-mix(

Shapes

The shape philosophy is 'Geometric Precision with Warmth'—sharp enough to convey technical sophistication, rounded enough to feel approachable. Buttons use full-radius (border-radius: 999px) to create pill-shaped CTAs that feel modern and clickable. Cards and panels use 14px border-radius (suite-card: 14px) to provide gentle rounding without softness. Input fields use minimal rounding (4px) to maintain a utilitarian, form-like appearance. The suite accordion panels use 14px radius, creating distinct tiles within the tray. The hero eyebrow badge uses 999px (full-radius) to create a capsule shap

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses background: rgb(9, 9, 10) (charcoal, not purple—this is a deliberate inversion from the brand color to create maximum contrast on the cream background), color: rgb(255, 255, 255), border-radius: 999px, padding: 12px 20px, font-size: 14px, font-weight: 600. On hover, the background shifts to #2a0f66 (darker purple) with a 0.2s ease transition and a box-shadow: 0 8px 20px rgba(63, 25, 147, 0.25) to lift the button. The secondary button uses a transparent background with a 1px border in the primary color, allowing the cream background to show through. The ghost button (used in navigation) has no border or background, only text color, and on hover applies background: {colors.surface-container-high} (a subt

Do's and Don'ts

**Do**

• Do use Big Shoulders Display for all headlines and display text—it is the signature typeface and conveys technical confidence.
• Do apply the purple (#3f1993) accent sparingly and only on interactive elements (CTAs, links, focus states) to maintain visual hierarchy.
• Do use the cream background (#f6f4ef) as the default page surface and step down through surface-container layers for nested content.
• Do pair charcoal text (#09090a) with cream backgrounds for maximum contrast and readability; never use purple as body text.
• Do use the suite accordion's grid-column transition (0.6s cubic-bezier) to create smooth, unified motion when panels expand and collapse.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and panels for subtle depth without visual heaviness.
• Do use full-radius (999px) border-radius exclusively for buttons and badges to signal clickability and modern affordance.

**Don't**

• Don't use the purple (#3f1993) as a background color—it is reserved for collapsed suite panels and interactive states only.
• Don't apply heavy shadows (> 0.2 opacity) to any element; the brand relies on color shifts and border treatments for depth.
• Don't mix typefaces within a single headline; use Big Shoulders Display for the entire line, including emphasis text (use font-weight: 600 instead of italic).
• Don't use system fonts (system-ui, -apple-system) for display or headline text; always load Big Shoulders Display, DM Sans, and JetBrains Mono from Google Fonts.
• Don't apply border-radius > 14px to cards or panels; the brand uses geometric precision, not soft, organic shapes.
• Don't use the secondary accent (blush #b91c3b) on primary CTAs; reserve it for status indicators and secondary actions only.
• Don't apply text-shadow or text-stroke to body text; use font-weight: 600 for emphasis instead to maintain the clean, technical aesthetic.