SDAIA – Saudi Authority for Data and Artificial Intelligence

Overview

SDAIA is the Saudi Authority for Data and Artificial Intelligence—a government institution serving as the competent authority for data governance and AI strategy across the Kingdom. The design system embodies "Institutional Clarity," a movement that marries governmental authority with modern digital accessibility. The aesthetic combines deep institutional greens (#1b8354) with warm, approachable neutrals and precise typography, evoking trust, competence, and forward-thinking governance. The interface feels neither austere nor playful—it is purposeful, legible, and culturally grounded.

The brand voice is authoritative yet accessible: precise, measured, and respectful of the user's time. Vocabulary emphasizes clarity over jargon; when technical terms are necessary, they are explained. Tone is never condescending or breathless. Example sentence: "Join our Family to access real-time data insights and collaborate on AI initiatives shaping the Kingdom's digital future."

Colors

The color system is anchored by a signature institutional green (#1b8354, rgb(27, 131, 84)) used exclusively for primary CTAs, active states, and brand-critical interactive elements. This green conveys stability, growth, and governmental authority without the coldness of pure blue. Secondary accent #6459a7 (a muted purple) supports secondary actions and highlights, appearing in chatbot icons and tertiary UI elements. The error state uses #dc3545 (Bootstrap red) for critical warnings and validation failures.

The surface stack is built on a light, neutral foundation: #f9fafb (surface), #ffffff (surface-bright), and a carefully graduated gray scale (#e9ecef to #dee2e6) for container hierarchy. Text defaults to #161616 (on-surface) for maximum legibility at 16px body size. On-surface-variant

Typography

The type system pairs Inter (Latin display and headlines) with IBM Plex Sans Arabic (body and labels) to honor the site's bilingual, RTL-aware nature. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) structures page sections; Headline-md (28px, 600 weight) breaks subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and card descriptions, while Body-md (16px, 400 weight, 24px line-height) serves as the default paragraph text. Label-md (14px, 500 weight) and Label-sm (12px, 500 weight) are reserved for buttons, badges, and form labels. All body text uses 0.01–0.02em letter-spacing to improve readability in Arabic and English. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on s

Layout

The layout uses a 12-column responsive grid with a max-width of 1320px (matching Bootstrap's xl breakpoint). The design is fluid below 992px and fixed at container breakpoints above. Horizontal gutters are consistently 24px (md spacing), creating breathing room between columns. Section separation uses lg spacing (40px) for major rhythm breaks; card-to-card spacing within a grid uses md spacing (24px). The hero section spans full-width with a dark overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility over background imagery. Container padding on mobile (< 768px) is 16px; on tablet and above, it is 24px. The page rhythm alternates between full-width hero/banner sections and constrained content containers, preventing visual monotony while maintaining focus on key messaging.

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle transforms. Level 1 (Base/Surface): no shadow, flat appearance (e.g., body background #f9fafb). Level 2 (Standard Card/Input): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), used on cards, input fields, and list items at rest. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied on card-hover and button-hover states. Level 4 (Modal/Overlay): box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), used on modals and floating elements (e.g., chatbot iframe). Interactive elements (b

Shapes

The shape philosophy is "Institutional Precision"—sharp enough to feel modern and authoritative, yet rounded enough to feel approachable. Buttons and inputs use 0.375rem (4px) border-radius, a subtle rounding that avoids the softness of 8px while maintaining crisp edges. Cards and modals use 1rem (16px) border-radius for a more generous, inviting appearance. The chatbot icon and badge components use full (50% / 9999px) border-radius for circular and pill-shaped elements. This graduated approach ensures visual hierarchy: smaller, more frequent interactive elements (buttons, inputs) feel precise

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses #1b8354 background with white text, 14px label-md typography, 6px 12px padding, and 4px border-radius. On hover, the background shifts to #156b42 (a darker green) and the shadow elevates to 0 4px 12px rgba(27, 131, 84, 0.15). On active/pressed, the background becomes #0d4a2a (darkest green). All button state transitions use 0.2s ease-in-out. Secondary buttons use a light gray background (#e9ecef) with primary-colored text, a 1px outline border, and the same padding/radius. The "Log In" link button uses transparent background with primary text and no border, appearing as a text link but maintaining button semantics.

Containers & Surfaces Cards are the primary content container, with 1rem border-r

Do's and Don'ts

**Do**

• Do use the primary green (#1b8354) exclusively for CTAs, active states, and brand-critical interactions—never on passive elements or backgrounds.
• Do maintain 24px (md spacing) gutters and 40px (lg spacing) section breaks to create visual rhythm and prevent cognitive overload.
• Do apply the 0.2s ease-in-out transition to all interactive elements (buttons, cards, inputs) to signal responsiveness without feeling sluggish.
• Do use the three-tier shadow system (sm/md/lg) to convey depth hierarchy; never mix shadow scales or apply shadows to flat surfaces.
• Do pair Inter headlines with IBM Plex Sans Arabic body text to honor bilingual, RTL-aware design; never use system fonts or fallbacks without explicit font-family declarations.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (12px) over busy backgrounds to ensure 4.5:1 WCAG AA contrast.

**Don't**

• Don't use the secondary purple (#6459a7) or tertiary blue (#0d6efd) as primary CTAs—reserve them for secondary actions, accents, and status indicators.
• Don't apply border-radius greater than 1rem (16px) to buttons or inputs; this softens the institutional precision and reads as overly casual.
• Don't hardcode colors inside component blocks—always use token references like {colors.primary} so the system remains wired and maintainable.
• Don't mix shadow scales (e.g., applying lg shadow to a card at rest); use sm for base, md for hover, lg for modals only.
• Don't use pure black (#000) or pure white (#fff) for text or backgrounds—use #161616 (on-surface) for text and #f9fafb (surface) for backgrounds to reduce eye strain.
• Don't apply transitions longer than 0.3s to interactive elements; this creates perceived sluggishness and reduces perceived responsiveness.